/* ===== 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:#F7F7F7;
      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;
    }
    /* WordPress version: no in-app exit to go back to, so the Back button is hidden. */
    .ev-topbar .ev-topbar__back{ display:none; }

    .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:#5b6270;
      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; }
  }