:root {
  --hm-dark-surface: #1E1414;
  --hm-nav-height: 73px;
  --hm-stat-strip-height: 106px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}
body { background: var(--hm-cream); color: var(--hm-ink); font-family: var(--hm-font-sans); }
img { display: block; max-width: 100%; }
/* color:inherit matters on iOS. Safari tints a button that sets no colour of its
   own with the system accent, so an icon drawn with stroke="currentColor" comes
   out blue there while Chrome and Firefox draw it in the near-black they use for
   buttontext. Inheriting the surrounding text colour makes every bare button
   render the same everywhere. */
button { font-family: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }

/* SVG illustrations are single-path black silhouettes on transparent bg — color them with a mask
   (fills with the exact --hm-* value, no filter-derived approximation, so nothing can clip outside sRGB) */
.illo {
  width: 100%; height: 100%; display: block;
  -webkit-mask-image: var(--icon-src); mask-image: var(--icon-src);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  transition: background-color 0.18s ease;
}
.illo-ink { background-color: var(--hm-ink); }
.illo-red { background-color: var(--hm-red); }
.illo-cream { background-color: var(--hm-cream); }
.illo-mustard { background-color: var(--hm-mustard); }
.illo-forest { background-color: var(--hm-forest); }
.illo-clay { background-color: var(--hm-clay); }
.illo-teal { background-color: var(--hm-teal); }
.illo-sky { background-color: var(--hm-sky); }
.illo-blush { background-color: var(--hm-blush); }
.service-card-icon { transform: scale(1.12); }

/* Basic utilities */
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.eyebrow { font-size: var(--hm-size-eyebrow); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hm-red); display: inline-block; }
.eyebrow.on-red { color: var(--hm-cream); }
.eyebrow.ink { color: var(--hm-ink); }

.display {
  font-family: var(--hm-font-display);
  font-weight: 900;
  letter-spacing: -0.028em;
  line-height: 1.05;
  color: var(--hm-ink);
  margin: 0;
}
.h2 {
  font-family: var(--hm-font-display);
  font-weight: 900;
  letter-spacing: -0.022em;
  line-height: 1.02;
  color: var(--hm-ink);
  margin: 0;
  /* font-size comes from the brand type scale at the end of this file. It used
     to be an inline style on every section headline in blocks.php. */
}

.lead { font-size: var(--hm-size-lead); line-height: 1.5; color: var(--hm-charcoal); margin: 0; }

/* Section padding — tighter than the original */
.section { padding: 64px 0; }
.section-sm { padding: 44px 0; }
.section-lg { padding: 48px 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 14px 24px; border-radius: 999px; border: none; cursor: pointer;
  transition: background-color 0.18s var(--hm-ease-out), color 0.18s var(--hm-ease-out), border-color 0.18s var(--hm-ease-out), transform 0.18s var(--hm-ease-out);
  text-decoration: none;
  max-width: 100%;
  justify-content: center;
  line-height: 1.18;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.btn:hover,
.btn:focus-visible { transform: translateY(-1px); }
.btn-primary { background: var(--hm-red); color: var(--hm-cream); }
.btn-primary:hover { background: var(--hm-red-deep); transform: translateY(-1px); text-decoration: none; opacity: 1; }
.btn-ghost { background: var(--hm-cream); color: var(--hm-ink); border: 1.5px solid var(--hm-ink); }
.btn-ghost:hover { background: var(--hm-dark-surface); color: var(--hm-cream); transform: translateY(-1px); text-decoration: none; opacity: 1; }
.btn-reverse { background: var(--hm-cream); color: var(--hm-ink); }
.btn-reverse:hover { background: var(--hm-paper); transform: translateY(-1px); opacity: 1; text-decoration: none; }

/* Arrow link */
.arrow-link {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid rgba(31,20,20,0.12);
  color: var(--hm-ink); font-weight: 500; font-size: 16px; text-decoration: none;
  transition: all 0.18s var(--hm-ease-out);
}
.arrow-link:hover { padding-left: 8px; text-decoration: none; opacity: 1; }
.arrow-link .arrow {
  width: 32px; height: 32px; border-radius: 50%; background: var(--hm-red); color: var(--hm-cream);
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0;
  transition: transform 0.18s var(--hm-ease-out);
}
.arrow-link:hover .arrow { transform: translateX(4px); }

/* Nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--hm-cream); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(31,20,20,0.06);
}
body:not(.home) .wp-site-blocks {
  padding-top: var(--hm-nav-height);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 16px 32px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr);
  align-items: center;
  gap: 24px;
}
.nav-logo img { height: 34px; width: auto; }
.nav-logo { justify-self: start; }
.nav-links { display: flex; align-items: center; justify-self: center; gap: 32px; font-size: 14px; font-weight: 600; }
.nav-links a { color: var(--hm-ink); text-decoration: none; transition: color 0.15s; position: relative; padding: 4px 0; }
.nav-links a:hover { color: var(--hm-red); opacity: 1; text-decoration: none; }
.nav-links a.active { color: var(--hm-red); }
.nav-links a.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--hm-red); border-radius: 2px; }
.nav-right { display: flex; align-items: center; justify-self: end; gap: 14px; }
/* The header CTA sits in a row that has grown with the menu. .btn wraps its
   label by default, which is right for a pill in a page but wrong here: in a
   grid column being squeezed, the button broke onto two lines instead of asking
   for the width it needs. Keeping it on one line makes the nav row give it room
   -- the menu column compresses its gaps instead. */
.nav-right .btn {
  padding: 14px 20px;
  white-space: nowrap;
  overflow-wrap: normal;
  flex-shrink: 0;
}
.nav-search {
  /* How wide the field grows when it takes focus. It is a variable because the
     input inside has to be sized from the same number, and because the row runs
     out of space at narrower viewports -- see the media queries below. Nothing
     else in the header moves to make room: the menu items and the CTA stay put,
     and only the phone number collapses (see .nav-phone). */
  /* 176px clears the last menu item from about 1340px up, where the container
     hits its 1280 cap and the geometry stops moving. Below that there is not
     enough room, and rather than shrink the field to a useless stub -- at 970px
     a proportional width left nothing but the magnifier -- the field keeps its
     size and simply sits over the menu while it is open. Hence the opaque
     background and the z-index on :focus-within below: the menu items never
     move, they are covered, and they come back when the field closes. */
  --hm-search-open: 176px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid transparent;
  border-radius: 999px;
  overflow: hidden;
  transition: width 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.nav-search:focus-within {
  width: var(--hm-search-open);
  /* Opaque, and above the menu, so where the row is too narrow the field covers
     the last item cleanly instead of colliding with its text. */
  background: var(--hm-cream-soft);
  border-color: rgba(31,20,20,0.16);
  position: relative;
  z-index: 3;
}
.nav-inner:has(.nav-search:focus-within) .nav-phone {
  width: 42px;
  height: 42px;
  min-height: 42px;
  justify-content: center;
  overflow: hidden;
  font-size: 0;
  gap: 0;
}
.nav-search input {
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--hm-ink);
  font: inherit;
}
/* 48px is the search button plus the padding, so the input fills whatever the
   field's open width leaves it. */
.nav-search:focus-within input {
  width: calc(var(--hm-search-open) - 48px);
  padding-left: 14px;
}
.nav-search button {
  width: 42px;
  min-width: 42px;
  flex: 0 0 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hm-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-search button svg,
.nav-phone svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.nav-phone {
  min-height: 42px;
  color: var(--hm-red);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.15;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.nav-phone:hover { opacity: 0.8; text-decoration: none; }
.nav-toggle {
  display: none; background: none; border: none; padding: 8px; color: var(--hm-ink);
}

/* ── Nav dropdown ──────────────────────────────────────────────────────────
   Open state is the single .is-open class, set by JS on hover, focus and taps.
   It is deliberately not opened by :hover/:focus-within here: with a CSS
   opener, clicking the chevron to close could not win against the focus the
   click itself puts on the button. The <noscript> block in the header restores
   a hover/focus opener when JS is off. */
.nav-links .nav-item--dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-item-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--hm-ink);
  line-height: 0;
  transition: color var(--hm-dur-fast) var(--hm-ease-out), transform var(--hm-dur-fast) var(--hm-ease-out);
}
.nav-item--dropdown:hover .nav-item-link,
.nav-item--dropdown:hover .nav-item-toggle,
.nav-item--dropdown.is-open .nav-item-link,
.nav-item--dropdown.is-open .nav-item-toggle {
  color: var(--hm-red);
}
/* The caret asset points up, which is the open state, so it is flipped while
   the panel is closed. */
.nav-item-toggle svg { transform: rotate(180deg); transition: transform var(--hm-dur-fast) var(--hm-ease-out); }
.nav-item--dropdown.is-open .nav-item-toggle svg { transform: rotate(0deg); }
.nav-item-toggle:focus-visible {
  outline: 2px solid var(--hm-red);
  outline-offset: 2px;
  border-radius: 50%;
}
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 10;
  /* The nav bar has no bottom padding, so the panel is pushed down with its own
     transparent top padding — that keeps the pointer inside the hover area on
     the way from the link to the panel. */
  padding-top: 14px;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hm-dur-fast) var(--hm-ease-out),
              transform var(--hm-dur-fast) var(--hm-ease-out),
              visibility var(--hm-dur-fast) var(--hm-ease-out);
}
.nav-item--dropdown.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Geometry is taken from the design file: a 533px panel, 36px left inset for
   the list, and a 173px card on the right that sets the panel height. */
.nav-dropdown-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 173px;
  align-items: center;
  gap: 20px;
  min-width: 533px;
  padding: 20px 20px 20px 36px;
  border-radius: 8px;
  background: var(--hm-cream);
  box-shadow: var(--hm-shadow-md);
}
/* A dropdown with no View-all card has nothing to put in the 173px card track,
   so drop the track and the 533px panel width from the design and let the panel
   hug its list. Used by the Resources and Work menus. */
.nav-dropdown-inner--list {
  /* Not a grid: the panel is absolutely positioned, so its width is shrink-to-fit,
     and an `fr` track contributes nothing to that intrinsic width — the column
     collapsed to 0 and the labels spilled out of the panel. */
  display: block;
  min-width: 0;
  padding: 20px 36px;
}
/* Two headed columns. Geometry measured off the design: an 800px panel split into
   equal 400px halves by a hairline down the middle, with the same 36px inset either
   side of it that the single-column panel uses on its left edge. The item rows are
   the shared .nav-dropdown-list, so they keep the 36px pitch and the arrow that
   slides in on hover. Unused since Case Studies moved to the Work menu, but the
   `## Heading` syntax in the nav settings still reaches it. */
.nav-dropdown-inner--columns {
  grid-template-columns: repeat(2, minmax(0, 400px));
  align-items: start;
  gap: 0;
  min-width: 800px;
  padding: 24px 0 28px;
}
.nav-dropdown-inner--columns .nav-dropdown-column {
  padding: 0 36px;
  border-right: 1px solid rgba(31, 20, 20, 0.10);
}
/* Two columns plus a View all card: the card keeps the 173px track the
   single-column panel uses, and the lists come in from 400px so the panel still
   fits the viewport. Used by the Work and Resources menus.

   The tracks are fixed widths, not minmax(0, Npx), for the same reason the
   cardless panel above is not a grid at all: the panel is absolutely positioned,
   so its width is shrink-to-fit and a flexible track contributes nothing to that
   intrinsic width -- the two lists collapsed to zero and the card sat on top of
   them. min-width holds the panel open: 2x340 + 173 + the 16px gaps + the 20px
   right inset. */
.nav-dropdown-inner--columns-card {
  grid-template-columns: 340px 340px 173px;
  /* The lists start at the top of the panel; only the card, which is shorter
     than a full column, sits centred against them. */
  align-items: start;
  gap: 0 16px;
  min-width: 905px;
  padding: 24px 20px 28px 0;
}
.nav-dropdown-inner--columns-card .nav-dropdown-cta {
  align-self: center;
}
/* The hairline belongs between the two lists, not between the second list and
   the View all card sitting beside it. */
.nav-dropdown-inner--columns-card .nav-dropdown-column:last-of-type {
  border-right: 0;
}
/* An illustration other than the mascot keeps its own aspect ratio: the rule
   below pins both dimensions, which stretched anything of a different shape. */
.nav-dropdown-cta--own-image img {
  width: auto;
  height: auto;
  max-width: 154px;
  max-height: 123px;
  object-fit: contain;
}
.nav-dropdown-heading {
  margin: 0 0 12px;
  color: var(--hm-slate);
  font-family: var(--hm-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: none;
}
.nav-dropdown-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-dropdown-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 8px + 20px line box + 8px lands each row on the design's 36px pitch. */
  padding: 8px 0;
  color: var(--hm-ink);
  font-family: var(--hm-font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}
/* The arrow is parked to the left of the row and fades in on hover, with the
   label nudging across to meet it.

   Both moves are transform and opacity only. Animating margin-left, as this did
   before, changed the row's width mid-hover, and a dropdown panel is positioned
   absolutely -- its width is whatever its widest row asks for -- so the whole
   panel resized as the pointer moved over it. Invisible on a menu with a long
   item holding the width, obvious on the About menu with one short row. */
.nav-dropdown-list a svg {
  flex: 0 0 12px;
  margin-left: -20px;
  opacity: 0;
  transform: translateX(-6px);
  transition: transform var(--hm-dur-fast) var(--hm-ease-out), opacity var(--hm-dur-fast) var(--hm-ease-out);
}
.nav-dropdown-list a span {
  transition: transform var(--hm-dur-fast) var(--hm-ease-out);
}
.nav-dropdown-list a:hover,
.nav-dropdown-list a:focus-visible {
  color: var(--hm-ink);
  opacity: 1;
  text-decoration: none;
}
.nav-dropdown-list a:hover svg,
.nav-dropdown-list a:focus-visible svg {
  opacity: 1;
  transform: translateX(0);
}
.nav-dropdown-list a:hover span,
.nav-dropdown-list a:focus-visible span {
  transform: translateX(6px);
}
/* Qualified with .nav-links because the card is an <a> inside the nav, and
   `.nav-links a` (0,1,1) outranks a bare class — it was overriding this
   padding with its own 4px and repainting the label red on hover. */
.nav-links a.nav-dropdown-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
  border-radius: 8px;
  background: #EFE7D9;
  color: #1E1414;
  text-decoration: none;
}
/* Hover is carried by the mascot growing a little — the card keeps its colour. */
.nav-links a.nav-dropdown-cta:hover,
.nav-links a.nav-dropdown-cta:focus-visible {
  background: #EFE7D9;
  color: #1E1414;
  opacity: 1;
  text-decoration: none;
}
/* The mascot runs at its native size in the design. */
.nav-dropdown-cta img {
  width: 154px;
  height: 123px;
  transition: transform var(--hm-dur-base) var(--hm-ease-out);
}
.nav-dropdown-cta:hover img,
.nav-dropdown-cta:focus-visible img {
  transform: scale(1.06);
}
.nav-dropdown-cta span {
  font-family: var(--hm-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}
@media (max-width: 1120px) {
  .nav-inner {
    grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
    gap: 16px;
    padding: 14px 24px;
  }
  .nav-links {
    gap: 22px;
  }
  .nav-right {
    gap: 8px;
  }
  .nav-phone {
    width: 42px;
    height: 42px;
    min-height: 42px;
    justify-content: center;
    overflow: hidden;
    font-size: 0;
    gap: 0;
  }
  .nav-right .btn {
    padding: 12px 18px;
    font-size: 12px;
  }
}
@media (max-width: 960px) {
  .nav-inner {
    display: flex;
    justify-content: space-between;
    padding: 16px 32px;
  }
  .nav-links, .nav-right { display: none; }
  .nav-toggle { display: block; }
}
.mobile-menu {
  position: fixed; top: 0; bottom: 0; left: 0; width: 100vw; z-index: 200; background: var(--hm-cream);
  transform: translateX(100vw); transition: transform 0.28s var(--hm-ease-out);
  display: flex; flex-direction: column; padding: 14px 20px;
}
.mobile-menu.open {
  transform: translateX(0);
  overflow: auto;
}
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
/* Was an inline style in blocks.php with no colour, which is how the close icon
   ended up blue on iOS. The colour is stated here rather than left to inherit. */
.mobile-menu-close { background: none; border: 0; padding: 8px; color: var(--hm-ink); line-height: 0; }
.mobile-menu-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mobile-menu-mascot { height: 40px; width: auto; display: block; flex: 0 0 auto; }
.mobile-menu-logo { height: 30px; width: auto; max-width: min(230px, calc(100vw - 128px)); display: block; }
.mobile-menu a { font-size: 24px; font-weight: 900; font-family: var(--hm-font-display); color: var(--hm-ink); text-decoration: none; padding: 12px 0; letter-spacing: -0.02em; border-bottom: 1px solid rgba(31,20,20,0.08); }
.mobile-menu a:hover { color: var(--hm-red); opacity: 1; text-decoration: none; }
/* Mobile dropdown — the parent link keeps its own page, the chevron next to it
   expands the shortlist. */
.mobile-menu-group { display: flex; flex-direction: column; }
.mobile-menu-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(31, 20, 20, 0.08);
}
.mobile-menu-group-head a { flex: 1 1 auto; border-bottom: 0; }
.mobile-menu-group-toggle {
  flex: 0 0 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--hm-ink);
  line-height: 0;
  transition: transform var(--hm-dur-fast) var(--hm-ease-out), color var(--hm-dur-fast) var(--hm-ease-out);
}
.mobile-menu-group-toggle svg { transform: rotate(180deg); transition: transform var(--hm-dur-fast) var(--hm-ease-out); }
.mobile-menu-group-toggle[aria-expanded="true"] svg { transform: rotate(0deg); }
/* Plain list on mobile: no arrows and no hover colour, so it reads the same
   whether or not the device reports hover. */
