.past-event-strip { margin-top: 150px; background: linear-gradient(135deg, #f5ede0 0%, #ece0c8 100%); border-bottom: 1px solid #d4c6a8; padding: 2rem 1.5rem; min-height: 110px; }
      .past-event-strip__inner { max-width: 1320px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.85rem 1.5rem; align-items: center; }
      .past-event-strip__eyebrow { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: #a64d3a; font-weight: 600; }
      .past-event-strip__title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.4rem; color: #1e1e1c; margin: 0; line-height: 1.2; }
      .past-event-strip__sub { font-size: 0.9rem; color: #5a5855; margin: 0; }
      .past-event-strip__cta { margin-left: auto; padding: 0.55rem 1.1rem; background: #784356; color: #faf7f1; border-radius: 4px; text-decoration: none; font-size: 0.85rem; letter-spacing: 0.04em; transition: background 0.2s; }
      .past-event-strip__cta:hover { background: #5e3142; color: #faf7f1; }
      /* Solid beige header on ALL device sizes for Past Event pages — the
         top bar reads as a continuation of the banner gradient and the banner
         content sits in a clean full block below it. */
      .site-header,
      .site-header--scrolled {
        background: #f5ede0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
      .site-logo__img { filter: none !important; }
      .nav-hamburger__line { background: #1e1e1c !important; }
      .nav-hamburger__label { color: #1e1e1c !important; }
      .header-phone,
      .header-phone-mobile,
      .site-logo__text-fallback,
      .site-logo__text-fallback span { color: #1e1e1c !important; }
      /* Tablet header is 110px tall (portrait stack with phone under logo) */
      @media (min-width: 769px) and (max-width: 1024px) {
        .past-event-strip { margin-top: 110px; }
      }
      /* Desktop wide — bump unscrolled header to 200px and centre the logo,
         then re-assert the native scrolled-state numbers with !important so
         they win when --scrolled is present (my !important on .site-header
         otherwise beats the native .site-header--scrolled rule). */
      @media (min-width: 1025px) {
        .site-header { height: 150px !important; }
        .site-logo { top: 50% !important; }
        .site-logo__img { height: 105px !important; }
        /* Scrolled — restore the original compact 64px header / 34px logo */
        .site-header--scrolled { height: 64px !important; }
        .site-header--scrolled .site-logo { top: 55% !important; }
        .site-header--scrolled .site-logo__img { height: 34px !important; }
      }
      /* Tablet & mobile — banner shrinks, site header goes fully transparent */
      @media (max-width: 768px) {
        /* Push the banner below the 90px fixed mobile header so its CTA never
           sits on top of the header phone/Book-Direct buttons. */
        .past-event-strip { margin-top: 90px; padding: 1.25rem 1rem; min-height: 0; }
        .past-event-strip__inner { max-width: 100%; padding-left: 0.25rem; padding-right: 0.25rem; gap: 0.55rem 1rem; }
        .past-event-strip__title { font-size: 1.2rem; }
        .past-event-strip__sub { font-size: 0.82rem; line-height: 1.35; }
        .past-event-strip__eyebrow { font-size: 0.65rem; }
      }
      @media (max-width: 600px) {
        .past-event-strip__cta { margin-left: 0; width: 100%; text-align: center; margin-top: 0.4rem; padding: 0.7rem 1.1rem; }
      }
      @media (max-width: 896px) and (orientation: landscape) {
        /* Landscape mobile — header is ~64px so reduce the offset accordingly */
        .past-event-strip { margin-top: 64px; }
      }
            @media (max-width: 400px) {
        .past-event-strip { padding: 1rem 0.85rem; }
        .past-event-strip__title { font-size: 1.1rem; }
        .past-event-strip__cta { font-size: 0.8rem; }
      }