@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
    --paper:#f6f7f2;
    --ink:#173b3e;
    --muted:#627271;
    --line:#dce2d9;
    --lime:#d4f184;
    --dark:#102e32;
    --mono:Consolas,'Courier New',monospace
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:32px
}
body.portfolio {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font:16px/1.6 'DM Sans',Arial,sans-serif
}
a {
    color:inherit;
    text-decoration:none
}
button,input {
    font:inherit
}
button {
    cursor:pointer
}
button:disabled {
    opacity:.45;
    cursor:not-allowed
}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible {
    outline:3px solid #39887a;
    outline-offset:5px
}
p {
    margin:0 0 20px
}
h1,h2,h3 {
    font-family:Manrope,Arial,sans-serif;
    font-weight:600;
    line-height:1.13;
    letter-spacing:-.045em;
    margin:0
}
h1 {
    font-size:clamp(42px,4.6vw,68px)
}
h2 {
    font-size:clamp(32px,3.2vw,46px)
}
h3 {
    font-size:23px;
    letter-spacing:-.03em
}
em {
    font-style:normal;
    color:#648475
}
.page-width {
    max-width:1240px;
    width:calc(100% - 112px);
    margin-left:auto;
    margin-right:auto
}
.site-header {
    max-width:1360px;
    margin:auto;
    padding:27px 56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    gap:24px
}
.brand {
    display:flex;
    gap:12px;
    align-items:center;
    font-size:21px;
    font-weight:700;
    line-height:1.15;
    letter-spacing:-.7px
}
.brand small {
    display:block;
    font:8px var(--mono);
    letter-spacing:1.7px;
    margin-top:7px
}
.brand-mark {
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--ink);
    color:var(--paper);
    width:40px;
    height:40px;
    border-radius:10px;
    font-size:25px;
    letter-spacing:-5px;
    padding-right:5px
}
.brand-mark span {
    color:var(--lime)
}
.site-header nav {
    display:flex;
    align-items:center;
    gap:31px;
    font-size:13px;
    font-weight:500
}
.site-header nav a {
    padding:8px 0
}
.site-header nav a:hover,.site-header nav a[aria-current=page] {
    color:#477252
}
.nav-contact {
    border-bottom:1px solid var(--ink)
}
.nav-contact span {
    margin-left:20px
}
.nav-dot,.status-dot {
    display:inline-block;
    width:6px;
    height:6px;
    background:#9abd67;
    border-radius:50%;
    margin-left:5px
}
.status-dot {
    margin:0 5px 0 0
}
.eyebrow {
    font:10px/1.6 var(--mono);
    letter-spacing:1.6px;
    margin-bottom:22px
}
.tiny-cross {
    font-size:18px;
    vertical-align:middle;
    margin-right:7px
}
.hero {
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:65px;
    padding-top:77px;
    padding-bottom:69px;
    align-items:center
}
.hero h1 {
    font-size:clamp(42px,4.45vw,65px);
    line-height:1.1;
    letter-spacing:-.055em
}
.hero-description {
    max-width:455px;
    color:var(--muted);
    font-size:16px;
    margin:27px 0 30px;
    line-height:1.8
}
.actions {
    display:flex;
    align-items:center;
    gap:25px;
    flex-wrap:wrap
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:26px;
    padding:14px 22px;
    font-size:13px;
    font-weight:600;
    line-height:1.5;
    border-radius:5px;
    border:1px solid transparent;
    transition:background .18s,transform .18s
}
.button:hover:not(:disabled) {
    transform:translateY(-2px)
}
.button-dark {
    background:var(--ink);
    color:#fff
}
.button-dark:hover {
    background:#285354
}
.button-lime {
    background:var(--lime);
    color:var(--dark)
}
.button-outline {
    background:transparent;
    border-color:#c8d3c8;
    color:var(--ink)
}
.button-danger {
    background:#f9e5df;
    color:#932f25;
    border-color:#efd1c7
}
.text-link {
    font-size:13px;
    font-weight:600;
    display:inline-flex;
    gap:16px;
    align-items:center
}
.text-link:hover {
    text-decoration:underline;
    text-underline-offset:5px
}
.hero-signature {
    display:flex;
    gap:12px;
    align-items:center;
    margin-top:38px;
    font-size:12px
}
.hero-signature img {
    border-radius:50%;
    object-fit:cover;
    filter:grayscale(1)
}
.hero-signature strong,.hero-signature span {
    display:block
}
.hero-signature span {
    font-size:11px;
    color:var(--muted);
    margin-top:2px
}
.hero-system {
    background:var(--dark);
    color:#fff;
    border-radius:12px;
    padding:25px 29px 21px;
    position:relative;
    overflow:hidden;
    box-shadow:14px 18px 0 #e8ece3;
    background-image:radial-gradient(#72938320 1px,transparent 1px);
    background-size:15px 15px
}
.system-top,.system-bottom {
    display:flex;
    justify-content:space-between;
    font:8px var(--mono);
    letter-spacing:1.1px;
    color:#afc5be;
    gap:10px
}
.system-top {
    padding-bottom:22px;
    border-bottom:1px solid #ffffff20
}
.system-caption {
    font:24px/1.35 Manrope,Arial,sans-serif;
    padding:23px 0 27px;
    letter-spacing:-.7px;
    color:#adc2bb
}
.system-caption strong {
    color:#fff;
    font-weight:500
}
.signal-line {
    display:flex;
    align-items:center;
    gap:17px;
    border:1px solid #71988950;
    background:#193a3d;
    padding:17px;
    border-radius:6px
}
.signal-node {
    width:32px;
    height:32px;
    border:1px solid #78978760;
    display:grid;
    place-items:center;
    font:11px var(--mono);
    color:var(--lime)
}
.signal-line div {
    flex:1
}
.signal-line small,.signal-line strong,.signal-line div>span {
    display:block
}
.signal-line small {
    font:8px var(--mono);
    letter-spacing:1.3px;
    color:#b2c8c1
}
.signal-line strong {
    font-size:14px;
    font-weight:500;
    margin:3px 0
}
.signal-line div>span {
    color:#afc7be;
    font-size:10px
}
.signal-line b {
    font-weight:400;
    color:#9ebeaa
}
.connector {
    display:flex;
    gap:14px;
    align-items:center;
    padding-left:32px;
    height:29px
}
.connector>span {
    height:29px;
    border-left:1px dashed #7ea58b
}
.connector small {
    font:7px var(--mono);
    letter-spacing:1px;
    color:#8cafa5
}
.signal-output {
    background:var(--lime);
    color:var(--dark);
    border-color:var(--lime)
}
.signal-output small,.signal-output div>span,.signal-output .signal-node {
    color:#395142
}
.signal-output .signal-node {
    border-color:#8ba458
}
.system-bottom {
    border-top:1px solid #ffffff20;
    margin-top:25px;
    padding-top:17px;
    font-size:7px;
    letter-spacing:.6px
}
.stack-strip {
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}
.stack-strip>div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding:23px 0;
    flex-wrap:wrap
}
.stack-strip span {
    font:9px var(--mono);
    letter-spacing:1.4px;
    color:var(--muted)
}
.stack-strip strong {
    font-size:13px;
    font-weight:500
}
.section {
    padding-top:84px;
    padding-bottom:80px
}
.section-heading {
    display:flex;
    justify-content:space-between;
    gap:50px;
    align-items:flex-end;
    margin-bottom:35px
}
.section-heading>p {
    max-width:295px;
    font-size:14px;
    color:var(--muted);
    margin:0 0 4px
}
.section-heading .eyebrow {
    margin-bottom:14px
}
.project-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:23px
}
.project-card {
    border:1px solid var(--line);
    border-radius:8px;
    background:#fbfcf8;
    overflow:hidden;
    display:flex;
    flex-direction:column
}
.project-art {
    height:230px;
    display:block;
    position:relative;
    overflow:hidden;
    padding:20px;
    background:#e9eee3
}
.art-label,.art-number,.art-bottom {
    position:absolute;
    font:8px var(--mono);
    letter-spacing:1px
}
.art-label {
    top:18px;
    left:18px
}
.art-number {
    right:18px;
    top:18px
}
.art-bottom {
    bottom:18px;
    left:18px;
    font-size:7px
}
.art-arrow {
    position:absolute;
    right:16px;
    bottom:15px;
    background:#ffffff80;
    border-radius:50%;
    width:25px;
    height:25px;
    text-align:center;
    line-height:25px
}
.art-nxp-monitoring {
    background:#e7eee1;
    background-image:linear-gradient(#a4b49a15 1px,transparent 1px),linear-gradient(90deg,#a4b49a15 1px,transparent 1px);
    background-size:18px 18px
}
.sensor-art {
    position:absolute;
    left:50%;
    top:51%;
    transform:translate(-50%,-50%);
    width:160px;
    height:130px
}
.chip {
    position:absolute;
    width:77px;
    height:77px;
    left:40px;
    top:26px;
    background:#25473c;
    color:#e2eecb;
    border:6px double #88a178;
    box-shadow:8px 8px 0 #ccd9bf;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    font:20px var(--mono);
    transform:rotate(-12deg)
}
.chip small {
    font-size:7px;
    margin-top:4px
}
.axis {
    position:absolute;
    font:10px var(--mono);
    color:#718f69
}
.axis-x {
    left:0;
    top:68px;
    border-top:1px solid #839e76;
    width:160px
}
.axis-y {
    left:78px;
    top:0;
    border-left:1px solid #839e76;
    height:130px;
    padding-left:7px
}
.axis-z {
    bottom:0;
    right:5px
}
.art-twincat-monitoring {
    background:#dfe8e7
}
.plc-art {
    position:absolute;
    top:64px;
    left:10%;
    width:80%;
    border:1px solid #aabfba;
    background:#eef3ec;
    padding:16px;
    box-shadow:6px 6px 0 #c5d5cf;
    border-radius:4px
}
.plc-art>span {
    font:8px var(--mono);
    letter-spacing:1px
}
.plc-art>div {
    display:flex;
    gap:9px;
    align-items:center;
    margin-top:9px
}
.plc-art i {
    width:9px;
    height:9px;
    border-radius:50%;
    background:#7a9d57;
    box-shadow:0 0 0 3px #dbe5ce
}
.plc-art b {
    font:8px var(--mono);
    margin-right:15px
}
.plc-art .ladder {
    font:18px var(--mono);
    color:#6c8277;
    margin-top:12px
}
.art-esp32-azure {
    background:#eee9df
}
.cloud-art {
    position:absolute;
    inset:48px 25px 30px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:8px
}
.cloud-art>span {
    border:1px solid #bcbca9;
    background:#f9f8f1;
    border-radius:20px;
    padding:8px 30px;
    font:9px var(--mono);
    letter-spacing:1.2px
}
.cloud-art>b {
    font-size:20px;
    font-weight:400;
    color:#818e78
}
.cloud-art .device-chip {
    border-radius:3px;
    background:#526957;
    color:white;
    padding:12px 23px
}
.device-chip i {
    display:inline-block;
    width:5px;
    height:5px;
    background:var(--lime);
    border-radius:50%;
    margin-left:15px
}
.project-copy {
    padding:24px;
    display:flex;
    flex-direction:column;
    flex:1
}
.project-copy h3 {
    font-size:23px;
    line-height:1.3;
    margin-bottom:13px
}
.project-copy p {
    font-size:13px;
    color:var(--muted);
    line-height:1.75;
    flex:1
}
.tags {
    display:flex;
    flex-wrap:wrap;
    gap:6px
}
.tags span {
    font-size:9px;
    border:1px solid var(--line);
    padding:4px 8px;
    border-radius:4px;
    color:#526961
}
.project-copy .text-link {
    border-top:1px solid var(--line);
    padding-top:17px;
    margin-top:22px;
    justify-content:space-between
}
.more-projects {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-top:23px
}
.more-projects>a {
    display:grid;
    grid-template-columns:1fr auto;
    border-top:1px solid var(--line);
    padding:22px 0;
    gap:9px
}
.more-projects .mono {
    grid-column:1/3;
    font-size:8px;
    letter-spacing:1px;
    color:var(--muted)
}
.more-projects strong {
    font-size:16px;
    font-weight:500
}
.more-projects>a:hover strong {
    text-decoration:underline
}
.mono {
    font-family:var(--mono)
}
.lab-invitation {
    background:var(--dark);
    border-radius:10px;
    color:#fff;
    padding:49px 55px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px 80px;
    align-items:center
}
.lab-invitation .eyebrow {
    color:#b7c6b9;
    font-size:9px
}
.lab-invitation h2 {
    font-size:48px
}
.lab-invitation em {
    color:var(--lime)
}
.lab-invitation p:not(.eyebrow):not(.lab-note) {
    color:#bfd0c7;
    font-size:14px;
    margin-top:20px;
    max-width:360px
}
.lab-invitation .button {
    margin-top:6px
}
.lab-preview {
    background:#1e3c3f;
    border:1px solid #517064;
    border-radius:7px;
    padding:22px;
    transform:rotate(-3deg);
    box-shadow:12px 12px 0 #ffffff06
}
.preview-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font:8px var(--mono);
    letter-spacing:1px
}
.simulation-pill {
    display:inline-block;
    background:#e8eedb;
    color:#435b37;
    border:1px solid #ccdab7;
    border-radius:20px;
    padding:5px 10px;
    font:8px var(--mono);
    letter-spacing:.7px;
    white-space:nowrap
}
.lab-preview .simulation-pill {
    background:#42543e;
    color:var(--lime);
    border-color:#627448
}
.preview-value {
    font:68px Manrope,Arial,sans-serif;
    letter-spacing:-3px;
    margin-top:20px
}
.preview-value span {
    font:21px var(--mono);
    letter-spacing:0;
    color:#9db9ac;
    margin-left:8px
}
.mini-bars {
    height:72px;
    display:flex;
    gap:6px;
    align-items:end;
    border-bottom:1px solid #6d8e7d;
    padding-bottom:4px;
    margin-top:14px
}
.mini-bars i {
    flex:1;
    height:35%;
    background:#a9c887;
    border-radius:2px 2px 0 0
}
.mini-bars i:nth-child(3n) {
    height:65%
}
.mini-bars i:nth-child(3n + 1) {
    height:50%
}
.mini-bars i:nth-child(4n) {
    height:80%
}
.mini-bars i:nth-child(5n) {
    height:95%
}
.preview-footer {
    display:flex;
    justify-content:space-between;
    font-size:9px;
    color:#b2c8bb;
    margin-top:15px
}
.lab-note {
    grid-column:1/-1;
    margin:0;
    font:9px var(--mono);
    color:#b5c5bb;
    letter-spacing:.3px
}
.about-section {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    padding-top:95px
}
.about-intro>p:not(.eyebrow) {
    font-size:14px;
    color:var(--muted);
    line-height:1.9;
    max-width:400px
}
.about-intro h2 {
    margin-bottom:27px
}
.capabilities article {
    display:flex;
    gap:23px;
    border-bottom:1px solid var(--line);
    padding:22px 0
}
.capabilities article:first-child {
    padding-top:0
}
.capabilities article>.mono {
    font-size:10px;
    color:#81947f;
    padding-top:5px
}
.capabilities h3 {
    font-size:18px;
    letter-spacing:-.5px;
    margin-bottom:9px
}
.capabilities p {
    font-size:13px;
    color:var(--muted);
    margin-bottom:8px
}
.capabilities a {
    font-size:11px;
    text-decoration:underline;
    text-underline-offset:4px
}
.capabilities aside {
    padding:23px;
    background:#ecf0e6;
    border-radius:5px;
    margin-top:23px
}
.capabilities aside .eyebrow {
    font-size:8px
}
.capabilities aside p {
    margin-top:10px;
    font-size:12px
}
.capabilities small {
    font-size:10px;
    color:var(--muted)
}
.contact-section {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:85px;
    padding:55px 0 65px;
    border-top:1px solid var(--line)
}
.contact-section>div>p:not(.eyebrow) {
    font-size:14px;
    color:var(--muted);
    margin:21px 0 0;
    max-width:400px
}
.contact-links {
    align-self:center
}
.contact-links a {
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    padding:18px 0;
    font-size:17px;
    gap:10px;
    overflow-wrap:anywhere
}
.contact-links a:hover {
    color:#5d7d42
}
.site-footer {
    border-top:1px solid var(--line);
    max-width:1360px;
    padding:28px 56px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    font-size:10px;
    color:var(--muted)
}
.footer-brand {
    font-size:16px;
    font-weight:600;
    color:var(--ink)
}
.footer-brand span {
    display:block;
    font-size:10px;
    font-weight:400;
    color:var(--muted)
}
.skip-link {
    position:absolute;
    top:-100px;
    left:10px;
    z-index:20;
    background:var(--lime);
    padding:12px
}
.skip-link:focus {
    top:10px
}
.visually-hidden {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
[hidden] {
    display:none!important
}
.project-detail {
    max-width:1100px
}
.detail-heading {
    max-width:780px;
    margin:44px 0 38px
}
.detail-heading h1 {
    margin-bottom:24px
}
.lead {
    font-size:19px;
    color:var(--muted)
}
.detail-heading .tags span {
    font-size:11px
}
.architecture {
    list-style:none;
    padding:25px;
    background:#eaf0e3;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-radius:7px;
    gap:15px;
    margin:0 0 52px;
    counter-reset:steps
}
.architecture li {
    font-size:13px;
    counter-increment:steps;
    position:relative;
    padding-right:16px
}
.architecture li:before {
    content:'0' counter(steps);
    display:block;
    font:10px var(--mono);
    color:#728b6a;
    margin-bottom:8px
}
.architecture li:not(:last-child):after {
    content:'→';
    position:absolute;
    right:0;
    top:20px
}
.case-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin:40px 0 60px
}
.case-grid h2 {
    font-size:23px;
    margin-bottom:18px
}
.case-grid .eyebrow {
    font-size:9px;
    margin-bottom:14px
}
.case-grid p:not(.eyebrow) {
    font-size:14px;
    color:var(--muted)
}
.video-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:22px
}
.video-heading h2 {
    font-size:29px
}
.video-frame {
    aspect-ratio:16/9;
    background:var(--dark);
    border-radius:8px;
    overflow:hidden
}
.video-frame iframe {
    width:100%;
    height:100%;
    border:0
}
.scope-note {
    display:flex;
    align-items:center;
    gap:35px;
    background:#eaf0e3;
    border:1px solid var(--line);
    padding:26px;
    border-radius:6px;
    margin:30px 0
}
.scope-note .eyebrow {
    margin-bottom:10px
}
.scope-note p {
    font-size:13px;
    margin:0;
    color:var(--muted)
}
.scope-note .button {
    flex-shrink:0
}
.lab-title {
    display:grid;
    grid-template-columns:1.3fr 1fr;
    align-items:end;
    gap:80px;
    margin:0 0 45px
}
.lab-title h1 {
    font-size:clamp(38px,4vw,57px)
}
.lab-title p {
    font-size:14px;
    color:var(--muted);
    margin:18px 0 0
}
.lab-shell {
    border:1px solid #cfd9ce;
    background:#fcfdf9;
    border-radius:9px;
    overflow:hidden
}
.lab-tabs {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-bottom:1px solid var(--line);
    background:#eef2e8
}
.lab-tabs button {
    padding:21px 16px;
    display:flex;
    justify-content:center;
    gap:12px;
    color:#617366;
    background:transparent;
    border:0;
    border-bottom:3px solid transparent;
    font:10px var(--mono)
}
.lab-tabs button span {
    font:13px 'DM Sans',Arial,sans-serif
}
.lab-tabs button[aria-selected=true] {
    background:#fcfdf9;
    border-bottom-color:#537746;
    color:var(--ink)
}
.lab-panel {
    padding:35px
}
.panel-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px
}
.panel-heading .eyebrow {
    font-size:9px;
    margin-bottom:10px
}
.panel-heading h2 {
    font-size:32px
}
.panel-description {
    font-size:14px;
    color:var(--muted);
    max-width:720px;
    margin:19px 0 28px
}
.metric-grid {
    display:grid;
    grid-template-columns:1fr 1fr 1.2fr;
    gap:18px
}
.metric-card {
    border:1px solid var(--line);
    border-radius:6px;
    padding:22px;
    background:#f3f6ee;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:12px
}
.metric-card>span:first-child {
    font:9px var(--mono);
    letter-spacing:1px
}
.metric-card>strong {
    font:500 43px/1.3 Manrope,Arial,sans-serif;
    letter-spacing:-1.5px
}
.metric-card strong small {
    font:13px var(--mono);
    margin-left:6px;
    letter-spacing:0
}
.metric-card .xyz-value {
    font:20px var(--mono);
    letter-spacing:-1px;
    padding:14px 0
}
.metric-state {
    font-size:11px;
    color:#486442
}
.metric-state.is-warning {
    color:#9c3729;
    font-weight:700
}
.trend-panel {
    border:1px solid var(--line);
    padding:18px 22px;
    margin:20px 0;
    border-radius:5px
}
.trend-panel>div {
    display:flex;
    justify-content:space-between;
    gap:15px
}
.trend-panel .eyebrow {
    font-size:9px;
    margin-bottom:10px
}
.trend-panel #stream-state {
    font-size:10px;
    color:var(--muted)
}
.trend-panel svg {
    display:block;
    width:100%;
    height:105px
}
.chart-grid {
    fill:none;
    stroke:#e0e8d9;
    stroke-width:1
}
#sensor-trend {
    fill:none;
    stroke:#709452;
    stroke-width:2;
    vector-effect:non-scaling-stroke
}
.control-row {
    display:grid;
    grid-template-columns:230px 1fr;
    gap:12px 30px;
    align-items:center;
    margin:24px 0 30px
}
.control-row label {
    font-size:13px
}
.control-row output {
    display:block;
    font:11px var(--mono);
    color:#668053
}
.control-row small {
    font-size:11px;
    color:var(--muted);
    grid-column:2
}
input[type=range] {
    width:100%;
    accent-color:#496a40;
    cursor:pointer
}
.lab-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 25px;
    background:#eaf0e3;
    gap:15px
}
.lab-bottom>span {
    font:8px var(--mono);
    letter-spacing:1px
}
.lab-bottom button {
    font-size:11px;
    border:0;
    background:transparent;
    text-decoration:underline;
    text-underline-offset:4px;
    color:var(--ink);
    padding:6px
}
.lab-explainer {
    display:grid;
    grid-template-columns:1fr 1.5fr;
    gap:16px 50px;
    padding:35px 0 0
}
.lab-explainer h3 {
    font-size:24px
}
.lab-explainer p {
    font-size:14px;
    color:var(--muted);
    margin:0
}
.lab-explainer a {
    grid-column:2
}
.relay-diagram {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    background:#edf2e7;
    padding:40px 20px;
    border-radius:6px;
    margin-bottom:28px
}
.relay-diagram>div {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    min-width:100px
}
.relay-diagram strong {
    font-size:13px
}
.relay-diagram small {
    font-size:10px;
    color:var(--muted)
}
.relay-lamp {
    width:44px;
    height:44px;
    border-radius:50%;
    background:#c3ccbf;
    border:6px solid #dde4d7;
    box-shadow:0 0 0 1px #bccbb7
}
.relay-lamp.is-on {
    background:#8aad5f;
    box-shadow:0 0 0 1px #88a76b,0 0 20px #92b57340
}
.relay-lamp.is-fault {
    background:#cc644e
}
.relay-wire {
    height:1px;
    background:#acbda0;
    width:80px
}
.control-buttons {
    display:flex;
    flex-wrap:wrap;
    gap:12px
}
.state-message {
    margin:23px 0;
    padding:15px;
    background:#eaf0e3;
    border-left:3px solid #8aa16c;
    font-size:13px
}
.fine-print {
    color:var(--muted);
    font-size:11px
}
.home-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-bottom:30px
}
.home-device {
    border:1px solid var(--line);
    border-radius:6px;
    padding:23px;
    text-align:center
}
.home-device .eyebrow {
    font-size:9px;
    display:block;
    margin:0 0 20px
}
.home-device p:not(.eyebrow) {
    font-size:13px;
    margin:16px 0
}
.home-device .button {
    font-size:12px;
    padding:10px 14px
}
.gate-visual {
    height:100px;
    max-width:170px;
    margin:auto;
    position:relative;
    display:flex;
    overflow:hidden;
    border:5px solid #b3c0a8;
    background:#e8efdd;
    gap:2px
}
.gate-visual>span {
    width:50%;
    height:100%;
    background:repeating-linear-gradient(90deg,#5b7755 0px,#5b7755 5px,#cfdbc2 5px,#cfdbc2 14px);
    transition:transform .5s
}
.gate-visual.is-open>span:first-child {
    transform:translateX(-90%)
}
.gate-visual.is-open>span:last-child {
    transform:translateX(90%)
}
.curtain-visual {
    height:100px;
    max-width:140px;
    border:5px solid #b3c0a8;
    background:linear-gradient(90deg,transparent 48%,#b3c0a8 48%,#b3c0a8 52%,transparent 52%),linear-gradient(#cfdfd5 48%,#b3c0a8 48%,#b3c0a8 52%,#cfdfd5 52%);
    margin:auto
}
.curtain-visual>span {
    display:block;
    width:100%;
    height:100%;
    background:repeating-linear-gradient(#839574 0px,#839574 6px,#748567 7px,#748567 8px)
}
.power-flow {
    display:flex;
    gap:20px;
    align-items:center;
    margin:25px 0 32px
}
.power-node {
    flex:1;
    background:#edf1e9;
    border:1px solid #d0d8c9;
    border-radius:7px;
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:14px
}
.power-node>span {
    font:9px var(--mono);
    letter-spacing:1px
}
.power-node strong {
    font:25px Manrope,Arial,sans-serif
}
.power-node small {
    font-size:12px
}
.power-node.is-active {
    background:#e4efd1;
    border-color:#a9bf85
}
.login-page {
    max-width:500px;
    min-height:65vh
}
.login-page h1 {
    font-size:42px;
    margin-bottom:20px
}
.login-page>p {
    color:var(--muted);
    font-size:14px
}
.login-form {
    display:grid;
    gap:16px;
    margin-top:30px
}
.login-form label {
    font-size:13px;
    display:block;
    margin-bottom:5px
}
.login-form input:not([type=checkbox]) {
    width:100%;
    background:#fff;
    border:1px solid #b8c7b7;
    border-radius:4px;
    padding:12px;
    color:var(--ink)
}
.validation-summary-errors,.field-validation-error {
    color:#a33125;
    font-size:13px
}
.login-message {
    padding:15px;
    border:1px solid var(--line)
}
@media(min-width:1500px) {
    .hero {
        padding-top:95px;
        padding-bottom:85px
    }
    .hero h1 {
        font-size:72px
    }
}
@media(max-width:1050px) {
    .page-width {
        width:calc(100% - 64px)
    }
    .site-header,.site-footer {
        padding-left:32px;
        padding-right:32px
    }
    .hero {
        gap:35px
    }
    .hero h1 {
        font-size:49px
    }
    .hero-system {
        padding:22px
    }
    .hero .eyebrow {
        font-size:8px
    }
    .actions {
        gap:18px
    }
    .hero .text-link {
        font-size:12px
    }
    .project-copy {
        padding:19px
    }
    .project-copy h3 {
        font-size:20px
    }
    .project-art {
        height:205px
    }
    .lab-invitation {
        padding:40px;
        gap:30px
    }
    .about-section {
        gap:55px
    }
    .metric-card .xyz-value {
        font-size:17px
    }
    .lab-tabs button {
        gap:6px;
        padding:17px 10px
    }
    .lab-tabs button span {
        font-size:12px
    }
}
@media(max-width:760px) {
    .page-width {
        width:calc(100% - 40px)
    }
    .site-header {
        padding:20px;
        flex-wrap:wrap;
        gap:20px
    }
    .site-header nav {
        gap:20px;
        width:100%;
        justify-content:space-between;
        font-size:12px
    }
    .brand {
        font-size:20px
    }
    .nav-contact span {
        margin-left:8px
    }
    .hero {
        grid-template-columns:1fr;
        gap:35px;
        padding:43px 0
    }
    .hero h1 {
        font-size:clamp(43px,8vw,61px)
    }
    .hero .eyebrow {
        font-size:9px
    }
    .hero-description {
        max-width:520px
    }
    .hero-system {
        max-width:520px;
        width:100%;
        box-shadow:7px 9px 0 #e8ece3
    }
    .hero-signature {
        margin-top:25px
    }
    .stack-strip>div {
        justify-content:flex-start;
        gap:15px 23px;
        padding:20px 0
    }
    .stack-strip span {
        width:100%
    }
    .stack-strip strong {
        font-size:12px
    }
    .section {
        padding-top:52px;
        padding-bottom:48px
    }
    .section-heading {
        display:block
    }
    .section-heading>p {
        max-width:450px;
        margin-top:20px
    }
    .project-grid {
        grid-template-columns:1fr
    }
    .project-art {
        height:245px
    }
    .project-copy {
        padding:25px
    }
    .project-copy h3 {
        font-size:26px
    }
    .project-copy p {
        font-size:14px
    }
    .more-projects {
        grid-template-columns:1fr;
        gap:0
    }
    .lab-invitation {
        grid-template-columns:1fr;
        padding:30px;
        gap:30px
    }
    .lab-invitation h2 {
        font-size:42px
    }
    .lab-preview {
        max-width:420px;
        width:100%;
        transform:rotate(0)
    }
    .lab-note {
        line-height:1.7
    }
    .about-section {
        grid-template-columns:1fr;
        gap:35px
    }
    .about-intro>p:not(.eyebrow) {
        max-width:none
    }
    .contact-section {
        grid-template-columns:1fr;
        gap:20px;
        padding:40px 0
    }
    .contact-links a {
        font-size:16px
    }
    .site-footer {
        padding:23px 20px;
        flex-wrap:wrap;
        font-size:10px
    }
    .site-footer .footer-brand {
        width:100%
    }
    .case-grid {
        grid-template-columns:1fr;
        gap:20px;
        margin-bottom:35px
    }
    .case-grid p:not(.eyebrow) {
        margin-bottom:0
    }
    .detail-heading {
        margin-top:32px
    }
    .detail-heading h1 {
        font-size:43px
    }
    .lead {
        font-size:17px
    }
    .architecture {
        grid-template-columns:1fr 1fr;
        gap:25px;
        padding:20px
    }
    .architecture li:nth-child(2):after {
        display:none
    }
    .video-heading {
        align-items:flex-start;
        flex-direction:column
    }
    .video-heading h2 {
        font-size:27px
    }
    .scope-note {
        flex-direction:column;
        align-items:flex-start;
        gap:20px
    }
    .lab-title {
        grid-template-columns:1fr;
        gap:25px
    }
    .lab-tabs {
        grid-template-columns:1fr 1fr
    }
    .lab-tabs button {
        justify-content:flex-start;
        padding:16px;
        font-size:9px
    }
    .lab-panel {
        padding:22px
    }
    .panel-heading {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:15px
    }
    .panel-heading h2 {
        font-size:29px
    }
    .panel-heading .button {
        padding:9px 14px
    }
    .metric-grid {
        grid-template-columns:1fr 1fr;
        gap:12px
    }
    .metric-card {
        padding:15px
    }
    .metric-card:last-child {
        grid-column:1/-1
    }
    .metric-card>strong {
        font-size:33px
    }
    .metric-card .xyz-value {
        font-size:24px;
        padding:0
    }
    .trend-panel {
        padding:14px
    }
    .trend-panel>div {
        flex-direction:column;
        gap:0
    }
    .trend-panel svg {
        margin-top:15px
    }
    .control-row {
        grid-template-columns:1fr;
        gap:10px
    }
    .control-row small {
        grid-column:1
    }
    .lab-bottom {
        flex-direction:column;
        align-items:flex-start;
        padding:16px 20px
    }
    .lab-bottom>span {
        line-height:1.8;
        font-size:7px
    }
    .lab-explainer {
        grid-template-columns:1fr;
        gap:18px
    }
    .lab-explainer a {
        grid-column:1
    }
    .relay-diagram {
        gap:7px;
        padding:25px 8px
    }
    .relay-diagram>div {
        min-width:0;
        flex:1
    }
    .relay-diagram strong {
        font-size:11px;
        text-align:center
    }
    .relay-diagram small {
        text-align:center;
        font-size:9px
    }
    .relay-wire {
        width:15px
    }
    .control-buttons .button {
        font-size:12px;
        padding:11px 14px
    }
    .home-grid {
        grid-template-columns:1fr
    }
    .home-device {
        padding:23px
    }
    .power-flow {
        gap:7px;
        align-items:stretch
    }
    .power-flow>b {
        align-self:center;
        font-size:13px
    }
    .power-node {
        padding:14px 8px;
        gap:10px;
        min-width:0
    }
    .power-node>span {
        font-size:7px;
        letter-spacing:0
    }
    .power-node strong {
        font-size:18px
    }
    .power-node small {
        font-size:10px
    }
    .login-page {
        max-width:500px
    }
    .login-page h1 {
        font-size:36px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        transition:none!important;
        animation:none!important
    }
}


/* Platform and HMI case studies */
.showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 24px;
}
.showcase-grid .project-card {
    background: #eaf0e3;
}
.showcase-grid .project-copy {
    padding: 30px;
}
.case-grid h3 {
    margin-bottom: 18px;
}
@media (max-width: 760px) {
    .showcase-grid {
        grid-template-columns: 1fr;
    }
}

/* Private portfolio analytics */
.footer-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.privacy-hero, .analytics-head { max-width: 1240px; margin: 0 auto; padding: clamp(7rem, 14vw, 11rem) 5vw 4rem; }
.privacy-hero h1, .analytics-head h1 { margin: .35rem 0 1rem; font-size: clamp(3rem, 8vw, 7rem); line-height: .9; letter-spacing: -.065em; }
.privacy-hero .lede { max-width: 780px; font-size: clamp(1.1rem, 2vw, 1.45rem); color: var(--muted); }
.privacy-grid { max-width: 1240px; margin: 0 auto; padding: 0 5vw 8rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.privacy-grid article { padding: 2.5rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.privacy-grid article:nth-child(even) { border-right: 0; }
.privacy-grid article > span, .panel-heading > span, .panel-heading div > span { color: var(--accent); font: 700 .72rem/1 var(--sans); letter-spacing: .13em; }
.privacy-grid h2 { margin: 1.8rem 0 .8rem; font-size: clamp(1.45rem, 2.2vw, 2rem); }
.privacy-grid p { color: var(--muted); line-height: 1.75; }

.analytics-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: 2.5rem; }
.analytics-head h1 { font-size: clamp(3rem, 7vw, 6.2rem); }
.analytics-head p { max-width: 680px; color: var(--muted); }
.analytics-actions { display: flex; align-items: end; gap: .8rem; flex-wrap: wrap; }
.analytics-actions form { display: grid; gap: .4rem; }
.analytics-actions label { color: var(--muted); font: 700 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.analytics-actions select { min-width: 130px; padding: .82rem 2.4rem .82rem .9rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; font: 600 .9rem/1 var(--sans); }
.analytics-summary, .analytics-breakdown, .analytics-panel, .analytics-empty { max-width: 1240px; margin-left: auto; margin-right: auto; }
.analytics-summary { padding: 0 5vw 2rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.analytics-summary article, .analytics-panel, .analytics-empty { background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 1.2rem; }
.analytics-summary article { padding: 1.5rem; display: grid; gap: .5rem; }
.analytics-summary span, .analytics-summary small { color: var(--muted); font: 600 .76rem/1.3 var(--sans); }
.analytics-summary span { text-transform: uppercase; letter-spacing: .1em; }
.analytics-summary strong { font: 500 clamp(2.1rem, 4vw, 3.6rem)/1 var(--serif); }
.analytics-empty { margin-bottom: 2rem; padding: 3rem; }
.analytics-empty h2 { margin: .5rem 0; font-size: 2rem; }
.analytics-empty p:last-child { color: var(--muted); }
.analytics-panel { padding: 1.4rem; }
.analytics-chart-panel { margin-bottom: 1rem; width: calc(90% - 0px); }
.panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 1.4rem; }
.panel-heading h2 { margin: .25rem 0 0; font-size: 1.3rem; }
.panel-heading small { color: var(--muted); }
.analytics-chart { height: 220px; display: flex; align-items: end; gap: clamp(.25rem, 1vw, .75rem); overflow-x: auto; padding-top: 1rem; }
.chart-column { height: 100%; min-width: 22px; flex: 1; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: .35rem; color: var(--muted); }
.chart-column > span { font: 600 .65rem/1 var(--sans); }
.chart-column i { width: 100%; max-width: 34px; min-height: 4px; display: block; border-radius: .4rem .4rem 0 0; background: linear-gradient(180deg, var(--accent), #4e7e76); }
.chart-column small { font: 500 .62rem/1 var(--sans); white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); max-height: 44px; }
.analytics-breakdown { padding: 0 5vw 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.metric-card { margin: 0; }
.metric-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.metric-list li > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font: 600 .82rem/1.2 var(--sans); }
.metric-list li > div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric-list li > div strong { color: var(--accent); }
.metric-list li > i { height: 4px; display: block; margin-top: .45rem; overflow: hidden; background: rgba(255,255,255,.07); border-radius: 99px; }
.metric-list li > i span { height: 100%; display: block; background: var(--accent); border-radius: inherit; }
.metric-empty { color: var(--muted); }
.recent-panel { margin-bottom: 8rem; width: calc(90% - 0px); }
.analytics-table-wrap { overflow-x: auto; }
.analytics-table { width: 100%; border-collapse: collapse; font: 500 .72rem/1.4 var(--sans); }
.analytics-table th { color: var(--muted); text-align: left; text-transform: uppercase; letter-spacing: .08em; }
.analytics-table th, .analytics-table td { padding: .85rem .7rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.analytics-table tbody tr:hover { background: rgba(255,255,255,.025); }
.analytics-table code { color: var(--accent); font-size: .7rem; }

@media (max-width: 820px) {
    .privacy-grid, .analytics-breakdown { grid-template-columns: 1fr; }
    .privacy-grid article { border-right: 0; }
    .analytics-head { align-items: start; flex-direction: column; }
    .analytics-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .analytics-chart-panel, .recent-panel { width: 90%; }
}
@media (max-width: 520px) {
    .analytics-summary { grid-template-columns: 1fr; }
    .privacy-grid article, .analytics-panel, .analytics-empty { padding: 1.2rem; }
    .footer-actions { gap: .7rem; }
}