.mobile-menu-sub { display: flex; flex-direction: column; padding: 4px 0 10px; }
.mobile-menu-sub[hidden] { display: none; }
/* Column headings from a two-column dropdown, stacked on a phone. The second
   group onwards gets a clear break above it — a rule and space — so the two
   lists read as separate groups rather than one long run of links. */
.mobile-menu-sub-heading {
  margin: 0 0 4px;
  color: var(--hm-slate);
  font-family: var(--hm-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: none;
}
.mobile-menu-sub-heading + a {
  padding-top: 4px;
}
.mobile-menu-sub-heading:not(:first-child) {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(31, 20, 20, 0.12);
}
.mobile-menu-sub a,
.mobile-menu-sub a:hover {
  padding: 10px 0;
  border-bottom: 0;
  color: var(--hm-ink);
  font-family: var(--hm-font-sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
}
.mobile-menu-sub .mobile-menu-sub-all,
.mobile-menu-sub .mobile-menu-sub-all:hover {
  align-self: flex-start;
  margin-top: 2px;
  padding-top: 4px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mobile-menu .mm-foot { margin-top: auto; padding-top: 32px; }
.mobile-menu .mm-foot .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 14px 24px;
  border-bottom: 0;
  border-radius: 999px;
  background: var(--hm-red);
  color: var(--hm-cream);
  font-family: var(--hm-font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.18;
  text-align: center;
  text-transform: uppercase;
}
.mobile-menu .mm-foot .btn:hover,
.mobile-menu .mm-foot .btn:focus-visible {
  background: var(--hm-red-deep);
  color: var(--hm-cream);
}
.mobile-menu-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 16px;
}
.mobile-menu .mm-phone {
  width: 100%;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 4px 0 0;
  border-bottom: 0;
  color: var(--hm-red);
  font-family: var(--hm-font-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.mobile-menu-search {
  width: 100%;
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
}
.mobile-menu-search > label:not(.screen-reader-text) {
  display: block;
  margin-bottom: 8px;
  color: var(--hm-red);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: none;
}
.mobile-menu-search > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  border: 1.5px solid var(--hm-ink);
  border-radius: 999px;
  overflow: hidden;
}
.mobile-menu-search input,
.mobile-menu-search button {
  min-height: 48px;
  border: 0;
  background: transparent;
  color: var(--hm-ink);
}
.mobile-menu-search input {
  min-width: 0;
  padding: 0 18px;
  font: inherit;
  outline: 0;
}

/* Ticker */
.ticker { background: var(--hm-dark-surface); color: var(--hm-cream); padding: 10px 0; overflow: hidden; border-top: 1px solid rgba(31,20,20,0.12); border-bottom: 1px solid rgba(31,20,20,0.12); }
.ticker-track { display: flex; width: max-content; white-space: nowrap; font-family: var(--hm-font-sans); font-weight: 700; font-size: var(--hm-size-body); letter-spacing: 0; animation: scroll 36s linear infinite; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-track span { display: inline-block; padding: 0 12px; }
span.ticker-item { display: flex; flex: 0 0 auto; align-items: center; padding: 0; }

/* Footer */
.footer { background: var(--hm-red); color: var(--hm-cream); padding: 64px 0 32px; }
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.footer-grid { display: grid; grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; margin-bottom: 40px; }
.footer-grid--columns-2 { grid-template-columns: minmax(260px, 1.5fr) minmax(0, 1fr); }
.footer-grid--columns-3 { grid-template-columns: minmax(260px, 1.5fr) repeat(2, minmax(0, 1fr)); }
.footer-grid--columns-4 { grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* Footer column labels are eyebrows, not headings: same 11px and 0.16em as
   .eyebrow, so they take caps too (HMS-76). */
.footer h5 { font-family: var(--hm-font-sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 14px; font-weight: 700; color: var(--hm-cream); }
.footer-logo img { width: min(176px, 100%); height: auto; margin-bottom: 16px; }
.footer-acknowledgement { font-size: 13px; line-height: 1.6; max-width: 300px; margin: 0; color: var(--hm-cream); }
.footer-list { list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 2; }
.footer-list,
.footer-list li,
.footer-list a { color: var(--hm-cream); }
.footer-list a { text-decoration: none; }
.footer-list a:hover { color: var(--hm-cream); text-decoration: underline; }
.footer-bar { border-top: 1px solid rgba(244,235,221,0.18); padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--hm-cream); }

/* Walking mascot — fully SVG. Body bobs, legs pivot from hip. */
.walker-svg { overflow: visible; }
.walker-svg .walker-body-svg {
  transform-origin: 200px 200px;
  animation: walker-body-bob 0.9s ease-in-out infinite;
}
.walker-svg .walker-leg-back {
  transform-origin: 175px 305px;
  animation: walker-leg-back-kf 0.9s ease-in-out infinite;
}
.walker-svg .walker-leg-front {
  transform-origin: 225px 305px;
  animation: walker-leg-front-kf 0.9s ease-in-out infinite;
}
.walker-svg .walker-ground {
  transform-box: fill-box;
  transform-origin: center;
  animation: walker-ground-kf 0.9s ease-in-out infinite;
}
@keyframes walker-body-bob {
  0%, 50%, 100% { transform: translateY(0); }
  25%, 75%     { transform: translateY(-6px); }
}
@keyframes walker-leg-back-kf {
  0%   { transform: rotate(-22deg); }
  50%  { transform: rotate(22deg); }
  100% { transform: rotate(-22deg); }
}
@keyframes walker-leg-front-kf {
  0%   { transform: rotate(22deg); }
  50%  { transform: rotate(-22deg); }
  100% { transform: rotate(22deg); }
}
@keyframes walker-ground-kf {
  0%, 50%, 100% { transform: scaleX(1);    opacity: 0.35; }
  25%, 75%     { transform: scaleX(0.78); opacity: 0.22; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .walker-svg .walker-body-svg,
  .walker-svg .walker-leg-back,
  .walker-svg .walker-leg-front,
  .walker-svg .walker-ground { animation: none; }
}
.footer-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  margin-left: auto;
}
.footer-legal { display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.footer-legal a { color: var(--hm-cream); text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }

/* Common section styling */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; flex-wrap: wrap; }
/* font-size comes from the brand type scale at the end of this file. */
.section-head h2 { max-width: 720px; }
h2.hm-headline { text-transform: none; }
.page h2.hm-headline { text-transform: none; }
/* Same exception for post content: a section headline sitting in an article reads
   as written, like every other heading around it. */
:is(.article-copy, .hm-native-post-content) h2.hm-headline { text-transform: none; }
.section-head p { max-width: 520px; }

.home .home-hero-section {
  min-height: calc(100vh - var(--hm-stat-strip-height));
  display: flex;
  align-items: center;
  padding: calc(var(--hm-nav-height) + 34px) 0 34px !important;
}
.home .home-hero-section > .container {
  width: 100%;
}
/* Matches .page-hero h1 below so the homepage headline scales identically to
   every other hero. .display sets no font-size, so without this the heading
   would fall back to the much smaller h1 default. */
.home-hero-title {
  font-size: clamp(52px, 8vw, 96px);
  margin: 14px 0 22px;
}
.home-hero-lead {
  max-width: 520px;
  margin-bottom: 26px;
}

/* Page header (for non-home pages) */
.page-hero { padding: 72px 0 56px; border-bottom: 1px solid rgba(31,20,20,0.08); }
.page-hero .eyebrow { margin-bottom: 14px; }
.page-hero h1 { font-family: var(--hm-font-display); font-weight: 900; font-size: clamp(52px, 8vw, 96px); letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 20px; max-width: 12ch; }
.page-hero .lead { font-size: var(--hm-size-lead); max-width: 620px; }

/* ADDIE process */
.process-layout {
  display: grid;
  gap: 34px;
}
.process-intro {
  max-width: none;
}
.process-intro .h2 {
  max-width: 980px;
}
.process-intro-action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
}
.process-intro-action .lead {
  max-width: 560px;
  margin: 0;
}
.process-intro-action .btn {
  flex: 0 0 auto;
  margin-left: auto;
  margin-top: 2px;
}
.addie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
  gap: 14px;
  counter-reset: addie-step;
}
@media (min-width: 761px) and (max-width: 1180px) {
  .addie-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .addie-step {
    grid-column: span 2;
  }
  .addie-step:nth-child(4) {
    grid-column: 2 / span 2;
  }
  .addie-step:nth-child(5) {
    grid-column: 4 / span 2;
  }
}
.addie-step {
  position: relative;
  min-width: 0;
  height: 100%;
  padding: 42px 18px 18px;
  border: 1px solid rgba(31,20,20,0.10);
  border-radius: 16px;
  background: rgba(250,245,236,0.34);
  overflow: hidden;
  counter-increment: addie-step;
}
.addie-step::before {
  content: "STEP 0" counter(addie-step);
  position: absolute;
  top: 14px;
  left: 18px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--hm-red);
}
.addie-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  color: var(--hm-ink);
}
.addie-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Step name and kicker sit one level lower than they used to (h3/h4 -> h4/h5).
   The red used to come from body.page .entry-content h3, which also colours the
   how-work card titles on other pages, so it is set here instead of following
   the tag rename — that rule stays where it is, and this block carries its own
   colour on every post type rather than only on pages. */
.addie-step h4 {
  font-family: var(--hm-font-display);
  font-size: clamp(23px, 1.7vw, 28px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  text-transform: none;
  color: var(--hm-red);
}
.addie-step h5 {
  font-family: var(--hm-font-sans);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
  margin: 0 0 12px;
  color: var(--hm-ink);
}
.addie-step p {
  font-size: 17px;
  line-height: 1.45;
  color: var(--hm-charcoal);
  margin: 0 0 10px;
}
.how-work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.how-work-card {
  background: var(--hm-cream-soft);
  border: 1px solid rgba(31,20,20,0.10);
  border-radius: 14px;
  padding: 28px;
  min-height: 100%;
}
.how-work-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
}
.how-work-card h3 {
  font-family: var(--hm-font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.how-work-card p {
  font-size: 16px;
  line-height: 1.58;
  color: var(--hm-charcoal);
  margin: 0;
}
.logo-band-section .section-head {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  text-align: center;
}
.logo-band-section .section-head > div {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}
.logo-band-section .section-head h2 {
  margin: 10px auto 12px !important;
}
.logo-band-section .section-head p {
  margin-left: auto;
  margin-right: auto;
}
/* Flex rather than grid so a short row centres. repeat(7, 1fr) always builds
   seven tracks whatever the item count, and the empty ones keep their share of
   the width, so a five-logo row sat hard left with 354px of dead space beside
   it — and justify-content cannot help, because 1fr has already consumed the
   free space. The basis reproduces the same track width a seven-across grid
   gives, so a full row is unchanged. */
.client-logo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px 24px;
  margin-top: 22px;
}
.client-logo-card {
  flex: 0 1 calc((100% - 6 * 24px) / 7);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 64px;
  padding: 4px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.client-logo-card img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 46px;
  object-fit: contain;
}
.client-logo-card img[alt="Teachers Mutual Bank"] {
  filter: brightness(0) saturate(100%);
}
.client-logo-text {
  max-width: 100%;
  font-family: var(--hm-font-sans);
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
  text-align: center;
  overflow-wrap: anywhere;
}
.hm-logo-carousel-track {
  position: relative;
  touch-action: pan-y;
  cursor: grab;
  /* Fixed to a full 28-logo page's height (7 cols x 4 rows) so the
     controls below don't shift up when a shorter last page (fewer logos)
     is shown. */
  height: 370px;
}
.hm-logo-carousel:not([data-hm-logo-carousel]) .hm-logo-carousel-track {
  height: auto;
}
.hm-logo-carousel-track:active {
  cursor: grabbing;
}
.hm-logo-carousel-track [data-hm-logo-page][hidden] {
  display: none;
}
.hm-carousel-controls {
  margin-top: 28px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.hm-carousel-controls button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(31,20,20,0.18);
  color: var(--hm-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.hm-carousel-controls button:hover,
.hm-carousel-controls button:focus-visible {
  background: var(--hm-red);
  border-color: var(--hm-red);
  color: var(--hm-cream);
  opacity: 1;
  outline: none;
}
.hm-carousel-dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 240px;
}
.hm-carousel-dots button {
  width: 8px;
  height: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(31,20,20,0.18);
  cursor: pointer;
  transition: width 0.2s var(--hm-ease-out), background-color 0.2s var(--hm-ease-out);
}
.hm-carousel-dots button.is-active {
  width: 28px;
  background: var(--hm-red);
}
@media (max-width: 700px) {
  .client-logo-grid {
    gap: 20px 12px;
  }
  .client-logo-card {
    /* Four across here, matching the column count this breakpoint used to set. */
    flex-basis: calc((100% - 3 * 12px) / 4);
    min-height: 48px;
    padding: 2px;
  }
  .client-logo-card img {
    max-height: 30px;
  }
  .client-logo-text {
    font-size: 11px;
  }
  .hm-logo-carousel-track {
    /* Fixed mobile height for a full 4-column logo page without extra vertical slack. */
    height: 460px;
  }
}
.hm-instagram-section {
  padding-bottom: 44px;
}
/* Unlike the other section heads, the Instagram intro is a centred stack: no
   button sits beside it, so the heading and its line of copy centre together. */
.hm-instagram-section .section-head {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hm-instagram-section .section-head h2,
.hm-instagram-section .section-head .lead {
  margin-left: auto;
  margin-right: auto;
}
.hm-instagram-section .section-head .lead a,
.hm-instagram-section .section-head .lead a:hover {
  text-decoration: none;
}
.hm-insta-carousel-track {
  position: relative;
  touch-action: pan-y;
  cursor: grab;
}
.hm-insta-carousel-track:active {
  cursor: grabbing;
}
.hm-insta-carousel-track [data-hm-insta-page][hidden] {
  display: none;
}
.hm-insta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.hm-insta-card {
  display: block;
  /* Matches the artwork's own 578x592 ratio so the rounded corners baked
     into each export line up and nothing gets cropped. */
  aspect-ratio: 578 / 592;
  overflow: hidden;
}
.hm-insta-card img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--hm-ease-out);
}
a.hm-insta-card:hover img,
a.hm-insta-card:focus-visible img {
  transform: scale(1.04);
}
a.hm-insta-card:focus-visible {
  outline: 2px solid var(--hm-red);
  outline-offset: 3px;
}
@media (max-width: 900px) {
  .hm-insta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
@media (max-width: 1200px) {
  .article-copy { min-width: 0; }
  .article-copy .wp-block-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  .article-copy table {
    /* Keep the table formatting context: display:block lets browsers squeeze
       short-label columns even when the table itself has a minimum width. */
    display: table;
    table-layout: fixed;
    min-width: 620px;
  }
  .article-copy table:has(tr > :nth-child(4)) {
    min-width: 720px;
  }
  .article-copy table:has(tr > :nth-child(5)) {
    min-width: 900px;
  }
}

@media (max-width: 760px) {
  .entry-content .ld-deliverables-table td { padding-inline: 8px; }
  /* Every section head picks up bottom padding at this width; the centred
     Instagram intro sits close to its grid instead. */
  .hm-instagram-section .section-head {
    padding-bottom: 0;
  }
}
.work-gallery-section {
  overflow: hidden;
}
.work-gallery-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.work-gallery-marquee {
  position: relative;
  overflow: hidden;
  outline: none;
  touch-action: pan-y;
  cursor: grab;
}
.work-gallery-marquee:has(.work-gallery-card-button:focus-visible) {
  box-shadow: inset 0 0 0 2px rgba(194,57,43,0.7);
}
.work-gallery-track {
  display: flex;
  width: max-content;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
  animation: workGalleryScroll var(--work-gallery-duration, 64s) linear infinite;
}
.work-gallery-marquee.is-dragging .work-gallery-track,
.work-gallery-marquee:has(.work-gallery-card-button:focus-visible) .work-gallery-track,
.work-gallery-section.is-modal-open .work-gallery-track {
  animation-play-state: paused;
}
.work-gallery-marquee.is-dragging {
  cursor: grabbing;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .work-gallery-marquee:hover .work-gallery-track {
    animation-play-state: paused;
  }
}
.work-gallery-loop {
  display: flex;
  gap: 18px;
  padding-right: 18px;
}
.work-gallery-card {
  margin: 0;
  border-radius: 14px;
  border: 1px solid rgba(31,20,20,0.10);
  background: var(--hm-cream-soft);
  overflow: hidden;
}
.work-gallery-marquee .work-gallery-card {
  /* flex: 0 0 min(820px); */
}
.work-gallery-card-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.work-gallery-card-button:focus-visible {
  outline: 3px solid var(--hm-red);
  outline-offset: -3px;
}
.work-gallery-card img {
  display: block;
  width: 100%;
  object-fit: contain;
  object-position: center;
  background: var(--hm-blue);
}
.work-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vw, 44px);
  background: rgba(30,20,20,0.74);
  animation: workGalleryModalIn 0.2s ease both;
}
.work-gallery-modal-shell {
  position: relative;
  width: min(1120px, 100%);
  max-height: min(88vh, 860px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(247,239,226,0.32);
  border-radius: 18px;
  background: var(--hm-cream);
  box-shadow: 0 28px 80px rgba(0,0,0,0.34);
  animation: workGalleryShellIn 0.24s ease both;
}
.work-gallery-modal-image-wrap {
  min-height: 0;
  background: var(--hm-dark-surface);
}
.work-gallery-modal-image-wrap img {
  display: block;
  width: 100%;
  height: min(68vh, 680px);
  object-fit: contain;
  background: #D5E6F4;
}
.work-gallery-modal-close,
.work-gallery-modal-nav button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(31,20,20,0.18);
  border-radius: 999px;
  background: var(--hm-cream);
  color: var(--hm-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.work-gallery-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  font-size: 30px;
  line-height: 1;
}
.work-gallery-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  background: var(--hm-cream);
}
.work-gallery-modal-footer h3 {
  margin: 0;
  font-family: var(--hm-font-display);
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.05;
}
.work-gallery-modal-count {
  margin: 0 0 5px;
  color: var(--hm-red);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: none;
}
.work-gallery-modal-nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.work-gallery-modal-nav button:first-child svg {
  transform: rotate(180deg);
}
.work-gallery-modal-nav button:hover,
.work-gallery-modal-nav button:focus-visible,
.work-gallery-modal-close:hover,
.work-gallery-modal-close:focus-visible {
  background: var(--hm-red);
  color: var(--hm-cream);
  outline: none;
}
@keyframes workGalleryScroll {
  from { transform: translate3d(var(--work-gallery-drag-offset, 0px), 0, 0); }
  to { transform: translate3d(calc(var(--work-gallery-drag-offset, 0px) - var(--work-gallery-cycle-width, 50%)), 0, 0); }
}
@keyframes workGalleryModalIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes workGalleryShellIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.accordion-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
  gap: 56px;
  align-items: start;
}
.accordion-intro {
  position: sticky;
  top: 104px;
}
.accordion-list {
  border-top: 1px solid rgba(31,20,20,0.12);
}
.accordion-item {
  border-bottom: 1px solid rgba(31,20,20,0.12);
}
/* FAQ inside post content: one column, no sticky intro, and none of the section
   furniture a full-width page section brings -- the article already provides the
   measure and the vertical rhythm. Same shape the two-column layout falls back
   to below 960px. */
