/* A single click-to-play demo. The player needs no JavaScript or third-party embed. */
.home-assembly { padding: 108px 0 116px; }
.home-assembly__intro {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.5fr);
  align-items: center;
  gap: clamp(48px, 6vw, 82px);
  margin-bottom: 64px;
}
.home-assembly__copy h2 { margin: 0; font-size: clamp(40px, 4.5vw, 60px); line-height: 1; letter-spacing: -.05em; }
.home-assembly__copy .eyebrow { margin-bottom: 16px; }
.home-assembly__copy p { margin: 24px 0; color: var(--muted); font-size: 17px; line-height: 1.7; max-width: 390px; }
.home-assembly__guide { display: inline-block; color: var(--accent); font-size: 14px; font-weight: 650; }
.home-assembly__guide:hover { text-decoration: underline; text-underline-offset: 4px; }
.home-assembly__media { margin: 0; min-width: 0; }
.home-assembly__player { position: relative; overflow: hidden; border-radius: 22px; background: #edf0ec; box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.home-assembly__media video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background: #edf0ec;
}
.home-assembly__play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; border: 0; background: linear-gradient(180deg,rgba(8,12,14,.05),rgba(8,12,14,.28)); color: #fff; cursor: pointer; transition: background .2s ease,opacity .2s ease; }
.home-assembly__play:hover { background: linear-gradient(180deg,rgba(8,12,14,.02),rgba(8,12,14,.18)); }
.home-assembly__play span { width: 66px; height: 66px; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(8,12,14,.72); box-shadow: 0 12px 32px rgba(0,0,0,.28); position: relative; }
.home-assembly__play span:after { content: ""; position: absolute; left: 27px; top: 20px; border-left: 18px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.home-assembly__play b { padding: 7px 11px; border-radius: 999px; background: rgba(8,12,14,.7); font-size: 12px; letter-spacing: .02em; }
.home-assembly__player.is-playing .home-assembly__play { opacity: 0; pointer-events: none; }
.home-assembly__media figcaption { margin-top: 12px; color: #77838a; font-size: 11px; letter-spacing: .02em; }
.home-assembly .process { gap: 18px; border: 0; }
.home-assembly .process-step,
.home-assembly .process-step + .process-step {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 390px;
  padding: 26px 28px 30px;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 20px;
  background: linear-gradient(150deg,rgba(255,255,255,.032),rgba(255,255,255,.012));
  box-shadow: 0 20px 54px rgba(0,0,0,.12);
}
.home-assembly .process-step:hover { border-color: rgba(240,166,43,.24); transform: translateY(-2px); transition: transform .2s ease,border-color .2s ease; }
.home-assembly .process-node { display: none; }
.home-assembly .process-number { margin: 0 0 18px; color: #d89120; font-size: 10px; }
.home-assembly .process-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 148px;
  margin: 0 0 26px;
  padding: 10px 18px;
  border-radius: 15px;
  background: radial-gradient(circle at 50% 42%,rgba(240,166,43,.085),transparent 68%),rgba(7,11,13,.34);
}
.home-assembly .process-icon svg { width: min(240px, 100%); height: 140px; }
.home-assembly .process-icon .wood-grain { fill: none; stroke: #b9915f; stroke-width: 2; stroke-linecap: round; }
.home-assembly .process-icon .builder-cells { fill: none; stroke: #e7ecee; stroke-width: 2.6; stroke-linejoin: round; }
.home-assembly .process-icon .builder-nodes { fill: #829097; stroke: #d8e0e4; stroke-width: 1.2; }
.home-assembly .process-icon .monitor-stand { fill: #182127; stroke: #9aa7ad; stroke-width: 2; stroke-linejoin: round; }
.home-assembly .process-icon .monitor-foot { fill: #dfe5e8; }
.home-assembly .process-icon .board-top { fill: #7b5a35; stroke: #dfbc82; stroke-width: 2; stroke-linejoin: round; }
.home-assembly .process-icon .board-face { fill: #5a432a; stroke: #d4b27a; stroke-width: 2.3; stroke-linejoin: round; }
.home-assembly .process-icon .board-side { fill: #3f2f20; stroke: #b89160; stroke-width: 2; stroke-linejoin: round; }
.home-assembly .process-icon .saw-blade { fill: #182127; stroke: #e7ecee; stroke-width: 2.2; stroke-linejoin: round; }
.home-assembly .process-icon .saw-hub { fill: #0b1115; stroke: #8e9ba2; stroke-width: 2.5; }
.home-assembly .process-icon .printer { fill: none; stroke: #e7ecee; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.home-assembly .process-icon .printer .filament { stroke: #7c8990; stroke-width: 1.8; }
.home-assembly .process-icon .printer .printer-brace { stroke: #7c8990; stroke-width: 1.8; }
.home-assembly .process-icon .printed-part { fill: #f0a62b; stroke: #d77800; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.home-assembly .process-icon .assembly-grid { fill: none; stroke: #e7ecee; stroke-width: 4.5; stroke-linejoin: round; }
.home-assembly .process-icon .assembly-connector { fill: #f0a62b; stroke: #d77800; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.home-assembly .process-icon .assembly-connector circle { stroke-width: 2; }
.home-assembly .process-step h3 { font-size: 24px; }
.home-assembly .process-step p { font-size: 14px; line-height: 1.58; }
.home-assembly .process-note { margin-top: auto; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.09); color: #b8c2c7; line-height: 1.48; }
.home-assembly .process-note:before { content: "Test one first"; display: block; width: auto; height: auto; margin: 0 0 4px; border-radius: 0; background: none; color: #e9edef; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 800px) {
  .home-assembly { padding: 70px 0 78px; }
  .home-assembly__intro { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-bottom: 36px; }
  .home-assembly__copy h2 br { display: none; }
  .home-assembly__copy p { max-width: 580px; }
  .home-assembly .process { gap: 14px; }
  .home-assembly .process-step,
  .home-assembly .process-step + .process-step { min-height: 0; border: 1px solid rgba(255,255,255,.085); }
  .home-assembly .process-step:hover { transform: none; }
}
@media (max-width: 520px) {
  .home-assembly { padding: 60px 0 68px; }
  .home-assembly__copy h2 { font-size: 40px; }
  .home-assembly__copy p { font-size: 16px; }
  .home-assembly__player,.home-assembly__media video { border-radius: 16px; }
  .home-assembly__play span { width: 58px; height: 58px; }
  .home-assembly__play span:after { left: 24px; top: 18px; border-left-width: 16px; border-top-width: 11px; border-bottom-width: 11px; }
  .home-assembly .process-step,
  .home-assembly .process-step + .process-step { padding: 22px 21px 25px; border-radius: 17px; }
  .home-assembly .process-icon { height: 132px; }
  .home-assembly .process-icon svg { width: min(220px, 100%); height: 126px; }
}
