/* The SOP sits directly on a dark section instead of inside a second frame. */
.understand { background: var(--ink2); color: #fffaf0; }
.understand-intro { padding-top: 42px; border-top: 1px solid rgba(255, 250, 240, .42); margin-bottom: 48px; }
.understand-intro .lead { max-width: 565px; color: #d8dfdc; }
.understand-promise { display: block; margin-top: 10px; color: #fffaf0; font-weight: 500; }

.sop-build-stage {
  position: relative;
  overflow: visible;
  width: min(100%, 960px);
  margin: 0 auto;
  padding: 0;
}
.sop-build-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 18px;
  width: min(100%, 760px);
  min-height: 400px;
  margin: 0 auto;
  padding: 14px 18px 12px;
  background: #faf9f4;
  color: #14212a;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .23);
}
.sop-build-page[hidden] { display: none; }
.sop-build-page.is-entering-next { animation: sop-page-enter-next .34s ease-out both; }
.sop-build-page.is-entering-prev { animation: sop-page-enter-prev .34s ease-out both; }
@keyframes sop-page-enter-next { from { opacity: .35; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
@keyframes sop-page-enter-prev { from { opacity: .35; transform: translateX(-22px); } to { opacity: 1; transform: translateX(0); } }
.sop-build-controls { display: flex; justify-content: flex-end; gap: 10px; width: min(100%, 760px); margin: 14px auto 0; }
.sop-build-control { display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 1px solid rgba(255,250,240,.75); border-radius: 0; background: transparent; color: #fffaf0; cursor: pointer; font: 300 31px/1 Arial, sans-serif; transition: background .2s, color .2s, transform .2s; }
.sop-build-control:hover { background: #fffaf0; color: var(--ink2); }
.sop-build-control:active { transform: scale(.94); }
.sop-build-control:focus-visible { outline: 2px solid #e3bd79; outline-offset: 3px; }
.sop-impact-trigger { align-self: center; min-height: 54px; margin-right: auto; padding: 0 16px; border: 1px solid #d3a052; border-radius: 0; background: #d3a052; color: #14212a; cursor: pointer; font: 700 11px/1.1 "Arial Narrow", Arial, sans-serif; letter-spacing: .08em; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.sop-impact-trigger[hidden] { display: none; }
.sop-impact-trigger:hover { background: #f2d19a; }
.sop-impact-trigger:focus-visible { outline: 2px solid #fffaf0; outline-offset: 3px; }
.sop-impact-trigger:disabled { opacity: .6; cursor: wait; }
.sop-build-page-head, .sop-build-progress, .sop-build-title, .sop-build-detail-slot, .sop-build-foot-slot { grid-column: 1 / -1; }
.sop-build-sequence, .sop-build-context, .sop-build-operator-slot, .sop-build-media-slot { min-width: 0; align-self: start; }
.sop-build-sequence { grid-column: 1; }
.sop-build-context { grid-column: 2; }
.sop-build-operator-slot, .sop-build-media-slot { grid-column: 1 / -1; }
.sop-build-page-head, .sop-build-label, .sop-build-section-head, .sop-build-page-foot, .sop-build-evidence figcaption, .sop-build-cad-state {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}
.sop-build-page-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid #99a9aa; }
.sop-build-status { display: inline-flex; align-items: center; gap: 5px; color: #0d6b58; white-space: nowrap; }
.sop-build-status.is-drafting::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #c8954d; box-shadow: 0 0 0 0 #c8954d88; animation: sop-draft-pulse 1.35s ease-out infinite; }
.sop-build-status.is-drafting::after { content: ""; width: 1px; height: 10px; margin-left: 1px; background: #b17c3d; animation: sop-draft-caret .75s steps(1) infinite; }
.sop-build-status.is-drafting .sop-build-status-text { color: #a87a3b; background: linear-gradient(105deg, #9b682f 5%, #e1ae63 42%, #9b682f 75%); background-size: 220% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: sop-draft-ink 2s linear infinite; }
@keyframes sop-draft-pulse { 65% { box-shadow: 0 0 0 5px #c8954d00; } 100% { box-shadow: 0 0 0 0 #c8954d00; } }
@keyframes sop-draft-caret { 50% { opacity: 0; } }
@keyframes sop-draft-ink { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.sop-build-progress { height: 2px; margin-top: -1px; background: transparent; }
.sop-build-progress span { display: block; width: var(--build-progress, 100%); height: 100%; background: #c9974e; transition: width .55s cubic-bezier(.2,.7,.2,1); }
.sop-build-title { padding: 8px 0 10px; }
.sop-build-label { color: #60747a; }
.sop-build-title h3 { margin: 3px 0 0; font-size: clamp(26px, 2.35vw, 36px); font-weight: 500; letter-spacing: -.05em; line-height: 1.04; }
.sop-build-section-head { display: flex; justify-content: space-between; padding: 5px 0 6px; border-top: 1px solid #bac4c3; color: #86989a; }
.sop-build-sequence { margin-bottom: 0; }
.sop-build-step { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 8px; align-items: center; min-height: 27px; border-bottom: 1px solid #d4dbd7; font-size: 12px; }
.sop-build-step b { color: #a87a3b; font-size: 10px; }
.sop-build-step-focus { color: #0d554b; font-weight: 600; }
.sop-build-context-row { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 7px; align-items: center; min-height: 34px; padding: 3px 0; border-bottom: 1px solid #d4dbd7; }
.sop-build-context-row p { margin: 0; font-size: 12px; line-height: 1.25; }
.sop-build-icon-list { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 15px; min-width: 0; }
.sop-build-icon-list > span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; line-height: 1.15; white-space: nowrap; }
.sop-icon { display: block; width: 22px; height: 22px; flex: 0 0 auto; object-fit: contain; }
.sop-build-ppe { gap: 7px; }
.sop-build-ppe .sop-icon { width: 24px; height: 24px; }
.sop-build-detail { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 7px; align-items: start; padding: 8px 0; border-bottom: 1px solid #aebbb8; }
.sop-build-detail p { margin: 0; max-width: 600px; font-size: 12px; line-height: 1.35; }
.sop-build-evidence { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.sop-build-evidence figure { position: relative; height: 165px; margin: 0; overflow: hidden; background: #25343b; }
.sop-build-evidence img, .sop-build-evidence video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sop-build-photo img { object-position: center 45%; }
.sop-build-video video { object-position: center; }
.sop-build-stock-evidence { grid-template-columns: minmax(0, 1.65fr) minmax(0, .8fr); }
.sop-build-stock-evidence figure { height: 228px; }
.sop-build-stock-evidence .sop-build-photo img { object-position: center 54%; }
.sop-build-stock-video { background: #17242c; }
.sop-build-stock-video video { object-fit: contain; background: #17242c; }
.sop-build-evidence figcaption { position: absolute; top: 0; right: 0; left: 0; display: flex; justify-content: space-between; gap: 7px; padding: 7px 9px; color: #fffaf0; background: linear-gradient(#14212ad9, #14212a80); pointer-events: none; }
.sop-build-evidence figcaption span { color: #e3bd79; white-space: nowrap; }
.sop-annotation { position: absolute; z-index: 1; padding: 4px 6px; border: 1px solid #e7b45f; background: #14212add; color: #fff; font: 700 8px/1 Arial, sans-serif; letter-spacing: .09em; white-space: nowrap; pointer-events: none; }
.sop-annotation::after { position: absolute; content: ""; width: 14px; height: 14px; border: 2px solid #e7b45f; border-radius: 50%; }
.sop-annotation-crane { top: 34%; left: 16%; }
.sop-annotation-crane::after { top: -31px; right: -29px; }
.sop-annotation-route { bottom: 17%; left: 49%; }
.sop-annotation-route::after { bottom: 14px; left: -29px; }
.sop-build-cad { position: relative; width: 100%; height: 205px; margin: 9px 0 0; overflow: hidden; border: 1px solid #536770; background: #303435 url('sop-cad-assembly-poster.jpg') center / auto 100% no-repeat; color: #f5f4ec; }
.sop-build-cad .sop-build-label { position: absolute; top: 12px; left: 14px; z-index: 1; color: #e3bd79; }
.sop-cad-animation {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: url('sop-cad-assembly-frames.jpg') 0 0 / 3600% 100% no-repeat;
  animation: sop-cad-assemble 3s steps(36, end) infinite;
  animation-play-state: paused;
}
.sop-build-stage.is-in-view .sop-appear.is-revealed .sop-cad-animation { animation-play-state: running; }
@keyframes sop-cad-assemble { to { background-position-x: 102.857143%; } }
.sop-build-operator { margin-top: 9px; padding: 9px 11px; border: 1px solid #d4c8b5; border-left: 3px solid #c9974e; background: #f4f0e7; }
.sop-build-operator-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sop-build-operator-required { color: #987142; font-family: "Arial Narrow", Arial, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.sop-build-operator p { margin: 5px 0 7px; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.sop-build-operator-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 0; padding: 0; border: 0; }
.sop-build-choice { position: relative; min-width: 0; cursor: pointer; }
.sop-build-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sop-build-choice-ui { display: flex; align-items: center; gap: 7px; min-height: 29px; padding: 5px 7px; border: 1px solid #c8ceca; background: #fffef9; color: #203139; font-size: 10px; line-height: 1.2; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.sop-build-choice-icon { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; border: 1px solid #a9b5b3; border-radius: 50%; color: #6d807e; font-size: 11px; font-weight: 700; line-height: 1; }
.sop-build-choice:hover .sop-build-choice-ui { border-color: #839994; background: #fafdf8; }
.sop-build-choice input:focus-visible + .sop-build-choice-ui { outline: 2px solid #bd8d4b; outline-offset: 2px; }
.sop-build-choice input:checked + .sop-build-choice-ui { border-color: #28695a; background: #e8f2eb; box-shadow: inset 0 0 0 1px #28695a; }
.sop-build-choice input:checked + .sop-build-choice-ui .sop-build-choice-icon { border-color: #28695a; background: #28695a; color: #fff; }
.sop-build-operator-note { display: grid; grid-template-columns: 75px minmax(0,1fr); align-items: center; gap: 7px; margin-top: 7px; }
.sop-build-operator-note input { width: 100%; min-width: 0; height: 25px; padding: 4px 6px; border: 1px solid #d1d5cf; border-radius: 0; outline: none; background: #fffef9; color: #14212a; font: inherit; font-size: 10px; }
.sop-build-operator-note input::placeholder { color: #81908c; }
.sop-build-operator-note input:focus { border-color: #28695a; box-shadow: 0 0 0 1px #28695a; }
.sop-build-page-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 7px; margin-top: 9px; padding-top: 6px; border-top: 1px solid #9caaa9; color: #60747a; }
.sop-build-page-foot strong { color: #0d6b58; }

/* Each section expands the paper; the copy is unmasked as if it is being written in. */
.sop-appear { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .32s cubic-bezier(.2,.65,.2,1), opacity .22s ease; }
.sop-appear-inner { min-height: 0; overflow: hidden; }
.sop-build-stage.is-building .sop-appear:not(.is-revealed) { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.sop-build-stage.is-building .sop-appear.is-revealed > .sop-appear-inner { animation: sop-write-in .32s cubic-bezier(.2,.65,.2,1) both; }
.sop-appear.is-current .sop-build-step, .sop-appear.is-current .sop-build-context-row, .sop-appear.is-current .sop-build-detail { animation: sop-new-line .8s ease-out both; }
@keyframes sop-write-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sop-new-line { from { background: #f3e3c1; } to { background: transparent; } }

@media (min-width: 1000px) and (max-width: 1399px) {
  .understand { padding-top: 90px; padding-bottom: 90px; }
  .understand-intro { margin-bottom: 32px; }
  .sop-build-stage, .sop-build-page, .sop-build-controls { width: 100%; }
  .sop-build-operator-slot { grid-column: 1; }
  .sop-build-media-slot { grid-column: 2; }
  .sop-build-cad { height: 195px; }
  .sop-build-stock-evidence figure { height: 195px; }
}

@media (min-width: 1400px) {
  .understand {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: clamp(42px, 3.5vw, 72px);
    padding-top: 90px;
    padding-bottom: 90px;
  }
  .understand-intro {
    display: block;
    min-width: 0;
    margin: 0;
    padding-top: 22px;
  }
  .understand h2 { font-size: clamp(60px, 5.2vw, 106px); }
  .understand-intro .lead {
    max-width: 540px;
    margin: 38px 0 0;
    font-size: clamp(20px, 1.55vw, 28px);
  }
  .sop-build-stage, .sop-build-page { width: 100%; margin: 0; }
  .sop-build-controls { width: 100%; margin: 14px 0 0; }
}

@media (min-width: 1700px) {
  .sop-build-operator-slot { grid-column: 1; }
  .sop-build-media-slot { grid-column: 2; }
  .sop-build-cad { height: 195px; }
  .sop-build-stock-evidence figure { height: 195px; }
}

@media (max-width: 700px) {
  .sop-build-page { display: block; }
  .sop-build-sequence { margin-bottom: 10px; }
  .sop-build-cad { height: 190px; }
}
@media (max-width: 620px) {
  .understand h2 { font-size: clamp(48px, 11.2vw, 64px); }
  .understand-intro { padding-top: 28px; margin-bottom: 34px; }
  .sop-build-page { padding: 13px 13px 12px; }
  .sop-build-page-head { font-size: 8px; }
  .sop-build-title h3 { font-size: 28px; }
  .sop-build-context-row, .sop-build-detail { grid-template-columns: 1fr; gap: 5px; }
  .sop-build-context-row { padding: 8px 0; }
  .sop-build-evidence { grid-template-columns: 1fr; }
  .sop-build-evidence figure { height: 176px; }
  .sop-build-stock-evidence .sop-build-video { height: 245px; }
  .sop-build-cad { height: 190px; }
  .sop-build-operator { padding: 11px; }
  .sop-build-operator-choices { grid-template-columns: 1fr; }
  .sop-build-operator-note { grid-template-columns: 1fr; gap: 5px; }
  .sop-build-control { width: 48px; height: 48px; font-size: 28px; }
  .sop-impact-trigger { min-height: 48px; padding: 0 10px; font-size: 9px; }
}
@media (max-width: 370px) {
  .sop-build-icon-list > span { white-space: normal; }
  .sop-build-page-head { letter-spacing: .07em; }
}
@media (prefers-reduced-motion: reduce) {
  /* The assembly sequence is the reference itself, so keep it moving while visible. */
  .sop-cad-animation { animation: none; background-position-x: 100%; }
  .sop-build-stage.is-in-view .sop-appear.is-revealed .sop-cad-animation { animation: sop-cad-assemble 3s steps(36, end) infinite !important; background-position-x: 0; }
  .sop-build-page.is-entering-next, .sop-build-page.is-entering-prev { animation: none; }
  .sop-build-control { transition: none; }
  .sop-build-status.is-drafting::before, .sop-build-status.is-drafting::after, .sop-build-status.is-drafting .sop-build-status-text { animation: none; }
  .sop-appear, .sop-build-progress span { transition: none; }
  .sop-build-stage.is-building .sop-appear.is-revealed > .sop-appear-inner, .sop-appear.is-current .sop-build-step, .sop-appear.is-current .sop-build-context-row, .sop-appear.is-current .sop-build-detail { animation: none; }
}