.accordion-section--stacked {
  padding: 0;
  background: transparent;
}
.accordion-section--stacked > .container {
  max-width: none;
  padding: 0;
}
.accordion-layout--stacked {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.accordion-layout--stacked .accordion-intro {
  position: static;
  top: auto;
}
/* The intro heading is the section's own headline, not one of the article's, so
   the divider rule and spacing that .article-copy h2 adds are cleared here --
   the block reads exactly as it does on a page. */
.accordion-layout--stacked .accordion-intro h2 {
  margin: 10px 0 16px;
  padding-top: 0;
  border-top: 0;
}
.accordion-layout--stacked .accordion-item > button {
  min-height: 0;
  padding: 18px 0;
  gap: 16px;
}
.accordion-layout--stacked .accordion-panel > div {
  padding-bottom: 18px;
}
/* The list closes on the last answer -- a rule under it would read as the start
   of something else, with the rest of the article below. */
.accordion-layout--stacked .accordion-item:last-child {
  border-bottom: 0;
}
.accordion-item > button {
  width: 100%;
  min-height: 76px;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 20px 0;
  color: var(--hm-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--hm-font-display);
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.accordion-icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(31,20,20,0.20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--hm-ink);
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.accordion-item > button[aria-expanded="true"] .accordion-icon {
  background: var(--hm-red);
  border-color: var(--hm-red);
  color: var(--hm-cream);
}
.accordion-item > button svg {
  transition: transform 0.2s var(--hm-ease-out);
}
.accordion-item > button[aria-expanded="true"] svg {
  transform: rotate(45deg);
}
.accordion-panel {
  overflow: hidden;
  transition: max-height 0.24s var(--hm-ease-out);
}
.accordion-panel > div {
  max-width: 72ch;
  padding: 0 58px 22px 0;
  color: var(--hm-charcoal);
  font-size: 16px;
  line-height: 1.62;
}
.accordion-panel > div > p {
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
}
.accordion-panel > div > p + p {
  margin-top: 1em;
}
.accordion-panel .btn {
  margin-bottom: 24px;
}
.hm-testimonials .testimonial-mascot {
  position: absolute;
  right: -4%;
  bottom: -8%;
  width: 360px;
  height: auto;
  opacity: 0.12;
  transform: rotate(-8deg);
  filter: grayscale(1) contrast(1.15);
}
.hm-testimonial-kicker {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}
.hm-testimonial-kicker svg {
  flex-shrink: 0;
  display: block;
}
.hm-testimonials .hm-testimonial-panel blockquote {
  font-family: var(--hm-font-display);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 32px;
  color: var(--hm-cream);
}
.hm-testimonial-panel {
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ── Testimonial Read more (post detail only) ──────────────────────────────
   The quote renders in full in the markup and is collapsed with CSS, so the
   whole testimonial is still in the page for search engines and for anyone
   reading with CSS off. PHP only adds these classes on a post detail page. */
/* Tighter than the 32px a standalone quote carries, because the button now sits
   between the quote and the attribution. */
.hm-testimonial-quote {
  margin-bottom: 20px;
}
.hm-testimonial-quote.is-clamped .hm-testimonial-quote-rest {
  display: none;
}
.hm-testimonial-quote:not(.is-clamped) .hm-testimonial-quote-ellipsis {
  display: none;
}
.hm-testimonial-more {
  align-self: flex-start;
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(245, 238, 228, 0.4);
  background: none;
  font-family: var(--hm-font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hm-cream);
  cursor: pointer;
  transition: color var(--hm-dur-fast) var(--hm-ease-out),
              border-color var(--hm-dur-fast) var(--hm-ease-out);
}
.hm-testimonial-more:hover {
  color: var(--hm-red);
  border-bottom-color: var(--hm-red);
  opacity: 1;
}
.hm-testimonial-more:focus-visible {
  outline: 2px solid var(--hm-red);
  outline-offset: 3px;
}
.hm-testimonial-panel[hidden] {
  display: none;
}
.hm-testimonial-meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hm-testimonial-logo {
  width: 150px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.hm-testimonial-logo img {
  max-width: 140px;
  max-height: 40px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}
.hm-testimonial-author {
  font-weight: 700;
  font-size: 15px;
}
.hm-testimonial-role {
  font-size: 13px;
  opacity: 0.7;
}
.hm-testimonial-controls {
  margin-top: 24px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.hm-testimonial-controls button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(245,238,228,0.3);
  color: var(--hm-cream);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.hm-testimonial-controls button:hover,
.hm-testimonial-controls button:focus-visible {
  background: var(--hm-red);
  border-color: var(--hm-red);
  opacity: 1;
  outline: none;
}
.hm-testimonial-dots {
  display: flex;
  gap: 6px;
}
.hm-testimonial-dots button {
  width: 8px;
  height: 8px;
  min-width: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(245,238,228,0.3);
  transition: width 0.2s var(--hm-ease-out), background-color 0.2s var(--hm-ease-out);
}
.hm-testimonial-dots button.is-active {
  width: 28px;
  background: var(--hm-red);
}
.industry-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(31,20,20,0.08);
  border-radius: 16px;
  background: rgba(31,20,20,0.08);
  overflow: hidden;
}
.industry-tile {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 20px 16px;
  background: var(--hm-cream);
  color: var(--hm-ink);
  text-decoration: none;
  font-family: var(--hm-font-display);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.industry-tile:hover,
.industry-tile:focus-visible {
  background: var(--hm-ink);
  color: var(--hm-cream);
  opacity: 1;
  text-decoration: none;
  outline: none;
}
.industry-tile:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(31,20,20,0.24);
}
.industry-tile span:first-child {
  flex: 1;
  padding-right: 8px;
}
.industry-tile-arrow {
  color: var(--hm-red);
  display: inline-flex;
  flex-shrink: 0;
  transition: color 0.18s ease;
}
.industry-tile:hover .industry-tile-arrow,
.industry-tile:focus-visible .industry-tile-arrow {
  color: var(--hm-cream);
}
.legal-content-section { padding-top: 48px; }
.legal-copy {
  max-width: none;
  color: var(--hm-charcoal);
}
.legal-copy-section {
  padding: 26px 0;
  border-bottom: 1px solid rgba(31,20,20,0.10);
}
.legal-copy-section:first-child { padding-top: 0; }
.legal-copy-section:last-child { border-bottom: 0; padding-bottom: 0; }
.legal-copy h2 {
  font-family: var(--hm-font-display);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.legal-copy p {
  font-size: 17px;
  line-height: 1.66;
  margin: 0;
}

/* Blog */
.case-card.blog-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  height: auto;
}
.blog-featured .case-logo-box { aspect-ratio: 16 / 10; }
.case-logo-box.has-post-image {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: var(--hm-paper);
}
.case-logo-box.has-post-image .case-card-image {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
  filter: none;
}
.case-logo-box.has-post-image .case-category-pill {
  z-index: 2;
}
/* Blog Cards "Case study" layout -- reuse the Case Study Cards logo-box look
   (colour-cycled background, small thumbnail docked bottom-left, white
   silhouette) instead of the default stretch-to-fill photo treatment.
   Compound selector (.case-logo-box.case-logo-box--case-study) is used
   deliberately for higher specificity than the later plain .case-logo-box
   base rules further down this file, which otherwise win on source order
   and silently re-center/re-fill the box. */
.case-logo-box.case-logo-box--case-study {
  justify-content: flex-start;
}
.case-logo-box.case-logo-box--case-study .case-card-image {
  max-width: 75%;
  max-height: 75%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  align-self: flex-end;
}
/* Related-reading cards with a generic category icon (no post thumbnail
   or client logo) -- small, docked bottom-left like the case-study logo,
   but at a fixed size since it's not a real logo's own proportions. */
.case-logo-box.case-logo-box--icon {
  justify-content: flex-start;
}
.case-logo-box.case-logo-box--icon img {
  max-width: 60%;
  width: auto;
  height: 60px;
  max-height: 60px;
  object-fit: contain;
  object-position: center;
  align-self: flex-end;
}
.article-meta {
  margin-top: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--hm-slate);
}
.article-copy {
  max-width: none;
  color: var(--hm-charcoal);
}
.article-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1200px);
  gap: 56px;
  align-items: start;
  padding-bottom: 35px;
}
@media (min-width: 761px) {
  .postid-8989 .article-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }
}
.article-toc {
  position: sticky;
  top: 104px;
  align-self: start;
}
.article-toc-inner {
  position: relative;
  max-height: calc(100vh - 128px);
  overflow: auto;
  padding-top: 21px;
}
.article-toc-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--hm-red);
}
.article-toc-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hm-red);
  margin-bottom: 12px;
}
.article-toc nav {
  display: grid;
  gap: 8px;
}
.article-toc a {
  color: var(--hm-ink);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
  text-decoration: none;
  padding: 9px 0;
  border-bottom: 1px solid rgba(31,20,20,0.10);
}
.article-toc a:hover {
  color: var(--hm-red);
  opacity: 1;
  text-decoration: none;
}
.article-copy p {
  font-size: var(--hm-size-body);
  line-height: 1.7;
  margin: 0 0 22px;
}
/* Blog default: a black heading with a hairline above it, so each H2 reads as
   the start of a new section. Same hairline the contents list uses. */
.article-copy h2 {
  font-family: var(--hm-font-display);
  font-weight: 900;
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 48px 0 16px;
  color: var(--hm-ink);
}
/* The rule divides one section from the previous one, so it is only drawn on a
   heading that has content before it. The opening heading of an article gets
   none -- a line directly under the hero reads as a mistake. Sibling selector
   rather than :first-child because case study content wraps its opening heading
   in a block of its own, so the first H2 is not always a direct child here. */
