/* BNT Electronics - printing */

/* NAV */
    .anim{--section-y:clamp(48px,5.4vw,88px);--section-y-tight:clamp(30px,3.2vw,50px);--section-y-loose:clamp(60px,6.6vw,104px);--sub-h:55px;--stick-h:133px}

/* LINKS / ARROWS */
    .page-fx{display:flex;}
@media(max-width:1080px){
      .bnt-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
      .bnt-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
@media(max-width:680px){
      .bnt-grid--2,.bnt-grid--3,.bnt-grid--4{grid-template-columns:1fr}
    }
/* MARQUEE */
    .marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}

.marquee-track--l{animation:bnt-marq-l 46s linear infinite}
.mq-logo{flex:0 0 220px;flex-direction:column;padding:var(--space-5)}
@keyframes bnt-marq-l{from{transform:translateX(0)}to{transform:translateX(var(--mq-end, -50%))}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}.marquee{overflow-x:auto}}
/* SECTION HEADS + HERO */
    
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8);max-width:920px}

/* SPLIT (text + image) */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:var(--space-10)}}
/* IMAGE + LOGO PLACEHOLDERS - swap for real assets in the final pass */
    .img-ph{position:relative;display:flex;align-items:flex-end;justify-content:flex-start;background:var(--surface-sunken);border:1px dashed var(--border-default);color:var(--text-subtle);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;min-height:300px}
.card-thumb{min-height:0;aspect-ratio:16/9;border-radius:var(--radius-well)}
.logo-ph{min-height:0;height:60px;align-items:center;justify-content:center;text-transform:none;letter-spacing:var(--tracking-tight);font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);color:var(--text-strong)}
.logo-ph::after{display:none}
/* SUB-NAV */
    .sub-nav{position:sticky;top:var(--nav-h);z-index:40;}
[data-theme="dark"] .sub-nav{background:var(--surface-page)}
.sub-nav__tabs{gap:4px;padding:3px 6px;margin:-3px -6px;-ms-overflow-style:none}

.subtab{padding:7px 15px;font-size:var(--text-md);font-weight:500;color:var(--text-muted);cursor:pointer;transition:var(--transition-colors);text-decoration:none}
.subtab:hover{color:var(--text-strong);background:var(--surface-hover)}
.subtab--active,.subtab--active:hover{background:#17539c;color:#fff}

.img-ph.logo-ph,.logo-ph{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(20,40,80,.10);border-radius:var(--radius-plate);padding:14px 20px;overflow:hidden}
/* (reveal + failsafe handled in SCROLL REVEALS block above) */

    /* VENDOR WALL - real logos on clean chips */
    .mq-logo{flex:0 0 200px !important;flex-direction:row !important;gap:0;background:#fff !important;border:1px solid rgba(20,40,80,.10) !important;border-radius:var(--radius-plate) !important;box-shadow:0 1px 2px rgba(20,40,80,.05) !important;padding:16px 22px !important}
.stats-row{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:0}
@media(max-width:760px){.stats-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10) 0}}
/* PINNED HOW-IT-WORKS STORY (matches Home's five-domains) */
    .story{position:relative}
