/* ============================================================
   Blog: the hub, the article pages and the homepage section.
   Generated markup lives in service-pages-src/build_blog.py.
   The homepage carries an inline copy of this file (between the
   BLOG-CSS markers), so the Webflow build picks it up.
   ============================================================ */

.blog-hero {
  min-height: 0;
  padding-bottom: clamp(1rem, 3vw, 2rem);
}

.blog-hero .cp-hero-layout {
  grid-template-columns: minmax(0, 1fr);
}

.blog-hero .svp-hero-lead {
  max-width: 34rem;
}

.blog-list {
  padding: clamp(1rem, 3vw, 2rem) 0 var(--svp-section-y, clamp(4rem, 8vw, 7rem));
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  height: 100%;
  padding: 0.8rem 0.8rem 1.5rem;
  border: 1px solid rgba(46, 46, 46, 0.08);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 42px rgba(46, 46, 46, 0.07);
  transition:
    transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 400ms ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 56px rgba(46, 46, 46, 0.11);
}

.blog-card-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 20px;
  background: #eeecf0;
}

.blog-card-media {
  position: relative;
}

.blog-media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.blog-article-figure {
  position: relative;
}

.blog-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.blog-card:hover .blog-card-media img {
  transform: scale(1.04);
}

.blog-card-body {
  display: grid;
  gap: 0.7rem;
  padding: 0 0.7rem;
}

.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.8rem;
  color: rgba(46, 46, 46, 0.6);
  font-size: 0.85rem;
}

.blog-card-cat {
  color: var(--pink);
  font-weight: 600;
}

.blog-card-title {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.7vw, 1.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.blog-card-title a {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
}

.blog-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.blog-card-summary {
  color: rgba(46, 46, 46, 0.68);
  font-size: 1rem;
  line-height: 1.5;
}

.blog-card-link {
  margin-top: auto;
  padding: 0 0.7rem;
  color: #2e2e2e;
  font-size: 0.95rem;
  font-weight: 600;
}

.blog-card-link span {
  display: inline-block;
  margin-left: 0.3em;
  color: var(--pink);
  transition: transform 300ms ease;
}

.blog-card:hover .blog-card-link span {
  transform: translateX(4px);
}

/* ---- Homepage section ------------------------------------------- */

/* The closing collage has empty space above its artwork; pull it up under
   the blog section so the two read as neighbours. */
.blog-section + .cta-section {
  padding-top: 0;
}

.blog-section + .cta-section .cta-art {
  margin-top: clamp(-8rem, -8vw, -4.5rem);
}

.blog-section {
  position: relative;
  z-index: 1;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 5vw, 4.5rem);
}

.blog-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.4rem 2rem;
  margin-bottom: clamp(1.4rem, 2.8vw, 2.2rem);
}

.blog-section-title {
  display: grid;
  justify-items: start;
  gap: 1rem;
}