.article-copy * + h2 {
  padding-top: 30px;
  border-top: 1px solid rgba(31,20,20,0.10);
}
.article-copy h3 {
  font-family: var(--hm-font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 31px);
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 34px 0 12px;
  color: var(--hm-ink);
  text-transform: none;
}
.article-copy h4 {
  font-family: var(--hm-font-sans);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.08em;
  line-height: 1.25;
  margin: 26px 0 10px;
  color: var(--hm-ink);
  text-transform: none;
}
.article-copy [id] {
  scroll-margin-top: 112px;
}
.article-copy ul,
.article-copy ol {
  margin: 0 0 22px;
  padding-left: 22px;
  text-align: left;
}
.article-copy li {
  font-size: var(--hm-size-body);
  line-height: 1.6;
  margin-bottom: 10px;
}
.article-copy li::marker {
  color: var(--hm-ink);
  font-weight: 900;
}
.article-copy figure,
.article-copy .wp-block-image,
.article-copy .wp-block-table,
.article-copy .wp-block-embed {
  margin: 38px 0;
}
.article-copy figure img,
.article-copy .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.article-copy figcaption,
.article-copy .wp-element-caption {
  margin-top: 10px;
  color: var(--hm-slate);
  font-size: 13px;
  line-height: 1.5;
}
.article-copy table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: var(--hm-cream-soft);
  color: var(--hm-charcoal);
}
.article-copy thead {
  background: var(--hm-dark-surface);
  color: var(--hm-cream);
}
.article-copy th,
.article-copy td {
  padding: 16px 18px;
  border: 0;
  text-align: left;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.45;
}
.article-copy th {
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: none;
  font-size: 11px;
}
.article-copy th:last-child,
.article-copy td:last-child {
  border-right: 0;
}
.article-copy tbody tr:last-child td {
  border-bottom: 0;
}
.article-copy tbody tr:nth-child(even) {
  background: rgba(239,231,217,0.7);
}
.article-copy hr,
.article-copy .wp-block-separator {
  width: 100%;
  height: 1px;
  border: 0;
  margin: 44px 0;
  background: rgba(31,20,20,0.14);
}
.article-copy blockquote {
  font-family: var(--hm-font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--hm-ink);
  border-left: 4px solid var(--hm-red);
  margin: 36px 0;
  padding: 6px 0 6px 26px;
}
.article-copy blockquote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--hm-font-sans);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--hm-red);
}
.article-copy .wp-block-pullquote {
  margin: 42px 0;
  padding: 34px;
  border-top: 4px solid var(--hm-red);
  border-bottom: 4px solid var(--hm-red);
  text-align: center;
}
.article-copy .wp-block-pullquote blockquote {
  margin: 0;
  padding: 0;
  border-left: 0;
}
.article-copy .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 34px 0;
}
.article-copy .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--hm-cream);
  color: var(--hm-ink);
  border: 1.5px solid var(--hm-ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.article-copy .wp-block-button__link:hover {
  background: var(--hm-ink);
  color: var(--hm-cream);
  opacity: 1;
  text-decoration: none;
}
.article-tip-list {
  display: grid;
  gap: 0;
  margin: 44px 0;
  padding: 28px;
  border-radius: 16px;
  border: 1px solid rgba(31,20,20,0.10);
  background: var(--hm-paper);
}
.article-tip-list > div:first-child {
  margin-bottom: 16px;
}
.article-tip-list h3 {
  margin: 8px 0 0;
  color: var(--hm-ink);
}
.article-tip-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
  padding: 17px 0;
  border-top: 1px solid rgba(31,20,20,0.10);
}
.article-tip-item > span {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--tip-color);
  color: var(--hm-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hm-font-display);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}
.article-tip-item h4 {
  margin: 0 0 6px;
}
.article-tip-item p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}

.hm-post-single,
.hm-post-index {
  background: var(--hm-cream);
  color: var(--hm-ink);
}
.hm-post-article {
  padding: calc(var(--hm-nav-height) + 20px) 0 0;
}
.hm-post-hero {
  padding: 0 32px 42px;
}
.hm-post-client {
  margin: 0 0 12px;
  color: var(--hm-red);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: none;
}
.hm-post-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  max-width: 1210px;
}
.hm-post-categories .wp-block-post-terms__separator { display: none; }
.hm-post-categories a,
.hm-native-post-card .taxonomy-category a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  background: var(--hm-red);
  color: var(--hm-cream);
  padding: 7px 12px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}
.hm-native-post-card .taxonomy-category {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hm-native-post-card .taxonomy-category .wp-block-post-terms__separator {
  display: none;
}
.hm-post-categories a:hover,
.hm-native-post-card .taxonomy-category a:hover {
  background: var(--hm-red-deep);
  opacity: 1;
  text-decoration: none;
}
.hm-post-title,
.hm-index-title {
  font-family: var(--hm-font-display);
  font-weight: 900;
  letter-spacing: -0.028em;
  line-height: 0.98;
  color: var(--hm-ink);
  margin: 0;
}
.hm-post-title {
  max-width: 1210px;
  font-size: clamp(48px, 7vw, 92px);
}
.hm-post-title::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 28px;
  background: rgba(31,20,20,0.16);
}
.hm-index-title {
  max-width: 880px;
  font-size: clamp(44px, 6vw, 76px);
}
.hm-index-title.hm-archive-title {
  max-width: none;
}
.hm-post-meta-row {
  max-width: 1210px;
  gap: 10px 18px;
  margin: 24px 0 0;
  color: var(--hm-slate);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: none;
}
.hm-post-meta-row > * {
  margin: 0;
}
.hm-post-meta-row a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
/* Blog posts carry a publish date, case studies do not. Both render through
   single.html, so the date block is placed once and hidden on the case study
   body class that functions.php adds. */
.hm-case-study-post .hm-post-meta-row .wp-block-post-date {
  display: none;
}
.hm-post-description {
  max-width: 1210px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--hm-ink);
  margin: 20px 0 0;
}
.hm-post-featured {
  margin: 34px 0 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--hm-paper);
}
.hm-post-featured img {
  border-radius: 16px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hm-native-post-content {
  padding: 0 0 0 32px;
}
/* :not(.btn) because a pill inside an article is a button, not body copy: this
   rule was repainting its label black and underlining it, so a ghost button kept
   black text on its dark hover background. */
.hm-native-post-content a:not(.wp-block-button__link):not(.btn) {
  color: #000;
  font-weight: 400;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
.hm-native-post-content a:not(.wp-block-button__link):not(.btn):hover {
  color: #000;
  opacity: 1;
}
.hm-case-study-post .wp-block-post-date,
.hm-case-study-post .hm-post-reading-time {
  display: none;
}
.hm-case-study-post .article-copy h2,
.hm-case-study-post .article-copy h3 {
  color: var(--hm-ink);
}
.hm-case-study-post .article-copy h3 {
  text-transform: none;
}
.single-post .article-copy h3 {
  text-transform: none;
}
.hm-case-study-post .hm-post-categories a {
  background: var(--hm-blue);
  color: var(--hm-ink);
}
.hm-case-study-post .hm-post-categories a:nth-child(2) {
  background: var(--hm-mustard);
}
.hm-case-study-post .hm-post-categories a:nth-child(3) {
  background: var(--hm-forest);
  color: var(--hm-cream);
}
.hm-case-study-post .hm-post-categories a:nth-child(4) {
  background: var(--hm-brown);
  color: var(--hm-cream);
}
.hm-case-study-post .hm-post-categories a:nth-child(5) {
  background: var(--hm-pink);
  color: var(--hm-ink);
}
.article-copy .wp-block-gallery {
  display: grid;
  gap: 16px;
}
.article-copy .wp-block-gallery.has-nested-images figure.wp-block-image {
  margin: 0;
}
.article-copy .wp-block-gallery.has-nested-images figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-copy .wp-block-columns {
  gap: 28px;
  margin: 38px 0;
}
.article-copy .wp-block-file {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 30px 0;
  padding: 18px;
  border: 1px solid rgba(31,20,20,0.12);
  border-radius: 12px;
  background: var(--hm-cream-soft);
}
.article-copy .wp-block-file__button {
  border-radius: 999px;
  background: var(--hm-red);
  color: var(--hm-cream);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 10px 16px;
  text-decoration: none;
  text-transform: uppercase;
}
.article-copy pre,
.article-copy .wp-block-code {
  overflow-x: auto;
  border: 1px solid rgba(31,20,20,0.12);
  border-radius: 12px;
  background: var(--hm-dark-surface);
  color: var(--hm-cream);
  padding: 20px;
}
.article-copy pre code {
  font-size: 14px;
  line-height: 1.6;
}
.article-copy .wp-block-cover {
  border-radius: 16px;
  overflow: hidden;
  margin: 42px 0;
}
.article-copy .wp-block-embed iframe,
.article-copy .wp-block-video video {
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 14px;
}
.article-copy .wp-block-embed.is-type-video iframe {
  aspect-ratio: 16 / 9;
  height: auto;
}
.article-copy .alignwide {
  max-width: min(1000px, calc(100vw - 64px));
}
.article-copy .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.hm-post-index .page-hero {
  padding-top: calc(var(--hm-nav-height) + 58px);
  padding-bottom: 44px;
  padding-left: 32px;
  padding-right: 32px;
}
.hm-query-loop {
  padding-top: 42px;
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 80px;
}
.hm-native-post-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hm-native-post-grid > li {
  min-width: 0;
}
.hm-native-post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  gap: 14px;
  padding: 22px;
  border: 1px solid rgba(31,20,20,0.1);
  border-radius: 12px;
  background: var(--hm-cream-soft);
}
.hm-native-post-thumb {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--hm-paper);
  aspect-ratio: 619 / 371;
}
.hm-native-post-thumb a,
.hm-native-post-thumb img {
  display: block;
  width: 100%;
  height: 100%;
}
.hm-native-post-thumb img {
  object-fit: contain !important;
  transition: transform 0.22s var(--hm-ease-out);
}
.hm-native-post-card:hover .hm-native-post-thumb img {
  transform: scale(1.025);
}
.hm-native-post-card .case-meta {
  order: 2;
  margin: 0;
}
.hm-native-post-card .case-title {
  order: 1;
  margin: 0;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.04;
}
.hm-native-post-card .case-title a {
  color: var(--hm-ink);
  text-decoration: none;
}
.hm-native-post-card .case-title a:hover {
  color: var(--hm-red);
  opacity: 1;
}
.hm-post-card-excerpt {
  order: 3;
  margin: 0;
  color: var(--hm-charcoal);
  font-size: 15px;
  line-height: 1.55;
}
.hm-post-card-excerpt p {
  margin: 0;
}
.hm-post-card-excerpt .wp-block-post-excerpt__more-link {
  display: inline-flex;
  margin-top: 16px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0 18px;
  border: 1.5px solid var(--hm-ink);
  border-radius: 999px;
  color: var(--hm-red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}
.hm-post-card-excerpt .wp-block-post-excerpt__more-link:hover {
  background: var(--hm-red);
  border-color: var(--hm-red);
  color: var(--hm-cream);
  opacity: 1;
}
.hm-query-pagination {
  gap: 8px;
  margin: 64px 0 0;
  padding: 0 0 24px;
}
.hm-query-pagination a,
.hm-query-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(31,20,20,0.14);
  border-radius: 999px;
  background: var(--hm-cream);
  color: var(--hm-ink);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.hm-query-pagination .wp-block-query-pagination-next,
.hm-query-pagination .wp-block-query-pagination-previous {
  gap: 8px;
  min-width: 0;
  padding: 0 18px;
  white-space: nowrap;
}
.hm-query-pagination a:hover,
.hm-query-pagination .page-numbers.current {
  background: var(--hm-dark-surface);
  color: var(--hm-cream);
  opacity: 1;
  text-decoration: none;
}

.ld-strategies-grid {
  grid-template-columns: repeat(7, 1fr);
  max-width: 1200px;
  margin: auto;
}

.ld-delivery-grid {
  grid-template-columns: repeat(7, 1fr);
  max-width: 1200px;
  margin: auto;
}

.ld-deliverables-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  max-width: 1200px;
  margin: auto;
}

