#trs-dispatch-network {
  color-scheme: dark;
  --surface: #101e34;
  --edge: #32496a;
  --text: #f5f8ff;
  --secondary: #b9c9e0;
  --blue: #a7c7ff;
  --green: #a8edcc;
  font: 400 14px/1.45 system-ui, sans-serif;
}
#trs-dispatch-network * { box-sizing: border-box; }
#trs-dispatch-network :is(h2, h3, p) { margin: 0; }
#trs-dispatch-network .placement {
  margin: 0 auto;
  max-width: 730px;
  padding: clamp(8px, 2vw, 16px);
}
#trs-dispatch-network .preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 4vw, 32px);
  padding: clamp(15px, 4vw, 28px);
  border: 1px solid var(--edge);
  border-radius: 18px;
  background: radial-gradient(ellipse at 5% 0%, #162d4f 0%, #0b172b 68%);
  color: var(--text);
}
#trs-dispatch-network .intro {
  display: grid;
  gap: 10px;
}
#trs-dispatch-network .eyebrow {
  color: var(--blue);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
#trs-dispatch-network h2 {
  max-width: 17ch;
  font-size: clamp(27px, 4.5vw, 36px);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -.028em;
}
#trs-dispatch-network .intro p:not(.eyebrow) { color: var(--secondary); }
#trs-dispatch-network .sample {
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 14px 30px #030b1d66;
}
#trs-dispatch-network .sample-header,
#trs-dispatch-network .sample-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 5px 10px;
  padding: 9px 12px;
  font-size: 12px;
}
#trs-dispatch-network .sample-header { color: var(--secondary); }
#trs-dispatch-network .sample-footer {
  padding-block: 11px;
  color: var(--green);
}
#trs-dispatch-network .sample-footer strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#trs-dispatch-network .sample-footer svg { width: 14px; height: 14px; }
#trs-dispatch-network .example {
  border-radius: 4px;
  padding: 2px 6px;
  background: #203855;
  color: #d2e3ff;
  font-size: 11px;
  font-weight: 700;
}
#trs-dispatch-network .sample-body {
  position: relative;
  isolation: isolate;
  min-height: 186px;
  overflow: hidden;
  border-block: 1px solid var(--edge);
  background: #132643;
}
#trs-dispatch-network .route {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
}
#trs-dispatch-network .route-label {
  position: absolute;
  transform: translateX(-50%);
  color: #e4edfc;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
#trs-dispatch-network .route-label.truck { left: 20%; top: 73%; }
#trs-dispatch-network .route-label.provider { left: 82%; top: 15%; }
#trs-dispatch-network .eta {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 7px 11px 8px;
  border: 1px solid #496389;
  border-radius: 9px;
  background: #101e34;
}
#trs-dispatch-network .eta p {
  color: var(--secondary);
  font-size: 11px;
  font-weight: 650;
}
#trs-dispatch-network .eta strong {
  display: block;
  font-size: 32px;
  line-height: 1.14;
  letter-spacing: -.036em;
}
#trs-dispatch-network .eta small {
  font-size: 13px;
  letter-spacing: 0;
}
#trs-dispatch-network .promise {
  container-type: inline-size;
  margin-top: 3px;
  padding: 10px clamp(5px, calc(2vw - 2px), 12px);
  border-left: 2px solid #70c6a6;
  border-radius: 0 7px 7px 0;
  background: #17343b;
}
#trs-dispatch-network .promise-points {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px clamp(4px, 1.8cqi, 8px);
  color: var(--green);
  font-size: .625rem;
  font-size: clamp(.625rem, 4.4cqi, .875rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}
#trs-dispatch-network .promise-points span { white-space: nowrap; }
#trs-dispatch-network .promise-points span + span {
  padding-inline-start: clamp(4px, 1.8cqi, 8px);
  border-inline-start: 1px solid #70c6a666;
}
@container (max-width: 223px) {
  #trs-dispatch-network .promise-points { column-gap: 2px; }
  #trs-dispatch-network .promise-points span + span { padding-inline-start: 2px; }
}
#trs-dispatch-network .promise p {
  margin-top: 3px;
  font-size: 13px;
}
#trs-dispatch-network .service-note { font-size: 12px; }
@media (max-width: 660px) {
  #trs-dispatch-network .preview { grid-template-columns: minmax(0, 1fr); }
  #trs-dispatch-network h2 { max-width: none; }
}

/* Keep the existing hero photography above the new content. */
.hero > :is(.hero-image, .hero-shade) {
  height: clamp(854px, calc(854px + (100vw - 1120px) * .12), 892px);
}
.sd_hero > :is(.sd_heroImage, .sd_heroShade) {
  height: var(--trs-network-photo-height, 800px);
}
.commercial-tire-service .sd_hero {
  --trs-network-photo-height: clamp(800px, calc(800px + (100vw - 1120px) * .05), 816px);
}
.commercial-roadside-service .sd_hero {
  --trs-network-photo-height: clamp(808px, calc(808px + (100vw - 1000px) * .08), 842px);
}
.bus-rv-roadside-service .sd_hero {
  --trs-network-photo-height: clamp(825px, calc(825px + (100vw - 1000px) * .10), 867px);
}

#trs-dispatch-network { grid-column: 1 / -1; }

@media (min-width: 791px) and (max-width: 1000px) {
  .hero > :is(.hero-image, .hero-shade) { height: 873px; }
}
@media (min-width: 701px) and (max-width: 790px) {
  .hero > :is(.hero-image, .hero-shade) {
    height: clamp(974px, calc(999px - (100vw - 701px) * .28), 999px);
  }
  .sd_hero > :is(.sd_heroImage, .sd_heroShade) { height: var(--trs-network-tablet-photo-height, 811px); }
  .commercial-roadside-service .sd_hero { --trs-network-tablet-photo-height: 837px; }
  .bus-rv-roadside-service .sd_hero { --trs-network-tablet-photo-height: 852px; }
}
@media (max-width: 700px) {
  .hero > :is(.hero-image, .hero-shade) { height: clamp(596px, calc(660px - 12vw), 623px); }
  .sd_hero > .sd_heroImage { height: 450px; }
  .sd_hero > .sd_heroShade { height: 850px; }
  .bus-rv-roadside-service .sd_hero > .sd_heroShade { height: 915px; }
  .sd_heroInner > .hero-features {
    width: calc(100% + 22px);
    align-self: center;
  }
}
@media (max-width: 360px) {
  .sd_heroInner > .hero-features { width: calc(100% + 10px); }
}