/* ── Paste everything below into your WordPress CSS ── */
 
  .aco-card {
    position: relative;
    width: 560px;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.45);
    display: block;
    text-decoration: none;
    background: #0e1117;
  }
 
  .aco-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.35;
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
 
  .aco-card:hover .aco-card__img {
    opacity: 0.65;
    transform: scale(1.04);
  }
 
  /* Single flex container anchored to the bottom.
     Paragraph is first in DOM → renders above H3.
     When paragraph is hidden (height collapses via opacity only),
     H3 stays at the bottom. When paragraph reveals, it pushes H3 down
     — but since the container is bottom-anchored it actually grows upward,
     so H3 stays put and paragraph appears above it. */
  .aco-card__content {
    position: absolute;
    bottom: 24px;
    left: 32px;
    right: 32px;
    display: flex;
    flex-direction: column;
    z-index: 2;
  }
 
  /* Paragraph — hidden at rest, no layout space taken */
  .aco-card__body {
    margin: 0 0 10px;
    font-size: 16px;
		font-weight: 550;
    line-height: 1.6;
    color: #f5f2ee;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
      opacity    0.38s ease 0.10s;
  }
 
  /* H3 — always visible at the bottom */
  .aco-card__heading {
    margin: 0;
    font-size: clamp(28px, 2.8vw, 32px);
    font-weight: 800;
    line-height: 3.5;
    color: #f5f2ee;
    letter-spacing: -0.01em;
  }
 
  /* Accent line */
  .aco-card__line {
    position: absolute;
    bottom: 0;
    left: 32px;
    width: 0;
    height: 3px;
    background: #6a6a6a;
    border-radius: 2px;
    transition: width 0.50s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
    z-index: 2;
  }
 
  /* ── Hover ── */
  .aco-card:hover .aco-card__body {
    max-height: 200px;
    opacity: 1;
  }
 
  .aco-card:hover .aco-card__line {
    width: calc(100% - 64px);
  }
 
  /* Reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .aco-card__img,
    .aco-card__body,
    .aco-card__line { transition: none; }
    .aco-card:hover .aco-card__img  { opacity: 0.15; }
    .aco-card:hover .aco-card__body { max-height: 200px; opacity: 1; }
    .aco-card:hover .aco-card__line { width: calc(100% - 64px); }
  }