/* NetWay Solutions — "Command Center" design system Control-room dark: navy ground, a live network behind content, and chamfered HUD frames that glow only where attention is needed. */ @font-face{font-family:"Chakra Petch";font-weight:500;font-display:swap;src:url(../../fonts/chakra-petch-latin-500-normal.woff2) format("woff2")} @font-face{font-family:"Chakra Petch";font-weight:600;font-display:swap;src:url(../../fonts/chakra-petch-latin-600-normal.woff2) format("woff2")} @font-face{font-family:"Chakra Petch";font-weight:700;font-display:swap;src:url(../../fonts/chakra-petch-latin-700-normal.woff2) format("woff2")} @font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(../../fonts/barlow-latin-400-normal.woff2) format("woff2")} @font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url(../../fonts/barlow-latin-500-normal.woff2) format("woff2")} @font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(../../fonts/barlow-latin-600-normal.woff2) format("woff2")} @font-face{font-family:"Share Tech Mono";font-weight:400;font-display:swap;src:url(../../fonts/share-tech-mono-latin-400-normal.woff2) format("woff2")} :root{ /* brand (overridable from Settings → Appearance) */ --primary:#4fd8e3; --secondary:#4595ce; --bg:#061021; --bg-2:color-mix(in srgb,var(--bg) 88%,#0d2140); --panel:#0a1a2f; --panel-2:#0d2140; --line:#16304f; --line-2:#21456d; --fg:#e7f2f9; --muted:#93a9c0; --dim:#62809c; --ok:#43e09a; --warn:#ffb547; --danger:#ff6474; --on-primary:#04121f; --glow:color-mix(in srgb,var(--primary) 32%,transparent); --shadow:rgba(0,0,0,.6); --neon-hot:#fff; --footer-bg:color-mix(in srgb,var(--bg) 88%,#000); --f-display:"Chakra Petch","Arial Narrow",system-ui,sans-serif; --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --f-mono:"Share Tech Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --fs-h1:clamp(2.5rem,1.4rem + 4.6vw,5.25rem); --fs-h2:clamp(2rem,1.3rem + 2.6vw,3.5rem); --fs-h3:clamp(1.25rem,1.1rem + .5vw,1.6rem); --fs-lede:clamp(1.0625rem,1rem + .35vw,1.25rem); --gutter:clamp(16px,4vw,48px); --max:1280px; --cut:16px; --header-h:76px; --ease:cubic-bezier(.2,.7,.2,1); color-scheme:dark; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)} body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;text-rendering:optimizeLegibility} img,svg,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} p{margin:0} h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:700;line-height:1.06;letter-spacing:.005em;text-wrap:balance} ul,ol{margin:0;padding:0} button{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--primary);outline-offset:3px} ::selection{background:color-mix(in srgb,var(--primary) 35%,transparent)} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--primary);color:var(--on-primary);padding:10px 16px;font-weight:600;transition:top .2s} .skip:focus{top:16px} .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)} .wrap--narrow{max-width:860px} .mono{font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase} .hl{color:var(--primary)} .glow-text{color:var(--primary);text-shadow:0 0 22px var(--glow)} .muted{color:var(--muted)} .ico{width:1.25em;height:1.25em;flex:none} /* ---------- atmosphere ---------- */ .atmos{position:fixed;inset:0;z-index:-2;pointer-events:none;background: radial-gradient(55% 45% at 85% 0%,color-mix(in srgb,var(--secondary) 20%,transparent),transparent 70%), radial-gradient(45% 40% at 0% 100%,color-mix(in srgb,var(--primary) 9%,transparent),transparent 70%), var(--bg)} .atmos::after{content:"";position:absolute;inset:0;opacity:.35;background-image: linear-gradient(color-mix(in srgb,var(--line) 55%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--line) 55%,transparent) 1px,transparent 1px); background-size:64px 64px;mask-image:radial-gradient(90% 70% at 50% 0%,#000 30%,transparent 80%)} #net{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;transition:opacity .6s} /* ---------- HUD frame ---------- */ .hud{position:relative;isolation:isolate;--edge:linear-gradient(135deg,color-mix(in srgb,var(--primary) 70%,transparent),color-mix(in srgb,var(--secondary) 55%,transparent) 45%,var(--line-2) 70%,color-mix(in srgb,var(--primary) 50%,transparent));transition:filter .35s var(--ease),transform .35s var(--ease)} .hud::before,.hud::after{content:"";position:absolute;z-index:-1;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))} .hud::before{inset:0;background:var(--edge)} .hud::after{inset:1px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel-2) 92%,transparent),color-mix(in srgb,var(--panel) 96%,transparent))} .hud--glow{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--primary) 20%,transparent))} a.hud:hover,.hud--hover:hover{filter:drop-shadow(0 0 22px color-mix(in srgb,var(--primary) 34%,transparent));transform:translateY(-3px)} .hud--quiet{--edge:linear-gradient(135deg,var(--line-2),var(--line))} .hud .tab{position:absolute;top:-2px;left:50%;width:88px;height:4px;margin-left:-44px;background:var(--primary);box-shadow:0 0 12px var(--primary);clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 100%,0 100%);opacity:.9} .hud .tab--b{top:auto;bottom:-2px;clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,5px 100%)} .hud .tab--l{left:28px;margin-left:0;width:56px} /* ---------- buttons ---------- */ .btn{--c:var(--primary);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;font-family:var(--f-display);font-weight:600;font-size:.9375rem;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;cursor:pointer;border:0;background:none;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:background .25s,color .25s,box-shadow .25s} .btn .ico{width:18px;height:18px;transition:transform .25s var(--ease)} .btn:hover .ico{transform:translateX(3px)} .btn--solid{background:var(--c);color:var(--on-primary)} .btn--solid:hover{background:var(--fg)} /* Ghost button: a chamfered frame drawn with two layers (light track + fill), so the outline follows the cut corners. A neon light runs around it; the button keeps no clip-path of its own, so the drop-shadow glow can spill outside the shape. */ @property --neon{syntax:"";inherits:false;initial-value:0deg} .btn--ghost{color:var(--c);clip-path:none;isolation:isolate;text-shadow:0 0 12px color-mix(in srgb,var(--c) 45%,transparent); filter:drop-shadow(0 0 5px color-mix(in srgb,var(--c) 30%,transparent));transition:color .25s,filter .35s} .btn--ghost::before,.btn--ghost::after{content:"";position:absolute;z-index:-1;pointer-events:none; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)} .btn--ghost::before{inset:0; background:conic-gradient(from var(--neon), color-mix(in srgb,var(--c) 28%,transparent) 0deg 110deg, color-mix(in srgb,var(--c) 70%,transparent) 140deg,var(--neon-hot) 158deg,var(--c) 166deg, color-mix(in srgb,var(--c) 28%,transparent) 195deg 290deg, color-mix(in srgb,var(--secondary) 80%,transparent) 320deg,var(--c) 338deg, color-mix(in srgb,var(--c) 28%,transparent) 360deg); animation:neon-run 3.6s linear infinite} .btn--ghost::after{inset:1.5px;background:var(--bg);transition:background .3s; clip-path:polygon(9.4px 0,100% 0,100% calc(100% - 9.4px),calc(100% - 9.4px) 100%,0 100%,0 9.4px)} .btn--ghost:hover,.btn--ghost:focus-visible{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c) 55%,transparent)) drop-shadow(0 0 2px var(--c))} .btn--ghost:hover::before,.btn--ghost:focus-visible::before{animation-duration:1.4s} .btn--ghost:hover::after{background:color-mix(in srgb,var(--c) 12%,var(--bg))} @keyframes neon-run{to{--neon:360deg}} /* Inside panels the fill matches the panel, not the page. */ .hud .btn--ghost::after{background:var(--panel)} .hud .btn--ghost:hover::after{background:color-mix(in srgb,var(--c) 12%,var(--panel))} @media (prefers-reduced-motion:reduce){.btn--ghost::before{animation:none}} .btn--sm{min-height:40px;padding:8px 16px;font-size:.8125rem} .btn--block{width:100%} .link{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase} .link .ico{width:16px;height:16px;transition:transform .25s var(--ease)} .link:hover .ico,a:hover>.link .ico{transform:translateX(4px)} /* ---------- header ---------- */ .site-header{position:fixed;inset:0 0 auto;z-index:60;padding-top:env(safe-area-inset-top,0px);transition:background .35s,border-color .35s,backdrop-filter .35s;border-bottom:1px solid transparent} .site-header.is-solid,.site-header.is-open{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-color:var(--line)} .site-header>.wrap{display:flex;align-items:center;gap:28px;height:var(--header-h)} .brand{display:flex;align-items:center;gap:12px;flex:none} .brand img{height:34px;width:auto;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--primary) 45%,transparent))} .brand-text{display:flex;flex-direction:column;line-height:1} .brand-text b{font-family:var(--f-display);font-weight:700;font-size:1.375rem;letter-spacing:.06em} .brand-text small{font-family:var(--f-display);font-weight:500;font-size:.625rem;letter-spacing:.52em;color:var(--primary);margin-top:4px} .nav{display:flex;align-items:center;gap:4px;margin-left:auto} .nav>li{list-style:none;position:relative} .nav>li>a,.nav>li>button{display:flex;align-items:center;gap:6px;height:var(--header-h);padding:0 14px;font-family:var(--f-display);font-weight:500;font-size:.875rem;letter-spacing:.09em;text-transform:uppercase;color:color-mix(in srgb,var(--fg) 85%,transparent);background:none;border:0;cursor:pointer;transition:color .2s} .nav>li>a::after,.nav>li>button::after{content:"";position:absolute;left:14px;right:14px;bottom:20px;height:2px;background:var(--primary);box-shadow:0 0 10px var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)} .nav>li>a:hover,.nav>li>button:hover,.nav>li>a[aria-current=page],.nav>li.is-active>a,.nav>li.is-active>button{color:var(--fg)} .nav>li>a:hover::after,.nav>li>button:hover::after,.nav>li>a[aria-current=page]::after,.nav>li.is-active>a::after,.nav>li.is-active>button::after{transform:scaleX(1)} .nav .chev{width:14px;height:14px;transition:transform .25s} .nav li.mega-open .chev{transform:rotate(180deg)} .header-cta{flex:none} .burger{display:none;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center;background:color-mix(in srgb,var(--panel) 75%,transparent);border:1.5px solid color-mix(in srgb,var(--primary) 60%,var(--line-2));cursor:pointer;color:var(--fg);transition:border-color .2s,color .2s} .burger:hover,.burger[aria-expanded="true"]{border-color:var(--primary);color:var(--primary)} .burger .ico{stroke-width:3.2} .burger .ico{width:26px;height:26px} /* small dropdown (header items with sub-links), opens on hover or keyboard focus */ .nav .drop{position:absolute;top:calc(100% - 14px);left:4px;min-width:250px;list-style:none;padding:8px;z-index:5; background:color-mix(in srgb,var(--bg) 97%,var(--panel-2));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid var(--line-2);border-top:2px solid var(--primary);box-shadow:0 22px 40px -14px var(--shadow),0 0 18px -6px var(--glow); opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s var(--ease),visibility .2s} .nav .has-drop:hover .drop,.nav .has-drop:focus-within .drop{opacity:1;visibility:visible;transform:none} .nav .has-drop:hover .chev,.nav .has-drop:focus-within .chev{transform:rotate(180deg)} .nav .drop a{display:flex;align-items:center;gap:10px;padding:11px 14px;font-family:var(--f-display);font-weight:500;font-size:.875rem;letter-spacing:.05em;color:color-mix(in srgb,var(--fg) 85%,transparent);transition:color .2s,background .2s} .nav .drop a::before{content:"";width:6px;height:6px;flex:none;background:var(--primary);box-shadow:0 0 8px var(--primary);transform:rotate(45deg);opacity:.5;transition:opacity .2s} .nav .drop a:hover,.nav .drop a[aria-current=page]{color:var(--fg);background:color-mix(in srgb,var(--primary) 9%,transparent)} .nav .drop a:hover::before,.nav .drop a[aria-current=page]::before{opacity:1} /* mega menu */ .mega{position:fixed;left:0;right:0;top:calc(var(--header-h) + env(safe-area-inset-top,0px));max-height:calc(100svh - var(--header-h) - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;padding-block:28px 32px;background:color-mix(in srgb,var(--bg) 98%,var(--panel-2));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 24px 48px -12px var(--shadow);border-block:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s var(--ease),visibility .25s} .nav li.mega-open .mega,.nav li:focus-within .mega{opacity:1;visibility:visible;transform:none} .mega-tree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px} .mt-col{min-width:0} .mt-head{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:8px 10px 12px 0;border-bottom:1px solid var(--line);transition:color .2s} .mt-head .ico{width:36px;height:36px;color:var(--primary);filter:drop-shadow(0 0 6px var(--glow))} .mt-head b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.0625rem;line-height:1.25;letter-spacing:.02em} .mt-head small{display:block;margin-top:3px;color:var(--dim);font-size:.6875rem} .mt-head:hover b{color:var(--primary)} .mt-list{list-style:none;display:grid;gap:1px;margin-top:8px} .mt-list a{display:flex;align-items:baseline;gap:10px;padding:6px 8px 6px 0;color:color-mix(in srgb,var(--fg) 82%,transparent);font-size:.9688rem;line-height:1.35;transition:color .2s,transform .2s} .mt-list>li>a::before{content:"";flex:none;width:5px;height:5px;background:var(--primary);transform:translateY(-2px) rotate(45deg);opacity:.7} .mt-list a:hover{color:var(--primary);transform:translateX(3px)} .mt-sub{list-style:none;margin:0 0 4px 15px;padding-left:12px;border-left:1px solid var(--line-2)} .mt-sub a{font-size:.875rem;color:var(--muted);padding:4px 0} @media (max-width:1280px){.mega-tree{gap:24px 28px}.mt-list a{font-size:.9063rem}} .mega-foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-top:26px;padding-top:18px;border-top:1px dashed var(--line);color:var(--muted)} /* drawer */ .drawer{position:fixed;inset:calc(var(--header-h) + env(safe-area-inset-top,0px)) 0 0;z-index:55;background:var(--bg);overflow-y:auto;padding:16px var(--gutter) calc(110px + env(safe-area-inset-bottom,0px));transform:translateX(100%);transition:transform .35s var(--ease);visibility:hidden} .drawer.is-open{transform:none;visibility:visible} .drawer ul{list-style:none} .drawer>ul>li{border-bottom:1px solid var(--line)} .drawer>ul>li>a,.drawer summary{display:flex;justify-content:space-between;align-items:center;padding:18px 4px;font-family:var(--f-display);font-weight:600;font-size:1.25rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;list-style:none} .drawer summary::-webkit-details-marker{display:none} .drawer details[open]>summary>.ico:last-child{transform:rotate(180deg)} .drawer details ul{padding:0 0 14px 4px;display:grid;gap:2px} .drawer details a{display:flex;gap:12px;align-items:center;padding:10px 0;color:var(--muted)} .drawer details a .ico{color:var(--primary);width:22px;height:22px} .drawer .dr-tree{padding:0 0 14px;gap:0} .drawer .dr-practice{border-top:1px solid var(--line)} .drawer .dr-practice summary{justify-content:flex-start;gap:12px;padding:14px 4px;font-size:1rem;letter-spacing:.03em;text-transform:none;font-weight:600} .drawer .dr-practice summary .ico{width:24px;height:24px;color:var(--primary)} .drawer .dr-practice summary .chev{margin-left:auto;color:var(--muted);width:18px;height:18px} .drawer .dr-practice ul{padding:0 0 12px 40px;display:grid;gap:0} .drawer .dr-practice a{display:block;padding:9px 0;color:var(--fg);font-size:.9688rem} .drawer .dr-practice a.dr-overview{color:var(--primary)} .drawer .dr-practice a.dr-sub{padding:6px 0 6px 14px;color:var(--muted);font-size:.9063rem} .drawer .dr-all{display:flex;gap:10px;align-items:center;padding:16px 4px;color:var(--primary);border-top:1px solid var(--line)} .drawer .dr-all .ico{width:18px;height:18px} .drawer .contact-mini{margin-top:24px;display:grid;gap:10px;color:var(--muted)} /* mobile action bar */ .action-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:58;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);gap:8px} .action-bar a{flex:1;min-height:46px;font-size:.8125rem;padding:8px 10px} @media (max-width:1100px){ .nav,.header-cta{display:none} .burger{display:inline-flex} .action-bar{display:flex} body{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))} } /* ---------- sections ---------- */ main{display:block;position:relative} .section{padding-block:clamp(72px,9vw,128px)} .section--tight{padding-block:clamp(48px,6vw,80px)} .section--flush-top{padding-top:0} .sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px 64px;align-items:end;margin-bottom:clamp(36px,5vw,60px)} .sec-head--center{grid-template-columns:1fr;text-align:center;justify-items:center} .sec-head h2{font-size:var(--fs-h2);text-transform:uppercase} .sec-head p{color:var(--muted);max-width:52ch;font-size:var(--fs-lede)} .sec-head--center p{margin-inline:auto;max-width:72ch} .eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;color:var(--primary);font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase} .eyebrow::before{content:"";width:8px;height:8px;background:var(--primary);box-shadow:0 0 10px var(--primary)} @media (max-width:860px){.sec-head{grid-template-columns:1fr}} /* ---------- hero ---------- */ .hero{position:relative;isolation:isolate;padding-top:calc(var(--header-h) + clamp(48px,8vw,104px));padding-bottom:clamp(56px,8vw,104px)} .hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 75% at 22% 52%,color-mix(in srgb,var(--bg) 78%,transparent),transparent 72%)} .hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,72px);align-items:center} .status{display:inline-flex;align-items:center;gap:10px;padding:6px 12px 6px 10px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--panel) 70%,transparent);color:var(--muted)} .status i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent);animation:ping 2.2s infinite} @keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}} .hero h1{font-size:var(--fs-h1);text-transform:uppercase;margin-top:26px;letter-spacing:.01em} .hero .wrap>div:first-child{container-type:inline-size;min-width:0} /* Each admin-entered line stays on one line; size follows the column width (cqi). */ .hero h1{font-size:clamp(2rem,10.2cqi,5.25rem)} .hero h1 .l{display:block;white-space:nowrap} .hero h1 .l.is-hl{color:var(--primary);text-shadow:0 0 28px var(--glow)} .hero .lede{margin-top:26px;max-width:54ch;color:var(--muted);font-size:var(--fs-lede)} .hero .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px} .noc{padding:26px 26px 22px} .noc header{display:flex;justify-content:space-between;gap:12px;color:var(--muted);padding-bottom:14px;border-bottom:1px dashed var(--line-2)} .noc .live{color:var(--ok)} .noc .rows{display:grid;gap:16px;margin-top:20px} .noc .r{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:end} .noc .r span{color:var(--muted);font-size:.9375rem} .noc .r b{font-family:var(--f-mono);font-weight:400;font-size:1.5rem;line-height:1;font-variant-numeric:tabular-nums} .noc .bar{grid-column:1/-1;height:4px;background:var(--line);overflow:hidden} .noc .bar i{display:block;height:100%;width:var(--w,50%);background:linear-gradient(90deg,var(--secondary),var(--primary));box-shadow:0 0 10px var(--primary)} .noc svg{width:100%;height:64px;margin-top:18px} .noc .note{margin-top:10px;color:var(--dim);font-size:.6875rem} @media (max-width:960px){.hero .wrap{grid-template-columns:1fr}.noc{max-width:520px}} /* ---------- page header (inner pages) ---------- */ .page-head{position:relative;padding-top:calc(var(--header-h) + clamp(40px,6vw,80px));padding-bottom:clamp(40px,6vw,72px);border-bottom:1px solid var(--line);overflow:hidden} .page-head canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55;pointer-events:none} .page-head .wrap{position:relative} .page-head h1{font-size:clamp(1.875rem,1.25rem + 2.2vw,3.25rem);line-height:1.08;text-transform:uppercase;max-width:22ch} .page-head .intro{margin-top:20px;max-width:62ch;color:var(--muted);font-size:var(--fs-lede)} .page-head .meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;color:var(--muted)} .crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:22px;color:var(--dim);font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase} .crumbs li{list-style:none;display:flex;gap:10px;align-items:center} .crumbs li+li::before{content:"/";color:var(--line-2)} .crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--primary)} .crumbs [aria-current]{color:var(--primary)} /* ---------- ticker ---------- */ .ticker{position:relative;border-block:1px solid var(--line);background:color-mix(in srgb,var(--panel) 75%,transparent);overflow:hidden;white-space:nowrap;padding-block:16px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .ticker .t{display:inline-flex;gap:44px;padding-right:44px;color:var(--muted);will-change:transform;animation:tick 60s linear infinite} .ticker:hover .t{animation-play-state:paused} .ticker .t span{display:inline-flex;gap:12px;align-items:center} .ticker .t span::before{content:"";width:6px;height:6px;background:var(--primary);box-shadow:0 0 8px var(--primary)} @keyframes tick{to{transform:translateX(-100%)}} /* ---------- service cards ---------- */ .grid{display:grid;gap:24px} .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:1080px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.grid--4,.grid--3,.grid--2{grid-template-columns:minmax(0,1fr)}} .svc{display:flex;flex-direction:column;min-height:100%;overflow:hidden} .svc .media{position:relative;aspect-ratio:16/8;overflow:hidden;margin:1px 1px 0;clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%,0 var(--cut))} .svc .media img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.05);transition:transform .8s var(--ease)} .svc .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,var(--panel-2)),linear-gradient(120deg,color-mix(in srgb,var(--secondary) 35%,transparent),transparent 60%);mix-blend-mode:normal} a.svc:hover .media img{transform:scale(1.05)} .svc .media .code{position:absolute;z-index:1;top:14px;right:16px;padding:3px 8px;color:var(--fg);font-size:.75rem;letter-spacing:.12em; background:color-mix(in srgb,var(--bg) 62%,transparent);border:1px solid color-mix(in srgb,var(--primary) 35%,transparent);backdrop-filter:blur(4px)} .svc--media .body{padding-top:22px} .svc .body{display:flex;flex-direction:column;gap:14px;padding:28px 28px 30px;flex:1} .svc .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .svc .top .ico{width:52px;height:52px;color:var(--primary);filter:drop-shadow(0 0 8px var(--glow))} .svc .code{color:var(--dim)} .svc h3{font-size:1.5rem;letter-spacing:.02em} .svc p{color:var(--muted);font-size:1rem} .svc ul{list-style:none;display:grid;gap:9px;margin-top:4px} .svc li{display:flex;gap:12px;align-items:baseline;font-size:1rem} .svc li::before{content:"";flex:none;width:6px;height:6px;background:var(--primary);box-shadow:0 0 8px var(--primary);transform:translateY(-3px) rotate(45deg)} .svc .link{margin-top:auto;padding-top:14px} .svc .scan{position:absolute;inset:-40% 0 auto;height:40%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--primary) 12%,transparent),transparent);opacity:0;pointer-events:none} a.svc:hover .scan{animation:scan 1.3s var(--ease);opacity:1} @keyframes scan{to{top:110%}} /* ---------- project cards / our work ---------- */ .proj-card h2,.proj-card h3{font-size:1.25rem;line-height:1.25;letter-spacing:.01em} .proj-card .top .ico{width:44px;height:44px} .proj-card .code{text-align:right;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase} .proj-card .where{display:flex;align-items:center;gap:8px;margin-top:-6px;color:var(--dim);font-size:.8125rem;letter-spacing:.04em} .proj-card .where .ico{width:14px;height:14px;flex:none;color:var(--primary)} .proj-card p{font-size:.9375rem} .our-work-grid{margin-top:28px} .our-work-all{margin-top:28px;text-align:center} /* ---------- statement ---------- */ .statement{overflow:hidden;min-height:100svh;display:flex;align-items:center} .statement .track{display:flex;gap:3.5vw;white-space:nowrap;width:max-content;padding-inline:var(--gutter);font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:clamp(3rem,9vw,9.5rem);line-height:1} .statement .w{color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--muted) 45%,transparent);transition:color .3s,text-shadow .3s} .statement .w.on{color:var(--fg);-webkit-text-stroke:0} .statement .w.on.k{color:var(--primary);text-shadow:0 0 34px var(--glow)} .no-pin .statement{min-height:0;padding-block:72px} .no-pin .statement .track{flex-wrap:wrap;white-space:normal;width:auto;font-size:clamp(2.25rem,8vw,4rem);gap:.3em .4em} .no-pin .statement .w{color:var(--fg);-webkit-text-stroke:0} .no-pin .statement .w.k{color:var(--primary)} /* ---------- sectors / stats ---------- */ .tile{padding:26px 24px} .tile .ico{width:40px;height:40px;color:var(--primary);margin-bottom:18px} .tile b{display:block;font-family:var(--f-display);font-size:1.375rem;text-transform:uppercase;letter-spacing:.04em} .tile span{display:block;color:var(--muted);font-size:.9375rem;margin-top:6px} .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line)} .stat{padding:30px 24px} .stat+.stat{border-left:1px solid var(--line)} .stat b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(2.25rem,1.5rem + 2.4vw,3.75rem);line-height:1;color:var(--primary);text-shadow:0 0 24px var(--glow);font-variant-numeric:tabular-nums} .stat span{display:block;margin-top:10px;color:var(--muted)} @media (max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:nth-child(3){border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}} /* ---------- featured project / ANPR ---------- */ .feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:stretch} .feature .txt{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column} .feature h2{font-size:clamp(1.875rem,1.3rem + 2vw,3rem);text-transform:uppercase;margin-top:6px} .feature p{color:var(--muted);margin-top:18px} .feature .facts{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:26px;border-top:1px solid var(--line)} .feature .facts div{padding:14px 12px 14px 0;border-bottom:1px solid var(--line)} .feature .facts dt{color:var(--primary)} .feature .facts dd{margin:4px 0 0} .feature .txt .link{margin-top:auto;padding-top:24px} .cam{padding:20px;display:flex;flex-direction:column;gap:14px} .view{position:relative;flex:1;min-height:280px;overflow:hidden;background: linear-gradient(transparent 49.6%,color-mix(in srgb,var(--primary) 18%,transparent) 50%,transparent 50.4%), linear-gradient(90deg,transparent 49.6%,color-mix(in srgb,var(--primary) 18%,transparent) 50%,transparent 50.4%),#071427} .view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.6)} .view .road{position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(180deg,#0b1d33,#0f2746);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)} .view .road::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--fg) 40%,transparent) 0 14px,transparent 14px 30px)} .view .truck{position:absolute;left:50%;bottom:14%;width:156px;height:112px;margin-left:-78px;border:1.5px solid var(--secondary);background:#0b1f38} .view .truck::before{content:"";position:absolute;inset:10px 14px 46px;border:1px solid var(--line-2)} .view .pl{position:absolute;left:50%;bottom:12px;width:100px;margin-left:-50px;padding:4px 0;text-align:center;background:#e9edf2;color:#0a1a2f;font-weight:600;font-size:.75rem;line-height:1.2} .view .box{position:absolute;left:50%;bottom:calc(14% + 6px);width:114px;height:34px;margin-left:-57px;border:2px solid var(--ok);box-shadow:0 0 12px var(--ok)} .view .box::after{content:"PLATE 98.7%";position:absolute;left:-2px;top:-21px;font-family:var(--f-mono);font-size:.6875rem;background:var(--ok);color:var(--on-primary);padding:1px 6px;white-space:nowrap} .view .rec{position:absolute;top:12px;left:14px;color:var(--danger)} .view .ts{position:absolute;top:12px;right:14px;color:var(--muted)} .cam .out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .cam .out div{border:1px solid var(--line);padding:10px 12px;font-size:.875rem;min-width:0} .cam .out small{display:block;color:var(--muted);font-size:.6875rem} @media (max-width:900px){.feature{grid-template-columns:1fr}} /* ---------- process ---------- */ .wire{height:2px;background:var(--line);position:relative;margin-bottom:28px;overflow:hidden} .wire i{position:absolute;inset:0;background:linear-gradient(90deg,var(--secondary),var(--primary));box-shadow:0 0 10px var(--primary);transform-origin:left;transform:scaleX(var(--p,1))} .steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px} .step{padding:24px 20px} .step .n{color:var(--primary)} .step h3{font-size:1.1875rem;margin:10px 0 8px;text-transform:uppercase;letter-spacing:.03em} .step p{color:var(--muted);font-size:.9375rem} @media (max-width:1080px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.steps{grid-template-columns:1fr}} /* ---------- products ---------- */ .prod{display:flex;flex-direction:column;padding:18px;gap:10px;min-height:100%} .prod .img{position:relative;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;color:var(--secondary);background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--primary) 13%,transparent),transparent 65%)} .prod .img img{width:100%;height:100%;object-fit:contain;padding:8px} .prod .img .ico{width:44%;height:auto;filter:drop-shadow(0 0 8px var(--glow))} .prod .img .feat{position:absolute;top:6px;left:6px;color:var(--warn);font-size:.6875rem} .prod .brand-name{color:var(--muted)} .prod h3{font-family:var(--f-body);font-weight:600;font-size:1.0625rem;line-height:1.35;letter-spacing:0;text-transform:none} .prod .model{color:var(--dim);font-size:.75rem} .prod .price{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line-2);display:flex;justify-content:space-between;align-items:center;color:var(--primary);font-family:var(--f-display);font-weight:600;letter-spacing:.07em;text-transform:uppercase;font-size:.875rem} .prod .price .ico{width:16px;height:16px} .shopbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center;margin-bottom:28px} .tabs,.chips{display:flex;flex-wrap:wrap;gap:8px} .tabs a,.chips a{display:inline-flex;align-items:center;min-height:42px;padding:8px 18px;border:1px solid var(--line-2);color:var(--muted);font-family:var(--f-display);font-weight:600;letter-spacing:.07em;text-transform:uppercase;font-size:.8125rem;transition:all .2s} .chips a{min-height:34px;padding:5px 12px;font-family:var(--f-mono);font-weight:400;font-size:.75rem} .tabs a:hover,.chips a:hover{color:var(--fg);border-color:var(--primary)} .tabs a[aria-current=page]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)} .chips a[aria-current=page]{color:var(--primary);border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)} .cat-card{padding:clamp(26px,3.5vw,40px);min-height:300px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;overflow:hidden} .cat-card h3{font-size:clamp(2rem,1.4rem + 2vw,3rem);text-transform:uppercase} .cat-card p{color:var(--muted);margin-top:10px;max-width:42ch} .cat-card .subs,.cat-card .brands{display:flex;flex-wrap:wrap;gap:8px} .cat-card .subs span,.cat-card .brands span{font-family:var(--f-mono);font-size:.75rem;padding:5px 11px;border:1px solid var(--line-2);color:var(--muted)} .cat-card .ico.bg{position:absolute;right:-20px;top:-10px;width:220px;height:220px;color:var(--primary);opacity:.07;z-index:-1} /* product detail */ .pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start} .gallery{padding:20px} .gallery .main{aspect-ratio:1;display:grid;place-items:center;color:var(--secondary);background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--primary) 14%,transparent),transparent 65%)} .gallery .main img{width:100%;height:100%;object-fit:contain} .gallery .main .ico{width:46%;height:auto} .thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap} .thumbs button{width:72px;height:72px;padding:4px;background:var(--panel);border:1px solid var(--line-2);cursor:pointer} .thumbs button[aria-pressed=true]{border-color:var(--primary)} .thumbs img{width:100%;height:100%;object-fit:contain} .pdp h1{font-size:clamp(1.875rem,1.3rem + 2vw,2.875rem);line-height:1.12} .pdp .lede{color:var(--muted);margin-top:16px;font-size:var(--fs-lede)} .price-box{margin-top:26px;padding:22px} .price-box .label{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:700;font-size:1.5rem;letter-spacing:.04em;text-transform:uppercase;color:var(--primary);text-shadow:0 0 20px var(--glow)} .price-box p{color:var(--muted);margin-top:8px;font-size:.9375rem} .price-box .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px} .phone-line{display:block;margin-top:14px;font-family:var(--f-mono);font-size:1.25rem;color:var(--fg);user-select:all} .specs{width:100%;border-collapse:collapse;margin-top:8px} .specs th,.specs td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;font-size:.9375rem} .specs th{width:40%;color:var(--muted);font-weight:500} .specs tr:nth-child(odd) td,.specs tr:nth-child(odd) th{background:color-mix(in srgb,var(--panel) 60%,transparent)} @media (max-width:900px){.pdp{grid-template-columns:1fr}} /* ---------- posts / projects ---------- */ .post{display:flex;flex-direction:column;overflow:hidden;min-height:100%} .post .cover{position:relative;aspect-ratio:16/9;margin:1px 1px 0;overflow:hidden;clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%,0 var(--cut));background:linear-gradient(135deg,var(--panel-2),var(--bg-2))} .post .cover img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} a.post:hover .cover img{transform:scale(1.05)} .post .cover .ico{position:absolute;right:20px;bottom:16px;width:76px;height:76px;color:var(--primary);opacity:.7;filter:drop-shadow(0 0 10px var(--glow))} .post .cover .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:28px 28px;opacity:.5} .post .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:12px;flex:1} .post .meta{display:flex;justify-content:space-between;gap:12px;color:var(--muted)} .post h3{font-family:var(--f-body);font-weight:600;font-size:1.3125rem;line-height:1.3;letter-spacing:0;text-transform:none} .post p{color:var(--muted);font-size:.9375rem} .post .link{margin-top:auto;padding-top:8px} /* ---------- prose ---------- */ .layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,5vw,72px);align-items:start} .layout aside{position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:20px} @media (max-width:1000px){.layout{grid-template-columns:1fr}.layout aside{position:static}} .prose{font-size:1.125rem;line-height:1.75;color:color-mix(in srgb,var(--fg) 92%,transparent);max-width:72ch} .prose>*+*{margin-top:1.1em} .prose h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin-top:1.8em;text-transform:uppercase;letter-spacing:.02em} .prose h3{font-size:1.375rem;margin-top:1.6em} .prose a{color:var(--primary);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .prose strong{color:var(--fg);font-weight:600} .prose ul,.prose ol{padding-left:1.3em} .prose li+li{margin-top:.45em} .prose ul li::marker{color:var(--primary)} .prose blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--primary);color:var(--fg);font-size:1.25rem} .prose img{margin-block:1.6em} .prose table{width:100%;border-collapse:collapse;font-size:1rem;display:block;overflow-x:auto} .prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left} .prose code{font-family:var(--f-mono);font-size:.9em;background:var(--panel);padding:2px 6px} .answer{padding:22px 24px} .answer .mono{color:var(--primary);display:block;margin-bottom:8px} .answer p{font-size:1.125rem;line-height:1.65} .side-box{padding:24px} .side-box h2,.side-box h3{font-size:1.125rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px} .side-nav{list-style:none;display:grid} .side-nav a{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:.9375rem;transition:color .2s} .side-nav a:hover,.side-nav a[aria-current=page]{color:var(--primary)} .side-nav .sub a{padding-left:16px;font-size:.875rem} .chk{list-style:none;display:grid;gap:10px} .chk li{display:flex;gap:12px;align-items:flex-start} .chk .ico{width:20px;height:20px;color:var(--ok);margin-top:3px} .toc{list-style:none;display:grid;gap:6px;font-size:.9375rem} .toc a{color:var(--muted)} .toc a:hover{color:var(--primary)} /* ---------- FAQ ---------- */ .faq{display:grid;gap:12px;max-width:900px;margin-inline:auto} .faq details{padding:0} .faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;cursor:pointer;list-style:none;font-weight:600;font-size:1.125rem} .faq summary::-webkit-details-marker{display:none} .faq summary:focus{outline:none} .faq summary:focus-visible{outline:none;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--primary) 70%,transparent)} .faq summary .pm{flex:none;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--primary);font-family:var(--f-mono);transition:transform .35s var(--ease),border-color .3s} .faq summary:hover .pm,.faq details[open] summary .pm{border-color:var(--primary)} .faq summary:hover span:first-child{color:var(--primary)} .faq summary span:first-child{transition:color .2s} .faq details[open] summary .pm{transform:rotate(45deg)} .faq .a{overflow:hidden;color:var(--muted)} .faq .a-in{padding:0 24px 22px} /* ---------- forms ---------- */ .form{display:grid;gap:12px} .form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width:640px){.form .row{grid-template-columns:1fr}} .field{display:grid;gap:5px;min-width:0} .field label{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .field input,.field select,.field textarea{width:100%;min-height:44px;padding:9px 12px;background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--line-2);color:var(--fg);font:inherit;font-size:1rem;border-radius:0;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none} .field select{background-image:linear-gradient(45deg,transparent 50%,var(--primary) 50%),linear-gradient(135deg,var(--primary) 50%,transparent 50%);background-position:calc(100% - 20px) 19px,calc(100% - 14px) 19px;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px} .field textarea{min-height:96px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)} .field .err{color:var(--danger);font-size:.875rem} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .alert{padding:16px 18px;border:1px solid var(--ok);color:var(--fg);background:color-mix(in srgb,var(--ok) 10%,transparent);display:flex;gap:12px;align-items:flex-start} .alert .ico{color:var(--ok);width:22px;height:22px;margin-top:2px} .form-note{font-size:.8125rem;color:var(--dim)} .contact-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:28px;align-items:start} .contact-card{padding:clamp(20px,3vw,32px)} .contact-list{list-style:none;display:grid;gap:22px} .contact-list li{display:grid;grid-template-columns:44px 1fr;gap:4px 14px} .contact-list .ico{grid-row:1/3;width:40px;height:40px;padding:9px;color:var(--primary);border:1px solid var(--line-2)} .contact-list small{color:var(--muted)} .contact-list b{font-weight:500;font-size:1.0625rem;word-break:break-word} .map{margin-top:28px;aspect-ratio:16/10;border:1px solid var(--line-2);filter:grayscale(.6) invert(.9) hue-rotate(180deg) contrast(.9)} .map iframe{width:100%;height:100%;border:0} @media (max-width:960px){.contact-grid{grid-template-columns:1fr}} /* ---------- CTA + footer ---------- */ .cta{padding:clamp(32px,6vw,72px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px;align-items:center} .cta h2{font-size:clamp(2rem,1.3rem + 2.8vw,4rem);text-transform:uppercase;margin-top:6px} .cta .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px} .cta .contact{display:grid;gap:4px;font-family:var(--f-mono)} .cta .contact span{color:var(--muted);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;margin-top:12px} .cta .contact span:first-child{margin-top:0} .cta .contact b{font-weight:400;font-size:1.125rem;user-select:all;word-break:break-word} @media (max-width:900px){.cta{grid-template-columns:1fr}} /* Documents block: certificate cards (cover · details · View / Download) */ .docs{display:grid;gap:22px} .doc-card{display:grid;grid-template-columns:minmax(110px,165px) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:center;padding:clamp(18px,2.4vw,28px)} .doc-cover{display:block;position:relative;aspect-ratio:1/1.414;overflow:hidden;background:#fff;border:1px solid var(--line-2); box-shadow:0 14px 30px -14px var(--shadow),0 0 0 4px color-mix(in srgb,var(--primary) 6%,transparent);transition:transform .35s var(--ease),box-shadow .35s var(--ease)} .doc-cover img{width:100%;height:100%;object-fit:cover;object-position:top} .doc-cover:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 20px 36px -14px var(--shadow),0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent)} .doc-cover-blank{display:grid;place-content:center;justify-items:center;gap:8px;height:100%;background:var(--panel-2);color:var(--primary)} .doc-cover-blank .ico{width:46px;height:46px} .doc-body{display:grid;gap:10px;justify-items:start} .doc-label{display:flex;align-items:center;gap:10px;color:var(--primary);font-size:.75rem;letter-spacing:.14em} .doc-label::before{content:"";width:22px;height:1px;background:currentColor} .doc-body h3{font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);letter-spacing:.01em} .doc-body p{max-width:62ch} .doc-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px} .doc-acts .ico{width:18px;height:18px} .doc-acts .btn:hover .ico{transform:none} .doc-size{opacity:.75;letter-spacing:.04em} .docs-empty{padding:28px 0} @media (max-width:640px){.doc-card{grid-template-columns:1fr}.doc-cover{max-width:200px}} /* CTA: light animated backdrop (grid drift, floating glows, data network, scan sweep), clipped to the HUD shape */ .cta>:not(.cta-bg):not(.tab){position:relative;z-index:1} .cta-bg{--a:1;position:absolute;inset:1px;z-index:0;overflow:hidden;pointer-events:none; clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))} .cta-bg>*{position:absolute} .cta-grid{inset:-60px;opacity:calc(.5*var(--a)); background-image:linear-gradient(color-mix(in srgb,var(--primary) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--primary) 9%,transparent) 1px,transparent 1px); background-size:44px 44px;animation:cta-grid 24s linear infinite; -webkit-mask-image:radial-gradient(ellipse 70% 90% at 70% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 90% at 70% 50%,#000 20%,transparent 75%)} .cta-orb{width:46%;aspect-ratio:1;left:52%;top:-30%;border-radius:50%;filter:blur(60px);opacity:calc(.32*var(--a)); background:radial-gradient(circle,var(--primary),transparent 65%);animation:cta-float 16s ease-in-out infinite alternate} .cta-orb--b{left:-12%;top:35%;width:40%;background:radial-gradient(circle,var(--secondary),transparent 65%);opacity:calc(.26*var(--a));animation-duration:21s;animation-direction:alternate-reverse} .cta-net{inset:0;width:100%;height:100%;opacity:calc(.8*var(--a));-webkit-mask-image:linear-gradient(90deg,transparent 8%,rgba(0,0,0,.35) 38%,#000 62%);mask-image:linear-gradient(90deg,transparent 8%,rgba(0,0,0,.35) 38%,#000 62%)} .cta-net path{vector-effect:non-scaling-stroke} .cta-links path{fill:none;stroke:color-mix(in srgb,var(--primary) 16%,transparent);stroke-width:1} .cta-flow path{fill:none;stroke:var(--primary);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:18 520;opacity:.55; filter:drop-shadow(0 0 4px var(--primary));animation:cta-flow 7s linear infinite;animation-delay:var(--d,0s)} .cta-nodes circle{fill:var(--primary);opacity:.4;transform-box:fill-box;transform-origin:center;animation:cta-node 4.8s ease-in-out infinite;animation-delay:var(--d,0s)} .cta-scan{left:0;right:0;top:-20%;height:28%;opacity:calc(.6*var(--a)); background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--primary) 7%,transparent) 70%,color-mix(in srgb,var(--primary) 22%,transparent) 99%,transparent); animation:cta-scan 9s cubic-bezier(.45,0,.55,1) infinite} @keyframes cta-grid{to{transform:translate(44px,44px)}} @keyframes cta-float{from{transform:translate(0,0) scale(1)}to{transform:translate(-14%,18%) scale(1.15)}} @keyframes cta-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-538}} @keyframes cta-node{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:.7;transform:scale(1.25)}} @keyframes cta-scan{0%{top:-30%}60%,100%{top:110%}} html[data-scheme="light"] .cta-bg{--a:.55} @media (max-width:900px){.cta-net{opacity:calc(.6*var(--a))}} @media (prefers-reduced-motion:reduce){.cta-bg *{animation:none!important}.cta-scan{display:none}} .site-footer{position:relative;border-top:1px solid var(--line);background:var(--footer-bg);padding-block:64px 32px;color:var(--muted);font-size:.9375rem} .foot{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:36px} .foot h2{margin:0 0 14px;font-family:var(--f-display);font-size:.875rem;text-transform:uppercase;letter-spacing:.12em;color:var(--primary)} .foot ul{list-style:none;display:grid;gap:8px} .foot a:hover{color:var(--fg)} .foot .about p{margin-top:16px;max-width:38ch} .foot-contact{list-style:none;display:grid;gap:12px;margin-top:20px;max-width:40ch} .foot-contact li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;line-height:1.5} .foot-contact .ico{width:18px;height:18px;margin-top:2px;color:var(--primary)} .foot-contact address{font-style:normal} .foot-contact a{word-break:break-word} .socials{display:flex;gap:8px;margin-top:20px} .socials a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--muted);transition:all .2s} .socials a:hover{color:var(--primary);border-color:var(--primary)} .socials .ico{width:20px;height:20px} .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line);font-size:.8125rem} .legal nav{display:flex;flex-wrap:wrap;gap:18px} @media (max-width:900px){.foot{grid-template-columns:1fr 1fr}.foot .about{grid-column:1/-1}} /* ---------- misc ---------- */ .pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:48px} .pagination a,.pagination span{min-width:44px;height:44px;display:grid;place-items:center;padding:0 12px;border:1px solid var(--line-2);font-family:var(--f-mono);color:var(--muted)} .pagination a:hover{border-color:var(--primary);color:var(--primary)} .pagination [aria-current]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)} .pagination{align-items:center} .pagination .pg-pages{display:flex;flex-wrap:wrap;gap:8px} .pagination .pg-step b{font-weight:inherit;white-space:pre} .pagination .pg-step{display:flex;align-items:center;justify-content:center;padding:0 16px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase} .pagination .pg-step.is-off{opacity:.35} .pagination .pg-gap{border-color:transparent} .pagination .pg-info{flex-basis:100%;margin:6px 0 0;text-align:center;font-family:var(--f-mono);font-size:.75rem;color:var(--muted)} .chips a .count{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:8px;padding:0 5px;border:1px solid var(--line-2);font-size:.6875rem;line-height:1;color:var(--muted)} .chips a[aria-current=page] .count,.chips a:hover .count{border-color:var(--primary);color:var(--primary)} @media (max-width:640px){.pagination{gap:6px}.pagination .pg-step{padding:0 10px}.pagination .pg-step b{display:none}.pagination .pg-pages{gap:6px}.pagination a,.pagination span{min-width:40px;height:40px}} .empty{padding:48px;text-align:center;color:var(--muted)} .tags{display:flex;flex-wrap:wrap;gap:8px} .tags span,.tags a{font-family:var(--f-mono);font-size:.75rem;padding:4px 10px;border:1px solid var(--line-2);color:var(--muted)} .logo-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 48px;align-items:center} .logo-row img{height:40px;width:auto;opacity:.7;filter:grayscale(1) brightness(1.6);transition:all .3s} .logo-row img:hover{opacity:1;filter:none} .logo-row span{font-family:var(--f-display);font-weight:700;font-size:1.375rem;letter-spacing:.06em;color:var(--dim)} .quote{padding:28px} .quote p{font-size:1.125rem} .quote footer{margin-top:16px;color:var(--muted);font-size:.9375rem} .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center} .split--rev>:first-child{order:2} .split .media{overflow:hidden} .split img{width:100%;height:auto} @media (max-width:860px){.split{grid-template-columns:1fr}.split--rev>:first-child{order:0}} .notfound{min-height:70svh;display:grid;place-items:center;text-align:center;padding-top:var(--header-h)} .notfound .code{font-family:var(--f-display);font-weight:700;font-size:clamp(6rem,20vw,14rem);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--primary);text-shadow:0 0 40px var(--glow)} /* entrance animation hooks (GSAP adds/removes inline styles) */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .ticker .t{animation:none} } @media print{.site-header,.action-bar,.wa-float,.drawer,#net,.atmos,.site-footer{display:none!important}body{background:#fff;color:#000}} /* ---------- solution pages ---------- */ .sub-head{font-size:clamp(1.375rem,1.1rem + .9vw,1.875rem);text-transform:uppercase;letter-spacing:.03em;margin:56px 0 22px;display:flex;align-items:center;gap:14px} .sub-head::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)} .prose--lead>p:first-child{font-size:1.25rem;line-height:1.65;color:var(--fg)} .chk--grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px} @media (max-width:640px){.chk--grid{grid-template-columns:1fr}} .method .sec-head h2{font-size:clamp(1.75rem,1.2rem + 1.9vw,2.75rem)} .phases{list-style:none;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:16px} .phase{padding:26px 22px 28px;display:flex;flex-direction:column;gap:10px} .phase .n{color:var(--primary)} .phase h3{font-size:1.1875rem;text-transform:uppercase;letter-spacing:.03em} .phase p{color:var(--muted);font-size:.9688rem;line-height:1.6} @media (max-width:1000px){.phases{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.phases{grid-template-columns:1fr}} .support{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(28px,4.5vw,56px)} .support-h .ico{width:52px;height:52px;color:var(--primary);filter:drop-shadow(0 0 10px var(--glow));margin-bottom:18px} .support-h .eyebrow{display:flex} .support h2{font-size:clamp(1.625rem,1.2rem + 1.5vw,2.5rem);text-transform:uppercase} .support p{color:color-mix(in srgb,var(--fg) 88%,transparent);font-size:1.0938rem;line-height:1.75} @media (max-width:860px){.support{grid-template-columns:1fr}} .sib-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;border-top:1px solid var(--line);padding-top:28px} .sib-nav a{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);color:var(--muted);font-family:var(--f-display);font-weight:600;font-size:.9375rem;line-height:1.25;transition:all .2s} .sib-nav a .ico{width:28px;height:28px;color:var(--primary)} .sib-nav a:hover,.sib-nav a[aria-current]{color:var(--fg);border-color:var(--primary);background:color-mix(in srgb,var(--primary) 7%,transparent)} @media (max-width:1000px){.sib-nav{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:520px){.sib-nav{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ---------- gallery grid + lightbox ---------- */ .gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:200px;grid-auto-flow:dense;gap:12px} .g-item{position:relative;margin:0;overflow:hidden;border:1px solid var(--line-2);background:var(--panel)} .g-item button{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in} .g-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .4s} .g-item:hover img{transform:scale(1.05);filter:brightness(1.08)} .g-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 10px;background:linear-gradient(transparent,rgba(4,12,24,.88));font-size:.875rem;color:#eef6fb;pointer-events:none} .g-item::after{content:"";position:absolute;inset:0;border:1px solid transparent;transition:border-color .3s;pointer-events:none} .g-item:hover::after{border-color:var(--primary);box-shadow:inset 0 0 24px color-mix(in srgb,var(--primary) 18%,transparent)} /* Layouts per photo count so the grid never leaves holes. 3 cols: first photo 2x2 when there are 3+; trailing photos stretch to close the last row. */ .g-3 .g-item:first-child,.g-4 .g-item:first-child,.g-5 .g-item:first-child,.g-6 .g-item:first-child{grid-column:span 2;grid-row:span 2} .g-1{grid-template-columns:1fr;grid-auto-rows:380px} .g-2{grid-auto-rows:260px;grid-template-columns:repeat(2,minmax(0,1fr))} .g-4 .g-item:nth-child(4){grid-column:span 3} .g-5 .g-item:nth-child(5){grid-column:span 2} .g-many .g-item:last-child:nth-child(3n+1){grid-column:span 3} .g-many .g-item:last-child:nth-child(3n+2){grid-column:span 2} @media (max-width:640px){ .g-many .g-item:last-child:nth-child(3n+1),.g-many .g-item:last-child:nth-child(3n+2){grid-column:span 1} .g-many .g-item:last-child:nth-child(odd){grid-column:span 2} .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px} .g-1{grid-template-columns:1fr;grid-auto-rows:240px} .g-2{grid-auto-rows:180px} .g-3 .g-item:first-child,.g-4 .g-item:first-child,.g-5 .g-item:first-child,.g-6 .g-item:first-child{grid-column:span 2;grid-row:span 2} .g-4 .g-item:nth-child(4){grid-column:span 2} .g-5 .g-item:nth-child(5){grid-column:span 1} .g-6 .g-item:nth-child(6){grid-column:span 2} } .lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(3,8,16,.94);color:var(--fg)} .lightbox::backdrop{background:rgba(3,8,16,.94)} .lightbox[open]{display:grid;grid-template-rows:auto 1fr auto;animation:lbin .25s var(--ease)} @keyframes lbin{from{opacity:0}} .lb-top{display:flex;justify-content:space-between;align-items:center;padding:16px var(--gutter);color:var(--muted)} .lb-stage{position:relative;display:grid;place-items:center;min-height:0;padding:0 72px} .lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border:1px solid var(--line-2);box-shadow:0 0 60px rgba(0,0,0,.6)} .lb-cap{padding:16px var(--gutter) calc(20px + env(safe-area-inset-bottom,0px));text-align:center;color:var(--fg);min-height:56px} .lb-btn{display:grid;place-items:center;width:48px;height:48px;background:color-mix(in srgb,var(--panel) 80%,transparent);border:1px solid var(--line-2);color:var(--fg);cursor:pointer;transition:all .2s} .lb-btn:hover{border-color:var(--primary);color:var(--primary)} .lb-btn .ico{width:22px;height:22px} .lb-prev,.lb-next{position:absolute;top:50%;margin-top:-24px} .lb-prev{left:16px}.lb-prev .ico{transform:rotate(180deg)} .lb-next{right:16px} @media (max-width:640px){.lb-stage{padding:0 8px}.lb-prev,.lb-next{top:auto;bottom:-56px}.lb-prev{left:var(--gutter)}.lb-next{right:var(--gutter)}} /* ---------- animated line icons (solution cards) ---------- Parts of each icon carry a-* classes (see App\Support\Icons). Motion only runs inside svg.anim; --t scales speed (hovering a card doubles it). */ .anim{--t:1;overflow:visible} a:hover .anim,.anim:hover{--t:.45} .anim *{transform-box:fill-box;transform-origin:center} .anim .a-pan,.anim .a-spin{transform-box:view-box} .anim .a-flow{stroke-dasharray:3 9;animation:ic-flow calc(var(--t) * 1.6s) linear var(--d,0s) infinite} .anim .a-flow.a-short{stroke-dasharray:2 5} .anim .a-blink{animation:ic-blink calc(var(--t) * 2.2s) ease-in-out var(--d,0s) infinite} .anim .a-pulse{animation:ic-pulse calc(var(--t) * 2.4s) ease-in-out infinite} .anim .a-wave{animation:ic-wave calc(var(--t) * 1.8s) ease-in-out var(--d,0s) infinite} .anim .a-pan{animation:ic-pan calc(var(--t) * 3.4s) ease-in-out infinite alternate} .anim .a-spin{animation:ic-spin calc(var(--t) * 6s) linear infinite} .anim .a-spin.a-slow{animation-duration:calc(var(--t) * 16s)} .anim .a-scan-y{animation:ic-scan-y calc(var(--t) * 2.2s) ease-in-out infinite alternate;filter:drop-shadow(0 0 3px currentColor)} .anim .a-scan-x{animation:ic-scan-x calc(var(--t) * 2.4s) ease-in-out infinite alternate;filter:drop-shadow(0 0 3px currentColor)} .anim .a-focus{animation:ic-focus calc(var(--t) * 2.4s) ease-in-out infinite} .anim .a-load{stroke-dasharray:12;animation:ic-load calc(var(--t) * 2.4s) ease-in-out var(--d,0s) infinite} .anim .a-flash{animation:ic-flash calc(var(--t) * 3.2s) linear infinite} .anim .a-drive{animation:ic-drive calc(var(--t) * 2.6s) ease-in-out infinite alternate} .anim .a-shine{animation:ic-blink calc(var(--t) * 2.6s) ease-in-out infinite} @keyframes ic-flow{to{stroke-dashoffset:-24}} @keyframes ic-blink{0%,100%{opacity:1}50%{opacity:.2}} @keyframes ic-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.75}} @keyframes ic-wave{0%,100%{opacity:.2}35%{opacity:1}} @keyframes ic-pan{from{transform:rotate(-8deg)}to{transform:rotate(7deg)}} @keyframes ic-spin{to{transform:rotate(360deg)}} @keyframes ic-scan-y{from{transform:translateY(0);opacity:.2}50%{opacity:1}to{transform:translateY(27px);opacity:.2}} @keyframes ic-scan-x{from{transform:translateX(0);opacity:.2}50%{opacity:1}to{transform:translateX(32px);opacity:.2}} @keyframes ic-focus{0%,100%{transform:scale(1)}50%{transform:scale(.92)}} @keyframes ic-load{0%{stroke-dashoffset:12}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-12}} @keyframes ic-flash{0%,82%,88%,100%{opacity:1;filter:none}84%,90%{opacity:.25}86%,94%{opacity:1;filter:drop-shadow(0 0 6px currentColor) drop-shadow(0 0 2px #fff)}} @keyframes ic-drive{from{transform:translateX(0)}to{transform:translateX(-7px)}} @media (prefers-reduced-motion:reduce){.anim *{animation:none!important}} /* ================= Light theme ================= html[data-scheme] is set before first paint by the inline script in the layout (visitor choice → site default → device preference). Brand colours for light mode come from Settings and are written inline after these defaults. */ html[data-scheme="light"]{ --primary:#08808f;--secondary:#2a68a6;--bg:#eef3f8; --bg-2:#e5edf4;--panel:#ffffff;--panel-2:#f6f9fc;--line:#d5e0ea;--line-2:#b6c9da; --fg:#0b1a2b;--muted:#4a5f74;--dim:#687e93;--ok:#0e8a56;--warn:#a96b12;--danger:#c63444; --on-primary:#ffffff;--glow:color-mix(in srgb,var(--primary) 22%,transparent); --shadow:rgba(16,42,72,.16);--neon-hot:var(--secondary);--footer-bg:#e3ebf3; color-scheme:light; } html[data-scheme="light"] .atmos::after{opacity:.6} /* the additive-glow network reads as dark teal lines on light backgrounds */ html[data-scheme="light"] #net{filter:invert(1) hue-rotate(180deg) saturate(1.1) opacity(.38)} html[data-scheme="light"] .page-head canvas{opacity:.3} html[data-scheme="light"] .hud::after{background:linear-gradient(180deg,var(--panel),var(--panel-2))} html[data-scheme="light"] .hud--glow{filter:drop-shadow(0 10px 24px var(--shadow)) drop-shadow(0 0 10px color-mix(in srgb,var(--primary) 14%,transparent))} html[data-scheme="light"] .hud--quiet{filter:drop-shadow(0 6px 16px rgba(16,42,72,.08))} html[data-scheme="light"] a.hud:hover,html[data-scheme="light"] .hud--hover:hover{filter:drop-shadow(0 14px 28px var(--shadow)) drop-shadow(0 0 12px color-mix(in srgb,var(--primary) 22%,transparent))} html[data-scheme="light"] .glow-text,html[data-scheme="light"] .hero h1 .l.is-hl,html[data-scheme="light"] .stat b{text-shadow:none} html[data-scheme="light"] .btn--ghost{text-shadow:none} html[data-scheme="light"] .map{filter:none} html[data-scheme="light"] .brand img{filter:none} .brand .logo-light,html[data-scheme="light"] .brand .logo-dark{display:none} html[data-scheme="light"] .brand .logo-light{display:block} html[data-scheme="light"] .ticker{background:color-mix(in srgb,var(--panel) 80%,transparent)} /* "screens" stay dark in both themes */ .view,.cam .out,.lightbox{--fg:#e7f2f9;--muted:#93a9c0;--dim:#62809c;--line:#16304f;--line-2:#21456d;--panel:#0a1a2f;--primary:#4fd8e3;--ok:#43e09a} html[data-scheme="light"] .cam .out{background:#0a1a2f;color:#e7f2f9} /* ---------- theme switch ---------- */ .theme-toggle{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:1.5px solid color-mix(in srgb,var(--primary) 60%,var(--line-2));background:color-mix(in srgb,var(--panel) 75%,transparent);color:var(--fg);cursor:pointer;transition:color .2s,border-color .2s,background .2s} .theme-toggle .ico{stroke-width:2.6} .theme-toggle:hover{color:var(--primary);border-color:var(--primary)} .theme-toggle .ico{width:20px;height:20px;grid-area:1/1;transition:transform .45s var(--ease),opacity .3s} .theme-toggle .i-sun{opacity:0;transform:rotate(-90deg) scale(.5)} html[data-scheme="light"] .theme-toggle .i-sun{opacity:1;transform:none} html[data-scheme="light"] .theme-toggle .i-moon{opacity:0;transform:rotate(90deg) scale(.5)} html.theme-anim,html.theme-anim *{transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease!important} @media (max-width:1100px){.site-header>.wrap{gap:10px}.brand{margin-right:auto}.theme-toggle{margin-left:auto}.theme-toggle~.burger{margin-left:0}} /* Header icon buttons: chamfered frame drawn with two clipped layers so the border follows the cut corners (a plain border would be sliced off by clip-path). */ .burger,.theme-toggle{--bd:color-mix(in srgb,var(--primary) 60%,var(--line-2));position:relative;isolation:isolate;border:0;background:none} .burger::before,.burger::after,.theme-toggle::before,.theme-toggle::after{content:"";position:absolute;z-index:-1;pointer-events:none} .burger::before,.theme-toggle::before{inset:0;background:var(--bd);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:background .2s} .burger::after,.theme-toggle::after{inset:1.5px;background:var(--panel);clip-path:polygon(9.4px 0,100% 0,100% calc(100% - 9.4px),calc(100% - 9.4px) 100%,0 100%,0 9.4px)} .burger:hover,.burger[aria-expanded="true"],.theme-toggle:hover{--bd:var(--primary)} /* Menu button: same running neon edge as the outlined buttons, so it draws the eye on mobile. */ .burger{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--primary) 32%,transparent));transition:filter .35s} .burger::before{background:conic-gradient(from var(--neon), color-mix(in srgb,var(--primary) 35%,transparent) 0deg 110deg, color-mix(in srgb,var(--primary) 75%,transparent) 140deg,var(--neon-hot) 158deg,var(--primary) 166deg, color-mix(in srgb,var(--primary) 35%,transparent) 195deg 290deg, color-mix(in srgb,var(--secondary) 85%,transparent) 320deg,var(--primary) 338deg, color-mix(in srgb,var(--primary) 35%,transparent) 360deg); animation:neon-run 3.6s linear infinite} .burger:hover,.burger:focus-visible,.burger[aria-expanded="true"]{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--primary) 55%,transparent)) drop-shadow(0 0 2px var(--primary))} .burger:hover::before,.burger:focus-visible::before,.burger[aria-expanded="true"]::before{animation-duration:1.4s} @media (prefers-reduced-motion:reduce){.burger::before{animation:none;background:var(--primary)}} /* ---------- themed dropdown (enhances