/* Systems Innovation Lab — base (fonts, hover states, shared behaviour)
   Visual system ported 1:1 from the approved mockups. */

@font-face { font-family: "Barlow"; src: url("fonts/barlow-latin-200-normal.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

body { margin: 0; background: #000; font-family: Barlow, sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { color: #fff; }
::selection { background: #fff; color: #000; }
input, textarea { font-family: Barlow, sans-serif; }
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.3); }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@keyframes silPan { from { background-position: 0 0; } to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* hover states (ported from style-hover attributes) */
.hop { transition: opacity .25s; }        .hop:hover { opacity: .55; }
.hop8 { transition: opacity .25s; }       .hop8:hover { opacity: .8; }
.hcol { transition: color .25s; }         .hcol:hover { color: #fff; }
.hcta { transition: background .25s, color .25s, border-color .25s; }
.hcta:hover { background: #fff; color: #000; border-color: #fff; }
.hbg { transition: background .35s; }     .hbg:hover { background: rgba(255,255,255,.06); }
.hchip { transition: border-color .3s, color .3s; } .hchip:hover { border-color: #fff; color: #fff; }

/* loop-diagram stage cards */
.stage { transition: background .3s, color .3s, border-color .3s; }
.stage:hover { background: #fff !important; color: #000 !important; border-color: #fff !important; }

/* diagnosis pattern cards (services) */
.pattern { transition: background .35s; }
.pattern:hover { background: #0a0b0d; }
.pat-overlay { opacity: 0; transition: opacity .35s; }
.pattern:hover .pat-overlay { opacity: 1; }

/* selectable rows/tabs/slots */
.level { transition: border-color .3s, background .3s, color .3s; }
.level.sel { border-color: #fff !important; background: #fff !important; color: #000 !important; }
.gtab { transition: background .3s, color .3s; }
.gtab.sel { background: #fff !important; color: #000 !important; }
.slot { transition: border-color .25s, background .25s, color .25s; }
.slot.sel { border-color: #fff !important; background: #fff !important; color: #000 !important; }

/* NCR cluster bars (case study) */
.clbar-fill { background: rgba(255,255,255,.34); transition: background .3s; }
.bars.dim .clbar-fill { background: rgba(255,255,255,.14); }
.bars .clbar:hover .clbar-fill { background: #fff; }

/* --- responsive shell (v6.6) --- */
.skiplink{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:#000;padding:10px 16px;font-family:'Barlow Condensed',sans-serif;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.skiplink:focus{left:0}
.navbtn{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;background:transparent;border:0;cursor:pointer}
.navbtn span{display:block;height:2px;width:100%;background:#fff;transition:transform .25s,opacity .2s}
.navbtn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navbtn[aria-expanded="true"] span:nth-child(2){opacity:0}
.navbtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:15;background:#000;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:90px 28px 40px}
.mnav[hidden]{display:none}
.mnav a{font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:32px;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-decoration:none;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.mnav a.mcta{margin-top:26px;border:1px solid #fff;border-bottom:1px solid #fff;text-align:center;padding:16px;font-size:16px;letter-spacing:.2em}
@media (max-width:1023px){.navbtn{display:flex}}

@media (max-width:1023px){
  .sitehead{height:64px!important;padding:0 18px!important}
  .sitehead nav{display:none!important}
  .sitehead a>span>span:first-child{font-size:13px!important;letter-spacing:.22em!important;white-space:nowrap}
  .sitehead a>span>span:last-child{font-size:8.5px!important;letter-spacing:.26em!important;white-space:nowrap}
  .sitehead a>span[style*="font-size:16px"]{font-size:13px!important;letter-spacing:.22em!important;white-space:nowrap}
  .sitehead svg{width:26px!important;height:16px!important}
  h1[style*="font-size:1"],h1[style*="font-size:9"],h1[style*="font-size:8"],h1[style*="font-size:7"],h1[style*="font-size:6"]{font-size:clamp(38px,10.5vw,52px)!important;max-width:100%!important}
  h2[style*="font-size:7"],h2[style*="font-size:6"]{font-size:clamp(28px,8.5vw,36px)!important;max-width:100%!important}
  h2[style*="font-size:5"]{font-size:clamp(26px,7.5vw,32px)!important;max-width:100%!important}
  h2[style*="font-size:4"]{font-size:clamp(24px,7vw,30px)!important;max-width:100%!important}
  [style*="padding:68px 56px"],[style*="padding:88px 56px"],[style*="padding:76px 56px"],[style*="padding:72px 56px"],[style*="padding:68px 56px"],[style*="padding:64px 56px"],[style*="padding:80px 56px"],[style*="padding:56px 56px"],[style*="padding:48px 56px"],[style*="padding:44px 56px"],[style*="padding:40px 56px"],[style*="padding:36px 56px"],[style*="padding:34px 56px"],[style*="padding:30px 56px"],[style*="padding:26px 56px"],[style*="padding:28px 56px"]{padding-left:20px!important;padding-right:20px!important}
  .rgrid{grid-template-columns:1fr!important}
  .rgrid>*,.rgrid2>*{min-width:0;max-width:100%}
  .bandrow>*{min-width:0;max-width:100%}
  .rgrid2{grid-template-columns:1fr 1fr!important}
  .rpub{grid-template-columns:1fr!important;gap:6px!important}
  .bandrow{flex-direction:column!important;align-items:flex-start!important;gap:16px!important}
  .bandrow div[style*="width:1px"]{display:none}
  .rlab{left:20px!important;right:20px;top:84px!important;font-size:11px!important;letter-spacing:.18em!important}
  #sgt,#f3t,#wst{font-size:22px!important;padding:0 16px}
  #sgk,#f3k,#wsk{padding:0 16px;letter-spacing:.2em!important}
  #sgs,#f3s,#wss{padding:0 16px}
  #gateTabs{flex-direction:row!important;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #gateTabs button{flex:none!important;white-space:nowrap}
  .feat{height:auto!important;padding:56px 20px 48px!important}
  .feat>div[style*="position:absolute"]{display:none!important}
  .featrow{flex-direction:column!important;align-items:flex-start!important;gap:28px!important}
  .pq{padding:56px 20px!important}
  .pq>div:first-child{font-size:27px!important;max-width:100%!important}
  .sitefoot{grid-template-columns:1fr!important;padding:40px 20px 20px!important;gap:22px!important}
  .sitefoot>div:last-child{flex-wrap:wrap;gap:14px 22px!important}
  .footbar{padding-top:0;flex-direction:column;gap:6px;padding-left:20px!important;padding-right:20px!important}
  input,textarea,button{font-size:16px}
  input,textarea,select{min-width:0;max-width:100%}
}