.story-vp{position:sticky;top:var(--stick-h);min-height:calc(100vh - var(--stick-h));box-sizing:border-box;padding-top:var(--space-6);padding-bottom:var(--space-6);display:flex;align-items:center}
.story-item::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--accent,var(--blue-500,#1868e6));transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out)}
.story-item h3{font-size:var(--text-2xl);color:var(--text-muted);letter-spacing:var(--tracking-tight)}
.story-item p{margin-top:0;color:var(--text-muted);line-height:var(--leading-normal);max-width:460px;max-height:0;opacity:0;overflow:hidden;transition:max-height .55s var(--ease-out),opacity .5s var(--ease-out),margin .55s var(--ease-out)}
.story-item.is-active p{margin-top:var(--space-3);max-height:170px;opacity:1}
.story-dot.is-on{width:30px;background:var(--accent,var(--blue-500,#1868e6))}
.story-visuals{position:relative;height:min(64vh,540px);border-radius:var(--radius-story);overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-card)}
@media(max-height:820px) and (min-width:901px){.story-vp{padding-top:var(--space-5);padding-bottom:var(--space-5)}.story-item{padding-top:var(--space-2);padding-bottom:var(--space-2)}.story-item h3{font-size:var(--text-lg)}.story-item.is-active p{max-height:0;opacity:0;margin-top:0}.story-visuals{height:min(52vh,380px)}}
@media(max-width:900px){.story-vp{position:relative;top:auto;height:auto;padding:var(--section-y) 0}.story-item h3{color:var(--text-strong)}.story-item p{max-height:240px;opacity:1;margin-top:var(--space-3)}.story-item::before{transform:scaleY(1)}}
/* PRODUCT FRAME - transparent printer shots, contained on a clean field */
    .img-ph--product img{object-fit:contain !important;padding:7%}
.img-ph--product{background:#fff}
[data-theme="dark"] .img-ph--product{background:#e8edf3}
[data-theme="dark"] .img-ph--product img{mix-blend-mode:normal}

/* The reverse keyframe was missing here, so a --r track on this page had no
   animation of its own to run. */
@keyframes bnt-marq-r{from{transform:translateX(var(--mq-end, -50%))}to{transform:translateX(0)}}

/* ==========================================================================
   ORDER-INDEPENDENCE (2A)
   Every declaration below already applies on this page. It applied because
   this file loads after style.css and won a tie on POSITION - and position is
   not something a stylesheet should depend on, because a CSS optimiser is
   entitled to move blocks. Each is restated here with an html prefix: one
   extra type selector, so it wins on SPECIFICITY instead. The values are
   unchanged - they are what the browser was already computing. Verified by
   rendering this page against the previous version and comparing every
   instance of every selector whose declarations were touched.
   Do not delete as redundant: without it these depend on file order again.
   ========================================================================== */
html .img-ph{display:flex}
html .sub-nav__tabs{gap:4px;padding:3px 6px;margin:-3px -6px}
html .subtab{flex:none;padding:7px 15px}

/* ==========================================================================
   2A - `.img-ph` border pinned on specificity (1.4.10)

   style.css and this file both declare `border` on a bare `.img-ph`, both at
   specificity 10, so which one won was decided by load order alone. The pin
   below settles it on specificity instead.

   Why `:not(:has(img))` rather than a plain `html .img-ph`:
   style.css carries `.img-ph:has(img){border-color:transparent}`, and it is
   NOT html-prefixed. `:has()` takes the specificity of its argument, so that
   selector is (0,1,1) = 11 - a TIE with `html .img-ph`, which this later-
   loading sheet would then win, putting a dashed border around every
   photograph on the site. Measured in the browser, not calculated: the
   winner between those two flips when their order is swapped, which is what
   a tie looks like. (The 1.4.9 audit recorded that rule as specificity 20.
   It is not. A specificity taken on trust is how 1.4.7 happened.)

   Excluding frames that hold an image leaves `:has(img)` to own them by
   itself, and confines this pin to the empty placeholder frames whose value
   it actually is. At 12 it stays below `.img-ph.logo-ph` (20), so the logo
   plates keep their own border - also verified by swapping the order.

   The specificity-10 declaration above is deliberately LEFT IN PLACE, not
   moved here. A frame holding a photograph is excluded from this pin, so
   deleting the original made those frames fall through to style.css's
   `1px solid` and their border-style changed from dashed to solid - behind a
   transparent border-color, so invisible, but measured on 10 frames across
   9 pages, and 2A's contract is that nothing changes at all. It is not an
   intra-file duplicate to be cleaned up: the two declarations cover
   different element sets.

   Residual, recorded rather than fixed: on frames that DO hold a photograph
   the 10-versus-10 contest with style.css remains order-dependent, for
   border-width and border-style only, both of them behind a transparent
   colour. Nothing observable turns on it. ======================== */
html .img-ph:not(:has(img)){border:1px dashed var(--border-default)}