.ld-deliverables-table + h4 {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Detail templates: service, industry, case study, team, courses */
.chip-list { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--hm-cream-soft);
  border: 1px solid rgba(31,20,20,0.12);
  font-size: 14px;
  font-weight: 600;
  color: var(--hm-ink);
}
.detail-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.detail-card {
  background: var(--hm-cream-soft);
  border: 1px solid rgba(31,20,20,0.08);
  border-radius: 12px;
  padding: 22px 18px;
}
.single-post .hm-native-post-content .section-lg.hm-section.hm-content-cards.hm-content-cards--detail > .container {
  padding: 0;
}
.hm-content-cards--values .detail-card {
  background: var(--hm-cream);
  border-radius: 16px;
  padding: 28px 26px;
}
.detail-kicker { font-size: 11px; font-weight: 900; letter-spacing: 0.14em; color: var(--hm-red); text-transform: uppercase; }
.detail-name { font-family: var(--hm-font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.01em; margin: 6px 0 8px; }
.detail-card p { font-size: 14px; line-height: 1.55; margin: 0; color: var(--hm-charcoal); }
.hm-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: center;
}
.hm-content-section--heading-actions .hm-content-layout {
  display: block;
}
.hm-content-section--heading-actions .hm-content-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 32px;
  align-items: end;
}
.hm-content-section--heading-actions .hm-content-copy > .eyebrow {
  grid-column: 1 / -1;
}
.hm-content-section--heading-actions .hm-content-copy > h2 {
  grid-column: 1;
  margin-bottom: 0 !important;
}
.hm-content-section--heading-actions .hm-content-actions {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
  align-self: end;
}
.hm-content-section--reverse .hm-content-copy {
  order: 2;
}
.hm-content-section--center .hm-content-layout {
  display: block;
}
.hm-content-section--center .hm-content-copy {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.hm-content-section--center .hm-content-copy > p:not(.lead),
.hm-content-section--center .hm-content-copy ul,
.hm-content-section--center .hm-content-copy ol {
  text-align: center;
}
.hm-content-section--center .hm-content-copy li,
.hm-content-section--center-below .hm-content-copy li {
  list-style-position: inside;
}
.hm-content-section--center .hm-content-actions {
  justify-content: center;
}
.hm-content-copy > p:not(.lead) {
  /* Body copy of the content-section block — the main prose on most pages, so
     it follows the body token rather than a hardcoded size. */
  font-size: var(--hm-size-body);
  color: var(--hm-charcoal);
  line-height: 1.6;
  margin: 0 0 14px;
  text-align: left;
}
.hm-content-copy ul,
.hm-content-copy ol {
  text-align: left;
}
/* h3 headings inside regular page content. Ink, not red: red is reserved for
   eyebrows and for the words deliberately accented inside an H2. The ADDIE
   process block keeps its red through .addie-step h4, which carries its own
   colour rather than inheriting from here. */
body.page .entry-content h3 {
  color: var(--hm-ink);
}
.hm-content-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.hm-content-media {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hm-card-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
}
.hm-card-points,
.hm-feature-list,
.price-card ul {
  margin: 12px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hm-card-points li,
.hm-feature-list li,
.price-card li {
  font-size: 15px;
  line-height: 1.5;
  color: var(--hm-charcoal);
}
.price-card li {
  color: var(--hm-cream);
}
.hm-list-layout,
.hm-pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 44px;
  align-items: start;
}
.hm-list-intro .lead {
  margin-bottom: 20px;
}
.hm-feature-list {
  margin: 0;
}
.hm-feature-list li {
  font-size: 17px;
  line-height: 1.55;
}
.hm-blog-grid {
  margin-top: 44px;
}
.hm-value-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 22px;
}
.hm-value-list > div > div {
  font-weight: 700;
  font-size: 16px;
}
.hm-value-list span {
  display: block;
  font-size: 14px;
  color: var(--hm-slate);
}
.hm-price-eyebrow {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--hm-cream);
}
.hm-price-value {
  font-family: var(--hm-font-display);
  font-weight: 900;
  font-size: clamp(40px, 4.5vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.price-card p {
  font-size: 15px;
  line-height: 1.6;
  margin: 14px 0 22px;
  color: var(--hm-cream);
}
.snapshot-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.snapshot-item {
  background: var(--hm-cream-soft);
  border: 1px solid rgba(31,20,20,0.08);
  border-radius: 12px;
  padding: 18px;
}
.snapshot-icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(6%) sepia(12%) saturate(1142%) hue-rotate(314deg) brightness(94%) contrast(96%);
  margin-bottom: 14px;
}
.snapshot-label { font-size: 10px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hm-slate); margin-bottom: 8px; }
.snapshot-value { font-size: 15px; font-weight: 600; line-height: 1.45; }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.team-card {
  background: var(--hm-cream-soft);
  border: 1px solid rgba(31,20,20,0.08);
  border-radius: 14px;
  padding: 26px;
}
.team-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--hm-font-display); font-weight: 900; font-size: 26px;
  color: #FFFFFF;
  margin-bottom: 16px;
}
.team-avatar--photo {
  width: 100%;
  height: auto;
  background: none !important;
  border-radius: 0;
  overflow: hidden;
  padding-top: 20px;
  flex-shrink: 0;
}
.team-avatar--photo img {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: top center;
}
.team-name { font-family: var(--hm-font-display); font-weight: 900; font-size: 24px; letter-spacing: -0.01em; margin: 0 0 2px; }
.team-role { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: none; color: var(--hm-red); margin: 0 0 10px; }
.team-bio { font-size: 15px; line-height: 1.6; color: var(--hm-charcoal); margin: 0; }
.faq-item { border-bottom: 1px solid rgba(31,20,20,0.12); padding: 18px 0; }
.faq-item summary {
  font-family: var(--hm-font-display);
  font-weight: 800;
  font-size: 20px;
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--hm-red); font-size: 26px; line-height: 1; flex-shrink: 0; }
.faq-item[open] summary::after { content: '\2013'; }
.faq-item p { font-size: 16px; line-height: 1.65; color: var(--hm-charcoal); margin: 12px 0 0; max-width: 75ch; }
.price-card {
  background: var(--hm-dark-surface);
  color: var(--hm-cream);
  border-radius: 16px;
  padding: 36px;
}
.price-old { text-decoration: line-through; opacity: 0.55; }
.hm-contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.hm-contact-field {
  display: block;
}
.hm-contact-label {
  display: block;
  margin-bottom: 6px;
  color: var(--hm-slate);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.hm-contact-control {
  width: 100%;
  min-height: 50px;
  padding: 14px 16px;
  border: 1.5px solid rgba(31,20,20,0.15);
  border-radius: 10px;
  background: var(--hm-cream-soft);
  color: var(--hm-ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.35;
  outline: none;
  transition: border-color 0.15s var(--hm-ease-out), box-shadow 0.15s var(--hm-ease-out), background-color 0.15s var(--hm-ease-out);
}
.hm-contact-control:focus {
  border-color: var(--hm-red);
  background: var(--hm-cream);
  box-shadow: 0 0 0 4px rgba(255,75,62,0.12);
}
.hm-contact-control:is(textarea) {
  min-height: 130px;
  resize: vertical;
}
.hm-contact-submit {
  min-width: 196px;
}
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) {
  margin: 0;
}
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) .gform_fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px 16px;
}
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) .gfield {
  grid-column: 1 / -1;
}
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) .gfield.hm-gf-half {
  grid-column: span 1;
}
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) .gfield_label {
  display: block;
  margin: 0 0 6px;
  /* One label colour across every form on the site. */
  color: var(--hm-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  /* Field labels are labels, not headings: 12px at 0.12em, so caps as
     originally designed (HMS-79 restores what HMS-74 had flipped). */
  text-transform: uppercase;
}
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) .gfield--type-captcha > .gfield_label {
  display: none;
}
/* Checkboxes and radios are excluded: this is text-input styling, and applying
   it to a checkbox gave a 49x50 box, and worse, overrode the background and
   border Gravity Forms uses to show the ticked state — so a ticked consent box
   looked exactly like an unticked one. */
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) input[type]:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) select,
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) textarea {
  width: 100%;
  min-height: 50px;
  padding: 14px 16px;
  border: 1.5px solid rgba(31,20,20,0.15);
  border-radius: 10px;
  background: var(--hm-cream-soft);
  color: var(--hm-ink);
  font-family: var(--hm-font-sans);
  font-size: 15px;
  line-height: 1.35;
  outline: none;
  transition: border-color 0.15s var(--hm-ease-out), box-shadow 0.15s var(--hm-ease-out), background-color 0.15s var(--hm-ease-out);
}
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) input[type]:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) select:focus,
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) textarea:focus {
  border-color: var(--hm-red);
  background: var(--hm-cream);
  box-shadow: 0 0 0 4px rgba(255,75,62,0.12);
}

/* Consent tickbox — the marketing opt-in at the foot of the contact and quote
   forms, and the brochure form's own consent box. Size and shape only: Gravity
   Forms draws the control itself and owns the ticked state, so nothing here
   touches its background or border. */
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) .gfield--type-consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  border-radius: 5px;
}
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) select.gfield_select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231f1414' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) select.gfield_select.is-open {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5 6 1.5l5 5' fill='none' stroke='%231f1414' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) textarea {
  min-height: 130px;
  resize: vertical;
}
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) .gform_footer {
  margin: 18px 0 0;
  padding: 0;
}
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) .gform_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 196px;
  min-height: 46px;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--hm-red);
  color: var(--hm-cream);
  cursor: pointer;
  font-family: var(--hm-font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.18;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 0.18s var(--hm-ease-out), transform 0.18s var(--hm-ease-out);
}
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) input[type="submit"].gform_button.button {
  background-color: var(--hm-red) !important;
  background-image: none !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  color: var(--hm-cream) !important;
  font-family: var(--hm-font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.18 !important;
  text-transform: uppercase !important;
}
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) .gform_button:hover,
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) .gform_button:focus-visible {
  background: var(--hm-red-deep);
  transform: translateY(-1px);
}
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) input[type="submit"].gform_button.button:hover,
.hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) input[type="submit"].gform_button.button:focus-visible {
  background-color: var(--hm-red-deep) !important;
}
.hm-service-gravity-section {
  padding-right: clamp(20px, 5vw, 64px);
  padding-left: clamp(20px, 5vw, 64px);
  border-top: 1px solid rgba(31,20,20,0.08);
  background: var(--hm-cream);
}
.hm-service-gravity-section .gform_wrapper:is(.gravity-theme, .gform-theme) {
  width: min(calc(100vw - clamp(40px, 10vw, 128px)), 760px);
  margin-right: auto !important;
  margin-left: auto !important;
}
.hm-gravity-form-head {
  display: block;
  margin-right: auto;
  margin-bottom: 36px;
  margin-left: auto;
  max-width: 760px;
  text-align: center;
}
.hm-gravity-form-head h2 {
  max-width: none;
}
.hm-gravity-form-head p {
  margin: 12px auto 0;
  max-width: 620px;
}

/* ── Form tabs (hungry/gravity-form with a second form chosen) ─────────────
   Only the switcher is new: each panel still contains the untouched
   .hm-gravity-form-head + .hm-gravity-form-body markup, so the forms
   themselves render exactly as they do without tabs. The nav repeats the
   width expression used by .hm-service-gravity-section .gform_wrapper so it
   lines up with the form edge for edge at every viewport. */
.hm-form-tabs-nav {
  display: flex;
  width: min(calc(100vw - clamp(40px, 10vw, 128px)), 760px);
  margin: 0 auto 36px;
  border-bottom: 2px solid rgba(31, 20, 20, 0.12);
}
.hm-form-tab {
  flex: 1 1 50%;
  min-width: 0;
  padding: 14px 12px;
  margin-bottom: -2px;   /* sits the active underline on the nav's own border */
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  font-family: var(--hm-font-sans);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  color: var(--hm-slate);
  cursor: pointer;
  transition: color var(--hm-dur-fast) var(--hm-ease-out),
              border-color var(--hm-dur-fast) var(--hm-ease-out);
}
.hm-form-tab:hover {
  color: var(--hm-ink);
  opacity: 1;
}
.hm-form-tab.is-active {
  color: var(--hm-ink);
  border-bottom-color: var(--hm-ink);
}
.hm-form-tab:focus-visible {
  outline: 2px solid var(--hm-red);
  outline-offset: 2px;
}
.hm-form-tab-panel[hidden] {
  display: none;
}
@media (max-width: 640px) {
  .hm-form-tabs-nav {
    margin-bottom: 28px;
  }
  .hm-form-tab {
    padding: 12px 8px;
    font-size: 14px;
  }
}
/* The service pages used to force their enquiry form into a single column,
   which is the one thing that made it read as a different form from the one on
   /contact/. The client asked for them to match, so the override is gone and
   the form follows .hm-contact-gravity like every other: two columns, with the
   fields marked hm-gf-half sharing the first row. (HMS-56) */
@media (max-width: 1100px) {
  .detail-grid, .snapshot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-native-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .industry-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .testimonial-mascot {
    right: 0 !important;
    width: min(48vw, 320px) !important;
  }
}

.group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.course-micro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-team-bio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  padding: 32px 0;
}
.service-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(31,20,20,0.08);
  border-radius: 16px;
  background: rgba(31,20,20,0.08);
  overflow: hidden;
}
.svc-card {
  --svc-hover-bg: var(--hm-ink);
  --svc-hover-fg: var(--hm-cream);
  --svc-hover-icon-color: var(--hm-cream);
  min-width: 0;
  min-height: 170px;
  padding: 22px 20px;
  background: var(--hm-cream);
  color: var(--hm-ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.svc-card:hover,
.svc-card:focus-visible {
  background: var(--svc-hover-bg);
  color: var(--svc-hover-fg);
  text-decoration: none;
  opacity: 1;
  outline: none;
}
.svc-card:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(31,20,20,0.24);
}
.svc-card-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.addie-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter 0.18s ease;
}
.svc-card:hover .svc-card-icon-img,
.svc-card:focus-visible .svc-card-icon-img {
  background-color: var(--svc-hover-icon-color);
}
.svc-card-title {
  font-family: var(--hm-font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--hm-ink);
  transition: color 0.18s ease;
}
.svc-card-link {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hm-red);
  letter-spacing: 0.02em;
  transition: color 0.18s ease;
}
.svc-card:hover .svc-card-title,
.svc-card:hover .svc-card-link,
.svc-card:focus-visible .svc-card-title,
.svc-card:focus-visible .svc-card-link {
  color: var(--svc-hover-fg);
}
.colour-group {
  border-radius: 16px; padding: 20px; min-height: 100%;
  background: var(--group-color); color: var(--hm-ink);
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px;
}
.colour-group a,
.colour-chip {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(245,238,228,0.78); color: var(--hm-ink);
  font-size: 13px; font-weight: 700; text-decoration: none;
}
.colour-group a:hover,
.colour-chip:hover { background: var(--hm-cream); opacity: 1; text-decoration: none; }
.industry-group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.industry-colour-group { min-height: 0; height: 100%; }
.industry-colour-group:nth-child(4) { grid-column: span 2; }
.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.case-card {
  display: block;
  height: 100%;
  color: var(--hm-ink);
  text-decoration: none;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
}
.case-card:hover { opacity: 1; text-decoration: none; }
.case-logo-box {
  position: relative;
  min-height: 176px;
  aspect-ratio: 5 / 3;
  border-radius: 12px;
  background: var(--case-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding: 14px;
  overflow: hidden;
}
.case-logo-box img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  filter: brightness(0) invert(1);
}

/* Case Study Cards only (not the Blog Cards fallback icon, which also uses
   .case-logo-box) -- shrink the logo to 75% of the box and dock it to the
   bottom-left. */
.case-grid:not(.hm-blog-grid) .case-logo-box {
  justify-content: flex-start;
}
.case-grid:not(.hm-blog-grid) .case-logo-box img {
  max-width: 75%;
  max-height: 75%;
  align-self: flex-end;
}
/* Paper card option, switched from the top of the Case Studies list screen: the
   tiles share one paper background and each logo keeps its own colours, with the
   card's colour arriving on hover. */
/* Two entry points: the grid carries the flag for the case study grids, and the
   featured blog card carries it itself because it sits outside the grid. The
   generic category icon in a related-reading card is excluded -- it is drawn to
   be a white silhouette on colour, not artwork of its own. */
