/* ===== Sticky topbar: Back + ExpertVoice logo left, eyebrow right =====
             Mirrors the hero's own .ev-amb-obar (same logo size, same eyebrow
             treatment) so the bar that slides in reads as the same brand bar. */
          :root{ --ev-topbar-h:64px; }

          /* Deep links (?anchor=) scroll with scrollIntoView, which honours
             scroll-margin-top, so an anchored section never lands under the bar. */
          [data-anchor]{ scroll-margin-top:calc(var(--ev-topbar-h) + 12px); }

          .ev-topbar{
            position:fixed;
            top:0; left:0; right:0;
            z-index:1000;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
            height:var(--ev-topbar-h);
            padding:0 2.25rem;
            background:rgba(244,246,248,.92);
            -webkit-backdrop-filter:blur(10px);
            backdrop-filter:blur(10px);
            box-shadow:0 2px 12px rgba(0,0,0,.06);
            transform:translateY(-100%);
            opacity:0;
            transition:transform .3s ease, opacity .3s ease;
            pointer-events:none;
          }

          .ev-topbar.is-visible{
            transform:translateY(0);
            opacity:1;
            pointer-events:auto;
          }

          .ev-topbar__left{
            display:flex;
            align-items:center;
            gap:.4rem;
            min-width:0;
          }

          .ev-topbar__back{
            display:inline-flex;
            align-items:center;
            gap:6px;
            flex:0 0 auto;
            background:transparent;
            border:none;
            color:#1a1a1a;
            font-weight:600;
            font-size:.95rem;
            line-height:1;
            cursor:pointer;
            padding:8px 10px;
            border-radius:8px;
            -webkit-appearance:none;
            appearance:none;
          }

          .ev-topbar__back:hover{ background:rgba(0,0,0,.05); }
          .ev-topbar__back:active{ transform:scale(.97); }

          .ev-topbar__back svg{
            width:18px;
            height:18px;
            display:block;
            flex:0 0 auto;
          }

          .ev-topbar__logo{
            width:203px;
            height:35px;
            flex:0 0 auto;
            background-position:0 50%;
            background-size:contain;
            background-repeat:no-repeat;
          }

          .ev-topbar__eyebrow{
            flex:0 1 auto;
            min-width:0;
            text-align:right;
            font-size:.68rem;
            font-weight:500;
            letter-spacing:.18em;
            text-transform:uppercase;
            color:#6b7280;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
          }

          @media screen and (max-width:767.98px){
            :root{ --ev-topbar-h:54px; }

            /* Keep the topbar permanently visible on mobile, regardless of scroll.
               Overrides the hidden transform/opacity above; same specificity, later
               in source, so it wins when .is-visible is absent. */
            .ev-topbar{
              height:var(--ev-topbar-h);
              padding:0 1rem;
              transform:translateY(0);
              opacity:1;
              pointer-events:auto;
            }

            /* Back label + logo + eyebrow all have to clear 375px, so the logo and
               the eyebrow both give back a few px here rather than truncating. */
            .ev-topbar__logo{ width:146px; height:27px; }
            .ev-topbar__back{ padding:8px 6px; font-size:.9rem; }
            .ev-topbar__eyebrow{ font-size:.58rem; letter-spacing:.12em; }

            /* The topbar already carries the logo + eyebrow on mobile, so the hero's
               own bar is redundant. Hide it and offset the article by the bar height
               so nothing sits under the fixed bar. */
            .ev-article.ev-amb .ev-amb-obar{ display:none; }
            .ev-article.ev-amb{ padding-top:var(--ev-topbar-h); }
          }

            /* --- featured ambassador ID line, set into the hero under the date --- */
        .ev-amb-hero-id{ display:flex; align-items:center; gap:14px; margin:1.6rem 0 0; }
        .ev-amb-hero-id .ev-amb-idphoto{ position:relative; width:56px; height:56px; flex:none; }
        .ev-amb-hero-id .ev-amb-photo{ width:100%; height:100%; box-shadow:0 0 0 2px rgba(255,255,255,.9); }
        .ev-amb-hero-id .ev-amb-badge{
          right:-3px; bottom:-1px; width:23px; height:23px;
          background-size:11px; box-shadow:0 2px 7px rgba(0,0,0,.25);
        }
        .ev-amb-hero-idlabel{
          font-size:.64rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
          line-height:1.2; color:rgba(255,255,255,.72); margin:0 0 4px;
        }
        .ev-amb-hero-idname{ font-size:1.04rem; font-weight:600; line-height:1.2; color:#fff; margin:0; }
        .ev-amb-hero-idrole{ font-size:.82rem; font-weight:500; line-height:1.3; color:#9fd0f5; margin:3px 0 0; }
        @media screen and (max-width:767.98px){
          .ev-amb-hero-id{ margin-top:1.25rem; }
        }

            .section {
          margin-bottom: .25rem;
      }

      .ev-amb-ostage {
        position: relative;
        display: flex;
        align-items: center;
        min-height: min(58vw, 520px);
        background: #2C2327 12% 56% / cover no-repeat;
        background-size: 100%;
        margin-bottom: 3.25rem;
    }

    .ev-amb-ostage {
      position: relative;
      display: flex;
      align-items: center;
      min-height: min(58vw, 520px);
      background: #2C2327 12% 56% / cover no-repeat;
      background-size: cover;
      margin-bottom: 3.25rem;
      background-position: 50% 50%;
  }