/* Banner rail (template-parts/banner-rail.php + assets/js/banner-rail.js), Mike 2026-09-28 after the Scorpion SEO page carousel.
   Wide navy banners (1184 x 480 at 1440), first one on the container's left edge, the next peeking in on the right; dots +
   hover-edge arrows (homepage rail look). Rest: first banner on the left gutter (--ss-rail-gut, the shared rail
   gutter from assets/css/ss-rail.css), the next one cut by the right edge; middle banners snap centred (a neighbour peeks each
   side); the last one ends on the right gutter (Mike 2026-09-28 rail consistency pass). No autoplay, no entry animation, moves and hovers <= 200 ms.
   Geometry: the rail breaks out of .sv2-w to the host's full width with container query units (host = .bnr-host or the
   PPC extras band below); --side = the container's left edge, --bw = banner width, --pr = right padding so the last banner
   can still line up on the left edge. Visuals are drawn on a 620 x 480 stage: 1 stage px = var(--u), so they scale with the
   banner (phones included) without a transform. */

.bnr-host,.svc2-ext-sec:has(.bnr){container-type:inline-size}
.bnr{--gut:64px;--gap:16px;--side:max(var(--gut),calc((100cqw - 1184px) / 2));--bw:calc(100cqw - 2 * var(--side));--pr:var(--side);--bh:480px;position:relative;margin-inline:calc(-1 * var(--side));margin-top:8px}
@media (max-width:900px){.bnr{--gut:24px}}
@media (max-width:560px){.bnr{--gut:16px}}
@media (max-width:1100px){.bnr{--bh:440px}}

.bnr .bnr__track{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:var(--bw);gap:var(--gap);margin:0;padding:0 var(--ss-rail-gut,24px);list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--ss-rail-gut,24px);scrollbar-width:none}
.bnr__track::-webkit-scrollbar{display:none}
.bnr__track:focus-visible{outline:3px solid var(--ss-gold);outline-offset:-3px;border-radius:22px}
.bnr__track.is-drag,.bnr__track.is-anim{scroll-snap-type:none}
.bnr__track.is-drag{cursor:grabbing;user-select:none}
.bnr__track.is-drag a{pointer-events:none}
.bnr__item{display:grid;min-width:0;margin:0;scroll-snap-align:center;scroll-snap-stop:always}