:is(.case-grid--paper, .case-card--paper) .case-logo-box:not(.case-logo-box--icon) {
  background: var(--hm-paper);
  transition: background-color var(--hm-dur-base) var(--hm-ease-out);
}
:is(.case-grid--paper, .case-card--paper) .case-logo-box:not(.case-logo-box--icon) img {
  filter: none;
}
:is(.case-grid--paper, .case-card--paper) .case-card:hover .case-logo-box:not(.case-logo-box--icon),
:is(.case-grid--paper, .case-card--paper) .case-card:focus-visible .case-logo-box:not(.case-logo-box--icon),
.case-card--paper:hover .case-logo-box:not(.case-logo-box--icon),
.case-card--paper:focus-visible .case-logo-box:not(.case-logo-box--icon) {
  background: var(--case-color);
}
.case-category-pill {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  max-width: calc(100% - 28px);
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--hm-dark-surface);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.client-logo-wall {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.client-logo-wall-panel {
  border: 1px solid rgba(31,20,20,0.08);
  border-radius: 12px;
  background: var(--hm-cream-soft);
  padding: clamp(14px, 2vw, 24px);
  overflow: hidden;
}
.client-logo-wall-panel img {
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
  margin: 0 auto;
}
.case-logo-text {
  font-family: var(--hm-font-display); font-weight: 900;
  font-size: clamp(28px, 3vw, 42px); line-height: 0.98; color: var(--hm-cream);
  text-align: left;
  width: 100%;
}
.case-meta {
  margin: 16px 2px 6px; font-size: 12px; color: var(--hm-ink);
  font-weight: 800; letter-spacing: 0.08em; text-transform: none;
}
.case-title {
  margin: 0 2px; font-family: var(--hm-font-display);
  font-weight: 800; font-size: 20px; letter-spacing: -0.01em; line-height: 1.2;
}
/* Case Study Cards only: title now renders before meta in the markup, so
   swap which one carries the 16px gap after the logo box -- keeps the
   same spacing rhythm, just reordered. */
/* On a case study card .case-title is the client name sitting above the
   project heading, so it is an eyebrow and takes caps (HMS-78). The project
   heading itself is .case-meta, which keeps its authored case. */
.case-grid:not(.hm-blog-grid) .case-title {
  margin: 16px 2px 6px;
  font-family: var(--hm-font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.case-grid:not(.hm-blog-grid) .case-meta {
  margin: 0 2px;
  font-family: var(--hm-font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-transform: none;
}
/* Resources category cards: the case study tile and palette, with an icon drawn
   for the topic centred in place of a client logo. The compound selector clears
   the .case-grid:not(.hm-blog-grid) rules above, which dock a client logo into
   the bottom-left corner at 75%. */
.case-grid.category-grid .case-logo-box--category {
  justify-content: center;
  align-items: center;
}
.case-grid.category-grid .case-logo-box--category img {
  width: auto;
  height: auto;
  max-width: 46%;
  max-height: 62%;
  align-self: center;
  object-fit: contain;
  /* The icons are drawn in their own colours, so unlike a client logo they are
     never knocked out to white -- in either card style. */
  filter: none;
}
/* The case study grid swaps its title and meta styles around; a category card
   has one line and it is the name, so it takes the display face directly. */
.case-grid.category-grid .case-title {
  margin: 16px 2px 6px;
  font-family: var(--hm-font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-transform: none;
}
.case-grid.category-grid .case-desc {
  margin: 0 2px;
  font-family: var(--hm-font-sans);
  font-size: 15px;
  line-height: 1.5;
}
/* The phone number and email address in the contact panel are links, but the
   design has them as plain text: same colour, no underline, in every state. The
   focus ring stays, so keyboard users can still see where they are. */
.hm-plain-link,
.hm-plain-link:link,
.hm-plain-link:visited,
.hm-plain-link:hover,
.hm-plain-link:focus,
.hm-plain-link:active {
  color: inherit;
  text-decoration: none;
  opacity: 1;
}
.hm-plain-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.page-character { width: 90%; max-width: 280px; height: auto; }
.page-character--grayscale { filter: grayscale(1) contrast(1.15); }
/* Both axes stay auto so the image keeps its own proportions and the element box
   hugs it — the fixed 350px height meant a portrait character was letterboxed
   into a 430px-wide box and painted as small as 243px across. The caps are max
   only, and the width cap keeps the 100% guard from the base img rule, because a
   bare max-width:430px would replace it and let the image overflow its column
   between the tablet breakpoint and about 1100px. */
.page-hero .page-character {
  width: auto;
  height: auto;
  max-width: min(100%, 430px);
  max-height: 470px;
}
.not-found-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
  gap: 40px;
  align-items: center;
}
.not-found-title {
  font-size: clamp(52px, 8vw, 104px);
  max-width: 10ch;
  margin: 12px 0 20px;
}
.not-found-lead {
  max-width: 520px;
  margin-bottom: 26px;
}
.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.not-found-art {
  display: flex;
  justify-content: center;
}

/* Responsive base */
@media (max-width: 760px) {
  :root {
    --hm-mobile-section-edge: 40px;
  }

  .container { padding: 0 20px; }
  .section { padding: 48px 0; }
  .section-lg { padding: 40px 0; }
  .legal-content-section { padding-top: 36px; }
  .nav-inner { padding: 14px 20px; }
  .footer-inner { padding: 0 20px; }
  .footer-grid,
  .footer-grid--columns-2,
  .footer-grid--columns-3,
  .footer-grid--columns-4 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .footer-logo img { width: min(190px, 72vw); }
  .ticker-track { font-size: 16px; }
  .group-grid, .case-grid { grid-template-columns: 1fr; }
  .case-card.blog-featured { grid-template-columns: 1fr; gap: 18px; }
  .detail-grid, .snapshot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-grid { grid-template-columns: 1fr; }
  .about-values-grid,
  .course-price-grid,
  .course-micro-grid,
  .not-found-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .not-found-art {
    justify-content: flex-end;
    margin-top: -36px;
  }
  .how-work-grid,
  .accordion-layout,
  .article-layout,
  .hm-content-layout,
  .hm-list-layout,
  .hm-pricing-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .container.article-layout {
    padding: 0;
  }
  .hm-content-section--reverse .hm-content-copy {
    order: 0;
  }
  .hm-content-section--heading-actions .hm-content-copy {
    display: block;
  }
  .hm-content-section--heading-actions .hm-content-actions {
    margin-top: 24px;
  }
  .hm-content-actions {
    align-items: flex-start;
  }
  .process-intro-action {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .process-intro-action .btn {
    margin-left: 0;
  }
  .accordion-intro,
  .article-toc,
  .article-toc-inner {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0 10px;
  }
  .article-toc-inner {
    padding-top: 20px;
  }
  .article-toc-inner::before {
    height: 2px;
  }
  .article-toc nav {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .accordion-panel > div {
    padding-right: 0;
  }
  .work-gallery-actions {
    justify-content: flex-start;
  }
  .work-gallery-loop {
    gap: 14px;
    padding-right: 14px;
    align-items: flex-start;
  }
  .work-gallery-marquee .work-gallery-card {
    flex: 0 0 100vw;
    width: 100vw;
  }
  .work-gallery-card img {
    aspect-ratio: 1000 / 517;
    height: auto;
  }
  .work-gallery-modal {
    padding: 14px;
  }
  .work-gallery-modal-shell {
    max-height: 88vh;
    border-radius: 14px;
  }
  .work-gallery-modal-image-wrap img {
    height: min(62vh, 520px);
  }
  .work-gallery-modal-footer {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }
  .industry-tile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .industry-tile {
    min-height: 56px;
    padding: 16px 14px;
    font-size: 18px;
    overflow-wrap: anywhere;
  }
  .hm-testimonial-kicker {
    align-items: flex-start;
  }
  .hm-testimonial-kicker svg {
    width: 48px;
    height: auto;
  }
  .hm-testimonials .hm-testimonial-panel blockquote {
    min-height: 340px;
  }
  .hm-testimonial-controls {
    justify-content: center;
  }
  .page-hero .page-character { max-width: min(100%, 300px); max-height: 340px; }
  .service-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .home-hero-grid,
  .contact-hero-grid,
  .contact-form-grid,
  .contact-field-row,
  .page-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .page-hero-grid {
    gap: 24px !important;
  }
  .home-hero-section {
    min-height: auto;
    padding: calc(var(--hm-nav-height) + 18px) 0 34px !important;
  }
  .home-hero-grid { gap: 32px !important; }
  .home-hero-title {
    font-size: clamp(44px, 12.9vw, 52px) !important;
    max-width: 100%;
    margin: 12px 0 16px !important;
    overflow-wrap: normal;
    word-break: normal;
  }
  .home-hero-title-line {
    display: block;
  }
  .home-hero-title + .lead {
    font-size: var(--hm-size-lead) !important;
    line-height: 1.45;
    margin-bottom: 32px !important;
  }
  .home-hero-actions {
    width: 100%;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px !important;
    position: relative;
    z-index: 3;
  }
  .home-hero-actions .btn {
    width: 100%;
    min-height: 46px;
    padding-inline: 18px;
  }
  :is(.entry-content, .hm-native-post-content, .article-copy, .hm-post-article) :is(a.btn, button.btn, .wp-block-button__link, .wp-block-file__button),
  .hm-contact-submit {
    display: inline-flex !important;
    width: 100% !important;
    max-width: 100%;
    justify-content: center;
    text-align: center;
  }
  :is(.home-hero-actions, .hm-content-actions, .work-gallery-actions, .not-found-actions, .hm-cta-actions, .entry-content .wp-block-buttons, .article-copy .wp-block-buttons) {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: stretch;
    justify-content: flex-start !important;
  }
  :is(.home-hero-actions, .hm-content-actions, .work-gallery-actions, .not-found-actions, .hm-cta-actions, .entry-content .wp-block-buttons, .article-copy .wp-block-buttons) > :is(.btn, .wp-block-button) {
    flex: 1 1 min(100%, 220px);
    min-width: min(100%, 220px);
    width: auto !important;
  }
  :is(.entry-content, .wp-block-post-content, .wp-site-blocks) .hm-cta-actions:has(> .btn:nth-child(2):last-child) {
    flex-wrap: nowrap !important;
  }
  :is(.entry-content, .wp-block-post-content, .wp-site-blocks) .hm-cta-actions:has(> .btn:nth-child(2):last-child) > .btn {
    flex: 1 1 0 !important;
    min-width: 0;
    padding-inline: 14px;
    width: auto !important;
  }
  :is(.entry-content .wp-block-buttons, .article-copy .wp-block-buttons) > .wp-block-button > .wp-block-button__link {
    width: 100% !important;
  }
  .section-head {
    padding-bottom: 32px;
  }
  .entry-content .section-head {
    align-items: stretch;
  }
  .entry-content .section-head > .btn {
    flex: 1 1 100%;
    width: 100% !important;
  }
  .hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) .gform_footer {
    width: 100%;
  }
  .hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) input[type="submit"].gform_button.button {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100%;
  }
  .home-hero-art {
    aspect-ratio: auto !important;
    justify-content: center !important;
    min-height: 0 !important;
    margin-top: 0;
    pointer-events: none;
    width: 100%;
  }
  .home-hero-mascot {
    width: min(39vw, 154px) !important;
    margin-top: 0;
    margin-inline: auto;
  }
  .stat-strip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 16px !important;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .stat-strip-item {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto;
    justify-items: center;
    align-items: start !important;
    min-height: 0 !important;
    gap: 8px !important;
    padding-top: 12px;
    padding-left: 0 !important;
    border-left: 0 !important;
    text-align: center;
  }
  .stat-strip-item:nth-child(1) { border-top: 3px solid var(--hm-red) !important; }
  .stat-strip-item:nth-child(2) { border-top: 3px solid var(--hm-sky) !important; }
  .stat-strip-item:nth-child(3) { border-top: 3px solid var(--hm-mustard) !important; }
  .stat-strip-item:nth-child(4) { border-top: 3px solid var(--hm-forest) !important; }
  .stat-strip-item > div:first-child {
    text-align: center;
  }
  .stat-strip-item > div:last-child {
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: center;
  }
  .process-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  .addie-grid {
    display: flex;
    gap: 14px !important;
    margin-inline: -20px;
    padding: 0 20px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .addie-grid::-webkit-scrollbar { display: none; }
  .addie-step {
    flex: 0 0 calc(100% - 64px);
    max-width: calc(100% - 64px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 38px 16px 16px !important;
  }
  .addie-step::before { left: 16px; }
  .addie-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 10px;
  }
  /* Tags renamed with the markup; the sizes are the ones this block already had
     on mobile, not the desktop figures. */
  .addie-step h4 { font-size: 26px; margin-bottom: 8px; }
  .addie-step h5 { font-size: 15px; margin-bottom: 8px; }
  .addie-step p { font-size: 14px; margin-bottom: 8px; }
  .process-step {
    grid-template-columns: 42px minmax(0, 1fr) 24px !important;
    gap: 10px !important;
    padding: 14px 12px !important;
  }
  .process-step-index {
    justify-self: end;
    letter-spacing: 0.08em !important;
  }
  .visual-mockup-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .testimonial-mascot {
    right: 0 !important;
    width: min(68vw, 240px) !important;
  }
  .colour-group a,
  .colour-chip {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .svc-card {
    min-height: 150px;
    padding: 18px 16px;
  }
  .svc-card-title {
    font-size: 18px;
    overflow-wrap: anywhere;
  }
  .contact-hero-grid { gap: 20px !important; }
  .contact-hero-art {
    justify-content: center !important;
    margin-top: 0;
    min-height: 0;
  }
  .contact-form-grid { gap: 28px !important; }
  .contact-field-row { gap: 14px !important; }
  .hm-post-article {
    padding: 40px 0 0;
  }
  .hm-post-hero,
  .hm-native-post-content {
    padding-left: 0;
    padding-right: 0;
  }
  .wp-block-group.hm-post-hero.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
    padding: 0 20px 40px;
  }
  /* The rule above strips the content padding on mobile and this one puts it
     back for an article. It used to name only .single-post, so case studies --
     their own post type since the migration, hence body.single-hm_case_study --
     lost it and ran to the screen edge. Any single article body qualifies now. */
  body:is(.single-post, .single-hm_case_study, .hm-case-study-post) .hm-native-post-content {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* Both titles used to carry their own mobile clamps here; they now follow the
     H1 token from the brand type scale at the end of this file. */
  .hm-post-index .page-hero,
  .hm-query-loop {
    padding-left: 20px;
    padding-right: 20px;
  }
  .hm-post-meta-row {
    gap: 8px 14px;
  }
  .hm-native-post-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px;
  }
  .article-copy .alignwide {
    max-width: calc(100vw - 40px);
  }
  .article-copy .alignfull {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
  }
  .article-copy .wp-block-columns {
    gap: 18px;
  }
  .hm-query-pagination {
    justify-content: flex-start !important;
    margin-top: 42px;
    padding-bottom: 12px;
  }
  .hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) .gform_fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .hm-contact-gravity .gform_wrapper:is(.gravity-theme, .gform-theme) .gfield.hm-gf-half {
    grid-column: 1 / -1;
  }
  :is(.entry-content, .wp-block-post-content, .wp-site-blocks) > .hm-section {
    margin-block: 0 !important;
    padding-top: var(--hm-mobile-section-edge) !important;
    padding-bottom: var(--hm-mobile-section-edge) !important;
  }
  :is(.entry-content, .wp-block-post-content, .wp-site-blocks) > .ticker.hm-section {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  :is(.entry-content, .wp-block-post-content, .wp-site-blocks) > .home-hero-section {
    padding-top: calc(var(--hm-nav-height) + 18px) !important;
    padding-bottom: var(--hm-mobile-section-edge) !important;
  }
  .hm-project-details.section-lg {
    padding-top: 0 !important;
  }
  :is(.entry-content, .wp-block-post-content, .wp-site-blocks) > .hm-section > :first-child {
    margin-top: 0 !important;
  }
  :is(.entry-content, .wp-block-post-content, .wp-site-blocks) > .hm-section > :last-child {
    margin-bottom: 0 !important;
  }
  :is(.entry-content, .wp-block-post-content, .wp-site-blocks) > .hm-section > .container > :first-child {
    margin-top: 0 !important;
  }
  :is(.entry-content, .wp-block-post-content, .wp-site-blocks) > .hm-section > .container > :last-child {
    margin-bottom: 0 !important;
  }
  .stat-strip-grid,
  .addie-grid {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-gallery-marquee {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .work-gallery-track {
    animation: none;
  }
  .work-gallery-modal,
  .work-gallery-modal-shell {
    animation: none;
  }
}

@media (max-width: 960px) {
  .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .testimonial-mascot {
    right: 0 !important;
    width: min(48vw, 320px) !important;
  }
  .accordion-item > button > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 760px) {
  .about-story-grid,
  .about-values-grid,
  .course-price-grid,
  .course-micro-grid,
  .hm-team-bio-grid,
  .not-found-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .case-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .accordion-item > button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: center;
  }
  .home-faq-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  .home-faq-intro {
    position: static !important;
  }
  .home-faq-question {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 36px;
  }
  .home-faq-question-text {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* ── Project Details (hungry/project-details) ─────────────────────────────── */
.hm-project-details.section-lg { padding-top: 0; }
.hm-project-details.hm-section.section-lg .container { padding: 0; }
.hm-project-details__heading { margin-bottom: 12px; }
.hm-project-details__body { margin-bottom: 20px; }
.hm-project-details__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 999px; font-weight: 600; text-decoration: none; margin-bottom: 32px; }
.hm-project-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.hm-project-detail-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  background: #FAF5EC;
  border-radius: 16px;
  padding: 24px;
}
.hm-project-detail-card__img { margin-bottom: 0; flex-shrink: 0; }
.hm-project-detail-card__img img { width: 48px; height: 48px; object-fit: contain; }
.hm-project-detail-card__text { display: flex; flex-direction: column; gap: 6px; }
.hm-project-detail-card__name { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; opacity: 1; }
.hm-project-detail-card__detail { font-size: 15px; line-height: 1.55; }

/* ── Author Strip (hungry/author-strip) ────────────────────────────────────── */
.hm-author-strip__heading { margin-bottom: 12px; }
.hm-author-strip__body { margin-bottom: 20px; }
.hm-author-strip__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 999px; font-weight: 600; text-decoration: none; margin-bottom: 32px; }
.hm-author-strip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.hm-author-card { display: flex; flex-direction: column; gap: 12px; }
.hm-author-card img { width: 100%; max-width: 220px; height: auto; border-radius: 8px; object-fit: cover; }
.hm-author-card__text { font-weight: 600; font-size: 16px; line-height: 1.4; }

@media (max-width: 767px) {
    .hm-project-details-grid,
    .hm-author-strip-grid { grid-template-columns: 1fr; }
    .hm-project-detail-card { grid-column: span 1 !important; }
}

/* hungry/split-section: never wrap on desktop; explicit mobile stacking */
@media (max-width: 767px) {
  .hm-split-row {
    flex-direction: column !important;
  }
  .hm-split-row > .hm-split-image,
  .hm-split-row > .hm-split-text {
    flex: 1 1 auto !important;
    width: 100%;
    min-width: 0 !important;
  }
  .hm-split-row > .hm-split-text { order: 1; }
  .hm-split-row > .hm-split-image { order: 2; }
}

/* hungry/article-cta: force text-above-image on mobile regardless of desktop imagePosition */
@media (max-width: 767px) {
  .hm-cta-grid,
  .hm-cta-stack {
    display: flex !important;
    flex-direction: column !important;
  }
  .hm-cta-text { order: 1; }
  .hm-cta-image { order: 2; margin-bottom: 0 !important; margin-top: 24px; }
}

/* Linked card headlines (hungry/content-cards, and the icon items inside
   hungry/content-section). The heading owns the colour, so the anchor inherits
   it instead of taking the default link red. */
a.hm-card-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}
a.hm-card-title-link:hover,
a.hm-card-title-link:focus-visible {
  color: var(--hm-red);
  text-decoration: underline;
}
.hm-content-cardlet-body a {
  color: inherit;
  text-decoration: underline;
}
.hm-content-cardlet-body a:hover,
.hm-content-cardlet-body a:focus-visible {
  color: var(--hm-red);
}

/* Clickable chip links (hungry/list-section, chips variant) */
a.chip--link {
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, color 0.15s;
}
a.chip--link:hover {
  background: var(--hm-ink);
  color: var(--hm-cream);
}

/* List-section intro sticks to top while the list scrolls past */
.hm-list-section .hm-list-intro {
  position: sticky;
  top: calc(var(--hm-nav-height, 73px) + 24px);
  align-self: flex-start;
}
@media (max-width: 767px) {
  .hm-list-section .hm-list-intro {
    position: static;
    align-self: auto;
  }
}

/* Blog grid pagination */
.hm-blog-pagination {
  margin-top: 20px;
  padding-top: 20px;
  display: flex;
  justify-content: center;
}
.hm-blog-pagination ul {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.hm-blog-pagination ul li a,
.hm-blog-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 2px solid var(--hm-ink);
  font-size: 14px;
  font-weight: 700;
  color: var(--hm-ink);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.hm-blog-pagination ul li a:hover {
  background: var(--hm-ink);
  color: var(--hm-cream);
}
.hm-blog-pagination ul li span.current {
  background: var(--hm-red);
  border-color: var(--hm-red);
  color: #fff;
}


/* Center + make responsive the YouTube embeds wrapped in .hm-video-center (animation,
   instructional-design(-plus), learning-design pages) - previously rendered at the
   raw HTML width/height attributes (e.g. 500x281), left-aligned, not responsive. */
.hm-video-center .wp-block-embed {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.hm-video-center .wp-block-embed iframe {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  border: 0;
}

/* Optional sizing applied through the Video size controls in Gutenberg. */
.wp-block-embed.hm-resizable-video {
  width: min(var(--hm-video-width, 100%), 100%);
  max-width: 100%;
}
.wp-block-embed.hm-resizable-video.aligncenter {
  margin-left: auto !important;
  margin-right: auto !important;
}
.wp-block-embed.hm-resizable-video .wp-block-embed__wrapper {
  width: 100%;
}
.wp-block-embed.hm-resizable-video--fixed-ratio .wp-block-embed__wrapper {
  aspect-ratio: var(--hm-video-aspect-ratio);
}
.wp-block-embed.hm-resizable-video .wp-block-embed__wrapper > iframe {
  display: block;
  width: 100% !important;
  max-width: none !important;
}
.wp-block-embed.hm-resizable-video--fixed-ratio .wp-block-embed__wrapper > iframe {
  height: 100% !important;
  aspect-ratio: auto;
}

/* left text, no image layout */
.hm-content-section--left .hm-content-layout {
  display: block;
}
.hm-content-section--left .hm-content-copy {
  max-width: none;
  margin-left: 0;
  margin-right: auto;
}

/* Content Section width controls. The default follows theme.json's content
   width; editors can choose narrower copy or the native Wide/Full block widths. */
.hm-content-section.alignwide > .hm-content-layout {
  max-width: 1440px;
}
.hm-content-section.alignfull > .hm-content-layout {
  max-width: none;
}
.hm-content-section.hm-content-width--container .hm-content-copy {
  max-width: none;
}
.hm-content-section.hm-content-width--wide .hm-content-copy {
  width: 100%;
  max-width: 980px;
}
.hm-content-section.hm-content-width--reading .hm-content-copy {
  width: 100%;
  max-width: 760px;
}
.hm-content-section.hm-content-width--narrow .hm-content-copy {
  width: 100%;
  max-width: 640px;
}
/* --below is listed alongside --left now that it shares the same measure: if an
   editor picks a narrower text width, the copy has to stay pinned to the left
   margin rather than centring itself in the container. */
.hm-content-section--left.hm-content-width--wide .hm-content-copy,
.hm-content-section--left.hm-content-width--reading .hm-content-copy,
.hm-content-section--left.hm-content-width--narrow .hm-content-copy,
.hm-content-section--below.hm-content-width--wide .hm-content-copy,
.hm-content-section--below.hm-content-width--reading .hm-content-copy,
.hm-content-section--below.hm-content-width--narrow .hm-content-copy {
  margin-left: 0;
  margin-right: auto;
}

/* text left, image below (full-width within container) */
/* align-items:flex-start matters here. The base .hm-content-layout sets
   align-items:center for its two-column grid; switching to a column flex without
   resetting it turns that into horizontal centring, which pushed the copy into
   the middle of the container instead of onto the left margin. */
.hm-content-section--below .hm-content-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
/* Same measure as the "Left text, no image" layout: the copy runs the full
   container width. The old 760px cap left it short of the sections above and
   below it, which read as an indent even once the alignment was right. */
.hm-content-section--below .hm-content-copy {
  max-width: none;
  margin-left: 0;
  margin-right: auto;
}
.hm-content-section--below .hm-content-media {
  width: 100%;
}
.hm-content-section--below .hm-content-media img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* text centred, image below at the same width as the centred text column */
.hm-content-section--center-below .hm-content-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hm-content-section--center-below .hm-content-copy {
  max-width: 780px;
  text-align: center;
}
.hm-content-section--center-below .hm-content-copy ul,
.hm-content-section--center-below .hm-content-copy ol {
  text-align: center;
}
.hm-content-section--center-below .hm-content-copy > p:not(.lead) {
  text-align: center;
}
.hm-content-section--center-below .hm-content-actions {
  justify-content: center;
}
.hm-content-section--center-below .hm-content-media {
  width: 100%;
  max-width: 780px;
}
.hm-content-section--center-below .hm-content-media img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Video grid: 2-column responsive */
.hm-video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.hm-video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 10px;
}
.hm-video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 640px) {
  .hm-video-grid { grid-template-columns: 1fr; }
}

/* Blog Cards: No Image Thumbnail variant */
.hm-blog-list--no-image .case-card {
  border: 1px solid rgba(31,20,20,0.14);
  border-radius: 14px;
  background: var(--hm-card-bg, var(--hm-cream));
  padding: 26px;
}
.hm-blog-list--no-image .case-card.blog-featured {
  display: block;
}
.hm-blog-list--no-image .case-desc {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hm-ink);
  opacity: 0.82;
}
.hm-blog-list--no-image .case-card .btn {
  margin-top: 18px;
}

/* Shared styling for long-form guide posts using the .hm-article wrapper (centralised from per-post <style> blocks) */
.hm-article{max-width:1200px;margin:0 auto;padding:0 20px;font-family:'Gilroy',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:var(--hm-size-body);font-weight:500;color:#1E1414;line-height:1.7}
.hm-article h2{font-family:'Margo Beuys',Georgia,serif;font-size:32px;font-weight:700;color:var(--hm-ink);margin:48px 0 24px 0;line-height:1.2}
.single-post .hm-article h2{color:var(--hm-ink)}
.hm-article h3{font-family:'Margo Beuys',Georgia,serif;font-size:24px;font-weight:700;color:#1E1414;margin:32px 0 16px 0;line-height:1.2}
.single-post .hm-article h3{text-transform: none}
.hm-article h4{font-family:'Margo Beuys',Georgia,serif;font-size:22px;font-weight:700;color:#1E1414;margin:28px 0 14px 0;line-height:1.25}
.hm-article h5{font-family:'Gilroy',sans-serif;font-size:18px;font-weight:700;color:#1E1414;margin:20px 0 10px 0;line-height:1.3}
.hm-article p{margin:0 0 18px 0}
.hm-article ul{margin:0 0 18px 0;padding-left:24px}
.hm-article li{margin-bottom:8px}
.hm-article strong,.hm-article b{font-weight:700}
.hm-article a{color:#FF4B3E;text-decoration:none}
.hm-article a:hover{text-decoration:underline}
.hm-article img{max-width:1200px;width:100%;height:auto;display:block;margin:24px 0}
@media(min-width:1024px){.hm-article h2{font-size:36px}}

/* ADDIE Infographic - Full Width Section (centralised from ai-in-learning-design post) */
.hm-addie-full{background-color:#F5EEE4;padding:60px 20px;margin:48px 0;max-width:1024px}
.hm-addie-inner{max-width:1000px;margin:0 auto}
.hm-addie-grid{display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:768px){.hm-addie-grid{grid-template-columns:1fr 1fr;gap:48px 64px}}
.hm-addie-item{display:flex;flex-direction:column;align-items:flex-start}
@media(min-width:768px){.hm-addie-item--last{grid-column:1/-1;justify-self:center;max-width:420px}}
.hm-addie-icon{width:100px;height:100px;margin-bottom:16px}
.hm-addie-icon img{width:100%;height:100%;object-fit:contain}
@media(min-width:768px){.hm-addie-icon{width:110px;height:110px}}
@media(min-width:1024px){.hm-addie-icon{width:120px;height:120px}}
.hm-addie-title{font-family:'Margo Beuys',Georgia,serif;font-size:22px;font-weight:700;color:#1E1414;text-transform: none;letter-spacing:0.03em;margin:0 0 6px 0;line-height:1.2}
@media(min-width:1024px){.hm-addie-title{font-size:26px}}
.hm-addie-tagline{font-family:'Gilroy',sans-serif;font-size:16px;font-weight:700;color:#1E1414;margin:0 0 12px 0}
.hm-addie-desc{font-family:'Gilroy',sans-serif;font-size:18px;font-weight:500;color:#1E1414;line-height:1.7;margin:0 0 8px 0}
.hm-addie-desc:last-child{margin-bottom:0}

/* Icon Row - Same width as article */
.hm-stage{display:flex;flex-direction:row;align-items:flex-start;gap:20px;margin:32px 0;padding:20px 0;border-top:1px solid #E5E5E5}
.hm-stage__icon{flex-shrink:0;width:80px}
/* The icon is a wp:image, so `.article-copy figure{margin:38px 0}` bleeds onto it: the 38px
   top margin pushed the icon below the heading, and the bottom margin made the icon column
   taller than short stage bodies, padding those rows out unevenly. */
figure.wp-block-image.hm-stage__icon{margin:0}
.hm-stage__icon img{width:100%;height:auto}
.hm-stage__body{flex:1}
.hm-stage__body h3{font-family:'Margo Beuys',Georgia,serif;font-size:22px;font-weight:700;color:#1E1414;margin:0 0 8px 0}
/* Stage headings stay in sentence case. The article h3 rules uppercase every
   other h3 in post content, and these are step titles rather than section
   labels -- two classes here to clear .hm-case-study-post/.single-post. */
.article-copy .hm-stage__body h3,
.hm-native-post-content .hm-stage__body h3 {
  text-transform: none;
}
.hm-stage__body p{margin:0 0 12px 0}
.hm-stage__body ul{margin:0 0 12px 0;padding-left:20px}
.hm-stage__body li{margin-bottom:6px}
@media(max-width:600px){.hm-stage{flex-direction:column;gap:16px}.hm-stage__icon{width:60px}
  /* stacked: keep the icon-to-text gap the page already had */
  figure.wp-block-image.hm-stage__icon{margin:0 0 38px}}

/* Round 5 shared feedback */
.hm-post-single .accordion-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
.hm-post-single .accordion-intro {
  position: static;
  max-width: 760px;
}
.hm-hungry-for-more-link {
  border-color: rgba(31,20,20,0.16) !important;
  background: var(--hm-cream) !important;
}
.hm-content-copy a:not(.btn),
.legal-copy a:not(.btn) {
  color: var(--hm-ink);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.hm-content-copy a:not(.btn):hover,
.legal-copy a:not(.btn):hover {
  color: var(--hm-slate);
}
.hm-post-single:not(.hm-case-study-post) .hm-article-cta .btn {
  background: var(--hm-cream) !important;
  border: 1.5px solid var(--hm-ink) !important;
  color: var(--hm-ink) !important;
}

/* ==========================================================================
   BRAND TYPE SCALE — SITE-WIDE
   Source: Hungry Minds Brand Guideline v1.0, §03 "Type scale".

   Desktop renders the guideline's px column literally. Mobile (<=960px) drops
   to a proportionally smaller scale expressed in rem, so the text still answers
   to the reader's browser text-size setting. 1rem = 16px (see
   colors_and_type.css), which is why the rem numbers below read as the px they
   resolve to.

                     desktop        mobile
     H1                 80px    52px / 3.25rem
     H2                 52px    34px / 2.125rem
     H3                 36px    26px / 1.625rem
     H4                 28px    22px / 1.375rem
     H5                 22px    20px / 1.25rem
     H6                 18px    17px / 1.0625rem
     p, li, lead        17px    17px / 1.0625rem
     small              14px    14px / 0.875rem
     eyebrow            12px    12px / 0.75rem

   960px, not a narrower phone breakpoint: that is where the header swaps the
   nav for the mobile menu, so it is this site's own boundary between desktop
   and everything smaller.

   One deliberate departure from the guideline: lead is 17px, not 20px, so it
   matches a normal paragraph.

   OUT of the scale, on purpose — these are labels and UI chrome, not content
   headings, and the guideline's H1-H6 column does not describe them:
     .article-copy h4            15px  small-caps label above blog paragraphs
     .footer h5                  11px  footer column labels
     .team-name, .detail-name,
     .snapshot-*, .faq summary,
     card and tile titles              nested detail headings inside blocks
     .case-card.blog-featured h2 46px  blog-grid featured teaser (inline style)
     .nav-links, .btn, captions        interface text
   ========================================================================== */

/* The scale is carried by the tokens in colors_and_type.css, so every selector
   already reading var(--hm-size-*) follows along and one media query re-points
   the whole scale for mobile. What is left here is the components that hardcode
   a px clamp instead of reading a token. */

/* H1: page hero, home hero, blog and case-study post title, archive title,
   404 title. */
.page-hero h1,
.home-hero-title,
.hm-post-title,
.hm-index-title,
.not-found-title {
  font-size: var(--hm-size-h1);
}

/* H2: block section headlines (shared helper and the inline duplicates), the
   CTA block, and the headings inside blog and case-study article copy. */
.section-head h2,
.h2,
.hm-cta-headline,
.article-copy h2,
.hm-article h2 {
  font-size: var(--hm-size-h2);
}

/* The CTA confirmation variant renders as the page H1, so it follows H1. Must
   stay after the H2 rule: a confirmation headline carries both classes. */
.hm-cta-headline--confirmation {
  font-size: var(--hm-size-h1);
}

.article-copy h3,
.hm-article h3 {
  font-size: var(--hm-size-h3);
}
.hm-article h4 {
  font-size: var(--hm-size-h4);
}
.hm-article h5 {
  font-size: var(--hm-size-h5);
}

/* Post description under a blog or case-study title — a lead paragraph. */
.hm-post-description {
  font-size: var(--hm-size-lead);
}

@media (max-width: 960px) {
  :root {
    --hm-size-h1:      3.25rem;     /* 52px */
    --hm-size-h2:      2.125rem;    /* 34px */
    --hm-size-h3:      1.625rem;    /* 26px */
    --hm-size-h4:      1.375rem;    /* 22px */
    --hm-size-h5:      1.25rem;     /* 20px */
    --hm-size-h6:      1.0625rem;   /* 17px */
    --hm-size-body:    1.0625rem;   /* 17px */
    --hm-size-lead:    1.0625rem;   /* 17px */
    --hm-size-small:   0.875rem;    /* 14px */
    --hm-size-eyebrow: 0.75rem;     /* 12px */
  }

  /* The home hero rule further up the file is itself !important, so overriding
     it needs the same weight. */
  .home-hero-title {
    font-size: var(--hm-size-h1) !important;
  }
}

/* =========================================================================
   Resources: hub grid and topic pages

   Built from the Figma exports "Resource new" (hub) and "Resources hub"
   (topic). Every colour in both designs is an existing token: the sections run
   cream-soft / red / cream / cream-soft / paper down the page, and the case
   tiles cycle the same mustard-forest-blue-brown palette as the case study
   cards.
   ====================================================================== */

/* --- Topic hero ------------------------------------------------------ */
.hm-topic-hero {
  padding: 60px 0 10px;
}
.hm-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--hm-size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hm-red);
  margin-bottom: 18px;
}
.hm-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.hm-breadcrumb a:hover {
  text-decoration: underline;
}
.hm-breadcrumb svg {
  opacity: 0.75;
}
/* The page heading runs the full measure here, unlike the page hero, which
   caps at 12ch to leave room for its character illustration. */
.hm-topic-hero .hm-topic-title {
  font-family: var(--hm-font-display);
  font-weight: 900;
  font-size: var(--hm-size-h1);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: none;
  margin: 0 0 22px;
}
.hm-topic-intro {
  max-width: none;
  margin: 0;
}
.hm-topic-intro p {
  margin: 0 0 12px;
}
.hm-topic-intro p:last-child {
  margin-bottom: 0;
}
.hm-topic-note {
  margin-top: 26px;
  padding: 22px 28px;
  border-radius: var(--hm-radius-lg);
  background: var(--hm-cream);
  color: var(--hm-fg-muted);
  font-size: 15px;
  line-height: 1.62;
}
.hm-topic-note p {
  margin: 0 0 10px;
}
.hm-topic-note p:last-child {
  margin-bottom: 0;
}

/* --- Topic article grid ---------------------------------------------- */
.hm-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
}
.hm-topic-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(30, 20, 20, 0.15);
  border-radius: 14px;
  background: var(--hm-cream-soft);
  overflow: hidden;
}
.hm-topic-card-art {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--hm-paper);
}
/* Absolutely positioned, not height:100%: a percentage height against a box
   whose own height comes from aspect-ratio resolves to auto, so the image
   sized itself and stretched the card art to its own proportions. */
.hm-topic-card-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hm-topic-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 24px 26px;
}
.hm-topic-card-title {
  font-family: var(--hm-font-display);
  font-weight: 900;
  font-size: 23px;
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 10px 0 12px;
}
.hm-topic-card-title a {
  color: inherit;
  text-decoration: none;
}
/* opacity:1 undoes the site-wide a:hover{opacity:.75}. Without it the brand red
   is painted at three quarters strength and comes out salmon, which is what the
   "lighter red" reports were seeing. Same reason the nav rules carry it. */
.hm-topic-card-title a:hover {
  color: var(--hm-red);
  opacity: 1;
}
.hm-topic-card-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--hm-fg-muted);
  margin: 0 0 18px;
}
/* margin-top:auto pushes the Read more line to the foot of the card so it
   lines up across a row whose excerpts run to different lengths. */
.hm-topic-card-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-weight: 700;
  font-size: 15px;
  color: var(--hm-ink);
  text-decoration: none;
  align-self: flex-start;
}
/* Only the thing under the pointer reddens. Hovering anywhere in the card used
   to light up Read more as well, so pointing at the title turned two things red
   at once and neither looked like the one you were about to click. */
.hm-topic-card-more:hover,
.hm-topic-card-more:focus-visible {
  color: var(--hm-red);
  text-decoration: none;
  opacity: 1;
}

/* --- Numbered pagination --------------------------------------------- */
.hm-topic-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 44px;
}
.hm-topic-pagination .page-numbers,
.hm-topic-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(30, 20, 20, 0.22);
  border-radius: var(--hm-radius-pill);
  font-weight: 700;
  font-size: 15px;
  color: var(--hm-ink);
  text-decoration: none;
  background: transparent;
}
.hm-topic-pagination a.page-numbers:hover,
.hm-topic-pagination-next:hover {
  background: var(--hm-cream);
  text-decoration: none;
}
.hm-topic-pagination .page-numbers.current {
  background: var(--hm-red);
  border-color: var(--hm-red);
  color: var(--hm-cream);
}
.hm-topic-pagination .page-numbers.dots {
  border-color: transparent;
  padding: 0 4px;
  min-width: 0;
}

/* --- Red CTA strip ---------------------------------------------------- */
.hm-cta-strip {
  padding: 32px 0;
}
.hm-cta-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.hm-cta-strip-title {
  font-family: var(--hm-font-display);
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: inherit;
  margin: 0;
}

/* --- Client work: in action ------------------------------------------ */
.hm-case-feature-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin-bottom: 32px;
}
.hm-case-feature-art {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  aspect-ratio: 8 / 5;
  padding: 26px;
  border-radius: 14px;
  background: var(--case-color);
  overflow: hidden;
}
/* The client marks are single-colour logos dropped onto the tile, the same
   treatment the case study cards give them. */
.hm-case-feature-art img {
  max-width: 62%;
  max-height: 62%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.hm-case-feature-art .case-logo-text {
  color: var(--hm-cream);
}
.hm-case-feature-art.case-card--paper {
  background: var(--hm-paper);
}
.hm-case-feature-art.case-card--paper img {
  filter: none;
}
.hm-case-feature-title {
  font-family: var(--hm-font-display);
  font-weight: 900;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 12px 0 16px;
}
.hm-case-feature-title a {
  color: inherit;
  text-decoration: none;
}
/* opacity:1 undoes the site-wide a:hover{opacity:.75} (see the .hm-topic-card-title
   note above) -- without it the brand red is painted at three quarters strength
   and reads as pink/salmon. */
.hm-case-feature-title a:hover {
  color: var(--hm-red);
  opacity: 1;
}
.hm-case-feature-copy .lead {
  max-width: 560px;
  margin: 0 0 22px;
}
.hm-case-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
}
.hm-case-feature-card {
  display: block;
  color: var(--hm-ink);
  text-decoration: none;
}
.hm-case-feature-card .hm-case-feature-art {
  aspect-ratio: 5 / 3;
  margin-bottom: 16px;
}
.hm-case-feature-card .eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--hm-ink);
}
.hm-case-feature-card .case-title {
  display: block;
}
.hm-case-feature-card:hover {
  opacity: 1;
}
.hm-case-feature-card:hover .case-title {
  color: var(--hm-red);
}

/* --- Content section: heading left, copy right ------------------------ */
.hm-content-section--heading-split .hm-content-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  gap: 64px;
  align-items: start;
}
.hm-content-section--heading-split .hm-content-head h2 {
  margin: 0;
}
.hm-content-section--heading-split .hm-content-copy > p:first-child {
  margin-top: 0;
}
.hm-content-cardlets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 30px;
}
.hm-content-cardlet {
  padding: 24px;
  border-radius: var(--hm-radius-lg);
  background: var(--hm-paper);
}
.hm-content-cardlet-icon {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-bottom: 46px;
}
.hm-content-cardlet-title {
  font-family: var(--hm-font-display);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.hm-content-cardlet-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--hm-fg-muted);
  margin: 0;
}

