/* Uxelio About Us — responsive styles */
.uxelio-about{--ux-blue:#0865ed;--ux-blue2:#2784ff;--ux-navy:#061a43;--ux-ink:#101f40;--ux-soft:#edf4ff;--ux-line:#dce8fb;color:var(--ux-ink);font-family:inherit;max-width:1200px;margin:0 auto;padding:12px 0 28px;line-height:1.55;overflow:hidden}
.uxelio-about *{box-sizing:border-box}
.uxelio-about h1,.uxelio-about h2,.uxelio-about h3,.uxelio-about p{margin-top:0}
.uxelio-about a{text-decoration:none}
.ux-about-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;min-height:320px;padding:35px 30px;background:linear-gradient(110deg,#f4f8ff 0%,#e9f2ff 55%,#fff 100%);border-radius:18px;position:relative}
.ux-about-kicker{display:inline-block;background:var(--ux-blue);color:#fff;border-radius:30px;padding:5px 20px;font-size:14px;font-weight:700;margin-bottom:14px}
.ux-about-hero h1{font-size:clamp(38px,5vw,64px);line-height:1.04;letter-spacing:-2px;color:var(--ux-navy);margin:0 0 10px;font-weight:850}
.ux-about-hero h1 span,.uxelio-about h2 span,.ux-about-section-title b{color:var(--ux-blue)}
.ux-about-hero h2{font-size:clamp(18px,2vw,23px);line-height:1.3;max-width:540px;color:var(--ux-navy);margin:0;font-weight:750}
.ux-about-rule{height:4px;width:95px;background:var(--ux-blue);border-radius:5px;margin:17px 0}
.ux-about-hero p{font-size:15px;max-width:540px;margin:0;color:#243657}
.ux-about-tech-art{height:245px;position:relative;display:flex;align-items:center;justify-content:center;gap:14px;isolation:isolate}
.ux-about-tech-art:before{content:"";position:absolute;inset:20px 0 10px;border-radius:48% 52% 45% 55%;background:radial-gradient(ellipse,#d5e8ff 0%,#edf5ff 55%,transparent 72%);z-index:-1}
.ux-device-laptop{width:56%;position:relative;margin-top:38px;filter:drop-shadow(0 12px 10px #153b6b33)}
.ux-device-screen{height:145px;border:8px solid #202b3c;border-bottom-width:12px;border-radius:12px 12px 5px 5px;background:linear-gradient(135deg,#031b50,#0876f9 55%,#02173c);display:flex;align-items:center;justify-content:center;gap:5px;flex-direction:column;color:#fff}
.ux-device-screen i{height:3px;width:55%;background:#5ba6ff;border-radius:5px;opacity:.7}
.ux-device-base{height:10px;background:linear-gradient(#c7d3e2,#697b91);border-radius:0 0 12px 12px;clip-path:polygon(0 0,100% 0,91% 100%,9% 100%)}
.ux-mark{font-weight:950;font-size:42px;line-height:1;color:#0875ff;text-shadow:0 2px 12px #1686ff66}
.ux-device-phone{width:54px;height:112px;border:5px solid #202b3c;border-radius:13px;background:linear-gradient(145deg,#167dff,#111b62 75%);position:relative;z-index:2;margin-left:-22px;margin-top:65px;box-shadow:0 10px 16px #10284a33}
.ux-device-phone:before{content:"";position:absolute;width:20px;height:4px;border-radius:0 0 5px 5px;background:#202b3c;top:0;left:12px}
.ux-device-headphones{width:76px;height:90px;position:relative;margin-left:-8px;margin-top:35px}
.ux-device-headphones:before{content:"";position:absolute;left:8px;top:0;width:56px;height:65px;border:9px solid #202a39;border-bottom:0;border-radius:45px 45px 0 0}
.ux-device-headphones b{position:absolute;top:43px;width:18px;height:35px;border-radius:8px;background:linear-gradient(90deg,#182436,#65758a)}
.ux-device-headphones b:first-child{left:2px}.ux-device-headphones b:nth-child(2){right:2px}
.ux-device-watch{position:absolute;right:0;bottom:15px;width:43px;height:47px;border-radius:12px;background:#202b3c;box-shadow:0 7px 10px #14294a33}
.ux-device-watch:before,.ux-device-watch:after{content:"";position:absolute;left:12px;width:19px;height:15px;background:#9eb7d8;z-index:-1}
.ux-device-watch:before{top:-12px}.ux-device-watch:after{bottom:-12px}
.ux-device-watch span{position:absolute;inset:5px;border-radius:8px;background:linear-gradient(135deg,#0c8aff,#071c51)}
.ux-about-mission{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:34px;padding:30px 8px}
.ux-about-brand-art{height:205px;border-radius:15px;background:linear-gradient(135deg,#e5efff,#f7faff);display:flex;align-items:center;justify-content:center;gap:18px;position:relative;overflow:hidden}
.ux-brand-laptop{width:62%;height:130px;border:8px solid #24344a;border-bottom-width:13px;border-radius:12px 12px 5px 5px;background:linear-gradient(140deg,#031c4b,#086af0);display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;box-shadow:0 15px 20px #142d4a33}
.ux-brand-laptop .ux-mark{font-size:40px}.ux-brand-laptop strong{font-size:20px}
.ux-brand-mug{width:62px;height:65px;background:#fff;border-radius:7px 7px 14px 14px;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 8px 14px #16365a22;color:var(--ux-navy);font-size:11px}
.ux-brand-mug:after{content:"";position:absolute;width:15px;height:25px;border:5px solid #fff;border-left:0;border-radius:0 12px 12px 0;right:12%;top:45%}
.ux-brand-mug .ux-mark{font-size:23px}.ux-brand-plant{position:absolute;left:22px;top:20px;color:#4b9c73;font-size:60px}
.ux-about-mission-copy{position:relative;padding:5px 0 5px 65px}
.ux-about-heading-icon{width:48px;height:48px;color:var(--ux-blue);display:inline-flex;vertical-align:middle;margin-right:12px}
.ux-about-heading-icon svg{width:100%;height:100%}
.ux-about-mission h2,.ux-about-why h2{display:inline-block;vertical-align:middle;font-size:clamp(25px,3vw,34px);line-height:1.2;margin:0 0 16px;font-weight:850;color:var(--ux-navy)}
.ux-about-mission-copy p{font-size:17px;line-height:1.65;margin:0;color:#243657}
.ux-about-coverage{padding:10px 0 28px}
.ux-about-section-title{display:flex;align-items:center;justify-content:center;gap:18px;text-align:center}
.ux-about-section-title>span{height:2px;width:100px;background:var(--ux-blue)}
.ux-about-section-title h2{font-size:clamp(26px,3vw,34px);margin:0;color:var(--ux-navy);font-weight:850}
.ux-about-section-intro{text-align:center;margin:5px 0 18px;color:#344765}
.ux-about-category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.ux-about-category-grid article{background:linear-gradient(145deg,#edf4ff,#e5efff);border:1px solid #e3edfc;border-radius:13px;min-height:130px;padding:17px 8px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#075bd0}
.ux-about-category-grid svg{width:43px;height:43px;margin-bottom:8px}
.ux-about-category-grid h3{font-size:14px;line-height:1.35;color:var(--ux-navy);margin:0;font-weight:750}
.ux-about-trust{display:grid;grid-template-columns:.8fr 1.2fr;gap:26px;align-items:center;padding:8px 0 24px}
.ux-about-why h2{font-size:clamp(23px,2.5vw,31px);margin-bottom:15px}
.ux-about-why ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.ux-about-why li{display:flex;align-items:center;gap:9px;font-size:15px;color:#243657}
.ux-about-why li svg{width:21px;height:21px;flex:0 0 21px}
.ux-about-approach{background:linear-gradient(110deg,#e7f1ff,#d9e9ff);border-radius:18px;padding:22px 24px;display:flex;align-items:center;gap:15px;min-height:175px;overflow:hidden}
.ux-about-approach .ux-about-heading-icon{width:40px;height:40px;float:left;margin:0 12px 5px 0}
.ux-about-approach h2{font-size:22px;color:var(--ux-navy);margin:6px 0 8px;font-weight:850}
.ux-about-approach p{font-size:14px;line-height:1.55;margin:0 0 10px;color:#263b5c}
.ux-about-approach a{display:inline-block;background:var(--ux-blue);color:#fff;padding:8px 17px;border-radius:8px;font-weight:750;font-size:13px}
.ux-approach-device{width:105px;height:95px;flex:0 0 105px;border:7px solid #24344a;border-bottom-width:12px;border-radius:9px;background:linear-gradient(140deg,#041b4a,#0877ff);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 15px #17375b33}
.ux-approach-device .ux-mark{font-size:46px}
.ux-about-contact{display:flex;align-items:center;gap:18px;padding:17px 28px;border-radius:15px;background:linear-gradient(105deg,#06183d,#0755c7 75%,#0b6bea);color:#fff}
.ux-contact-icon{width:48px;height:48px;flex:0 0 48px;color:#64b2ff}
.ux-contact-icon svg{width:100%;height:100%}
.ux-about-contact>div:nth-child(2){flex:1}
.ux-about-contact h2{font-size:23px;margin:0 0 2px;color:#fff;font-weight:850}
.ux-about-contact p{font-size:14px;margin:0;color:#e7f1ff}
.ux-about-contact>a{display:inline-block;background:#fff;color:#08204a;border-radius:30px;padding:10px 22px;font-weight:800;white-space:nowrap}
@media(max-width:900px){.ux-about-category-grid{grid-template-columns:repeat(3,1fr)}.ux-about-hero{padding:28px 22px}.ux-about-trust{grid-template-columns:1fr 1.25fr;gap:16px}.ux-about-approach{padding:17px}.ux-approach-device{width:75px;height:75px;flex-basis:75px}.ux-about-mission{gap:22px}}
@media(max-width:640px){.uxelio-about{padding:0 0 18px}.ux-about-hero{grid-template-columns:1fr;padding:25px 19px 12px;gap:0;border-radius:12px}.ux-about-hero h1{font-size:43px}.ux-about-hero h2{font-size:18px}.ux-about-hero p{font-size:14px}.ux-about-tech-art{height:190px;max-width:390px;width:100%;margin:0 auto}.ux-device-screen{height:112px}.ux-device-laptop{margin-top:25px}.ux-device-phone{height:95px;width:47px}.ux-device-headphones{transform:scale(.85);margin-left:-14px}.ux-about-mission{grid-template-columns:1fr;padding:22px 0;gap:18px}.ux-about-brand-art{height:175px}.ux-about-mission-copy{padding:0 8px}.ux-about-mission-copy p{font-size:15px}.ux-about-section-title{gap:9px}.ux-about-section-title>span{width:35px}.ux-about-section-intro{font-size:14px;padding:0 8px}.ux-about-category-grid{grid-template-columns:repeat(2,1fr);gap:9px;padding:0 2px}.ux-about-category-grid article{min-height:116px}.ux-about-trust{grid-template-columns:1fr;gap:18px;padding:4px 2px 20px}.ux-about-why{padding:0 8px}.ux-about-approach{min-height:0}.ux-about-contact{padding:17px 15px;gap:11px;flex-wrap:wrap}.ux-contact-icon{width:38px;height:38px;flex-basis:38px}.ux-about-contact h2{font-size:20px}.ux-about-contact p{font-size:12px}.ux-about-contact>a{margin-left:auto;padding:9px 15px;font-size:13px}}
/* Dark mode is controlled by the active website theme; JS mirrors its state here. */
.uxelio-about[data-uxelio-theme="dark"]{color:#eaf1ff;color-scheme:dark}
.uxelio-about[data-uxelio-theme="dark"] .ux-about-hero{background:linear-gradient(110deg,#0b1c39,#10294c 60%,#0b1830)}
.uxelio-about[data-uxelio-theme="dark"] .ux-about-hero h1,
.uxelio-about[data-uxelio-theme="dark"] .ux-about-hero h2,
.uxelio-about[data-uxelio-theme="dark"] .ux-about-mission h2,
.uxelio-about[data-uxelio-theme="dark"] .ux-about-why h2,
.uxelio-about[data-uxelio-theme="dark"] .ux-about-section-title h2,
.uxelio-about[data-uxelio-theme="dark"] .ux-about-category-grid h3,
.uxelio-about[data-uxelio-theme="dark"] .ux-about-approach h2{color:#f1f6ff}
.uxelio-about[data-uxelio-theme="dark"] .ux-about-hero p,
.uxelio-about[data-uxelio-theme="dark"] .ux-about-mission-copy p,
.uxelio-about[data-uxelio-theme="dark"] .ux-about-section-intro,
.uxelio-about[data-uxelio-theme="dark"] .ux-about-why li,
.uxelio-about[data-uxelio-theme="dark"] .ux-about-approach p{color:#d2def2}
.uxelio-about[data-uxelio-theme="dark"] .ux-about-brand-art,
.uxelio-about[data-uxelio-theme="dark"] .ux-about-category-grid article,
.uxelio-about[data-uxelio-theme="dark"] .ux-about-approach{background:linear-gradient(135deg,#102747,#142f55);border-color:#203e68}
.uxelio-about[data-uxelio-theme="dark"] .ux-about-category-grid article{color:#66aaff}
.uxelio-about[data-uxelio-theme="dark"] .ux-about-heading-icon,
.uxelio-about[data-uxelio-theme="dark"] .ux-about-category-grid svg{color:#66aaff}
.uxelio-about[data-uxelio-theme="dark"] .ux-brand-mug{color:#0b1d3b}
.uxelio-about[data-uxelio-theme="dark"] .ux-about-approach a{color:#fff}
.uxelio-about[data-uxelio-theme="dark"] .ux-about-contact h2,
.uxelio-about[data-uxelio-theme="dark"] .ux-about-contact p{color:#fff}
/* Keep the design readable if the site's dark theme is set on a parent element. */
html.dark .uxelio-about,body.dark .uxelio-about,html.dark-mode .uxelio-about,body.dark-mode .uxelio-about,
html.is-dark .uxelio-about,body.is-dark .uxelio-about,html[data-theme="dark"] .uxelio-about,
body[data-theme="dark"] .uxelio-about,html[data-mode="dark"] .uxelio-about,body[data-mode="dark"] .uxelio-about,
.wp-dark-mode-active .uxelio-about{color:#eaf1ff}