/* Real Visit Plano condensed title face (bundled in the theme) */
  @font-face{
    font-family:"Helvetica LT W01 Ult Comp";
    src:url(../Fonts/ultcomp.woff2) format("woff2");
    font-display:swap;
  }
  :root{
    --vp-blue:#00486c;        /* banner bar + title box (exact Animate fill) */
    --vp-blue-d:#003a58;
    --vp-navy:#244664;
    --vp-gold:#f4973a;        /* brand accent orange (exact Animate fill) — decorative use */
    --vp-link:#f6ac5c;        /* link-text orange on blue — AA compliant (>=4.5:1) */
    --vp-focus:#ffd23f;
    --vp-strip-h:440px;       /* image strip height (desktop) */
    --vp-active-grow:5.5;     /* open panel ~65% width */
    --vp-img-w:65vw;          /* fixed image width = expanded panel (set by JS) */
  }
  *{box-sizing:border-box;}
  body{margin:0;background:#eceae6;color:#222;font-family:Lato,system-ui,sans-serif;}
  .wrap{max-width:1369px;margin:0 auto;}
  .demo-note{font-size:14px;color:#555;padding:18px 18px 0;}
  .demo-note code{background:#fff;padding:1px 5px;border-radius:3px;}
  .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

  /* ===================================================================
     BANNER
     =================================================================== */
  .vp-banner{position:relative;width:100%;background:var(--vp-blue);overflow:visible;}

  /* ---- image strip (desktop accordion / mobile swiper) ---- */
  .vp-strip{display:flex;height:var(--vp-strip-h);margin:0;padding:0;list-style:none;overflow:hidden;}
  .vp-cat{position:relative;min-width:0;}
  .vp-panel{position:relative;display:block;width:100%;height:100%;min-width:0;overflow:hidden;border:0;padding:0;margin:0;background:#111;}
  .vp-panel__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

  /* title box (only on the active panel) */
  .vp-title{
    position:absolute;left:0;bottom:0;z-index:3;
    background:var(--vp-blue);color:#fff;
    padding:20px 40px 16px;text-align:center;
    font-family:"Helvetica LT W01 Ult Comp",Oswald,sans-serif;
    text-transform:uppercase;line-height:.86;letter-spacing:2px;
    opacity:0;transform:translateY(8px);transition:opacity .55s ease .35s,transform .55s ease .35s;
    pointer-events:none;
  }
  .vp-title__sm{display:block;font-weight:400;font-size:clamp(20px,1.9vw,30px);}
  .vp-title__lg{display:block;font-weight:400;font-size:clamp(40px,4.6vw,68px);margin-top:1px;}
  .vp-title__chev{display:block;margin:10px auto 0;width:34px;height:18px;}
  .vp-title__chev svg{width:100%;height:100%;stroke:#fff;stroke-width:2.4;fill:none;}

  /* ---- blue promo bar (the 3-up links for the active category) ---- */
  .vp-bars{position:relative;background:var(--vp-blue);}
  .vp-bar{display:none;}
  .vp-bar.is-shown{display:block;}
  .vp-bar__inner{
    display:grid;grid-template-columns:repeat(3,1fr);gap:0;
    padding:26px 18px 30px;max-width:1369px;margin:0 auto;
  }
  .vp-promo{padding:2px 26px 2px 22px;border-left:1px solid rgba(255,255,255,.28);}
  .vp-promo:first-child{border-left:0;}
  .vp-promo h3{margin:0 0 8px;text-transform:none;font-family:Lato,sans-serif;font-weight:700;font-size:19px;color:#fff;line-height:1.15;}
  .vp-promo p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.9);}
  .vp-promo .more{color:var(--vp-link);font-weight:700;text-decoration:none;white-space:nowrap;}
  .vp-promo a.vp-card:hover .more{text-decoration:underline;}
  .vp-promo a.vp-card{color:inherit;text-decoration:none;display:block;}
  .vp-promo a.vp-card:focus-visible{outline:3px solid var(--vp-focus);outline-offset:4px;}
  .vp-panel:focus{outline:4px solid var(--vp-focus);outline-offset:-4px;z-index:6;}

  /* down notch under the bar */
  .vp-notch{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);
    width:0;height:0;border-left:26px solid transparent;border-right:26px solid transparent;
    border-top:16px solid var(--vp-blue);z-index:4;}
  .vp-notch-m{display:none;}

  /* play/pause */
  .vp-playpause{position:absolute;top:14px;right:14px;z-index:8;
    display:inline-flex;align-items:center;gap:7px;background:rgba(0,0,0,.42);color:#fff;
    border:1px solid rgba(255,255,255,.45);border-radius:30px;padding:6px 13px;font-size:12px;font-weight:700;cursor:pointer;}
  .vp-playpause:focus-visible{outline:3px solid var(--vp-focus);outline-offset:2px;}

  /* ===================================================================
     DESKTOP ACCORDION (>= 860px)
     =================================================================== */
  @media (min-width:860px){
    .vp-cat{flex:1 1 0;cursor:pointer;transition:flex-grow 1.3s cubic-bezier(.22,.61,.36,1);}
    .vp-cat > .vp-bar{display:none!important;}            /* mobile bars hidden on desktop */
    /* REVEAL effect: image stays a fixed size (= expanded panel width), centered;
       the panel widens over it to reveal more left & right (no zoom/scale). */
    .vp-panel__img{
      inset:auto;top:0;height:100%;
      width:var(--vp-img-w);max-width:none;
      left:50%;transform:translateX(-50%);
      object-fit:cover;
    }
    .vp-cat:has(.vp-panel[aria-selected="true"]){flex-grow:var(--vp-active-grow);}
    .vp-cat:has(.vp-panel[aria-selected="true"]) .vp-title{opacity:1;transform:none;}
    /* hover-to-open without disturbing keyboard selection */
    .vp-strip:hover .vp-cat:hover{flex-grow:var(--vp-active-grow);}
    .vp-strip:hover .vp-cat:hover .vp-title{opacity:1;transform:none;}
    .vp-strip:hover .vp-cat:has(.vp-panel[aria-selected="true"]):not(:hover){flex-grow:1;}
    .vp-strip:hover .vp-cat:has(.vp-panel[aria-selected="true"]):not(:hover) .vp-title{opacity:0;}
    .vp-nav-m,.swiper-pagination{display:none!important;}
  }

  /* ===================================================================
     MOBILE SWIPESHOW (< 860px)
     =================================================================== */
  @media (max-width:859.98px){
    :root{--vp-strip-h:300px;}
    .vp-banner.swiper{overflow:hidden;padding-bottom:0;}
    /* each category becomes a full-width slide: image + title + its 3 promos.
       Leave the wrapper as Swiper's horizontal flex; let height auto-fit. */
    .vp-strip{height:auto!important;align-items:flex-start;overflow:visible!important;}
    .vp-cat{position:relative;height:auto;}
    .vp-panel{height:var(--vp-strip-h);width:100%;display:block;}
    .vp-title{opacity:1;transform:none;left:0;}
    .vp-bar{display:block!important;}                 /* show each slide's own bar */
    .vp-bar__inner{grid-template-columns:1fr;gap:22px;padding:24px 22px 30px;}
    /* plain text promos, matching the live banner (no cards/borders) */
    .vp-promo{border-left:0;background:none;border-radius:0;padding:0;}
    .vp-promo:first-child{padding:0;border-left:0;}
    .vp-promo h3{font-size:21px;margin-bottom:8px;}
    .vp-promo p{font-size:15px;line-height:1.5;}
    .vp-notch{display:none;}
    .vp-notch-m{display:flex;justify-content:center;line-height:0; background-color: #f3f2ed;}
    .vp-notch-m::before{content:"";width:0;height:0;
      border-left:32px solid transparent;border-right:32px solid transparent;
      border-top:18px solid var(--vp-blue);}
    .vp-bars{display:none;}                            /* desktop swap-bar unused on mobile */
    /* swiper chrome */
    .swiper-pagination{position:static;margin:4px 0 14px;}
    .swiper-pagination-bullet{background:#fff;opacity:.45;width:9px;height:9px;}
    .swiper-pagination-bullet-active{opacity:1;background:var(--vp-gold);}
    .vp-nav-m button{position:absolute;top:150px;z-index:7;width:42px;height:42px;border-radius:50%;
      border:0;background:rgba(0,0,0,.5);color:#fff;font-size:22px;cursor:pointer;}
    .vp-nav-m .p{left:8px;} .vp-nav-m .n{right:8px;}
  }

  @media (prefers-reduced-motion:reduce){
    .vp-panel,.vp-title{transition:none!important;}
  }