:root {
  --blue: #bd593f;
  --blue-dark: #8f3f2d;
  --orange: #e96749;
}

/* Real printer photos replace decorative renders in the technology cards. */
.tech-visual {
  background-color: #12161c;
  background-position: center;
  background-size: cover;
  outline: 1px solid rgb(255 255 255 / 0.12);
  outline-offset: -1px;
}

.tech-visual::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgb(5 8 12 / 0), rgb(5 8 12 / 0.1));
  pointer-events: none;
}

.tech-visual span { display: none; }
.tech-visual.fdm { background-image: url("assets/fdm-printer-stock.jpg"); }
.tech-visual.resin { background-image: url("assets/resin-printer-stock.jpg"); background-position: center 42%; }
.tech-visual.engineering { background-image: url("assets/engineering-printer-stock.jpg"); }

.services-band { background: #e8e4de; }
.service-list {
  grid-template-columns: repeat(5, 1fr);
  border-color: #c8c0b8;
}
.service-list article,
.service-list article + article { border-color: #c8c0b8; }

.robot-showcase {
  width: min(100%, 860px);
  margin: 48px auto -22px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(190px, .45fr);
  align-items: end;
  gap: 22px;
}

.robot-frame {
  height: 238px;
  background-image: url("assets/industrial-robot-stock.jpg");
  background-size: cover;
  background-position: center 22%;
  position: relative;
  overflow: hidden;
}

.robot-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 42%, #e8e4de 96%);
  pointer-events: none;
}

.robot-showcase figcaption { padding-bottom: 8px; }

.robot-showcase figcaption span {
  color: #d8553e;
  font-size: .68rem;
  font-weight: 700;
}

.robot-showcase figcaption p {
  margin: 12px 0 0;
  color: #4f5560;
  font-size: .92rem;
  line-height: 1.5;
}
.quote { background: #201917; }
.quote h2 em,
.quote .kicker { color: #f29a83; }
.quote-form .primary { color: #201917; }

.hero-phone,
.quote-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  font-weight: 800;
  text-decoration: none;
}

.hero-phone {
  position: absolute;
  z-index: 1;
  right: max(24px, calc((100% - 1212px) / 2));
  bottom: 36px;
  color: rgb(255 255 255 / 0.83);
  font-size: 13px;
}

.hero-phone svg,
.quote-phone svg { width: 17px; height: 17px; color: var(--orange); }
.quote-phone { margin-top: 28px; font-size: 18px; }
.hero-phone:hover,
.quote-phone:hover { color: var(--orange); }

.quote-form button:disabled {
  cursor: wait;
  opacity: 0.72;
}

footer {
  max-width: none;
  min-height: 104px;
  margin: 0;
  padding: 27px max(24px, calc((100% - 1212px) / 2));
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto auto auto;
  align-items: center;
  gap: 28px;
  background: #151110;
  border-top: 1px solid rgb(242 154 131 / 0.26);
  color: rgb(255 255 255 / 0.58);
  font-size: 12px;
}

footer .brand {
  color: #fff;
}

footer .brand b {
  color: var(--orange);
}

footer > a:not(.brand) {
  color: rgb(255 255 255 / 0.74);
  text-decoration: none;
  transition: color 180ms ease;
}

footer > a:not(.brand):hover {
  color: var(--orange);
}

footer a:last-child {
  color: #fff;
}

footer a:last-child svg {
  color: var(--orange);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *,
  .hero-note,
  .hero-scroll {
    animation: hero-arrive 720ms cubic-bezier(0.2, 0, 0, 1) both;
  }

  .hero-copy .kicker { animation-delay: 70ms; }
  .hero-copy h1 { animation-delay: 140ms; }
  .hero-copy .hero-lead { animation-delay: 210ms; }
  .hero-copy .hero-actions { animation-delay: 280ms; }
  .hero-note { animation-delay: 370ms; }
  .hero-scroll { animation-delay: 430ms; }

  html.motion-ready .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition-property: opacity, transform;
    transition-duration: 560ms;
    transition-delay: var(--reveal-delay, 0ms);
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    will-change: opacity, transform;
  }

  html.motion-ready .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
  }
}

@keyframes hero-arrive {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .service-list { grid-template-columns: 1fr; }

  .robot-showcase {
    width: min(100%, 440px);
    margin: 34px auto -12px;
    display: block;
  }

  .robot-frame { height: 220px; }

  .robot-showcase figcaption {
    padding: 14px 0 0;
  }

  .site-header .header-cta {
    width: auto;
    max-width: 132px;
    min-width: 0;
    padding-inline: 10px;
    white-space: normal;
  }

  .site-header .header-cta span { display: inline; }
  .site-header .header-cta svg { display: none; }
  .hero-media img { object-position: 61% center; }
  .hero-phone {
    left: 16px;
    right: auto;
    bottom: 24px;
    font-size: 12px;
  }
  .hero-scroll { display: none; }

  footer {
    min-height: 0;
    grid-template-columns: 1fr auto;
    gap: 18px 14px;
    padding: 26px 16px calc(26px + env(safe-area-inset-bottom));
  }

  footer > span {
    color: rgb(255 255 255 / 0.46);
    font-size: 11px;
  }

  footer a:last-child {
    justify-self: end;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .service-list { grid-template-columns: repeat(2, 1fr); }
  .service-list article:nth-child(2) { border-right: 0; }
  .service-list article:nth-child(n + 3) { border-top: 1px solid #c8c0b8; }
}