/* ---- Browse / jump-to-section strip (high visibility) ---- */
 html { scroll-behavior: smooth; }
 @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

 .jump-strip {
   background: #fff;
   border-top: 4px solid var(--gold, #c9a54b);          /* gold accent line */
   border-bottom: 1px solid var(--line, #e5e0d5);
   box-shadow: 0 8px 20px rgba(20, 33, 61, 0.08);        /* lifts it off the page */
   padding: 26px 0;
 }
 .jump-strip .jump-inner {
   display: grid;
   grid-template-columns: 240px 1fr;                     /* label | pills */
   column-gap: 32px;
   align-items: center;
 }

 /* ---- Label ---- */
 .jump-strip .kicker {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 4px;
   font-size: 20px;
   font-weight: 800;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--gold-dark, #8a6d2f);
 }
 .jump-strip .kicker::before {
   content: "";
   width: 28px;
   height: 2px;
   background: var(--gold, #c9a54b);
 }
 .jump-strip .jump-title {
   margin: 0;
   font-size: 24px;
   line-height: 1.25;
   font-weight: 700;
   color: var(--navy, #14213d);
 }

 /* ---- Pills ---- */
 .jump-strip .pills {
   display: flex;
   flex-wrap: wrap;
   gap: 12px 14px;
 }
 .jump-strip .pill {
   display: inline-block;
   padding: 6px 16px;
   border: 1.5px solid #cdbf9c;                          /* clearly visible border */
   border-radius: 4%;
   background: #faf7ef;                                  /* soft tint, stands out from white */
   box-shadow: 0 1px 2px rgba(20, 33, 61, 0.08);
   font-family: inherit;
   font-size: 16px;
   font-weight: 600;
   line-height: 1.3;
   
   color: var(--navy, #14213d);
   text-decoration: none;
   white-space: nowrap;
   transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
 }
 /* Secondary pills: dashed but still strong */
 .jump-strip .pill--alt {
   border-style: dashed;
   border-color: var(--gold-dark, #8a6d2f);
   background: #fff;
 }
 .jump-strip .pill:hover,
 .jump-strip .pill:focus-visible {
   background: var(--navy, #14213d);
   border-color: var(--navy, #14213d);
   border-style: solid;
   color: #fff;
   transform: translateY(-2px);
   box-shadow: 0 6px 14px rgba(20, 33, 61, 0.22);
   outline: none;
 }
 .jump-strip .pill:focus-visible {
   box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gold, #c9a54b);
 }

 /* ---- Side spacing (container-fluid) ---- */
 .jump-strip .container-fluid { padding-left: 5.5%; padding-right: 5.5%; }

 /* ---------- Tablet ---------- */
 @media (max-width: 991.98px) {
   .jump-strip .jump-inner { grid-template-columns: 170px 1fr; column-gap: 24px; }
   .jump-strip .jump-title { font-size: 20px; }
   .jump-strip .pill { font-size: 15px; padding: 9px 20px; }
   .jump-strip .container-fluid { padding-left: 24px; padding-right: 24px; }
 }

 /* ---------- Mobile: ONE scrollable line ---------- */
 @media (max-width: 767.98px) {
   .jump-strip { padding: 18px 0; }
   .jump-strip .container-fluid { padding-left: 16px; padding-right: 16px; }
   .jump-strip .jump-inner { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
   .jump-strip .jump-title { font-size: 19px; }
   .jump-strip .pills {
     flex-wrap: nowrap;
     gap: 10px;
     overflow-x: auto;
     overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
     scroll-snap-type: x proximity;
     padding-bottom: 10px;
     scrollbar-width: thin;
     scrollbar-color: var(--gold, #c9a54b) #efe9d8;       /* visible gold scrollbar */
   }
   .jump-strip .pills::-webkit-scrollbar { height: 6px; }
   .jump-strip .pills::-webkit-scrollbar-track { background: #efe9d8; border-radius: 3px; }
   .jump-strip .pills::-webkit-scrollbar-thumb { background: var(--gold, #c9a54b); border-radius: 3px; }
   .jump-strip .pill {
     flex: 0 0 auto;
     scroll-snap-align: start;
     font-size: 15px;
     padding: 10px 20px;
   }
   .jump-strip .pill:hover { transform: none; }
 }