:root {
  --navy: #12263D;
  --blue: #28639A;
  --steel: #597B91;
  --mist: #EAF0F5;
  --white: #FFFFFF;
  --surface: #F5F8FB;
  --wine: #B52A36;
  --wine-hover: #9F3140;
  --line: #D9E3EA;
  --copy: #394B5C;
  --shadow: 0 4px 18px rgb(18 38 61 / 6%);
}
body, header, dialog {color:var(--navy);background:var(--white)}
.top, .categories, .actions .max, input, textarea, .card select {border-color:var(--line)}
nav a:first-child,nav a:hover,.red,em,.categories>a:first-child,.facts h3,.news summary span,.brand-rule,.all-products,.intro a,.overview a,.model a,.card a:hover,.support-actions button,.card #docs a {color:var(--blue)}
.brand-rule i,.button,button {background-color:var(--blue)}
button:hover,.button:hover {background-color:var(--navy)}
.categories button:hover,.actions .max:hover {background:var(--mist);color:var(--navy)}
:focus-visible {outline:3px solid var(--blue);outline-offset:3px}
.hero {color:var(--navy);background:linear-gradient(112deg,var(--surface) 16%,var(--mist) 68%,#D4E3EF)}
.hero:before {background:repeating-linear-gradient(124deg,transparent 0 59px,rgb(89 123 145 / 7%) 60px 61px)}
.hero .model,.pic small,.top small,small,.hero p {color:var(--copy)}
.hero-stage:before {background:linear-gradient(170deg,var(--mist),#AFC3D3);box-shadow:0 2px 0 var(--steel),0 8px 16px rgb(18 38 61 / 14%)}
.hero .hero-stage img {filter:drop-shadow(0 2px 3px rgb(18 38 61 / 15%))}
.white {background:var(--blue);color:var(--white)}
.white:hover {background:var(--navy);color:var(--white)}
.banner,footer {background:linear-gradient(115deg,var(--navy),#244661)}
.banner div {background:none}
.products,.about,.shot,.wide,.repeat,.sdt dl div:nth-child(odd),.news article {background:var(--surface)}
.products article,.tiles .model,.pricecard,.offer>div,.facts article {background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow)}
.tiles .model {position:static;color:var(--navy);letter-spacing:normal}
.services article {background:var(--mist);color:var(--navy)}
.services small,.services p,.pricing p,.support-actions p {color:var(--copy)}
.services button,.services button:hover {color:var(--blue);border-color:var(--line);background:transparent}
.navicon {filter:brightness(0) invert(41.4%) sepia(1) saturate(3) hue-rotate(164deg)}
.facticon {filter:grayscale(1) sepia(1) saturate(3) hue-rotate(164deg)}
.tabs,.card dl>div,.pricing p,.support-actions section+section,.thumbs button {border-color:var(--line)}
.sdt .tabs,.tabs [aria-current=page],.thumbs button[aria-pressed=true] {border-color:var(--blue)}
.sdt .tabs a[aria-current=page] {background:var(--blue);color:var(--white)}
.card select {background:var(--surface);color:var(--blue);accent-color:var(--blue)}
.discount,.support-actions button:hover {background:var(--surface);color:var(--blue);border-color:var(--line)}
.pricing-heading {position:relative;isolation:isolate;background:linear-gradient(110deg,var(--navy),var(--blue));color:var(--white)}
.pricing-heading:after {content:"";position:absolute;inset:0 0 0 62%;z-index:-1;background:url('assets/project-detail.svg') center/cover;opacity:.32;mask-image:linear-gradient(90deg,transparent,black 28%)}
.pricing button,.pricecard button:not(.discount),.actions button[data-request],#send {background:var(--wine);color:var(--white)}
.pricing button:hover,.pricecard button:not(.discount):hover,.actions button[data-request]:hover,#send:hover {background:var(--wine-hover)}
.sdt #docs a:before {filter:grayscale(1) sepia(1) saturate(4) hue-rotate(165deg)}
.plan {background:var(--navy)}
.products button,.tiles button[data-request] {background:var(--wine);color:var(--white)}
.products button:hover,.tiles button[data-request]:hover {background:var(--wine-hover)}

nav a:first-child {color:inherit}
nav a:first-child:hover {color:var(--blue)}
.categories>a:first-child,.all-products {color:#191b1e}
.hero {
  color:var(--navy);
  background:radial-gradient(ellipse at 81% 60%,#ffffff 0%,transparent 45%),
             linear-gradient(112deg,#f6f9fb 3%,#edf3f8 48%,#cbdde9 100%);
}
.hero:before {
  content:"";position:absolute;inset:0 0 0 auto;width:55%;z-index:-1;pointer-events:none;
  background:url('assets/station-hall.svg') left bottom / cover no-repeat;transform:scaleX(-1);
  opacity:.105;mask-image:linear-gradient(90deg,#000 0%,rgb(0 0 0 / 75%) 38%,transparent 100%);
}
@media(max-width:650px){.hero:before{width:78%;height:210px;top:auto;bottom:0;background-size:cover;opacity:.08}}
.hero h1 {font-size:clamp(30px,3.1vw,49px);line-height:1.06}
.hero p,.hero .eyebrow {color:var(--copy)}
.hero .white {color:white;background:var(--blue)}
.hero .white:hover {background:var(--navy)}
.hero-stage:before {content:none}
.hero .hero-stage svg {display:block;width:100%;height:100%;overflow:visible}
#banner-viewer form button {background:transparent;outline:none}
#banner-viewer form button:is(:hover,:focus-visible)::after {
  content:"";position:absolute;inset:6px;border:1px solid #8297a7;border-radius:5px;
}
.card a.all-specs,.support-actions button {font-weight:700;-webkit-text-stroke:.18px currentColor}
#products + .section {padding-top:clamp(20px,2.3vw,34px)}
.aboutgrid .photos {display:grid;grid-template-columns:1fr;gap:10px;align-items:stretch}
.aboutgrid .photos img {grid-area:auto;width:100%;height:auto;aspect-ratio:2.65;object-fit:cover;object-position:center 43%}
.aboutgrid .photos img:last-child {object-position:center 30%}
@media(max-width:650px){.aboutgrid .photos img{aspect-ratio:2.15}.hero h1{font-size:30px}}

#company {--company-radius:14px;--company-gap:12px}
#company .photos,#company .facts {gap:var(--company-gap)}
#company .photos img,#company .facts article {border-radius:var(--company-radius)}
#company .facts {margin-top:0}
.company-clients {margin-block:clamp(28px,3vw,40px);padding-block:clamp(14px,1.6vw,22px);border-block:1px solid var(--line)}
.company-clients h3 {margin:0 0 12px;font-size:20px;line-height:1.25}
.company-clients-track {position:relative}
.company-clients-controls {position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.company-clients-controls[hidden],.company-clients li[hidden] {display:none}
.company-clients-controls button {display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--white);color:var(--blue);cursor:pointer;pointer-events:auto}
.company-clients-controls button svg {width:13px;height:13px}
.company-clients-controls button:hover {background:var(--blue);border-color:var(--blue);color:var(--white)}
.company-clients-controls button:focus-visible {outline:2px solid var(--blue);outline-offset:2px}
.company-clients-track ul.is-carousel {margin-inline:clamp(35px,4vw,55px)}
.company-clients ul.is-carousel {--visible-clients:4;overflow:clip;grid-template-columns:repeat(var(--visible-clients),minmax(0,1fr))}
@media(max-width:980px){.company-clients ul.is-carousel{--visible-clients:3}}
@media(max-width:730px){.company-clients ul.is-carousel{--visible-clients:2}}
@media(max-width:480px){.company-clients ul.is-carousel{--visible-clients:1}}
.company-clients ul {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px 18px;list-style:none;padding:0;margin:0}
.company-clients li {display:flex;align-items:center;gap:10px;min-height:58px;color:#151515;font-size:13px;line-height:1.35}
.company-clients img {width:46px;height:46px;flex:none;object-fit:contain;filter:grayscale(1);transition:filter .2s ease}
.company-clients li:hover img {filter:none}
.company-clients .client-logo-accent:hover img {filter:grayscale(1) sepia(1) saturate(3) hue-rotate(165deg)}
.aboutgrid .photos img[src$="company-detector-installation.webp"] {object-position:center 42%}
@media(prefers-reduced-motion:reduce){.company-clients img{transition:none}}