@font-face{font-family:"Oswald";src:url(fonts/oswald-700-sub.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Oswald";src:url(fonts/oswald-500-sub.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-500-sub.woff2) format("woff2");font-weight:500;font-display:swap}
/* L022 layout: circuit-diagram linework as dividers, deep blue and volt yellow, monospace circuit labels */
*{box-sizing:border-box}
body{margin:0;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.foot{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;padding-block:26px;font-size:14px}
:root{--navy:#0b1f4d;--navy-2:#13306f;--volt:#ffd400;--white:#f5f7fb;--muted:#b6c3dc;
--head:"Oswald","Arial Narrow",sans-serif;--body:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace}
body{background:var(--navy);color:var(--white);font-family:var(--body);font-size:17px;line-height:1.6}
.lbl{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--volt)}
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:18px;border-bottom:1px solid rgba(255,212,0,.35)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;font-size:28px;text-transform:uppercase;letter-spacing:.04em;line-height:1}
.logo i{width:14px;height:26px;background:var(--volt);clip-path:polygon(60% 0,0 58%,45% 58%,30% 100%,100% 40%,55% 40%)}
.logo small{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.1em;color:var(--volt);align-self:flex-end}
.nav{display:flex;gap:28px;font-size:15px}
.call{display:flex;align-items:center;gap:16px}
.num{font-family:var(--head);font-weight:500;font-size:22px;letter-spacing:.04em}
.btn{display:inline-block;background:var(--volt);color:var(--navy);font-family:var(--head);font-weight:500;font-size:17px;letter-spacing:.06em;text-transform:uppercase;padding:12px 22px;line-height:1}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding-block:64px 40px}
h1{font-family:var(--head);font-weight:700;font-size:clamp(50px,6.6vw,96px);line-height:.95;text-transform:uppercase;margin:12px 0 20px}
h1 span{color:var(--volt)}
.lede{font-size:18px;color:#d6deee;max-width:34ch;margin-bottom:28px}
.photo{position:relative;padding:14px;border:2px solid var(--volt)}
.photo::before,.photo::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--volt)}
.photo::before{left:-7px;top:40px}.photo::after{right:-7px;bottom:40px}
.photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.photo figcaption{margin-top:10px}
.trace{position:relative;height:56px;margin-block:8px}
.trace::before{content:"";position:absolute;left:0;right:0;top:27px;height:2px;background:var(--volt)}
.trace i{position:absolute;top:21px;width:14px;height:14px;border:2px solid var(--volt);border-radius:50%;background:var(--navy)}
.trace i:nth-child(1){left:12%}.trace i:nth-child(2){left:48%;border-radius:2px;width:40px;height:14px}.trace i:nth-child(3){left:84%}
.trace i:nth-child(2)::after{content:"";position:absolute;left:50%;top:-30px;width:2px;height:26px;background:var(--volt)}
.trace.flip i:nth-child(2)::after{top:14px}
.circuits{padding-block:40px}
h2{font-family:var(--head);font-weight:700;font-size:clamp(32px,3.6vw,48px);text-transform:uppercase;line-height:1;margin-bottom:28px}
.circuits ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid rgba(255,212,0,.5)}
.circuits li{padding:24px;border-right:1px solid rgba(255,212,0,.5)}
.circuits li:last-child{border-right:0}
.circuits b{display:block;font-family:var(--head);font-weight:500;font-size:26px;text-transform:uppercase;margin:10px 0 6px}
.circuits p{font-size:15px;color:#d6deee}
.safe{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center;padding-block:40px 72px}
.safe img{width:100%;border:2px solid var(--navy-2)}
.safe h2{margin:10px 0 16px}.safe p{color:#d6deee;max-width:44ch}
.foot{color:var(--muted);border-top:1px solid rgba(255,212,0,.35)}
@media (prefers-reduced-motion:no-preference){.trace::before{background:linear-gradient(90deg,var(--volt) 0 40%,#fff3a6 50%,var(--volt) 60% 100%);background-size:250% 100%;animation:run 4s linear infinite}
@keyframes run{from{background-position:100% 0}to{background-position:-150% 0}}}
@media (max-width:1000px){.nav{display:none}.circuits ul{grid-template-columns:1fr 1fr}.circuits li:nth-child(2){border-right:0}.circuits li:nth-child(-n+2){border-bottom:1px solid rgba(255,212,0,.5)}}
@media (max-width:900px){
 .call .btn{display:none}.num{background:var(--volt);color:var(--navy);padding:6px 12px;font-size:20px}.logo{font-size:24px}.logo small{display:none}
 .hero{grid-template-columns:1fr;gap:28px;padding-block:32px 16px}
 .circuits ul{grid-template-columns:1fr}.circuits li{border-right:0;border-bottom:1px solid rgba(255,212,0,.5)}.circuits li:last-child{border-bottom:0}
 .safe{grid-template-columns:1fr;gap:24px;padding-block:24px 48px}
}