.blog-heading {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

/* A global span rule would shrink the dot to 16px; keep it the heading's size. */
.blog-heading .blog-dot {
  color: var(--pink);
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.blog-section-lead {
  max-width: 28rem;
  color: rgba(46, 46, 46, 0.68);
  font-size: var(--body-copy-size, 1.0625rem);
  font-weight: var(--body-copy-weight, 400);
  letter-spacing: var(--body-copy-letter-spacing, 0);
  line-height: var(--body-copy-line-height, 1.5);
}

/* The homepage button. The base .cta-hero-button is a fixed-width,
   centred button; here it sizes to its label and sits at the row's end. */
.blog-section-head .blog-all-button {
  width: auto;
  min-width: 13.5rem;
  margin: 0;
  padding: 0 1.9rem;
}

@media (max-width: 720px) {
  .blog-section-head .blog-all-button {
    min-width: 0;
  }
}

/* ---- Article page ------------------------------------------------ */

.blog-article-head {
  padding: clamp(7rem, 12vw, 9.5rem) 0 clamp(1.8rem, 3.5vw, 2.8rem);
}

.blog-article-shell {
  width: 100%;
}

.blog-article-body {
  max-width: 46rem;
  margin: 0 auto;
}

.blog-article-head .blog-article-shell {
  text-align: center;
}

.blog-article-title,
.blog-article-lead {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.blog-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(46, 46, 46, 0.72);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.blog-back:hover,
.blog-back:focus-visible {
  color: #2e2e2e;
}

.blog-article-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 1rem;
  color: rgba(46, 46, 46, 0.62);
  font-size: 0.9rem;
}

.blog-article-meta span + span::before {
  content: "\00b7";
  margin-right: 1rem;
}

.blog-article-title {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

.blog-article-lead {
  margin-top: 1.1rem;
  color: rgba(46, 46, 46, 0.72);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.55;
}

.blog-article {
  padding: 0 0 clamp(3.5rem, 7vw, 6rem);
}

.blog-article-figure {
  margin: 0 0 clamp(2.2rem, 5vw, 3.8rem);
  overflow: hidden;
  border-radius: 24px;
  background: #eeecf0;
}

.blog-article-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

.blog-article-body {
  color: rgba(46, 46, 46, 0.86);
  font-size: clamp(1.06rem, 1.2vw, 1.15rem);
  line-height: 1.75;
}

.blog-article-body > * + * {
  margin-top: 1.35rem;
}

.blog-article-body h2 {
  margin-top: 2.8rem;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.blog-article-body h3 {
  margin-top: 2.2rem;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.blog-article-body h2 + *,
.blog-article-body h3 + * {
  margin-top: 0.9rem;
}

.blog-article-body ul {
  padding-left: 1.3rem;
  list-style: disc;
}

.blog-article-body li + li {
  margin-top: 0.5rem;
}

.blog-article-body li::marker {
  color: #ff0099;
}

.blog-article-body blockquote {
  margin: 2.2rem 0;
  padding-left: 1.4rem;
  border-left: 3px solid #ff0099;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.blog-article-cta {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border-radius: 24px;
  background: #2e2e2e;
  color: #f4f4f4;
}

.blog-article-cta h2 {
  color: #f4f4f4;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.blog-article-cta p {
  margin: 0.6rem 0 1.4rem;
  color: rgba(244, 244, 244, 0.78);
  line-height: 1.55;
}

.blog-more {
  padding: 0 0 var(--svp-section-y, clamp(4rem, 8vw, 7rem));
}

.blog-more-title {
  margin-bottom: 1.4rem;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.blog-more .blog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blog-more .blog-card-title {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}

@media (max-width: 1024px) {
  .blog-grid,
  .blog-more .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (min-width: 721px) and (max-width: 1024px) {
  .blog-more .blog-card:nth-child(3) {
    display: none;
  }
}

@media (max-width: 720px) {
  .blog-grid,
  .blog-more .blog-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-heading {
    letter-spacing: -0.035em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-media-video {
    display: none;
  }

  .blog-card,
  .blog-card-media img,
  .blog-card-link span {
    transition: none;
  }
}

/* ---- Hub: search and filter ------------------------------------- */

.blog-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.6rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.blog-search {
  position: relative;
  flex: 1 1 18rem;
  max-width: 26rem;
}

.blog-search-icon {
  position: absolute;
  top: 50%;
  left: 1.1rem;
  transform: translateY(-50%);
  color: rgba(46, 46, 46, 0.5);
  pointer-events: none;
}

.blog-search input {
  width: 100%;
  min-height: 3.2rem;
  padding: 0 1.2rem 0 2.9rem;
  border: 1px solid rgba(46, 46, 46, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: #2e2e2e;
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  appearance: none;
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.blog-search input::placeholder {
  color: rgba(46, 46, 46, 0.42);
}

.blog-search input:focus {
  border-color: rgba(255, 0, 153, 0.45);
  box-shadow: 0 0 0 4px rgba(255, 0, 153, 0.09);
}

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.blog-chip {
  min-height: 2.6rem;
  padding: 0 1.1rem;
  border: 1px solid rgba(46, 46, 46, 0.16);
  border-radius: 999px;
  background: transparent;
  color: #2e2e2e;
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease;
}

.blog-chip:hover {
  border-color: rgba(46, 46, 46, 0.5);
}

.blog-chip.is-active {
  border-color: #2e2e2e;
  background: #2e2e2e;
  color: #f4f4f4;
}

.blog-chip:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

.blog-card[hidden] {
  display: none;
}

.blog-empty {
  padding: 2rem 0;
  color: rgba(46, 46, 46, 0.68);
  font-size: 1.05rem;
}

@media (max-width: 720px) {
  .blog-search {
    max-width: none;
  }

  .blog-filters {
    flex-wrap: nowrap;
    margin-right: -1.25rem;
    padding-right: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .blog-filters::-webkit-scrollbar {
    display: none;
  }

  .blog-chip {
    flex: 0 0 auto;
  }
}

/* Homepage preview: a touch smaller than the hub so it sits as a quiet
   closing section rather than a feature. */
.blog-section .blog-grid {
  gap: clamp(0.9rem, 1.6vw, 1.3rem);
}

.blog-section .blog-card-title {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
}

/* ---- Hero ------------------------------------------------------- */

/* The hub sits on the plain page colour; no pink glow behind the title. */
.blog-hero-hub .svp-hero-glow {
  display: none;
}

.blog-hero .svp-hero-lead {
  max-width: 30rem;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.55;
}

/* ---- Width: follow the nav bar's grid ----------------------------- */

/* The nav bar, and every other section on the page, sit on the boxed guide
   width (1180px). The default shell is wider (1240px), so pin the blog's
   shells to the same guide. */
.blog-section .section-shell,
.blog-list .section-shell,
.blog-more .section-shell,
.blog-hero .section-shell {
  width: var(--boxed-guide-width, min(1180px, calc(100vw - 2.5rem)));
}

/* ---- Hub hero: the animated keys, floating right of the title ------ */

.blog-hero-hub .cp-hero-layout {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}

/* Transparent video, shown whole (never cropped), drifting gently. It is
   free of the page guides: it sits past the right edge of the grid and
   hangs down over the search and filters when it needs to. */
.blog-hero-art {
  /* Safari / iOS play an opaque MP4 whose backdrop can come out a shade
     lighter than the page, which showed as a pale tilted rectangle.
     darken keeps only the pixels darker than the page, so that rectangle
     disappears and the dark figure and keys are untouched. */
  mix-blend-mode: darken;
  position: absolute;
  z-index: 1;
  top: -4.5rem;
  right: clamp(-7rem, -5vw, -1rem);
  width: clamp(15rem, 25vw, 23rem);
  pointer-events: none;
  animation: blog-art-float 6s ease-in-out infinite;
}

.blog-hero-video {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
}

@keyframes blog-art-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1.5deg);
  }

  50% {
    transform: translateY(-18px) rotate(1.5deg);
  }
}

@media (max-width: 1024px) {
  .blog-hero-hub .cp-hero-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-hero-art {
    position: relative;
    top: auto;
    right: auto;
    justify-self: center;
    width: min(14.5rem, 56vw);
    /* The clip has about 20% empty frame above the figure: pull the
       neighbours in so the gap around it is small. */
    margin: -1.75rem 0 -0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-hero-art {
    animation: none;
  }
}

/* ---- Homepage: FAQ boxes and blog cards reveal on scroll ----------- */

/* --rv runs 0 to 1 as the box scrolls into view (set by the script at the
   end of index.html); --rd is its side: -1 or 1, or a fan across a row.
   Individual transform properties, so hover transforms and the existing
   [data-settle] scale are untouched. Without the script --rv is 1 and
   nothing moves. */
[data-card-reveal] {
  translate:
    calc(var(--rd, 0) * (1 - var(--rv, 1)) * 2.6rem)
    calc((1 - var(--rv, 1)) * 5.5rem);
  rotate: calc(var(--rd, 0) * (1 - var(--rv, 1)) * 5deg);
  opacity: min(1, calc(var(--rv, 1) * 1.8));
  will-change: translate, rotate, opacity;
}

@media (max-width: 768px) {
  [data-card-reveal] {
    translate:
      calc(var(--rd, 0) * (1 - var(--rv, 1)) * 1.4rem)
      calc((1 - var(--rv, 1)) * 3.5rem);
    rotate: calc(var(--rd, 0) * (1 - var(--rv, 1)) * 3deg);
  }
}

/* Card date: a step smaller than the category beside it. */
.blog-card-meta > span:not(.blog-card-cat) {
  font-size: 0.75rem;
  letter-spacing: 0.01em;
}

/* Room under the title for the floating keys, so they hang in the hero
   instead of covering the search and filters. */
.blog-hero-hub {
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

@media (max-width: 1024px) {
  .blog-hero-hub {
    padding-bottom: clamp(1rem, 3vw, 2rem);
  }
}

/* Hub title: larger than the article titles. */
.blog-hero-hub .svp-hero-title {
  font-size: clamp(3.4rem, 7.2vw, 6.4rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

@media (max-width: 768px) {
  .blog-hero-hub .svp-hero-title {
    font-size: clamp(2.8rem, 13vw, 3.8rem);
  }
}

/* ---- Article call-to-action: centred copy, a person on the Enter key
   to its right ------------------------------------------------------ */

.blog-cta {
  position: relative;
  overflow: hidden;
}

.blog-cta .svp-cta-inner {
  min-height: clamp(18rem, 30vw, 26rem);
  align-content: center;
}

/* Not bound to the page guide: it sits towards the right edge of the
   section, past the nav bar's edge on wide screens. */
.blog-cta .blog-cta-figure {
  position: absolute;
  right: clamp(-2rem, 1vw, 3rem);
  bottom: 0;
  width: clamp(11rem, 22vw, 19rem);
  pointer-events: none;
}

.blog-cta .blog-cta-figure img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  /* The artwork is an animation (the person drops onto the Enter key), so
     the figure only fills about 89% x 82% of its frame across all frames;
     it is cropped to that union box (571 x 929 of 640 x 1138).
     Call to action on tablets and phones: the title and paragraph are
     centred and as wide as the page guide allows, the button sits under
     them, and the figure is a decoration on the right that hangs down over
     the top of the footer (about three quarters of it below the section's
     edge). h = figure height = width x 1.627. */
  .blog-cta {
    --cta-fig: min(47vw, 14.5rem);
    display: block;
    position: relative;
    z-index: 3;
    overflow: visible;
    padding: 1rem 0 3.25rem;
  }

  .blog-cta .section-shell {
    position: relative;
    z-index: 1;
    width: var(--boxed-guide-width, min(1180px, calc(100vw - 2.5rem)));
    margin: 0 auto;
    padding: 0;
  }

  .blog-cta .svp-cta-inner {
    min-height: 0;
  }

  .blog-cta .svp-cta-copy {
    justify-items: center;
    text-align: center;
    gap: 0.9rem;
    max-width: none;
    margin-inline: auto;
  }

  .blog-cta .svp-cta-title {
    font-size: clamp(1.7rem, 7.4vw, 2.5rem);
  }

  .blog-cta .svp-cta-copy p {
    max-width: none;
    font-size: 1rem;
    line-height: 1.55;
  }

  .blog-cta .svp-button {
    width: auto;
  }

  .blog-cta .blog-cta-figure {
    position: absolute;
    z-index: 4;
    right: calc(-2% - var(--cta-fig) * 0.047);
    left: auto;
    top: auto;
    bottom: calc(var(--cta-fig) * 1.627 * -0.563 - var(--cta-fig) * 0.359);
    width: calc(var(--cta-fig) * 1.121);
    max-width: none;
    margin: 0;
    aspect-ratio: 640 / 1138;
    overflow: visible;
    pointer-events: none;
  }

  .blog-cta .blog-cta-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* Trim the empty space around the call-to-action: the clip has a lot of
   room above Michael, and the article and CTA both pad their edges. */
.blog-article {
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.blog-cta {
  padding-top: 0;
}


/* ---- Article hero: photo with the title laid over it ----------------- */

.blog-article {
  padding-top: clamp(7.5rem, 11vw, 9rem);
}

.blog-article-hero {
  position: relative;
  margin-bottom: clamp(2.4rem, 5vw, 4rem);
  border-radius: 28px;
  overflow: hidden;
  background: #2e2e2e;
}

.blog-article-hero .blog-article-figure {
  margin: 0;
  border-radius: 0;
}

.blog-article-hero .blog-article-figure img {
  aspect-ratio: 21 / 10;
  min-height: 26rem;
}

.blog-article-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30, 30, 30, 0.82) 0%, rgba(30, 30, 30, 0.45) 42%, rgba(30, 30, 30, 0) 72%);
  pointer-events: none;
}

.blog-article-hero-copy {
  position: absolute;
  z-index: 1;
  left: clamp(1.4rem, 4vw, 3.4rem);
  right: clamp(1.4rem, 4vw, 3.4rem);
  bottom: clamp(1.4rem, 4vw, 3.2rem);
  color: #f4f4f4;
  text-align: left;
}

.blog-article-hero .blog-article-meta {
  justify-content: flex-start;
  margin: 0 0 1rem;
  color: rgba(244, 244, 244, 0.8);
}

.blog-article-hero .blog-card-cat {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: #ff0099;
  color: #fff;
  font-weight: 600;
}

.blog-article-hero .blog-article-meta span + span::before {
  color: rgba(244, 244, 244, 0.5);
}

.blog-article-hero .blog-article-title {
  max-width: 44rem;
  margin: 0;
  color: #f4f4f4;
  font-size: clamp(2rem, 4.8vw, 3.8rem);
}

.blog-article-hero .blog-article-lead {
  max-width: 38rem;
  margin: 0.9rem 0 0;
  color: rgba(244, 244, 244, 0.86);
}

@media (max-width: 720px) {
  .blog-article-hero .blog-article-figure img {
    aspect-ratio: 4 / 5;
    min-height: 0;
  }
}


/* ---- Smaller titles on tablets and phones ------------------------------ */
@media (max-width: 900px) {

  .blog-more-title,
  html body .bp-page .bp-rich h2,
  html body .bp-page h2.bp-heading {
    font-size: clamp(1.45rem, 6.4vw, 2.1rem);
    line-height: 1.08;
  }

  .blog-card-title {
    font-size: clamp(1.05rem, 4.9vw, 1.3rem);
    line-height: 1.12;
  }
}


/* The "More to read" cards on article pages sit exactly on the page guide
   (the shell's own side padding is zero), like the hub cards, at every width. */
.blog-more .section-shell {
  padding-left: 0;
  padding-right: 0;
}

/* The call-to-action figure hangs down over the top of the footer. <main> clips on both axes (service-page.css),
   which cut him off flat at the end of the page, so here it clips sideways only (same fix as the Team page), and sits above the footer so the Enter key is not hidden behind it. */
html body main:has(.blog-cta) {
  position: relative;
  z-index: 3;
  overflow-x: clip;
  overflow-y: visible;
}

/* No reading-progress line across the top of article pages. */
.bp-progress {
  display: none;
}