/* BNT Electronics - medical */
.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}
@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}}
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8);max-width:960px}

.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 PLACEHOLDERS - swap for real imagery 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)}
.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:#1f7a69;color:#fff}

.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)}}
/* BNT MEDICAL - the room runs on the medical teal instead of the house blue */
    .anim{--navy-800:#14504f;--navy-900:#0c3130;--navy-950:#07201f;
      --text-link:#1c7677;--text-link-hover:#15605f;
      --blue-300:#8ad9da;--blue-500:#2d8a8b;--blue-700:#1a6465;
      --accent-500:#2d8a8b;--accent-600:#247273;--accent-700:#1a6465;
      --focus-ring:0 0 0 3px rgba(45,138,139,.35)}
[data-theme="dark"] .anim{--text-link:#5fc9ca;--text-link-hover:#84dcdd;--blue-500:#4dbfc0;--blue-300:#a6e9ea;--accent-500:#3aa5a6;--accent-600:#2d8a8b}
.anim .bnt-btn--accent{color:#fff}/* .anim .bnt-btn--accent:hover - every declaration here was superseded later in this file */
.anim .bnt-btn--primary{background:var(--navy-800);border-color:var(--navy-800)}
.anim .bnt-btn--primary:hover{background:var(--navy-900);border-color:var(--navy-900)}
.anim .bnt-btn--accent,.anim .bnt-btn--accent:visited{background:#1f7a69;border-color:#1f7a69;color:#fff}
.anim .bnt-btn--accent:hover{background:#17604f;border-color:#17604f;color:#fff}
.anim .subtab--active,.anim .subtab--active:hover{background:#1f7a69;color:#fff}
.anim main .link-arrow{color:#1a6b5c}
.anim main .link-arrow:hover{color:#124e42}
[data-theme="dark"] .anim main .link-arrow{color:#4fbda6}
[data-theme="dark"] .anim main .link-arrow:hover{color:#7ad3c1}
.anim main .story-link{color:#1a6b5c}
[data-theme="dark"] .anim main .story-link{color:#4fbda6}
.anim main .bnt-eyebrow{color:#1a6b5c}
[data-theme="dark"] .anim main .bnt-eyebrow{color:#4fbda6}

[data-theme="dark"] .inst-plate{border-color:rgba(255,255,255,.14)}

/* Sub-navigation height and rhythm, matched to the design (3.6.2). */
.anim{--sub-h:55px}
.sub-nav__tabs{padding:3px 6px;margin:-3px -6px}
.sub-nav{min-height:var(--sub-h)}

/* ==========================================================================
   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)}