/* --- Category cards, photograph variant (the Resources hub) -----------
   Four classes deep on purpose: the base .case-grid:not(.hm-blog-grid) rules
   above shrink a logo to 75% and dock it bottom-left, which is right for a
   client mark and wrong for a photograph that has to fill its tile. */
.case-grid.category-grid--image .case-logo-box.case-logo-box--category-image {
  aspect-ratio: 3 / 2;
  min-height: 0;
  padding: 0;
  background: var(--hm-paper);
  align-items: stretch;
  justify-content: stretch;
}
/* Absolutely positioned for the same reason as the article card art: a
   percentage height inside an aspect-ratio box resolves to auto. */
.case-grid.category-grid--image .case-logo-box.case-logo-box--category-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  object-fit: cover;
  filter: none;
  align-self: auto;
}
.case-grid.category-grid--image .case-title {
  margin-top: 16px;
}

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 1024px) {
  .hm-topic-grid,
  .hm-case-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hm-case-feature-lead {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .hm-content-section--heading-split .hm-content-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 720px) {
  .hm-topic-hero {
    padding: 40px 0 36px;
  }
  .hm-topic-grid,
  .hm-case-feature-grid,
  .hm-content-cardlets {
    grid-template-columns: minmax(0, 1fr);
  }
  .hm-cta-strip-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .hm-topic-note {
    padding: 18px 20px;
  }
}

/* --- Corrections after the first pass against the exports ------------- */

/* A topic page reads sentence case throughout: its section headlines are
   written the way the design writes them, not shouted like the rest of the
   site. Same exception the .page rule already makes, scoped to this template. */
.hm-topic-page h2.hm-headline {
  text-transform: none;
}

/* Related topics: the design docks a white line icon in the bottom-left of the
   coloured tile, the same treatment a related-reading card gives its icon --
   not the centred, own-colour artwork the hub grid was built with. */
.hm-topic-page .case-grid.category-grid .case-logo-box--category {
  justify-content: flex-start;
  align-items: flex-end;
}
.hm-topic-page .case-grid.category-grid .case-logo-box--category img {
  max-width: 60%;
  max-height: none;
  width: auto;
  height: 60px;
  align-self: flex-end;
  filter: brightness(0) invert(1);
}
.hm-topic-page .case-grid--paper.category-grid .case-logo-box--category img {
  filter: none;
}

/* =========================================================================
   Client feedback, 26 Aug 2026 (Marker.io HMS-48, HMS-54, HMS-60)

   Caps are for eyebrows only, and red is for eyebrows and for the words
   deliberately accented inside an H2. Everything else reads as written.
   ====================================================================== */

/* HMS-74, 7 September 2026: regular headings, buttons, labels and table
   headers retain their authored case. Buttons and eyebrow styles force uppercase (HMS-76). */

/* --- Article body, client feedback 26 Aug 2026 (HMS-53, HMS-61) --------- */

/* One divider per section. `.article-copy * + h2` draws a rule above every
   heading that has content before it, but several articles also have an
   explicit separator block sitting there, so the two stacked up. Where the
   content supplies its own line, the heading gives up its border. */
.article-copy hr + h2,
.hm-native-post-content hr + h2 {
  padding-top: 0;
  border-top: 0;
}

/* Links in article copy are underlined, never bold. The bold is not automatic:
   it is authored as <a><strong>…</strong></a> in the post, and only on some
   links, which is why one link in a paragraph reads heavier than the next.
   Neutralised here rather than stripped from the content, so the markup an
   editor wrote is left alone and this stays one place to undo. */
:is(.article-copy, .hm-native-post-content) a:not(.btn):not(.wp-block-button__link) :is(strong, b) {
  font-weight: inherit;
}

/* --- Case study category filters (HMS-57) ------------------------------ */

.hm-case-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 32px;
}
/* Typography matches .btn (13px, 0.08em, caps) so the filters read as buttons
   rather than as a second, larger button style of their own (HMS-77). */
