/* Scoped shipment animation component. Shared site typography stays unchanged. */
.service-flow{padding:52px 0 55px;background:#f3f5f6;color:#14181d;scroll-margin-top:105px}
.flow-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;margin-bottom:28px}
.flow-heading .flow-eyebrow{margin:0 0 12px;color:#9d4905;font:500 11px/1.5 var(--mono,'IBM Plex Mono',monospace);letter-spacing:.09em;text-transform:uppercase}
.flow-heading h2{margin:0;max-width:640px;font:600 clamp(29px,3vw,38px)/1.16 var(--head,'Archivo',Arial,sans-serif);letter-spacing:-.035em}
.flow-heading>p{max-width:350px;margin:0;color:#52616d;font:400 14px/1.7 var(--body,'Inter',Arial,sans-serif)}
.flow-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start;gap:34px}
.flow-visual{min-width:0;background:#fbfcfd;border:1px solid #d4dde4;overflow:hidden}
.flow-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:67px;padding:16px 20px;border-bottom:1px solid #dce3e8}
.flow-toolbar>p{display:flex;align-items:baseline;gap:12px;min-width:0;margin:0;color:#263744;font:500 14px/1.45 var(--body,'Inter',Arial,sans-serif)}
.flow-toolbar [data-flow-stage-number]{flex-shrink:0;color:#9a490b;font:500 12px/1.5 var(--mono,'IBM Plex Mono',monospace)}
.flow-toolbar strong{font-weight:600;overflow-wrap:anywhere}
.flow-playback{display:flex;flex-shrink:0;gap:5px}
.flow-playback button{min-height:36px;padding:7px 9px;border:1px solid #c6d1d9;border-radius:2px;background:#fff;color:#344955;font:500 14px/1.4 var(--body,'Inter',Arial,sans-serif)}
.flow-playback button:hover{border-color:#9d4905;color:#8e4208;background:#fff5eb}
.flow-drawing{position:relative;width:100%;overflow:hidden;isolation:isolate}
.flow-drawing>svg{display:block;width:100%;height:auto;aspect-ratio:720/388;overflow:hidden}
.flow-drawing svg text{font-family:var(--body,'Inter',Arial,sans-serif)}
.flow-progress{height:3px;background:#dce4e9;overflow:hidden}
.flow-progress>span{display:block;width:100%;height:100%;background:#f07d1a;transform:scaleX(0);transform-origin:left center}
.flow-visual .flow-instruction{margin:0;padding:14px 19px;color:#53616d;font:400 14px/1.5 var(--body,'Inter',Arial,sans-serif)}
.flow-steps{list-style:none;padding:0;margin:0;min-width:0;border-top:1px solid #cbd6dd}
.flow-steps>li{list-style:none;margin:0;padding:0;border-bottom:1px solid #cbd6dd}
.flow-step{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;text-align:left;width:100%;padding:17px 15px 18px 12px;color:#263744;border:0;border-left:3px solid transparent;background:transparent;transition:background .15s,border-color .15s}
.flow-step:disabled{cursor:default;opacity:1}
.flow-step[aria-pressed=true]{border-left-color:#f07d1a;background:#fff}
.flow-step:not(:disabled):hover{background:#fff8f0}
.flow-step-number{padding-top:2px;color:#9a490b;font:500 12px/1.5 var(--mono,'IBM Plex Mono',monospace)}
.flow-step-copy{min-width:0}
.flow-step-copy>strong{display:block;font:600 18px/1.3 var(--head,'Archivo',Arial,sans-serif);letter-spacing:-.015em}
.flow-step .flow-step-description{display:block;margin-top:8px;color:#52616d;font:400 14px/1.65 var(--body,'Inter',Arial,sans-serif)}
.service-flow button:focus-visible{outline:2px solid #a44b00;outline-offset:3px;position:relative;z-index:1}
@media(max-width:1100px){.flow-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px}.flow-heading{gap:26px}.flow-heading>p{max-width:300px}.flow-toolbar{padding:14px;flex-wrap:wrap;gap:10px}.flow-playback button{min-height:40px}.flow-step{padding:15px 12px 16px 9px}.flow-step-copy>strong{font-size:17px}}
@media(max-width:900px){.flow-layout{grid-template-columns:1fr;gap:25px}.flow-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}.flow-step{height:100%}.flow-toolbar{flex-wrap:nowrap;min-height:65px;padding:13px 18px}.flow-playback button{min-height:44px;padding:9px 12px}}
@media(max-width:600px){.service-flow{padding:35px 0 37px}.flow-heading{display:block;margin-bottom:23px}.flow-heading h2{font-size:30px}.flow-heading>p{margin-top:14px;max-width:100%}.flow-heading .flow-eyebrow{font-size:10px}.flow-steps{display:block}.flow-layout{gap:22px}.flow-toolbar{align-items:flex-start;flex-wrap:wrap;padding:13px 14px;gap:10px}.flow-toolbar>p{flex:1 1 100%}.flow-playback{margin-left:24px}.flow-step{grid-template-columns:26px minmax(0,1fr);gap:10px;padding:16px 12px 17px 8px}.flow-step-copy>strong{font-size:18px}.flow-visual .flow-instruction{padding:12px 14px}.flow-drawing>svg{width:100%}}
@media(prefers-reduced-motion:reduce){.flow-step{transition:none}}