/* ====================
HERO SECTION IMAGE AND TEXT BOX
==================== */
.duo-section {
    display: flex;
    align-items: stretch;      /* image and text-stack match height */
    gap: var(--gap-lg);
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  .duo-section--reverse {
    flex-direction: row-reverse; /* image right, text left — no HTML reorder needed */
  }
 
  .duo-media {
    flex: 1 1 0;
    min-width: 0;
    overflow: visible;
    border-radius: 4px;
  }
  .duo-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    margin-top: 2px;
  }
 
  /* Hero: square image */
  .hero-media { aspect-ratio: 1 / 1; }
 
  /* Sub-hero: real image proportions, 800 x 968 */
  .sub-hero-media { aspect-ratio: 800 / 968; }
 
  /* Text stacks: flex columns. flex-grow per box is set to its
     LINE COUNT below, so each box's share of the stack's height
     matches how much text it holds — that's what fixes the
     "too much / too little padding" look. */
  .text-stack {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
 
  /* One shared padding rule instead of six different ones */
  .text-box {
    display: flex;
    align-items: center;
    padding: 5px 5px;
    border: 3.25px solid;
    border-radius: 20px;
    box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84);
  }
  .text-box p { margin: 0; line-height: 1.15; }
 
  /* Hero boxes: 3 lines / 3 lines / 2 lines -> flex-grow 3 / 3 / 2 */
  .text-box-1 { background: #fdfce0; border-color: #2e6b4f; flex-grow: 3; }
  .text-box-1 p { color: #2e6b4f; font-size: 2.5rem; }
  .text-box-2 { background: #fbeef5; border-color: #3a3a7c; flex-grow: 3; }
  .text-box-2 p { color: #a85a96; font-size: 2.4rem; }
  .text-box-3 { background: #fbeef5; border-color: #3a3a7c; flex-grow: 2; }
  .text-box-3 p { color: #a85a96; font-size: 2.4rem; }
 
  /* Sub-hero boxes: 4 lines / 4 lines / 3 lines -> flex-grow 4 / 4 / 3 */
  .text-box-4 { background: #fdfce0; border-color: #2e6b4f; flex-grow: 4; }
  .text-box-4 p { color: #2e6b4f; font-size: 2.65rem; }
  .text-box-5 { background: #fbeef5; border-color: #3a3a7c; flex-grow: 4; }
  .text-box-5 p { color: #a85a96; font-size: 2.5rem; }
  .text-box-6 { background: #fbeef5; border-color: #3a3a7c; flex-grow: 3; }
  .text-box-6 p { color: #a85a96; font-size: 2.5rem; }
 
  @media (max-width: 768px) {
    .duo-section,
    .duo-section--reverse {
      flex-direction: column;
    }
    .text-box p { font-size: clamp(1.1rem, 4.5vw, 1.6rem); }
  }