/* Shared Our Process introduction, including existing native prototype aliases.
   Hide the border paint; retain the existing inset above the phone breakpoint. */
.elementor-element-5c5fd54 { border-left-color:transparent!important; }
/* In the stacked phone introduction, align the paragraph with its heading. */
@media(max-width:760px) {
  .elementor-element-5c5fd54 {
    border-left-width:0!important;
    padding-left:0!important;
  }
}

/* The initial and initialized steps share the same available width. Keep the
   existing zoom inside the right edge rather than extending past the stage. */
.sher-widget-dillon-scroll-process .process-track { width:100%; }
.sher-widget-dillon-scroll-process .process-step { width:100%;min-width:0; }
.sher-widget-dillon-scroll-process .process-step-inner,
.sher-widget-dillon-scroll-process .process-step-media { min-width:0; }
.sher-widget-dillon-scroll-process .process-step-media img { transform-origin:right center; }
/* Use the existing snap geometry from first paint, before JS adds its class. */
@media(max-width:760px),(pointer:coarse),(prefers-reduced-motion:reduce) {
  .sher-widget-dillon-scroll-process .process-mechanic:not(.process-mechanic-snap) { padding-top:6px; }
  .sher-widget-dillon-scroll-process .process-mechanic:not(.process-mechanic-snap) .process-track { height:auto;margin:0 0 30px;padding:4px 0 26px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin; }
  .sher-widget-dillon-scroll-process .process-mechanic:not(.process-mechanic-snap) .process-step { flex:0 0 100%;height:auto;scroll-snap-align:start;opacity:1!important; }
  .sher-widget-dillon-scroll-process .process-mechanic:not(.process-mechanic-snap) .process-step-inner { flex-direction:column;align-items:stretch; }
  .sher-widget-dillon-scroll-process .process-mechanic:not(.process-mechanic-snap) .process-step-media { order:-1;flex:none;width:100%;height:min(56vh,440px); }
  .sher-widget-dillon-scroll-process .process-mechanic:not(.process-mechanic-snap) .process-step-media img { transform:none!important;filter:saturate(1) brightness(1)!important; }
  .sher-widget-dillon-scroll-process .process-mechanic:not(.process-mechanic-snap) .process-step-text { padding:26px 26px 34px; }
  .sher-widget-dillon-scroll-process .process-mechanic:not(.process-mechanic-snap) .process-step-number { font-size:5rem;color:#c43322; }
  .sher-widget-dillon-scroll-process .process-mechanic:not(.process-mechanic-snap) .process-step h3 { margin:18px 0 14px; }
  .sher-widget-dillon-scroll-process .process-mechanic:not(.process-mechanic-snap) .process-progress-wrap { position:static;padding:0; }
}
/* Match the existing snap-stage width before its initializer adds the class. */
@media(pointer:coarse),(prefers-reduced-motion:reduce) {
  .sher-widget-dillon-scroll-process .process-stage { width:min(100% - 96px,1440px);max-width:1280px;margin-inline:auto; }
}
@media(max-width:1024px) and (pointer:coarse),(max-width:1024px) and (prefers-reduced-motion:reduce) {
  .sher-widget-dillon-scroll-process .process-stage { width:min(100% - 56px,1440px); }
}
@media(max-width:760px) {
  .sher-widget-dillon-scroll-process .process-stage { width:calc(100% - 36px);max-width:640px;margin-inline:auto; }
  .sher-widget-dillon-scroll-process .process-mechanic:not(.process-mechanic-snap) .process-track { flex-direction:column;gap:32px;overflow:visible;scroll-snap-type:none;padding:0;margin:0;align-items:stretch; }
  .sher-widget-dillon-scroll-process .process-mechanic:not(.process-mechanic-snap) .process-step { flex:none;scroll-snap-align:none;transform:none!important; }
  .sher-widget-dillon-scroll-process .process-mechanic:not(.process-mechanic-snap) .process-step-text { padding:24px 12px; }
  .sher-widget-dillon-scroll-process .process-mechanic:not(.process-mechanic-snap) .process-step-media { order:0;height:auto;aspect-ratio:4/3;padding:12px!important; }
  .sher-widget-dillon-scroll-process .process-mechanic:not(.process-mechanic-snap) .process-step-media img { border-radius:var(--dillon-component-radius)!important; }
}
@media(min-width:761px) and (max-width:767px) and (pointer:coarse),(min-width:761px) and (max-width:767px) and (prefers-reduced-motion:reduce) {
  .sher-widget-dillon-scroll-process .process-stage { max-width:640px; }
}

/* Shared Our Process phone inset. Keep the frozen widget's text padding,
   4:3 media box, cover crop and snap behavior; no wrapper/text spacing changes.
   Once inset, the image itself (not just its outer clip) needs rounded corners. */
@media(max-width:760px) {
  /* Compact all four phone step numbers, before and after initialization. */
  .sher-widget-dillon-scroll-process .process-step-number {
    font-size:3rem!important;
  }
  :is(body,#dillon-process-spacing#dillon-process-spacing) .sher-widget-dillon-scroll-process .process-mechanic-snap .process-step-media {
    padding:12px!important;
  }
  :is(body,#dillon-process-spacing#dillon-process-spacing) .sher-widget-dillon-scroll-process .process-mechanic-snap .process-step-media > img {
    border-radius:var(--dillon-component-radius)!important;
  }
}