/* Lightweight camera-and-phone assistance, paired with the glove section. */
#lightweight-assistance .assistance-layout { display: grid; grid-template-columns: minmax(0, .93fr) minmax(0, 1fr); gap: clamp(45px, 8vw, 120px); align-items: center; }
#lightweight-assistance .assistance-media { min-height: 0; aspect-ratio: 3 / 4; }
#lightweight-assistance .context-stack { display: grid; gap: 12px; margin-top: 34px; }
#lightweight-assistance .context-row { padding: 18px 20px; display: grid; grid-template-columns: 90px 1fr; gap: 20px; border-top: 1px solid var(--m-line); }
#lightweight-assistance .context-row strong { color: var(--m-accent-soft); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
#lightweight-assistance .context-row span { color: var(--m-muted); line-height: 1.5; }
@media (max-width: 1200px) {
  #lightweight-assistance .assistance-layout { grid-template-columns: 1fr; }
  #lightweight-assistance .assistance-media { width: min(100%, 650px); justify-self: center; }
}
@media (max-width: 760px) {
  #lightweight-assistance .context-row { grid-template-columns: 1fr; gap: 7px; }
}

:root {
  --background: #283038;
  --background-deep: #132f3a;
  --card: rgba(255, 255, 255, 0.07);
  --text: #fff;
  --muted: rgba(255, 255, 255, 0.76);
  --accent: #00c3df;
  --max-width: 1330px;
}
html { scroll-padding-top: calc(var(--header-height) + 16px); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--background); }
body { margin: 0; overflow-x: clip; color: var(--text); background: radial-gradient(circle at 0 72%, #132f3a 0, var(--background) 42%); font-family: "Inter", system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
p { color: var(--muted); line-height: 1.55; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.12; font-weight: 400; }

.site-header { position: absolute; z-index: 20; top: 0; left: 50%; transform: translateX(-50%); width: min(calc(100% - 80px), 1540px); height: 96px; display: flex; align-items: center; justify-content: space-between; }
.brand { font-size: 2rem; font-weight: 700; letter-spacing: -.05em; }
.site-nav { display: flex; align-items: center; gap: clamp(28px, 4vw, 72px); font-size: .84rem; }
.site-nav a { transition: color .2s ease; }
.site-nav a:hover { color: var(--accent); }
.nav-cta { padding: 15px 30px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: rgba(9,22,27,.22); }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 50%; color: white; background: rgba(255,255,255,.09); }
.menu-toggle span { display: block; height: 2px; margin: 5px 0; background: currentColor; }

.hero { min-height: 100svh; position: relative; overflow: hidden; background: url("assets/hero.webp") center/cover no-repeat; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,25,30,.06) 18%, rgba(17,35,42,.25) 42%, rgba(17,29,35,.94) 100%); }
.hero-copy { position: absolute; z-index: 3; top: 50%; left: 60.3%; width: min(640px, 34vw); transform: translateY(-34%); }
.eyebrow { margin-bottom: 24px; color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.hero h1 { margin-bottom: 28px; font-size: clamp(3.25rem, 4vw, 5rem); font-weight: 600; letter-spacing: -.045em; }
.hero-lead { max-width: 485px; margin-bottom: 50px; font-size: 1.08rem; color: #fff; }
.hero-actions { display: flex; gap: 44px; align-items: center; }
.button { display: inline-flex; min-width: 190px; min-height: 56px; align-items: center; justify-content: center; border-radius: 999px; font-size: 1rem; font-weight: 600; }
.button--primary { color: #052c32; background: var(--accent); }
.button--ghost { min-width: 170px; border: 1px solid rgba(255,255,255,.8); background: rgba(0,0,0,.3); }

.context-card { position: absolute; z-index: 4; display: flex; align-items: center; gap: 28px; border: 1px solid rgba(255,255,255,.2); border-radius: 22px; background: rgba(13,29,35,.64); box-shadow: 0 18px 50px rgba(0,0,0,.18); backdrop-filter: blur(5px); }
.context-card p { margin: 0; color: #fff; font-size: .72rem; line-height: 1.45; }
.context-card strong { color: var(--accent); }
.context-connector, .context-status { display: none; }
.context-icon { position: relative; display: grid; width: 60px; height: 60px; flex: 0 0 60px; place-items: center; }
.context-icon > img { width: 60px; height: 60px; }
.context-icon--layered > img { position: absolute; inset: 0; }
.context-icon--layered > img:last-child { width: 30px; height: 30px; margin: 15px; }
.context-card--input { top: 15%; left: 5.8%; width: 416px; padding: 22px 34px; }
.context-card--machine { top: 17.8%; right: 4.2%; width: 436px; padding: 20px 36px; }
.context-card--step { bottom: 21%; left: 5.8%; display: block; width: 473px; padding: 26px 44px; }
.context-card--step .context-heading { margin-bottom: 22px; font-size: .9rem; }
.context-card--step .alert { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; color: #f5c54d; font-weight: 700; }
.context-card--step .alert img { width: 22px; height: 22px; }
.context-card--step small { padding-left: 34px; color: rgba(255,255,255,.7); }
.context-card--depth { right: 3.4%; bottom: max(36px, 4vh); width: 403px; padding: 18px 35px; }

.section { padding: 145px 40px; }
.section-heading { max-width: 830px; }
.section-heading--center { margin-inline: auto; }
.section-heading h2 { margin-bottom: 34px; font-size: clamp(2.5rem, 3.15vw, 4rem); letter-spacing: -.035em; }
.section-heading p { max-width: 820px; font-size: .98rem; }
.build { min-height: 1230px; }
.capability-grid { width: min(100%, 1260px); margin: 130px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; }
.capability-card { position: relative; min-width: 0; min-height: 436px; overflow: hidden; padding: 24px 48px 32px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,.06); border-radius: 26px; background: linear-gradient(180deg, rgba(16,30,35,.02), rgba(12,25,31,.92)), var(--card-image) center/cover; box-shadow: 0 18px 55px rgba(7,18,23,.15); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.capability-card:hover { transform: translateY(-6px); border-color: rgba(0,195,223,.3); box-shadow: 0 24px 65px rgba(7,18,23,.3); }
.capability-top { display: flex; align-items: center; justify-content: space-between; font-size: 1.7rem; font-weight: 500; }
.capability-top > span:first-child { padding: 10px 18px; margin-left: -18px; border-radius: 999px; background: rgba(10,26,32,.62); }
.plus { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 50%; color: #1c343d; background: #fff; font-size: 2rem; font-weight: 400; }
.capability-card p { max-width: 340px; margin: 0; color: #fff; font-size: 1.05rem; font-weight: 600; line-height: 1.35; }

.glove-section { padding-top: 105px; padding-bottom: 150px; }
.glove-grid { width: min(100%, 1800px); margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 84px; align-items: center; }
.glove-photo { position: relative; height: 825px; margin: 0; overflow: hidden; border-radius: 28px; }
.glove-photo > img { width: 100%; height: 100%; object-fit: cover; }
.glove-photo figcaption { position: absolute; right: 52px; bottom: 38px; display: flex; align-items: center; gap: 22px; padding: 17px 30px; border-radius: 999px; background: rgba(8,20,24,.58); font-size: 1.1rem; font-weight: 700; }
.glove-photo figcaption img { width: 44px; height: 44px; }
.glove-copy { max-width: 610px; }
.glove-copy h2 { margin-bottom: 38px; font-size: clamp(2.1rem, 2.55vw, 3.25rem); }
.glove-copy > p:not(.eyebrow) { margin-bottom: 60px; }
.glove-copy h3 { margin-bottom: 24px; font-size: 1.5rem; }
.benefits { margin: 0; padding: 0; list-style: none; }
.benefits li { display: grid; grid-template-columns: 15px 1fr; align-items: center; gap: 20px; padding: 0 0 28px 8px; color: var(--muted); line-height: 1.5; }
.benefit-marker { position: relative; width: 15px; height: 34px; display: block; }
.benefit-marker img { position: absolute; top: 50%; left: 50%; width: 34px; height: 15px; max-width: none; transform: translate(-50%,-50%) rotate(90deg); }

.applications { padding-top: 145px; padding-bottom: 190px; }
.applications-heading, .accordion-list { width: min(100%, 844px); margin-inline: auto; }
.applications-heading { margin-bottom: 80px; }
.accordion-list { display: grid; gap: 16px; }
.accordion-list details { border-radius: 24px; background: var(--card); }
.accordion-list summary { min-height: 106px; padding: 28px 40px; display: grid; grid-template-columns: 44px 1fr 24px; align-items: center; gap: 38px; cursor: pointer; list-style: none; font-size: 1.2rem; font-weight: 600; }
.accordion-list summary::-webkit-details-marker { display: none; }
.accordion-list summary img { width: 44px; height: 44px; }
.accordion-list details p { max-width: 650px; margin: -8px 50px 0; padding: 0 0 34px; font-size: 1.06rem; }
.accordion-mark { position: relative; width: 18px; height: 18px; }
.accordion-mark::before, .accordion-mark::after { content: ""; position: absolute; top: 8px; left: 0; width: 18px; height: 2px; background: #fff; transition: transform .2s ease; }
.accordion-mark::after { transform: rotate(90deg); }
details[open] .accordion-mark::after { transform: rotate(0); }

.workflow-section { position: relative; min-height: 920px; overflow: hidden; }
.workflow-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.workflow-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #132f3a 0, rgba(19,47,58,.96) 27%, rgba(32,59,68,.55) 53%, rgba(48,73,81,0) 87%); }
.workflow-content { position: relative; z-index: 2; width: min(calc(100% - 80px), 1350px); margin: auto; padding-top: 105px; }
.workflow-content h2 { margin-bottom: 80px; font-size: clamp(3rem, 4vw, 4.8rem); letter-spacing: -.035em; }
.workflow-steps { width: 810px; margin: 0; padding: 0; list-style: none; }
.workflow-steps li { position: relative; min-height: 180px; padding-left: 485px; display: flex; align-items: flex-start; }
.workflow-steps li::after { content: ""; position: absolute; top: 67px; left: 413px; width: 1px; height: 113px; background: #fff; }
.workflow-steps li:last-child::after { display: none; }
.workflow-steps span { position: absolute; left: 380px; display: grid; width: 67px; height: 67px; place-items: center; border-radius: 50%; background: var(--accent); font-size: 2rem; }
.workflow-steps p { width: 325px; color: #fff; font-size: 1.05rem; }
.workflow-steps li:nth-child(even) { padding: 0 450px 0 0; justify-content: flex-end; }
.workflow-steps li:nth-child(even) p { text-align: right; }

.services { min-height: 1100px; padding-top: 160px; background: #132f3a; }
.services-heading p { max-width: 740px; }
.service-grid { width: min(100%, 1210px); margin: 100px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.service-card { min-width: 0; min-height: 396px; padding: 38px 52px 24px; display: flex; flex-direction: column; align-items: center; border: 1px solid rgba(255,255,255,.05); border-radius: 34px; background: rgba(255,255,255,.07); transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.service-card:hover { transform: translateY(-6px); border-color: rgba(0,195,223,.28); background: rgba(255,255,255,.095); }
.service-card h3 { min-height: 74px; margin-bottom: 36px; text-align: center; font-size: 1.7rem; font-weight: 600; }
.service-card img { width: 94px; height: 94px; margin-bottom: 34px; object-fit: contain; }
.service-card p { margin: auto 0 0; color: #fff; font-size: 1rem; }

@media (max-width: 1200px) {
  .context-card { display: none; }
  .hero-copy { left: auto; right: 7vw; width: min(560px, 46vw); }
  .capability-grid { gap: 22px; }
  .capability-card { padding-inline: 28px; }
  .glove-photo { height: 650px; }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .service-grid { gap: 24px; }
  .service-card { padding-inline: 28px; }
}

@media (max-width: 900px) {
  .site-header { position: fixed; width: 100%; height: 72px; padding: 0 20px; background: rgba(17,35,42,.82); backdrop-filter: blur(14px); }
  .brand { font-size: 1.6rem; }
  .menu-toggle { display: block; }
  .site-nav { position: absolute; top: 72px; left: 0; right: 0; display: none; padding: 24px; flex-direction: column; align-items: stretch; gap: 8px; background: rgba(17,35,42,.96); }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 14px; }
  .nav-cta { text-align: center; }
  .hero { min-height: 780px; background-position: 38% center; }
  .hero-shade { background: linear-gradient(180deg, rgba(16,28,33,.15), rgba(16,31,37,.92) 70%); }
  .hero-copy { top: auto; right: 24px; bottom: 70px; left: 24px; width: auto; transform: none; }
  .hero h1 { font-size: clamp(2.7rem, 12vw, 4.4rem); }
  .hero-actions { gap: 14px; }
  .button { min-width: 0; padding-inline: 26px; }
  .section { padding: 90px 22px; }
  .section-heading h2 br { display: none; }
  .build { min-height: 0; }
  .capability-grid { margin-top: 65px; grid-template-columns: 1fr; }
  .capability-card { min-height: 420px; }
  .glove-grid { grid-template-columns: 1fr; gap: 55px; }
  .glove-photo { height: 620px; }
  .glove-copy { max-width: none; }
  .applications { padding-bottom: 110px; }
  .accordion-list summary { padding: 24px; gap: 18px; }
  .accordion-list details p { margin-inline: 24px; }
  .workflow-section { min-height: 860px; }
  .workflow-image { object-position: 65% center; }
  .workflow-shade { background: linear-gradient(90deg, rgba(19,47,58,.98), rgba(19,47,58,.72) 65%, rgba(19,47,58,.2)); }
  .workflow-content { width: calc(100% - 44px); padding-top: 80px; }
  .workflow-steps { width: 100%; padding-left: 0; }
  .workflow-steps li, .workflow-steps li:nth-child(even) { padding: 0 0 0 95px; justify-content: flex-start; }
  .workflow-steps li::after { left: 33px; }
  .workflow-steps span { left: 0; }
  .workflow-steps li:nth-child(even) p { text-align: left; }
  .service-grid { grid-template-columns: 1fr; margin-top: 65px; }
  .services { min-height: 0; }
}

@media (max-width: 520px) {
  .hero { min-height: 720px; }
  .hero h1 br { display: none; }
  .hero-lead { margin-bottom: 32px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .button { width: 100%; }
  .glove-photo { height: 480px; }
  .glove-photo figcaption { right: 16px; bottom: 16px; padding: 10px 18px; font-size: .8rem; }
  .glove-photo figcaption img { width: 28px; height: 28px; }
  .accordion-list summary { grid-template-columns: 34px 1fr 20px; font-size: .96rem; }
  .accordion-list summary img { width: 34px; height: 34px; }
  .workflow-content h2 { font-size: 2.6rem; }
  .service-card { padding-inline: 34px; }
}

/* The source frame is a fixed 1920px desktop composition. These measurements
   preserve its exact canvas rhythm while the earlier rules remain fluid below. */
@media (min-width: 1900px) {
  body {
    background-color: #283038;
    background-image: url("assets/glow-left.svg"), url("assets/glow-right.svg"), radial-gradient(circle at 0 72%, #132f3a 0, #283038 42%);
    background-position: -1195px 2511px, 647px 1170px, 0 0;
    background-repeat: no-repeat;
    background-size: 2248px 2129px, 2520px 2397px, auto;
  }
  .site-header { left: 0; width: 100%; height: 98px; transform: none; background: rgba(33,37,39,.4); }
  .brand { position: absolute; top: 36px; left: 557px; width: 321px; height: 55px; font-family: "Open Sans", sans-serif; font-size: 40px; font-weight: 800; line-height: 1; }
  .site-nav { position: absolute; top: 36px; left: 1167px; gap: 72px; font-family: "Open Sans", sans-serif; font-size: 18px; }
  .nav-cta { width: 149px; height: 53px; margin-top: 0; padding: 14px 20px; }

  .hero { height: 1082px; min-height: 0; background-position: left -20px; background-size: 1927px 1102px; }
  .hero-shade { left: 608px; background: linear-gradient(270deg, rgba(29,40,46,.6), rgba(0,0,0,0)); }
  .hero-copy { top: 301px; left: 887px; width: 735px; transform: none; }
  .hero-copy .eyebrow { margin-bottom: 28px; color: #84b0b8; font-family: "Open Sans", sans-serif; font-size: 16px; }
  .hero h1 { width: 629px; margin-bottom: 41px; font-size: 60px; line-height: 1.272; letter-spacing: 0; }
  .hero-lead { width: 464px; margin-bottom: 98px; font-family: "Open Sans", sans-serif; font-size: 18px; font-weight: 600; line-height: 1.45; }
  .hero-actions { gap: 44px; }
  .hero-actions .button { min-height: 55px; font-size: 20px; font-weight: 500; }
  .hero-actions .button--primary { width: 215px; color: #fff; background: #009ab7; }
  .hero-actions .button--ghost { width: 191px; }

  .context-card { font-family: "Roboto Mono", monospace; }
  .context-card--input { top: 147px; left: 111px; height: 109px; }
  .context-card--machine { top: 193px; right: 80px; height: 125px; }
  .context-card--step { top: 652px; bottom: auto; left: 111px; height: 173px; }
  .context-card--depth { top: 738px; right: 67px; bottom: auto; height: 99px; }
  .context-connector { position: absolute; z-index: 2; display: block; max-width: none; }
  .context-connector--input { top: 256px; left: 328px; width: 184px; height: 102px; }
  .context-connector--machine { top: 318px; left: 1603px; width: 122px; height: 83px; }
  .context-connector--step { top: 729px; left: 142px; width: 391px; height: 1px; }
  .context-status { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; width: 178px; color: rgba(255,255,255,.5); font-family: "Roboto Mono", monospace; font-size: 13px; font-weight: 300; white-space: nowrap; }
  .context-status i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #00d8ee; box-shadow: 0 0 6px rgba(0,216,238,.65); }
  .context-status--input { top: 124px; left: 165px; }
  .context-status--machine { top: 169px; left: 1465px; }
  .context-status--step { top: 625px; left: 150px; }
  .context-status--depth { top: 714px; left: 1490px; }

  .section-heading h2 { font-size: 50px; line-height: 1.12; }
  .build { height: 1118px; min-height: 0; padding-bottom: 126px; }
  .capability-grid { width: 1356px; margin: 104px 0 0 255px; grid-template-columns: repeat(3, 422px); gap: 45px; }
  .capability-card { min-height: 436px; border-radius: 34px; }
  .capability-card:nth-child(1) { background-position: center, -63px -290px; background-size: auto, 565px 845px; }
  .capability-card:nth-child(2) { background-position: center, -249px 0; background-size: auto, 901px 491px; }
  .capability-card:nth-child(3) { background-position: center, -729px -24px; background-size: auto, 1199px 654px; }
  .capability-card > p { position: absolute; top: 330px; left: 48px; width: 344px; font-size: 20px; line-height: 24px; }
  .capability-top { display: block; font-size: 20px; }
  .capability-top > span:first-child { position: absolute; top: 19px; left: 19px; display: grid; width: 153px; height: 47px; margin: 0; padding: 0; place-items: center; }
  .capability-top .plus { position: absolute; top: 21px; left: 347px; }

  .glove-section { padding-bottom: 44px; }
  .glove-grid { grid-template-columns: 759px 582px; gap: 84px; align-items: start; }
  .glove-photo { width: 759px; height: 824px; }
  .glove-photo > img { object-position: 37% center; }
  .glove-copy { width: 582px; margin-top: 28px; }
  .glove-copy h2 { margin-bottom: 47px; font-size: 40px; line-height: 50px; }
  .glove-copy .eyebrow { font-size: 13px; }
  .glove-copy > p:not(.eyebrow) { width: 552px; height: 133px; margin-bottom: 41px; font-size: 14px; line-height: 20px; }
  .glove-copy h3 { margin-bottom: 35px; margin-left: 64px; font-size: 24px; }
  .benefits { margin-left: 80px; }
  .benefits li { grid-template-columns: 15px 1fr; gap: 20px; padding: 0 0 40px 8px; font-size: 20px; line-height: 27px; }

  .applications-heading, .accordion-list { width: 844px; margin-right: 0; margin-left: 496px; }
  .applications-heading { max-width: 844px; margin-bottom: 111px; }
  .applications-heading p { font-size: 20px; line-height: 24px; }
  .accordion-list summary { font-size: 20px; line-height: 24px; }
  .accordion-list details p { font-size: 20px; line-height: 24px; }

  .workflow-section { min-height: 1130px; }
  .workflow-image { top: 4px; right: auto; width: 2106px; height: 1126px; object-fit: fill; object-position: left top; }
  .workflow-shade { right: auto; width: 1576px; background: linear-gradient(88.39deg, #132f3a 4.46%, rgba(48,73,81,0) 96.74%); }
  .workflow-content { padding-top: 75px; }
  .workflow-content h2 { margin-bottom: 106px; font-size: 50px; line-height: 1.12; }
  .workflow-steps span { left: 396px; }
  .workflow-steps li { min-height: 165px; padding-left: 516px; }
  .workflow-steps li::after { left: 429px; height: 98px; }
  .workflow-steps li:nth-child(even) { padding-right: 462px; }
  .workflow-steps p { font-size: 20px; line-height: 24px; }

  .services { min-height: 2131px; padding-top: 168px; }
  .services-heading { width: 840px; max-width: 840px; }
  .services-heading h2 { max-width: 739px; }
  .services-heading p { max-width: 739px; font-size: 14px; line-height: 20px; }
  .service-grid { width: 1250px; margin: 121px 0 0 294px; grid-template-columns: repeat(3, 383.33px); gap: 50px; }
  .service-card { min-height: 396px; }
  .service-card p { font-size: 20px; line-height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Main-page navigation and hero, integrated into the AI Assistance page. */
:root {
  --line: rgba(255,255,255,.14);
  --accent-2: #6bdde9;
  --accent-dark: #08373d;
  --header-height: 78px;
  --content-max: 1180px;
  --font-tech: "IBM Plex Mono", "Roboto Mono", monospace;
}

.container,
.content-shell { width: min(calc(100% - 2rem), var(--content-max)); margin-inline: auto; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  width: 100%;
  height: auto;
  transform: none;
  background: rgba(33,37,39,.58);
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 30px rgba(4,12,16,.12);
  -webkit-backdrop-filter: blur(3px) saturate(104%);
  backdrop-filter: blur(3px) saturate(104%);
}
.site-header .nav { width: 100%; max-width: none; min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { position: static; width: auto; height: auto; display: inline-flex; align-items: center; color: #fff; font-family: "Open Sans", sans-serif; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: 0; font-variation-settings: "wdth" 100; }
.site-nav { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(38px,3.75vw,72px); font-family: "Open Sans", sans-serif; font-size: 18px; }
.site-nav a { color: #fff; font-size: 18px; font-weight: 400; transition: color .18s ease, border-color .18s ease, background .18s ease; }
.site-nav > a:not(.nav-cta) + a:not(.nav-cta) { margin-left: 0; }
.site-nav a:hover { color: #fff; }
.nav-cta { width: 149px; height: 53px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #588b94; border-radius: 35px; color: #fff !important; background: rgba(9,22,27,.12); font-family: "Inter", sans-serif; font-size: 16px !important; font-weight: 500 !important; }
.nav-cta:hover { border-color: #84b0b8; background: rgba(132,176,184,.12); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; color: #fff; background: rgba(255,255,255,.04); cursor: pointer; }
.nav-toggle-lines { display: grid; gap: 5px; }
.nav-toggle-lines span { display: block; width: 18px; height: 2px; border-radius: 99px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
.nav.is-menu-open .nav-toggle-lines span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-menu-open .nav-toggle-lines span:nth-child(2) { opacity: 0; }
.nav.is-menu-open .nav-toggle-lines span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.source-hero {
  min-height: calc(100svh + 24px);
  height: auto;
  padding: 70px 0 92px;
  display: flex;
  align-items: center;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(49,70,82,.28), rgba(28,39,48,.18));
}
.source-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../imgs/hero-shopfloor-worker.webp") 58% center / cover no-repeat;
  transform: scale(1.02);
  pointer-events: none;
}
.source-hero .hero-grid { position: absolute; z-index: 2; top: clamp(5.8rem,9vw,8.4rem); left: clamp(3rem,5vw,6.4rem); display: grid; grid-template-columns: 1fr; gap: .8rem; width: min(520px,42vw); max-width: none; margin: 0; }
.source-hero .hero-copy { position: relative; inset: auto; z-index: 2; width: auto; transform: none; display: grid; align-content: start; }
.source-hero .hero-title { margin: 0 0 1rem; color: #fff; font-size: clamp(2.9rem,3.7vw,3.68rem); font-weight: 500; line-height: 1.15; letter-spacing: -.04em; }
.source-hero .hero-title br { display: block; }
.source-hero .hero-lead { max-width: 58ch; margin: .3rem 0 2.1rem; color: #fff; font-size: 1rem; }
.source-hero .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0; }
.button { min-width: 0; min-height: 0; padding: .95rem 1.875rem; border-radius: 999px; font-size: 1rem; font-weight: 700; transition: transform .18s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { color: var(--accent-dark); background: linear-gradient(180deg,#38d7e7,var(--accent)); }
.button.secondary { color: #fff; border: 1px solid rgba(2,187,208,.45); background: rgba(255,255,255,.05); }

.hero-smart-context { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.smart-context-cluster { position: absolute; display: grid; gap: .75rem; animation: smart-context-float 7.5s ease-in-out infinite; }
.smart-context-cluster--machine { top: auto; bottom: clamp(2.8rem,5vw,4.6rem); left: clamp(3rem,5vw,6.4rem); width: min(37vw,620px); }
.smart-context-cluster--input { top: clamp(5.8rem,9vw,8.4rem); right: clamp(2.2rem,4vw,4.8rem); width: min(27vw,450px); animation-duration: 8.2s; animation-delay: -1.2s; }
.smart-context-cluster--depth { bottom: clamp(2.8rem,5vw,4.6rem); left: clamp(3rem,5vw,6.4rem); width: min(25vw,390px); animation-duration: 7s; animation-delay: -3s; }
.smart-context-cluster--step { right: clamp(1.4rem,3vw,3rem); bottom: clamp(2.6rem,4.2vw,4.4rem); width: min(31vw,560px); animation-duration: 8.8s; animation-delay: -2.2s; }
.smart-context-meta { margin: 0 0 0 .2rem; color: rgba(224,230,234,.64); font: 400 clamp(.72rem,.86vw,.8rem)/1.3 var(--font-tech); letter-spacing: .16em; text-transform: uppercase; }
.smart-context-dot { display: inline-block; width: .72em; height: .72em; margin: 0 .5em; border-radius: 50%; background: rgba(155,222,233,.9); box-shadow: 0 0 10px rgba(155,222,233,.5); animation: smart-context-live-dot 4.8s ease-in-out infinite; }
.smart-context-card { display: grid; grid-template-columns: auto 1fr; gap: clamp(.9rem,1.25vw,1.35rem); align-items: center; padding: clamp(.95rem,1.35vw,1.3rem); border: 1px solid rgba(208,219,226,.48); border-radius: 1.8rem; background: linear-gradient(180deg,rgba(53,62,71,.74),rgba(36,43,50,.78)); box-shadow: 0 20px 55px rgba(8,12,18,.26), inset 0 1px rgba(255,255,255,.1); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.smart-context-card p { margin: 0; color: rgba(242,247,250,.98); font: 500 clamp(.76rem,.84vw,.88rem)/1.38 var(--font-tech); letter-spacing: .02em; }
.smart-context-card strong { color: #9fdfe8; }
.smart-context-icon-wrap { width: clamp(38px,2.94vw,52px); height: clamp(38px,2.94vw,52px); display: grid; place-items: center; border-radius: 50%; background: #45474e; }
.smart-context-icon { width: 59%; height: 59%; object-fit: contain; }
.smart-context-card--step { grid-template-columns: 1fr; gap: .8rem; }
.smart-context-step-head { padding-bottom: .8rem; border-bottom: 1px solid rgba(214,224,231,.72); font-size: clamp(.86rem,.96vw,.98rem) !important; font-weight: 600 !important; }
.smart-context-alert-line { display: inline-flex; align-items: center; gap: .45rem; color: #ffd06c; }
.smart-context-alert-icon { width: 1rem; height: 1rem; background: currentColor; -webkit-mask: url("../imgs/hero-icons/step-alert.svg") center/contain no-repeat; mask: url("../imgs/hero-icons/step-alert.svg") center/contain no-repeat; }
.smart-context-reason { display: inline-block; margin-left: 1.45rem; color: rgba(244,247,249,.94); }
.smart-context-connector { position: absolute; inset: 0; z-index: 0; }
.smart-context-connector-line { position: absolute; left: 0; top: 0; height: 1px; transform-origin: left center; background: linear-gradient(90deg,rgba(165,193,202,.52),rgba(165,193,202,0)); }
.smart-context-connector-dot { position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: rgba(158,188,198,.78); box-shadow: 0 0 0 8px rgba(158,188,198,.08); }
@keyframes smart-context-float { 50% { transform: translateY(-10px); } }
@keyframes smart-context-live-dot { 5% { transform: scale(1.18); box-shadow: 0 0 22px rgba(155,222,233,.7); } 14%,100% { transform: scale(1); } }

/* Rich expandable capability cards. */
.build { height: auto; min-height: 0; }
.capability-grid { align-items: start; }
.capability-card { min-height: 436px; height: auto; display: block; }
.capability-card summary { position: absolute; z-index: 3; top: 0; right: 0; left: 0; height: 436px; display: block; list-style: none; color: #fff; }
.capability-card summary::-webkit-details-marker { display: none; }
.capability-topline { position: absolute; top: 24px; right: 48px; left: 30px; display: flex; align-items: center; justify-content: space-between; }
.capability-title { width: auto; height: auto; padding: 10px 18px; display: block; border-radius: 999px; background: rgba(10,26,32,.62); font-size: 1.7rem; font-weight: 500; line-height: 1.12; }
.capability-card .plus { position: relative; width: 45px; height: 45px; flex: 0 0 45px; background: #fff; }
.capability-card .plus::before, .capability-card .plus::after { content: ""; position: absolute; top: 21px; left: 13px; width: 19px; height: 2px; background: #1c343d; transition: transform .2s ease; }
.capability-card .plus::after { transform: rotate(90deg); }
.capability-card[open] .plus::after { transform: rotate(0); }
.capability-teaser { position: absolute; z-index: 2; right: 32px; bottom: 32px; left: 48px; max-width: 344px; display: block; color: #fff; font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.capability-card summary { cursor: pointer; }
.capability-card[open] { min-height: 0; background: rgba(12,25,31,.98); }
.capability-card[open]::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 436px; background: linear-gradient(180deg,rgba(16,30,35,.02),rgba(12,25,31,.92)), var(--card-image) center/cover no-repeat; pointer-events: none; }
.capability-detail { position: relative; z-index: 2; margin-top: 412px; padding: 36px 0 4px; border-top: 1px solid rgba(255,255,255,.1); }
.capability-detail p, .capability-detail li { max-width: none; margin: 0 0 .75rem; color: rgba(255,255,255,.84); font-size: .92rem; font-weight: 400; line-height: 1.5; }
.capability-detail ul { margin: 0 0 1rem; padding-left: 1.2rem; }

.glove-video-card { position: relative; height: 825px; overflow: hidden; border-radius: 28px; }
.glove-video-poster { position: relative; width: 100%; height: 100%; padding: 28px; display: flex; align-items: flex-end; gap: 16px; border: 0; color: #fff; text-align: left; background: #0b1d23; cursor: pointer; }
.glove-video-poster-image, .glove-video-overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.glove-video-overlay { background: linear-gradient(180deg,transparent 45%,rgba(5,17,22,.88)); }
.glove-video-poster > span { position: relative; z-index: 2; }
.glove-video-play { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.glove-video-play::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-35%,-50%); border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 17px solid var(--accent-dark); }
.glove-video-copy { display: grid; gap: 3px; }
.glove-video-kicker { color: var(--accent-2); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.glove-video-title { font-size: 1.35rem; font-weight: 700; }
.glove-video-meta { color: rgba(255,255,255,.76); font-size: .9rem; }
.glove-product { position: absolute !important; right: 28px; top: 28px; display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 999px; background: rgba(8,20,24,.68); font-weight: 700; }
.glove-product img { width: 36px; }
.glove-video-card.is-loaded { height: auto; }
.glove-video-card.is-loaded iframe { display: block; width: 100%; aspect-ratio: 16/10; border: 0; }
.glove-copy > p:not(.eyebrow) { margin-bottom: 28px; }

.workflow-section { min-height: 1370px; }
.workflow-steps { width: 810px; }
.workflow-steps li {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 650ms ease,
    transform 720ms cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--workflow-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.workflow-steps li.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.workflow-steps li:nth-child(2) { --workflow-reveal-delay: 70ms; }
.workflow-steps li:nth-child(3) { --workflow-reveal-delay: 140ms; }
.workflow-steps li:nth-child(4) { --workflow-reveal-delay: 210ms; }
.workflow-steps li:nth-child(5) { --workflow-reveal-delay: 280ms; }
.services { min-height: 0; padding-bottom: 170px; }

.partners-section, .about-section, .faq-section, .final-cta { background: #132f3a; }
.partners-section h2, .about-section h2, .faq-section h2, .final-cta h2 { font-size: clamp(2.5rem,3.15vw,4rem); }
.partners-viewport { margin-top: 54px; overflow: hidden; padding: 14px 0; -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.partners-track { width: max-content; display: flex; align-items: center; gap: clamp(2.5rem,4vw,4.5rem); will-change: transform; }
.partners-track figure { width: clamp(128px,12vw,192px); height: 68px; flex: 0 0 auto; margin: 0; display: grid; place-items: center; }
.partners-track img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partners-track .partner-logo--db { padding-block: 8px; }
.partners-track .partner-logo--db img { width: auto; height: 52px; max-height: 100%; object-position: center; }
.about-section { background: linear-gradient(135deg,#173743,#263a43); }
.about-card { max-width: 920px; }
.about-card > p:not(.eyebrow) { font-size: 1.08rem; }
.faq-list { display: grid; gap: 16px; margin-top: 44px; }
.faq-list details { padding: 0; border-radius: 24px; background: rgba(255,255,255,.07); }
.faq-list summary { min-height: 88px; padding: 25px 32px; display: grid; grid-template-columns: 1fr 20px; align-items: center; gap: 20px; list-style: none; color: #fff; font-size: 1.08rem; font-weight: 600; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list details p { margin: -4px 32px 0; padding: 0 0 30px; }
.final-cta { border-top: 1px solid var(--line); text-align: center; }
.final-cta-box { max-width: 900px; padding: 58px; border: 1px solid rgba(255,255,255,.1); border-radius: 30px; background: rgba(255,255,255,.05); }
.final-cta-box p { max-width: 660px; margin-inline: auto; }
.final-cta-box .button { margin-top: 22px; }
.site-footer { border-top: 1px solid var(--line); background: rgba(15,31,38,.95); }
.footer-row { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); }
.footer-meta { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-meta a { color: var(--accent-2); }

@media (max-width: 1200px) {
  .site-header .nav { width: min(calc(100% - 40px),var(--content-max)); }
  .site-nav { gap: 28px; }
  .site-nav a { font-size: 16px; }
  .hero-smart-context { display: none; }
  .source-hero .hero-grid { width: min(520px,46vw); }
  .workflow-section { min-height: 1330px; }
}

@media (min-width: 1201px) {
  .site-header .brand { margin-left: 29%; }
  .site-header .site-nav { margin-right: 5.9%; }
}

@media (min-width: 1900px) {
  .capability-topline { top: 19px; right: 30px; left: 19px; }
  .capability-title { width: 153px; height: 47px; padding: 0; display: grid; place-items: center; border-radius: 28px; font-size: 20px; font-weight: 700; line-height: 20px; }
  .capability-teaser { top: 330px; right: auto; bottom: auto; left: 48px; width: 344px; font-size: 20px; line-height: 24px; }
  .capability-detail { margin-top: 412px; }
  .capability-card:nth-child(1)[open]::before { background-position: center, -63px -290px; background-size: auto, 565px 845px; }
  .capability-card:nth-child(2)[open]::before { background-position: center, -249px 0; background-size: auto, 901px 491px; }
  .capability-card:nth-child(3)[open]::before { background-position: center, -729px -24px; background-size: auto, 1199px 654px; }
}

@media (max-width: 900px) {
  :root { --header-height: 58px; }
  .site-header { padding: 0; height: auto; background: rgba(33,37,39,.7); -webkit-backdrop-filter: blur(4px) saturate(105%); backdrop-filter: blur(4px) saturate(105%); }
  .nav { min-height: 58px; flex-wrap: wrap; }
  .brand { font-size: 27px; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .site-nav { position: static; display: none; width: 100%; padding: 4px 0 18px; flex-direction: column; align-items: stretch; gap: 4px; background: transparent; }
  .nav.is-menu-open .site-nav { display: flex; }
  .site-nav > a:not(.nav-cta) + a:not(.nav-cta) { margin-left: 0; }
  .site-nav a { padding: 8px 0; font-size: 1rem; }
  .nav-cta { text-align: center; margin-top: 4px !important; }
  .source-hero { min-height: 780px; padding: 72px 0 40px; background-position: initial; }
  .source-hero::before { background-image: url("../imgs/hero-shopfloor-worker-1080.webp"); background-position: 38% center; }
  .source-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg,rgba(16,28,33,.08),rgba(16,31,37,.94) 72%); }
  .source-hero .hero-grid { position: absolute; top: clamp(110px,16vh,145px); right: auto; left: 24px; width: min(calc(100% - 48px),560px); margin: 0; align-self: auto; }
  .source-hero .hero-title { font-size: clamp(2.7rem,12vw,4.4rem); }
  .section { padding: 90px 22px; }
  .capability-card[open] { min-height: 690px; }
  .glove-video-card { height: 620px; }
  .workflow-section { min-height: 1280px; }
  .workflow-content { padding-top: 80px; }
  .workflow-steps { width: 100%; }
  .footer-row { padding-block: 22px; flex-direction: column; text-align: center; }
}

@media (max-width: 520px) {
  .container, .content-shell { width: min(calc(100% - 1.25rem),var(--content-max)); }
  .source-hero { min-height: 720px; }
  .source-hero .hero-grid { left: 1rem; width: calc(100% - 2rem); margin: 0; }
  .source-hero .hero-title { font-size: clamp(2.25rem,11vw,3.2rem); }
  .source-hero .hero-actions { flex-direction: column; align-items: stretch; }
  .source-hero .button { width: 100%; }
  .section { padding: 72px 18px; }
  .capability-card { min-height: 450px; padding-inline: 28px; }
  .capability-topline { right: 20px; left: 18px; }
  .capability-title { font-size: 1.35rem; }
  .capability-teaser { right: 28px; bottom: 28px; left: 28px; font-size: 18px; line-height: 23px; }
  .capability-card[open] { min-height: 0; }
  .capability-detail { margin-top: 426px; }
  .glove-video-card { height: 480px; }
  .glove-video-poster { padding: 18px; }
  .glove-video-play { width: 52px; height: 52px; flex-basis: 52px; }
  .glove-product { top: 16px; right: 16px; padding: 8px 12px; font-size: .75rem; }
  .workflow-section { min-height: 1230px; }
  .workflow-steps li { min-height: 195px; }
  .final-cta-box { padding: 38px 20px; }
  .footer-meta { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .smart-context-cluster, .smart-context-dot { animation: none; }
  .workflow-steps li { opacity: 1; transform: none; transition: none; }
}