.hm-case-filter {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(30, 20, 20, 0.22);
  border-radius: var(--hm-radius-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: var(--hm-ink);
  text-decoration: none;
  background: transparent;
  transition: background-color 0.18s var(--hm-ease-out), color 0.18s var(--hm-ease-out), border-color 0.18s var(--hm-ease-out);
}
.hm-case-filter:hover,
.hm-case-filter:focus-visible {
  background: var(--hm-cream);
  color: var(--hm-ink);
  text-decoration: none;
}
.hm-case-filter.is-active {
  background: var(--hm-red);
  border-color: var(--hm-red);
  color: var(--hm-cream);
}
.hm-case-filter.is-active:hover {
  background: var(--hm-red);
  color: var(--hm-cream);
}

/* The filters belong to the grid below them, so on the archive they sit under
   the heading rather than floating in the section's own top padding. */
.hm-case-filters + .case-grid {
  margin-top: 0;
}

@media (max-width: 720px) {
  .hm-case-filters {
    gap: 8px;
    margin-bottom: 24px;
  }
  .hm-case-filter {
    min-height: 34px;
    padding: 0 13px;
    font-size: 12px;
  }
}

/* The breadcrumb half of an archive eyebrow is a link back up the branch. It
   keeps the eyebrow's own red and weight; the underline only appears on hover,
   so the line still reads as a label rather than as navigation chrome. */
.eyebrow a {
  color: inherit;
  text-decoration: none;
}
.eyebrow a:hover,
.eyebrow a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  opacity: 1;
}

/* --- Search bar vs the menu (HMS-65) ----------------------------------
   The header is a three-column grid and the expanded search lives in the right
   column. The middle column is sized by its content, and .nav-links had a fixed
   32px gap, so it could not give any width back: the search grew 148px and
   simply painted over "Contact".

   Contact has since moved into the About dropdown, and while the search is open
   the two things to its right give up their labels: the phone number, which
   already did, and the CTA. Both keep their place in the row and come back the
   moment the field closes.

   The menu items themselves never move. That was tried and rejected: tightening
   their gaps shifted the links sideways under the pointer, which reads worse
   than the problem it solved. */
.nav-inner:has(.nav-search:focus-within) .nav-right .btn {
  /* font-size:0 drops the label and keeps the arrow, which carries its own
     dimensions -- the same trick .nav-phone uses above. */
  font-size: 0;
  gap: 0;
  padding-inline: 14px;
}

/* HMS-76: button labels use caps; regular headings retain authored case. */
body .hm-work .hm-btn,
.hm-btn,
.wp-block-button__link,
.wp-block-file__button,
.hm-case-filter,
.hm-project-details__btn { text-transform: uppercase; }