/* the banner */
.bnr__card{position:relative;display:flex;align-items:center;min-height:var(--bh);overflow:hidden;border-radius:20px;color:#fff;
  background:radial-gradient(58% 85% at 76% 52%,rgba(var(--ss-gold-rgb),.17) 0%,rgba(var(--ss-gold-rgb),0) 70%),linear-gradient(125deg,var(--ss-navy) 0%,var(--ss-navy-deep) 62%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.bnr__copy{position:relative;z-index:2;width:46%;padding:56px 0 56px 60px}
.bnr .bnr__pill{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;padding:6px 13px;border:1px solid rgba(var(--ss-gold-rgb),.55);border-radius:8px;color:var(--ss-gold);font-size:14px;font-weight:700;line-height:1.3}
.bnr__pill i{padding:1px 7px;border-radius:999px;background:var(--ss-gold);color:var(--ss-navy-deep);font-size:11px;font-style:normal;font-weight:800;letter-spacing:.02em}
.bnr .bnr__h{margin:0;color:#fff;font-size:clamp(34px,3.3vw,48px);font-weight:800;line-height:1.08;letter-spacing:-.015em}
.bnr__h span{display:block;width:fit-content;background:var(--ss-gold-shine);-webkit-background-clip:text;background-clip:text;color:transparent}
.bnr .bnr__p{max-width:40ch;margin:18px 0 0;color:rgba(255,255,255,.82);font-size:17px;line-height:1.55}
.bnr__btn{display:inline-flex;align-items:center;gap:8px;margin-top:28px;padding:14px 22px;border-radius:999px;background:var(--ss-gold-grad);color:var(--ss-navy-deep);font-size:15px;font-weight:700;line-height:1;text-decoration:none;transition:filter .15s}
.bnr__btn:hover{filter:brightness(1.06);color:var(--ss-navy-deep)}
/* text stays dark like the header / panel gold buttons (Mike 2026-09-28); beats the card's white link colour */
.bnr .bnr__card a.bnr__btn,.bnr .bnr__card a.bnr__btn:hover,.bnr .bnr__card a.bnr__btn:focus{color:#0b1722}
.bnr__btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.bnr__btn svg{width:16px;height:16px}
.bnr__vis{position:absolute;z-index:1;top:0;right:0;bottom:0;left:44%;container-type:inline-size;pointer-events:none}
.bnr__stage{--u:calc(100cqi / 620);position:absolute;left:0;top:50%;width:100%;height:calc(var(--u) * 480);transform:translateY(-50%)}
.bnr__stage img{user-select:none}

/* whole banner clickable (Matt 2026-09-30): "stretched link" -- the gold button stays the one real link (keyboard focus,
   screen readers, middle-click) and its ::after covers the card. So the pseudo anchors to the card, the copy column and
   the button are unpositioned; the copy's other children keep z-index 2 over the visual. A mouse drag never fires it
   (hv2-rail.js: >5px drag = click swallowed in the capture phase, and .is-drag a{pointer-events:none}); a touch swipe
   pans natively and never clicks. Hover: the same 2px lift + shadow as the other cards, 150ms, fine pointers only. */
.bnr__copy{position:static}
.bnr__copy>:not(.bnr__btn){position:relative;z-index:2}
.bnr .bnr__btn{position:static}
.bnr__btn::after{content:"";position:absolute;inset:0;z-index:3}
/* no filter on the button: a filter makes it the containing block of its ::after, which would shrink the stretched
   link back to the button on hover. The hover highlight is an inset white wash instead (hovering the card = hovering
   the button's ::after, so the button lights up with the card). */
.bnr .bnr__btn{transition:box-shadow .15s}
.bnr .bnr__btn:hover{filter:none;box-shadow:inset 0 0 0 99px rgba(255,255,255,.12)}
.bnr .bnr__card a.bnr__btn:hover{text-decoration:none} /* the site's a:hover underline would show whenever the card is hovered */
.bnr__card{transition:transform .15s ease,box-shadow .15s ease}
/* room for the lift + shadow inside the scroller (overflow-x:auto clips vertically too); margins cancel it out */
.bnr .bnr__track{padding-block:6px 24px;margin-block:-6px -24px}
@media (hover:hover) and (pointer:fine){
  .bnr__card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 16px 30px -14px rgba(var(--ss-navy-deep-rgb),.55)}
  .bnr__track.is-drag .bnr__card{transform:none}
}

/* arrows: homepage rail look, over the peeking neighbours, on hover / focus, fine pointers only */
.bnr__arw{position:absolute;top:calc(var(--bh) / 2);z-index:3;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--line,#e3e8ee);border-radius:50%;background:#fff;color:var(--ss-navy-deep);box-shadow:0 6px 18px rgba(var(--ss-navy-deep-rgb),.18);cursor:pointer;opacity:0;transform:translateY(-50%);transition:opacity .15s,background .15s}
.bnr__arw svg{width:18px;height:18px}
.bnr__arw--prev{left:16px}
.bnr__arw--next{right:16px}
.bnr:hover .bnr__arw,.bnr:focus-within .bnr__arw{opacity:1}
.bnr__arw:hover{background:var(--ss-gold);border-color:var(--ss-gold)}
.bnr .bnr__arw:disabled{opacity:0;pointer-events:none}
@media (hover:none),(max-width:760px){.bnr__arw{display:none}}

/* dots */
.bnr__dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
.bnr__dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(var(--ss-navy-deep-rgb),.22);cursor:pointer;transition:background .15s}
.bnr__dot:hover{background:rgba(var(--ss-navy-deep-rgb),.45)}
.bnr__dot[aria-current="true"]{background:var(--ss-gold)} /* same round size for every dot, current one gold (Mike 2026-09-28) */
.bnr__dot:focus-visible{outline:2px solid var(--ss-navy-deep);outline-offset:3px}
.bnr__dot{position:relative}
.bnr__dot:after{content:"";position:absolute;inset:-10px -4px}

/* shared visual bits (stage units) */
.bnr-tag{position:absolute;display:inline-flex;align-items:center;gap:calc(var(--u) * 7);padding:calc(var(--u) * 6) calc(var(--u) * 11);border-radius:999px;background:rgba(0,20,34,.82);box-shadow:0 0 0 1px rgba(255,255,255,.14);color:#fff;font-size:max(10px,calc(var(--u) * 12.5));font-weight:700;line-height:1.2;white-space:nowrap;backdrop-filter:blur(4px)}
.bnr-tag img,.bnr-tag svg{flex:none;width:calc(var(--u) * 14);height:calc(var(--u) * 14)}
.bnr-tag em{font-style:normal;font-weight:600;color:rgba(255,255,255,.66)}
.bnr-tag--lg{position:static;padding:calc(var(--u) * 8) calc(var(--u) * 14);font-size:max(10.5px,calc(var(--u) * 13.5))}
.bnr-tag--lg svg{width:calc(var(--u) * 17);height:calc(var(--u) * 17)}
.bnr-cap{position:absolute;margin:0;color:rgba(255,255,255,.55);font-size:max(10px,calc(var(--u) * 11.5));line-height:1.3}
.bnr-chip{position:absolute;display:grid;gap:2px;padding:calc(var(--u) * 12) calc(var(--u) * 16);border-radius:calc(var(--u) * 14);background:#fff;color:var(--ss-navy-deep);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.bnr-chip b{display:flex;align-items:baseline;gap:calc(var(--u) * 6);font-size:calc(var(--u) * 28);font-weight:800;line-height:1}
.bnr-chip b svg{width:calc(var(--u) * 14);height:calc(var(--u) * 12);color:#1a9a5b;align-self:center}
.bnr-chip small{font-size:calc(var(--u) * 14);font-weight:700;color:var(--ink3,#5b6b7a)}
.bnr-chip>span{font-size:max(10px,calc(var(--u) * 12.5));font-weight:600;color:var(--ink3,#5b6b7a)}

/* 1. landing pages: fanned browser frames */
.bnr-lp__f{position:absolute;width:calc(var(--u) * 360);margin:0;overflow:hidden;border-radius:calc(var(--u) * 12);background:#fff;box-shadow:0 24px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.12)}
.bnr-lp__f img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.bnr-lp__bar{display:flex;align-items:center;gap:calc(var(--u) * 4);height:calc(var(--u) * 22);padding:0 calc(var(--u) * 10);background:#eef2f6;border-bottom:1px solid #dde3ea}
.bnr-lp__bar i{flex:none;width:calc(var(--u) * 6);height:calc(var(--u) * 6);border-radius:50%;background:#c6cfd9}
.bnr-lp__bar em{flex:1;min-width:0;margin-left:calc(var(--u) * 6);padding:0 calc(var(--u) * 8);border-radius:calc(var(--u) * 7);background:#fff;color:#6a7a8a;font:500 max(7px,calc(var(--u) * 9))/calc(var(--u) * 14) var(--font,inherit);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnr-lp__f--1{left:calc(var(--u) * 28);top:calc(var(--u) * 42);transform:rotate(-7deg)}
.bnr-lp__f--2{left:calc(var(--u) * 238);top:calc(var(--u) * 20);transform:rotate(5deg)}
.bnr-lp__f--3{left:calc(var(--u) * 118);top:calc(var(--u) * 196);width:calc(var(--u) * 400);z-index:2;transform:rotate(-1.5deg)}
.bnr-lp__chip{left:calc(var(--u) * 356);top:calc(var(--u) * 356);z-index:3;white-space:nowrap}

/* 2. display ads: tidy mosaic at real ad sizes */
.bnr-ads__t{position:absolute;margin:0;border-radius:calc(var(--u) * 8);overflow:hidden;box-shadow:0 20px 44px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.14);background:#fff}
.bnr-ads__t>img{display:block;width:100%;height:100%;object-fit:cover}
.bnr-ads__t--1{left:calc(var(--u) * 86);top:calc(var(--u) * 18);width:calc(var(--u) * 448);height:calc(var(--u) * 224)}
.bnr-ads__t--2{left:calc(var(--u) * 86);top:calc(var(--u) * 256);width:calc(var(--u) * 216);height:calc(var(--u) * 180)}
.bnr-ads__t--3{left:calc(var(--u) * 318);top:calc(var(--u) * 256);width:calc(var(--u) * 216);height:calc(var(--u) * 180)}
.bnr-ads__t .bnr-tag{left:calc(var(--u) * 8);top:calc(var(--u) * 8)}
.bnr-ads__cap{left:calc(var(--u) * 86);right:calc(var(--u) * 86);top:calc(var(--u) * 446)}

/* 3. CTV: TV with a real spot still */
.bnr-tv__set{position:absolute;left:calc(var(--u) * 40);top:calc(var(--u) * 40);width:calc(var(--u) * 540)}
.bnr-tv__scr{position:relative;display:block;aspect-ratio:16/9;padding:calc(var(--u) * 9);border-radius:calc(var(--u) * 12);background:#05080c;box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.14)}
.bnr-tv__scr img{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--u) * 4)}
.bnr-tv__play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:calc(var(--u) * 58);height:calc(var(--u) * 58);border-radius:50%;background:rgba(255,255,255,.92);color:var(--ss-navy-deep);box-shadow:0 8px 24px rgba(0,0,0,.35);transform:translate(-50%,-50%)}
.bnr-tv__play svg{width:44%;height:44%;margin-left:6%}
.bnr-tv__len{position:absolute;right:calc(var(--u) * 20);bottom:calc(var(--u) * 20);padding:calc(var(--u) * 3) calc(var(--u) * 8);border-radius:calc(var(--u) * 5);background:rgba(0,0,0,.72);color:#fff;font-size:max(9px,calc(var(--u) * 12));font-weight:700;line-height:1.2}
.bnr-tv__stand{display:block;width:calc(var(--u) * 150);height:calc(var(--u) * 16);margin:0 auto;border-radius:0 0 calc(var(--u) * 6) calc(var(--u) * 6);background:linear-gradient(180deg,#0b1a26,#1c3244);clip-path:polygon(12% 0,88% 0,100% 100%,0 100%)}
.bnr-tv__marks{position:absolute;left:0;right:0;top:calc(var(--u) * 380);display:flex;justify-content:center;flex-wrap:wrap;gap:calc(var(--u) * 10);margin:0;padding:0;list-style:none}
.bnr-tv__marks .bnr-tag{background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.28);color:var(--ss-navy-deep,#001422);backdrop-filter:none}
.bnr-tv__marks .bnr-tag svg{width:auto;height:calc(var(--u) * 17)}
.bnr-tv__marks .bnr-tag--wm{padding-block:calc(var(--u) * 10)}
.bnr-tv__marks .bnr-tag--wm svg{height:calc(var(--u) * 14)}
.bnr-tv__cap{left:calc(var(--u) * 40);right:calc(var(--u) * 40);top:calc(var(--u) * 432);text-align:center}

/* 4. remarketing: site -> path -> real ad in a phone */
.bnr-rm__web{position:absolute;left:calc(var(--u) * 30);top:calc(var(--u) * 92);width:calc(var(--u) * 250);overflow:hidden;border-radius:calc(var(--u) * 10);background:#fff;box-shadow:0 20px 44px rgba(0,0,0,.42);transform:rotate(-3deg)}
.bnr-rm__bar{display:flex;align-items:center;gap:calc(var(--u) * 4);height:calc(var(--u) * 20);padding:0 calc(var(--u) * 9);background:#eef2f6;border-bottom:1px solid #dde3ea}
.bnr-rm__bar i{width:calc(var(--u) * 6);height:calc(var(--u) * 6);border-radius:50%;background:#c6cfd9}
.bnr-rm__bar em{flex:1;height:calc(var(--u) * 10);margin-left:calc(var(--u) * 6);border-radius:calc(var(--u) * 5);background:#fff}
.bnr-rm__pg{display:grid;gap:calc(var(--u) * 8);padding:calc(var(--u) * 14)}
.bnr-rm__pg b{display:block;height:calc(var(--u) * 58);border-radius:calc(var(--u) * 6);background:linear-gradient(120deg,#dfe7ef,#c9d6e2)}
.bnr-rm__pg s{display:block;height:calc(var(--u) * 8);border-radius:calc(var(--u) * 4);background:#e3e9ef}
.bnr-rm__pg s.is-short{width:62%}
.bnr-rm__pg u{display:block;width:calc(var(--u) * 84);height:calc(var(--u) * 20);margin-top:calc(var(--u) * 2);border-radius:999px;background:var(--ss-gold-grad)}
.bnr-rm__exit{position:absolute;right:calc(var(--u) * 10);top:calc(var(--u) * 30);display:grid;place-items:center;width:calc(var(--u) * 30);height:calc(var(--u) * 30);border-radius:50%;background:var(--ss-navy-deep);color:#fff}
.bnr-rm__exit svg{width:56%;height:56%}
.bnr-rm__path{position:absolute;left:calc(var(--u) * 262);top:calc(var(--u) * 150);width:calc(var(--u) * 120);height:calc(var(--u) * 150);color:var(--ss-gold)}
.bnr-rm__ph{position:absolute;left:calc(var(--u) * 384);top:calc(var(--u) * 26);width:calc(var(--u) * 206);height:calc(var(--u) * 428);padding:calc(var(--u) * 8);border-radius:calc(var(--u) * 30);background:#05080c;box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.16)}
.bnr-rm__ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:calc(var(--u) * 22);background:#fff}
.bnr-rm__notch{position:absolute;left:50%;top:calc(var(--u) * 14);z-index:1;width:calc(var(--u) * 58);height:calc(var(--u) * 14);border-radius:999px;background:#05080c;transform:translateX(-50%)}
.bnr-rm__s b{display:grid;place-items:center;width:calc(var(--u) * 18);height:calc(var(--u) * 18);border-radius:50%;background:var(--ss-gold-grad);color:var(--ss-navy-deep);font-size:max(9px,calc(var(--u) * 11));font-weight:800}
.bnr-rm__s--1{left:calc(var(--u) * 40);top:calc(var(--u) * 42)}
.bnr-rm__s--2{left:calc(var(--u) * 150);top:calc(var(--u) * 316);z-index:2}
.bnr-rm__s--3{left:calc(var(--u) * 40);top:calc(var(--u) * 380)}
.bnr-rm__cap{left:calc(var(--u) * 40);right:calc(var(--u) * 250);top:calc(var(--u) * 424)}

/* tablets */
@media (max-width:1100px){
  .bnr__copy{width:50%;padding:44px 0 44px 44px}
  .bnr__vis{left:48%}
  .bnr .bnr__p{font-size:16px}
}
/* phones: copy on top, visual under it; the next banner peeks 28px in on the right */
@media (max-width:760px){
  .bnr{--gap:12px;--bw:calc(100cqw - var(--side) - var(--gap) - 28px);--pr:calc(100cqw - var(--side) - var(--bw));--bh:auto}
  .bnr__card{flex-direction:column;align-items:stretch;min-height:0;border-radius:18px}
  .bnr__copy{width:auto;padding:26px 22px 4px}
  .bnr .bnr__pill{margin-bottom:14px;font-size:13px}
  .bnr .bnr__h{font-size:clamp(26px,7.4vw,32px)}
  .bnr .bnr__p{margin-top:12px;font-size:15.5px}
  .bnr__btn{margin-top:18px;padding:13px 18px;font-size:14.5px}
  .bnr__vis{position:relative;left:auto;inset:auto;margin-top:auto;aspect-ratio:620/480}
  .bnr__dots{margin-top:16px}
  .bnr-chip>span{display:none}
}
@media (prefers-reduced-motion:reduce){.bnr__btn,.bnr__arw,.bnr__dot,.bnr__card{transition:none}.bnr__card:hover{transform:none}}