/* The first IOTICS website's typography, spacing, header and orbital presentation,
   adapted for Alpha Electronics' existing green brand. Loaded after base styles. */
@font-face{font-family:Inter;src:url('/public/fonts/Inter-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('/public/fonts/Inter-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url('/public/fonts/Manrope-700.ttf') format('truetype');font-weight:700;font-display:swap}
:root{color-scheme:light;--ink:#1d1d1f;--paper:#fafafd;--muted:#525e55;--soft:#eff4ef;--line:#d8e3d9;--accent:#2f872d;--surface:rgba(250,253,250,.75);--font:Inter,Arial,sans-serif}
:root[data-theme=dark]{color-scheme:dark;--ink:#f1f6f1;--paper:#07110c;--muted:#a9bcaf;--soft:#12251a;--line:#2a4432;--accent:#96ef76;--surface:rgba(12,27,18,.8)}
body{font-family:Inter,Arial,sans-serif;background:var(--paper);color:var(--ink)}h1,h2,h3{font-family:Manrope,Inter,Arial,sans-serif;font-weight:700;letter-spacing:-.035em}h2{font-size:clamp(38px,4.5vw,64px);line-height:1.14}h3{letter-spacing:-.025em}.container{width:min(1140px,calc(100% - 64px))}.section{padding-block:135px}.eyebrow{font:600 13px/1.5 Inter,sans-serif;letter-spacing:.04em;color:var(--accent);margin-bottom:24px}.eyebrow::before{display:none}.button,.header-cta{border-radius:999px}.button{font:600 14px/1.5 Inter,sans-serif;letter-spacing:.01em;min-height:48px;padding:12px 26px}.button:hover{transform:none}.button .arrow{display:none}.text-link{color:var(--accent);border:0;font-weight:400;font-size:14px;gap:8px}.text-link:hover{text-decoration:underline;text-underline-offset:5px}.section-heading{text-align:center;flex-direction:column;align-items:center;gap:28px;margin-bottom:64px}.section-heading>p{max-width:680px;font-size:16px;letter-spacing:.015em;line-height:1.65;margin:0;padding:0}.section-heading h2{max-width:950px}.tags span{border-color:var(--line);color:var(--muted)}
#app{position:relative;z-index:1;transition:opacity .7s ease}.network-background{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 0% 40%,#2f872d0a,transparent 65%),radial-gradient(ellipse at 100% 70%,#96ef7610,transparent 65%),var(--paper)}.network-background canvas{display:block;width:100%;height:100%;opacity:0}.network-background.is-ready canvas{opacity:var(--network-opacity,.7);mask-image:linear-gradient(90deg,#000,rgba(0,0,0,var(--network-center,.75)) 24%,rgba(0,0,0,var(--network-center,.75)) 76%,#000);transition:opacity .7s ease}.intro-pending .network-background.is-ready canvas{opacity:1;mask-image:none}.network-fallback{position:absolute;width:64px;height:64px;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.35;filter:blur(2px)}.network-background.is-ready.scene-logo-ready .network-fallback{opacity:0}.intro-pending #app{visibility:hidden;opacity:0;pointer-events:none}.intro-pending .network-fallback{opacity:1;filter:none;width:min(50vh,75vw);height:auto}.skip-intro{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:40;border:1px solid var(--line);color:var(--muted);background:var(--paper);padding:10px 18px;border-radius:30px;font-size:11px}.motion-control{position:fixed;right:18px;bottom:18px;width:42px;height:42px;z-index:10;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--muted);font-size:16px;opacity:.85}.motion-control:hover{opacity:1}.motion-control[hidden],.skip-intro[hidden]{display:none}#cosmos-finale{height:350svh;min-height:1900px;pointer-events:none}
.site-header{position:fixed;inset:0 0 auto;background:rgba(29,31,29,.68);color:#fff;border-bottom:1px solid #ffffff1c;backdrop-filter:blur(20px)}.header-inner{width:min(1140px,calc(100% - 48px));height:52px;min-height:52px;gap:35px;justify-content:center}.site-header .brand-word{display:none}.site-header .brand-mark{filter:brightness(0) invert(1);width:23px;height:25px}.site-header .brand{min-height:44px;min-width:30px}.desktop-nav{gap:38px;font-size:12px;letter-spacing:.025em}.desktop-nav a{padding:14px 0}.desktop-nav a:hover{color:var(--lime)}.header-actions{gap:25px}.language select{color:white;font:12px Inter,Arial,sans-serif;padding-block:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='white'/%3E%3C/svg%3E")}.language option{background:#18231c;color:white}.header-cta{padding:7px 17px;min-height:32px;font-size:11px;gap:12px}.header-cta .arrow{width:15px;height:15px}.menu-toggle span{background:#fff}.mobile-menu{background:var(--paper);color:var(--ink)}.mobile-menu .brand img{filter:brightness(0)}[data-theme=dark] .mobile-menu .brand img{filter:brightness(0) invert(1)}.mobile-menu nav a:last-child{color:var(--accent)}
.hero{position:relative;min-height:1130px;padding-top:140px;padding-bottom:100px;text-align:center}.hero-heading{display:block;margin:0}.hero-heading .eyebrow{color:var(--muted);font-size:13px;letter-spacing:.04em}.hero h1{font-size:clamp(52px,6vw,86px);line-height:1.04;font-weight:700;letter-spacing:-.04em;max-width:1050px;margin:auto}.hero-space{height:325px;pointer-events:none}.hero-statement{max-width:850px;margin:auto}.hero-statement h2{font-size:clamp(44px,5.4vw,74px);line-height:1.08}.hero-statement>p{max-width:620px;margin:30px auto;color:var(--muted);font-size:16px;line-height:1.65}.hero-actions{flex-direction:row;justify-content:center;align-items:center;gap:30px;margin-top:22px}.trust{border:0;padding:30px 0 100px}.trust>p{font-size:12px;margin-bottom:40px}.trust-logos{gap:50px}.trust-logos img{opacity:.48}[data-theme=dark] .trust-logos img{filter:brightness(0) invert(1);opacity:.6}
.solution-tablist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;border-bottom:1px solid var(--line);gap:22px}.solution-tablist button{border:0;background:none;color:var(--ink);padding:22px 4px 28px;text-align:left;display:flex;flex-direction:column;gap:14px;min-width:0}.solution-tablist button .icon{color:var(--muted);width:25px;height:25px}.solution-tablist strong{font-size:15px;font-weight:600;line-height:1.4}.solution-tablist button>span{font-size:12px;color:var(--muted);line-height:1.5}.solution-tablist button[aria-selected=true],.solution-tablist button[aria-selected=true] .icon{color:var(--accent)}.tab-indicator{position:absolute;top:0;left:0;height:2px;background:var(--accent);pointer-events:none;transition:transform .5s cubic-bezier(.22,.7,.2,1),width .5s ease}.solution-panels{padding-top:44px;min-height:310px}.solution-panels>[role=tabpanel]{display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:70px;padding:0 4px;animation:tab-in .45s ease both}.solution-panels>[hidden]{display:none}.solution-panel-copy h3{font-size:29px;margin-bottom:20px;line-height:1.2}.solution-panel-copy>p{font-size:15px;line-height:1.7;color:var(--muted)}.solution-panel-copy .text-link{margin-top:14px}.solution-panel-visual .mini-visual{display:block;max-width:275px;height:auto;min-height:150px;margin:auto;background:var(--surface);border-color:var(--line);box-shadow:none;border-radius:16px;padding:18px}.solution-panel-visual .visual-caption{font-size:8px}.solution-panel-visual .data-caption{font-size:6px}.solution-panel-visual .control-grid>div{height:95px}.solution-panel-visual .data-grid{gap:15px;padding:22px 0}.solution-panel-visual .data-grid i{height:12px}
.projects-section{background:none}.project-filters{justify-content:center;margin-bottom:65px;border-bottom:1px solid var(--line);padding-bottom:0;border-radius:0;gap:32px}.filter{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--muted);padding:14px 2px;font-size:14px}.filter.active{background:none;color:var(--accent);border-color:var(--accent)}.projects-grid{display:flex;flex-direction:column;gap:90px}.project-card{width:100%}.project-link{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr;column-gap:75px;align-items:center}.project-image{grid-column:2;grid-row:1/4;margin:0;height:340px;border-radius:24px;background:var(--soft);border:1px solid var(--line)}.project-card:nth-child(even) .project-image{grid-column:1}.project-card:nth-child(even) .small-label,.project-card:nth-child(even) h3,.project-card:nth-child(even) .project-link>p:last-child{grid-column:2}.project-card .small-label{font-size:12px;color:var(--accent);align-self:end;margin-bottom:24px;margin-top:40px}.project-card h3{font-size:38px;line-height:1.15;margin:0 0 25px}.project-card .project-link>p:last-child{font-size:16px;line-height:1.6;max-width:420px;align-self:start;color:var(--muted);margin-bottom:40px}.project-open{background:var(--paper);color:var(--accent);border:1px solid var(--line);width:38px;height:38px;font-size:20px}.project-card:hover .project-open{color:var(--deep)}
.connected{background:transparent;color:var(--ink)}.connected::before{display:none}.connected .eyebrow{color:var(--accent)}.connected-header{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}.connected h2{font-size:clamp(38px,4.5vw,64px)}.connected-copy{padding:0;display:block}.connection-mark{display:none}.connected-copy>p{max-width:650px;font-size:16px;color:var(--muted)}.flow-grid{margin-top:80px;gap:45px}.flow-node{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:20px 0;height:75px}.flow-node>.icon{color:var(--accent);width:32px;height:32px}.flow-index{color:var(--accent)}.flow-wire{top:37px;background:var(--line)}.flow-wire i{background:var(--green);box-shadow:0 0 6px #96ef7690}.flow-stage h3{font:600 17px/1.4 Inter,sans-serif;margin-top:22px;letter-spacing:0}.flow-stage p{font-size:14px;color:var(--muted);line-height:1.6}.flow-note{color:var(--muted);text-align:center;margin-top:50px;font-size:11px}
.process-grid{gap:40px}.step-number{font-family:Manrope,Inter,sans-serif;font-size:64px;font-weight:700;line-height:1;color:var(--line)}.step-line{margin:24px 0}.process-step h3{font-size:22px;line-height:1.35}.process-step p{font-size:14px;line-height:1.65;color:var(--muted)}.about-section{display:flex;flex-direction:column-reverse;text-align:center;gap:55px;padding-block:130px;max-width:1140px}.about-copy h2{font-size:clamp(36px,4.5vw,60px);margin-bottom:30px}.about-copy>p:not(.eyebrow){max-width:680px;margin:20px auto;font-size:16px;line-height:1.7}.about-copy .tags{justify-content:center}.about-image{height:auto;aspect-ratio:3/2;width:min(1040px,100%);border-radius:24px}.about-image .image-tag{font-size:9px}.contact-section{background:transparent;padding:130px 0 70px}.contact-grid{grid-template-columns:1fr;max-width:790px;gap:55px}.contact-copy{text-align:center}.contact-copy h2{font-size:clamp(38px,4.5vw,64px)}.contact-copy>p:not(.eyebrow){margin:auto;max-width:600px;color:var(--muted);font-size:16px}.contact-note{max-width:550px;margin:28px auto 0;justify-content:center}.contact-note p{color:var(--muted);font-size:11px}.contact-note .small-dot{background:var(--accent)}form{padding:40px;border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(18px);border-radius:28px;gap:27px}form label,legend{color:var(--ink)}input:not([type=checkbox]),textarea{color:var(--ink);border-color:var(--line)}input::placeholder,textarea::placeholder{color:var(--muted)}.interest-options span{border-color:var(--line);color:var(--muted)}.interest-options input:checked+span{color:white}.form-note{color:var(--muted)}form .button{align-self:center}.form-note{text-align:center}.site-footer{border-top:1px solid #E8E8E9;background:var(--paper);color:var(--ink);padding:45px 0 24px}.site-footer .brand-light img{filter:brightness(0)}[data-theme=dark] .site-footer .brand-light img{filter:brightness(0) invert(1)}.footer-top{padding-bottom:35px}.footer-top>div>p,.footer-contact p,.footer-bottom{color:var(--muted)}.footer-bottom{border-color:var(--line)}.footer-top nav a:hover{color:var(--accent)}.site-footer .small-dot{background:var(--accent)}.site-footer .brand-word{width:165px}.footer-top nav{font-size:13px}.footer-bottom{font-size:11px;padding-right:50px}
.detail-main{padding-top:60px}.detail-hero{text-align:center;padding-top:40px;padding-bottom:85px}.detail-hero h1{margin:auto;font-size:clamp(38px,5vw,68px)}.detail-intro{margin:28px auto;color:var(--muted);font-size:17px}.back-link{display:block;text-align:left;margin-bottom:70px}.detail-visual{background:var(--surface);border:1px solid var(--line)}.detail-visual .mini-visual{background:var(--soft);border-color:var(--line);transform:none;box-shadow:none}.detail-visual>p{color:var(--accent)}.detail-solution-grid h2,.detail-steps h2{font-size:34px}.detail-steps{text-align:center}.detail-steps .process-grid{text-align:left}.detail-cta{background:var(--surface);border:1px solid var(--line);border-radius:28px}.case-text article>p:last-child{color:var(--muted)}.benefit-list .icon{color:var(--accent)}.info-dialog{background:var(--paper);color:var(--ink);border-radius:28px}.info-dialog h2{font-size:32px}.close-button{color:var(--ink)}.draft-summary dt{color:var(--accent)}.skip-link{background:var(--deep)}[data-theme=dark] .mini-visual{background:var(--soft);border-color:var(--line)}[data-theme=dark] .visual-caption,[data-theme=dark] .data-caption{color:#a8c49c}[data-theme=dark] .control-grid>div{background:#183521;border-color:#335b3e}[data-theme=dark] .control-grid b{color:var(--lime)}[data-theme=dark] .graph-grid{stroke:#2c4833}[data-theme=dark] .graph-line{stroke:var(--lime)}[data-theme=dark] .tags span{color:var(--muted)}
@keyframes tab-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.header-inner{gap:25px}.desktop-nav{gap:24px}.header-actions{gap:18px}.hero{min-height:1080px;padding-top:145px}.hero-space{height:290px}.hero h1{font-size:70px}.hero-statement h2{font-size:62px}.project-link{column-gap:45px}.project-card h3{font-size:33px}.project-image{height:300px}.about-copy h2{font-size:50px}}
@media(max-width:980px){.desktop-nav{display:none}.header-inner{justify-content:space-between;width:calc(100% - 40px);height:52px}.header-actions{margin-left:auto;gap:18px}.header-cta{display:block}.header-cta .arrow{display:none}.menu-toggle{display:block}.hero{min-height:1030px;padding-top:130px}.hero h1{font-size:64px}.hero-space{height:270px}.hero-statement h2{font-size:54px}.section{padding-block:110px}.section-heading>p{max-width:600px;font-size:15px}.solution-tablist{gap:14px}.solution-tablist strong{font-size:13px}.solution-tablist button>span{font-size:11px}.solution-panels>[role=tabpanel]{gap:35px}.solution-panel-copy h3{font-size:25px}.solution-panel-copy>p{font-size:14px}.project-card h3{font-size:30px}.project-image{height:280px}.project-link{gap:0 35px}.project-card .project-link>p:last-child{font-size:14px}.flow-grid{gap:25px}.flow-wire{width:25px;right:-25px}.flow-stage h3{font-size:15px}.flow-stage p{font-size:12px}.process-grid{gap:25px}.process-step h3{font-size:20px}.about-section{padding-block:100px}.contact-grid{max-width:720px}.contact-copy h2{font-size:50px}.detail-main{padding-top:52px}}
@media(max-width:700px){.container{width:calc(100% - 40px)}.header-inner{height:50px;min-height:50px;width:calc(100% - 32px)}.site-header .brand-mark{width:22px}.header-cta{display:none}.hero{min-height:920px;padding-top:120px;padding-bottom:70px}.hero-heading .eyebrow{font-size:10px;max-width:310px;margin:0 auto 22px}.hero h1{font-size:clamp(38px,8vw,58px);letter-spacing:-.035em;line-height:1.1}.hero-space{height:245px}.hero-statement h2{font-size:clamp(35px,8vw,48px);line-height:1.12}.hero-statement>p{font-size:14px;margin:26px auto;max-width:440px}.hero-actions{gap:22px;flex-direction:row;margin-top:24px}.hero-actions .button{font-size:13px;padding:12px 22px;min-height:46px}.hero-actions .text-link{font-size:13px}.trust{padding:15px 0 70px}.trust>p{font-size:11px;margin-bottom:32px}.trust-logos{gap:30px}.section{padding-block:85px}.section-heading{gap:22px;margin-bottom:45px}.section-heading h2{font-size:clamp(32px,7.3vw,46px)}.section-heading>p{font-size:14px;line-height:1.7;margin:0}.eyebrow{font-size:11px;margin-bottom:22px}.solution-tablist{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;border-bottom:0}.solution-tablist button{padding:18px 2px 24px;gap:10px;border-bottom:1px solid var(--line)}.solution-tablist strong{font-size:14px;min-height:40px}.solution-tablist button .icon{width:22px;height:22px}.solution-tablist button>span{font-size:11px}.solution-panels{padding-top:35px;min-height:385px}.solution-panels>[role=tabpanel]{grid-template-columns:1fr;gap:28px}.solution-panel-copy h3{font-size:27px;text-align:center}.solution-panel-copy>p{font-size:14px;text-align:center}.solution-panel-copy .text-link{display:flex;justify-content:center}.solution-panel-visual{display:none}.project-filters{margin-bottom:45px;gap:25px}.filter{font-size:12px}.projects-grid{gap:65px}.project-link{display:flex;flex-direction:column;align-items:stretch}.project-image{order:0;height:300px;margin-bottom:27px;border-radius:22px}.project-card .small-label{align-self:auto;margin:0 0 18px;font-size:10px;text-align:center}.project-card h3{font-size:30px;text-align:center;margin-bottom:20px}.project-card .project-link>p:last-child{margin:0 auto;text-align:center;max-width:390px;font-size:14px}.connected h2{font-size:38px}.connected-copy>p{font-size:14px;max-width:440px}.flow-grid{margin-top:45px;gap:32px 25px}.flow-node{height:65px;padding:16px 0}.flow-wire{top:32px}.flow-stage h3{font-size:15px}.flow-stage p{font-size:12px}.flow-note{font-size:10px;margin-top:40px}.process-grid{gap:40px 24px}.step-number{font-size:52px}.process-step h3{font-size:20px}.process-step p{font-size:13px}.about-section{padding-block:85px;gap:35px}.about-copy h2{font-size:36px}.about-copy>p:not(.eyebrow){font-size:14px;line-height:1.7}.about-image{height:300px}.contact-section{padding-top:85px;padding-bottom:40px}.contact-copy h2{font-size:39px}.contact-copy>p:not(.eyebrow){font-size:14px}.contact-note p{font-size:11px}.contact-grid{gap:35px}form{padding:25px 22px;border-radius:24px}.form-row{grid-template-columns:1fr;gap:24px}.interest-options span{font-size:10px;padding:10px}.contact-section .container{width:calc(100% - 32px)}.site-footer{padding-top:32px}.site-footer .brand-word{width:145px}.footer-top{gap:28px}.footer-bottom{font-size:9px;padding-right:35px}.motion-control{height:38px;width:38px;right:12px;bottom:12px}.detail-hero{padding-top:28px;padding-bottom:55px}.back-link{margin-bottom:45px}.detail-hero h1{font-size:38px}.detail-intro{font-size:15px}.detail-solution-grid h2,.detail-steps h2{font-size:29px}.detail-cta h2{font-size:29px}.info-dialog h2{font-size:28px}#cosmos-finale{height:330svh;min-height:1700px}}
@media(max-width:370px){.container{width:calc(100% - 32px)}.hero h1{font-size:36px}.hero-statement h2{font-size:33px}.hero-space{height:220px}.hero{min-height:920px}.hero-actions{gap:12px}.hero-actions .button{font-size:12px;padding:12px 18px}.section-heading h2{font-size:31px}.project-image{height:255px}.project-card h3{font-size:28px}.connected h2{font-size:33px}.flow-stage h3{font-size:14px}.solution-tablist strong{font-size:13px}.contact-copy h2{font-size:33px}.process-step h3{font-size:18px}.about-copy h2{font-size:32px}.detail-hero h1{font-size:33px}}
@media(prefers-reduced-motion:reduce){#app{transition:none}.solution-panels>[role=tabpanel]{animation:none}.tab-indicator{transition:none}.network-fallback{filter:none}#cosmos-finale{height:80svh;min-height:400px}}




/* Contact details and the inquiry form share one destination. */
.contact-grid{max-width:1140px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start}
.contact-copy{text-align:left}.contact-copy h2{font-size:clamp(38px,4.1vw,54px);margin-bottom:25px}.contact-copy>p:not(.eyebrow){margin:0;max-width:440px}
.contact-details{margin:38px 0 0}.contact-details>div{padding:20px 0;border-bottom:1px solid var(--line)}.contact-details dt{font-size:13px;font-weight:600;color:var(--accent);margin-bottom:8px}.contact-details dd{margin:0;font-size:17px;color:var(--muted)}
.contact-note{margin:25px 0 0;justify-content:flex-start}.contact-note p{line-height:1.6}.contact-grid form{min-width:0}.contact-grid form h3{font-size:25px;line-height:1.25;margin:0}.contact-grid .form-row{gap:20px}.contact-grid input,.contact-grid textarea{min-width:0}
@media(max-width:1100px){.contact-grid{gap:40px}.contact-grid form{padding:30px}.contact-copy h2{font-size:42px}}
@media(max-width:800px){.contact-grid{grid-template-columns:minmax(0,1fr);max-width:620px;gap:40px}.contact-copy h2{font-size:38px}.contact-copy>p:not(.eyebrow){max-width:none}.contact-details{margin-top:28px}.contact-details dd{font-size:16px}.contact-grid form{padding:25px 22px}.contact-grid form h3{font-size:24px}}
@media(max-width:370px){.contact-copy h2{font-size:33px}}

/* One-time, staggered scroll entrance using the existing reveal observer. */
@media(prefers-reduced-motion:no-preference){
  .motion-ready .contact-grid>.reveal{transition-duration:.9s;transition-timing-function:cubic-bezier(.22,1,.36,1);transform:translateY(28px)}
  .motion-ready .contact-grid>.reveal.is-visible{transform:translateY(0)}
  .motion-ready .contact-grid>form.reveal{transition-delay:.18s}
  .motion-ready .contact-grid>.reveal:focus-within{opacity:1;transform:none;transition-delay:0s}
}
@media(max-width:800px) and (prefers-reduced-motion:no-preference){
  .motion-ready .contact-grid>.reveal{transform:translateY(18px)}
  .motion-ready .contact-grid>form.reveal{transition-delay:.08s}
}

.company-mission{max-width:680px;margin:36px auto 30px;padding-top:28px;border-top:1px solid var(--line)}.company-mission h3{font-size:20px;color:var(--accent);margin-bottom:14px}.company-mission p{font-size:16px;line-height:1.7;color:var(--muted);margin:0}
@media(max-width:700px){.company-mission{margin-top:28px;padding-top:24px}.company-mission h3{font-size:18px}.company-mission p{font-size:14px}}

/* Preserve both installation and commissioning in the mobile image. */
@media(max-width:700px){.about-image{height:auto;aspect-ratio:3/2}.about-image .image-tag{left:12px;bottom:12px;max-width:calc(100% - 24px);font-size:7px}}

/* Industrial field network: calm center, visible equipment at the edges. */
.network-background.industrial-network.is-ready canvas{opacity:1;mask-image:linear-gradient(90deg,#000 0%,#000 17%,rgba(0,0,0,var(--industrial-center,.25)) 35%,rgba(0,0,0,var(--industrial-center,.25)) 65%,#000 83%,#000 100%)}
.network-background.industrial-network[data-stage=logo] canvas,.network-background.industrial-network[data-stage=gather] canvas{mask-image:none}
@media(max-width:700px){.network-background.industrial-network.is-ready canvas{mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.14) 26%,rgba(0,0,0,.14) 74%,#000)}.network-background.industrial-network[data-stage=logo] canvas,.network-background.industrial-network[data-stage=gather] canvas{mask-image:none}}
/* The opening logo stays unmasked; page copy returns with the existing fade. */
.intro-pending .network-background.industrial-network.is-ready canvas{mask-image:none;opacity:1}
.intro-pending{overflow:hidden}
.skip-intro:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
html{scrollbar-gutter:stable}

/* Let content fade in after the circuit opening has fully settled. */
#app{transition:opacity 1.2s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){#app{transition:none}}

.ecosystem-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(14px, 2vw, 28px);
}
.ecosystem-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin: 0 0 clamp(24px, 4vw, 52px);
}
.ecosystem-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 6px 20px rgb(12 46 26 / 5%);
  padding: clamp(18px, 2.1vw, 28px);
}
.ecosystem-card dt { display: flex; align-items: center; gap: 14px; }
.ecosystem-symbol {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px;
  color: var(--accent); background: var(--soft);
}
.ecosystem-name { font: 700 clamp(23px, 2vw, 29px)/1.15 Manrope, sans-serif; letter-spacing: -.035em; }
.ecosystem-name small { display: block; margin-bottom: 3px; color: var(--muted); font: 600 10px/1.2 Inter, sans-serif; letter-spacing: .13em; }
.ecosystem-card dd { margin: 16px 0 0; color: var(--muted); font: 400 16px/1.5 Inter, sans-serif; }
.ecosystem-foundation { background: #194b32; border-color: #194b32; color: white; }
.ecosystem-foundation .ecosystem-symbol { color: #b5f19c; background: #2b6044; }
.ecosystem-foundation :is(small,dd) { color: #e0eddf; }
@media (max-width: 900px) {
  .ecosystem-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ecosystem-card { padding: 16px; }
  .ecosystem-card dt { align-items: flex-start; flex-direction: column; gap: 10px; }
  .ecosystem-symbol { width: 36px; height: 36px; }
  .ecosystem-card dd { margin-top: 10px; font-size: 15px; overflow-wrap: anywhere; }
}

/* The circuits fade into this stationary vector at the end of the page. */
.network-background.industrial-network::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(48%, 46vh, 400px);
  aspect-ratio: 1;
  background-color: var(--accent);
  mask: url('/public/assets/mark-green.svg') center / contain no-repeat;
  opacity: var(--closing-opacity, 0);
}
/* One offset for native links from the header, mobile menu and footer. */
html { scrollbar-gutter: stable; }
.desktop-nav a[aria-current="location"], .mobile-menu nav a[aria-current="location"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.desktop-nav a[aria-current="location"] { color: var(--lime); }
.mobile-menu nav a[aria-current="location"] { color: var(--accent); }
/* Dim the stationary frame without resampling the canvas through a live blur. */
#info-dialog::backdrop { background: rgb(8 25 15 / 80%); backdrop-filter: none; }
:root { --header-height: 53px; --section-gap: clamp(48px, 6vw, 88px); scroll-padding-top: calc(var(--header-height) + 16px); }
@media (max-width: 700px) { :root { --header-height: 51px; } }

/* Put the gap after content so a fragment points to the visible start of its section. */
#main:not(.detail-main) > :is(.section, .about-section, .contact-section) { padding-block: 0 var(--section-gap); }

/* Let the circuit artwork occupy spare room between the headline and the CTA. */
.hero.container {
  display: grid;
  grid-template-rows: auto minmax(20px, 1fr) auto;
  min-height: min(100svh, 1040px);
  padding-block: calc(var(--header-height) + clamp(18px, 4svh, 54px)) max(clamp(26px, 5svh, 60px), env(safe-area-inset-bottom));
}
.hero .hero-space { height: auto; }
.hero .hero-statement { margin: 0 auto; }
.hero + .customers-section { margin-top: clamp(16px, 2vw, 28px); }
@media (max-height: 740px) {
  .hero .hero-heading .eyebrow { margin-bottom: 12px; }
  .hero .hero-statement > p { margin-block: 14px; }
  .hero .hero-actions { margin-top: 14px; }
}
.customers-section .section-heading { margin-bottom: clamp(28px, 4vw, 48px); }
.customers-section .eyebrow { margin-bottom: 14px; }
.customer-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 18px); padding: 0; margin: 0; list-style: none;
}
.customer-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; min-height: clamp(124px, 13vw, 164px); padding: 20px;
  text-align: center; overflow-wrap: anywhere;
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
}
.customer-tile img { width: min(160px, 85%); height: 48px; object-fit: contain; filter: brightness(0); opacity: .85; }
[data-theme=dark] .customer-tile img { filter: brightness(0) invert(1); }
.customer-tile span { font-size: 14px; line-height: 1.4; color: var(--muted); }
.customer-tile strong { font: 700 20px/1.3 Manrope, sans-serif; }
.customer-intro { max-width: 58ch; margin: 16px 0 0; color: var(--muted); line-height: 1.55; }
.customer-total { gap: 6px; background: color-mix(in srgb, var(--accent) 10%, var(--paper)); }
.customer-total strong { color: var(--accent); font-size: clamp(36px, 4vw, 54px); line-height: 1; letter-spacing: -.04em; }
.customer-total span { color: var(--ink); font-weight: 600; }
.customer-directory { margin-top: 20px; }
.customer-directory summary { display: list-item; width: fit-content; padding: 12px 4px; margin: 0 auto; cursor: pointer; color: var(--accent); font-weight: 600; }
.customer-directory summary span:last-child, .customer-directory[open] summary span:first-child { display: none; }
.customer-directory[open] summary span:last-child { display: inline; }
.customer-directory[open] summary { margin-bottom: 16px; }
@media (max-width: 680px) {
  .customer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-tile { padding: 14px; gap: 12px; }
  .customer-tile img { height: 36px; }
  .customer-total:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.contact-details dd + dd { margin-top: 7px; }
.contact-details a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.contact-details a:hover, .contact-details a:focus-visible { color: var(--accent); text-decoration-color: currentColor; }

/* Opaque step cards keep animated circuit traces clear of the text. */
.flow-grid, #approach .process-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.flow-stage, #approach .process-step {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: 6px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  background: var(--paper);
  text-align: start;
}
.flow-node, #approach .step-number {
  grid-area: 1 / 1 / span 2 / 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 52px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--soft);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.flow-node > .icon { width: 22px; height: 22px; }
.flow-index { font: 600 15px/1 Inter, sans-serif; color: var(--ink); }
#approach .step-number { font-size: 25px; letter-spacing: -.03em; }
.flow-stage .flow-wire, #approach .step-line { display: none; }
.flow-stage h3, #approach .process-step h3 {
  grid-column: 2;
  font: 700 19px/1.35 Manrope, sans-serif;
  color: var(--ink);
  margin: 0;
  max-width: none;
}
.flow-stage p, #approach .process-step p {
  grid-column: 2;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: none;
}

.flow-note {
  width: fit-content;
  max-width: 100%;
  margin: 24px auto 0;
  padding: 6px 14px;
  background: var(--paper);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
@media (min-width: 1200px) {
  .flow-grid, #approach .process-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow-stage, #approach .process-step { grid-template-columns: minmax(0, 1fr); }
  .flow-node, #approach .step-number { grid-area: auto; margin-bottom: 10px; }
  .flow-stage :is(h3, p), #approach .process-step :is(h3, p) { grid-column: 1; }
  .flow-stage .flow-wire { display: block; right: -17px; width: 16px; top: 50px; }
}
@media (max-width: 680px) {
  .flow-grid, #approach .process-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .flow-stage, #approach .process-step { padding: 16px; column-gap: 12px; }
}

.contact-grid [data-company][hidden] { display: none; }
#inquiry-form select { display:block; margin-top:8px; padding:10px; width:100%; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--paper); }
#inquiry-form [role=status]:empty { display:none; }
#inquiry-form button:disabled { opacity:.6; }
.module-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 8px;
}
.module-options label {
  display: flex;
  align-items: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font: 400 14px/1.45 Inter, sans-serif;
  cursor: pointer;
}
.module-options input { flex: none; width: 16px; height: 16px; margin: 2px 0; accent-color: var(--accent); }
.module-options strong { display: block; color: var(--ink); font-size: 15px; }
.module-options label:has(input:checked) { border-color: var(--accent); background: var(--soft); }
.module-options label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Keep supplied brand artwork legible in either color scheme. */
.customer-tile img.customer-brand { filter: none; opacity: 1; width: min(180px, 100%); height: auto; border-radius: 6px; }
.customer-tile .customer-monogram {
  display: grid; place-items: center; width: 60px; height: 50px;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--soft); color: var(--accent);
  font: 700 22px/1 Manrope, sans-serif; letter-spacing: .025em;
}
.customer-tile .customer-name { color: var(--ink); font-weight: 600; }