/* Generated by tools/build.py from the client's site-robotics-solution.css, every rule scoped under .sr-page. Do not edit. */
/* ==========================================================================
   SITE Robotics solution page components
   Loaded after the unchanged homepage stylesheet (site-robotics-home.css),
   which supplies tokens, typography, buttons, header, footer, hero,
   bands, centred section introductions and the yellow closing band.
   Everything here is prefixed "sr-" and uses the homepage tokens.
   ========================================================================== */

.sr-page .sr-dark .sr-section-head p { color: #CFCFD3; }

/* --------------------------------------------------------------------------
   1. Hero: homepage split hero. The page name is the main heading (small,
   above), the headline keeps the homepage display size. This image has the
   engineers near its left edge, so the edge fade is narrower.
   -------------------------------------------------------------------------- */

.sr-page .sr-hero .sr-hero__title {
  font-size: var(--sr-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sr-yellow);
}
.sr-page .sr-hero__headline {
  font-size: clamp(2.125rem, 1.35rem + 2.3vw, 3.25rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--sr-on-dark);
  text-wrap: balance;
}
.sr-page .sr-hero__headline .sr-hero__line { display: block; }
.sr-page .sr-hero__headline .sr-hero__line--accent { color: var(--sr-yellow); }

@media (min-width: 1180px) {
  .sr-page .sr-hero--solution .sr-hero__media::before {
    background:
      linear-gradient(to right, var(--sr-ink) 0%, rgba(11, 11, 12, 0.6) 4%, rgba(11, 11, 12, 0) 11%),
      linear-gradient(to bottom, var(--sr-ink) 0%, rgba(11, 11, 12, 0) 6%, rgba(11, 11, 12, 0) 94%, var(--sr-ink) 100%);
  }
}

/* --------------------------------------------------------------------------
   3. Capability panels
   -------------------------------------------------------------------------- */

.sr-page .sr-capnav { margin-top: clamp(28px, 3vw, 40px); }
.sr-page .sr-capnav ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.sr-page .sr-capnav a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  height: 100%;
  padding: 14px 16px;
  font-size: var(--sr-small);
  font-weight: 500;
  line-height: 1.35;
  color: var(--sr-on-dark);
  text-decoration: none;
  border: 1px solid var(--sr-line-dark);
  transition: border-color 0.15s ease;
}
.sr-page .sr-capnav a:hover { border-color: var(--sr-yellow); }
.sr-page .sr-capnav span {
  flex: none;
  font-size: var(--sr-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--sr-yellow);
  font-variant-numeric: tabular-nums;
}

.sr-page .sr-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 4vw, 64px) clamp(24px, 3vw, 48px);
  margin-top: clamp(32px, 4vw, 48px);
}
.sr-page .sr-panel { display: grid; align-content: start; min-width: 0; }

.sr-page .sr-panel__media {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  overflow: hidden;
  background: var(--sr-ink);
}
.sr-page .sr-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* never stretched */
  object-position: 50% 50%;
}
/* Per-image framing */
.sr-page .sr-panel__media .sr-panel__img--asset { object-position: 50% 50%; }      /* native 4:3, no crop */
.sr-page .sr-panel__media .sr-panel__img--remote { object-position: 50% 64%; }     /* square: keeps monitors and operator */
.sr-page .sr-panel__media .sr-panel__img--inventory { object-fit: contain; }        /* 3:2: cropping would cut its panels */
.sr-page .sr-panel__media .sr-panel__img--operator { object-position: 50% 75%; }   /* square: keeps vehicle, route and markers */

.sr-page .sr-panel__num {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  padding: 5px 10px;
  font-size: var(--sr-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--sr-ink);
  background: var(--sr-yellow);
  font-variant-numeric: tabular-nums;
}
.sr-page .sr-panel__caption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  max-width: calc(100% - 20px);
  padding: 4px 8px;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: #E4E4E7;
  background: rgba(11, 11, 12, 0.88);
}

.sr-page .sr-panel__body { display: grid; align-content: start; gap: 12px; padding-top: 24px; }
.sr-page .sr-panel__body h3 {
  font-size: clamp(1.3125rem, 1.15rem + 0.5vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.sr-page .sr-panel__body > p { color: var(--sr-on-dark-muted); max-width: 36rem; }

/* Benefits: separated from the explanation by a yellow rule */
.sr-page .sr-benefits {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--sr-yellow);
}
.sr-page .sr-benefits__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sr-on-dark-muted);
}
.sr-page .sr-benefits ul { display: grid; gap: 8px; }
.sr-page .sr-benefits li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-weight: 500;
  color: var(--sr-on-dark);
}
.sr-page .sr-benefits li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--sr-yellow);
  transform: translateY(-1px);
}

/* Review placeholder for a missing image: same frame, clearly labelled */
.sr-page .sr-slot {
  display: grid;
  place-items: center;
  background: #1C1C1F;
  border: 1px dashed rgba(255, 255, 255, 0.32);
}
.sr-page .sr-slot__inner {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 26rem;
  padding: 24px;
  text-align: center;
}
.sr-page .sr-slot__inner .sr-icon { width: 32px; height: 32px; color: var(--sr-on-dark-muted); }
.sr-page .sr-slot__title { font-weight: 600; color: var(--sr-on-dark); }
.sr-page .sr-slot__note { font-size: var(--sr-small); color: var(--sr-on-dark-muted); }

.sr-page .sr-caps__qualifier {
  margin-top: clamp(36px, 4vw, 56px);
  font-size: var(--sr-small);
  color: var(--sr-on-dark-muted);
  text-align: center;
}

@media (max-width: 1023px) {
  .sr-page .sr-capnav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .sr-page .sr-panels { grid-template-columns: minmax(0, 1fr); }
  .sr-page .sr-panel { max-width: 640px; width: 100%; margin-inline: auto; }
}
@media (max-width: 559px) {
  .sr-page .sr-capnav ul { grid-template-columns: minmax(0, 1fr); }
  .sr-page .sr-slot__note { display: none; }
}

/* --------------------------------------------------------------------------
   4. Mission diagram (editable SVG) and steps
   -------------------------------------------------------------------------- */

.sr-page .sr-missions__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(32px, 4vw, 48px);
}
.sr-page .sr-mission-diagram {
  background: var(--sr-ink-soft);
  padding: clamp(12px, 2vw, 20px);
}
.sr-page .sr-mission-diagram svg { display: block; width: 100%; height: auto; }
.sr-page .sr-mission-diagram .d-ground { fill: var(--sr-ink-soft); }
.sr-page .sr-mission-diagram .d-asset { fill: #2C2C30; stroke: #4A4A50; stroke-width: 1.5; }
.sr-page .sr-mission-diagram .d-route { fill: none; stroke: var(--sr-yellow); stroke-width: 3; stroke-dasharray: 10 8; }
.sr-page .sr-mission-diagram .d-chevron { fill: none; stroke: var(--sr-yellow); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sr-page .sr-mission-diagram .d-sight { fill: none; stroke: var(--sr-yellow); stroke-opacity: 0.55; stroke-width: 1.5; stroke-dasharray: 3 4; }
.sr-page .sr-mission-diagram .d-point { fill: var(--sr-ink-soft); stroke: var(--sr-yellow); stroke-width: 3; }
.sr-page .sr-mission-diagram .d-point--finding { fill: var(--sr-yellow); }
.sr-page .sr-mission-diagram .d-ring { fill: none; stroke: var(--sr-yellow); stroke-width: 1.5; stroke-opacity: 0.7; }
.sr-page .sr-mission-diagram .d-finding { fill: rgba(244, 215, 44, 0.1); stroke: var(--sr-yellow); stroke-width: 2; stroke-dasharray: 6 4; }
.sr-page .sr-mission-diagram .d-flag { fill: none; stroke: var(--sr-yellow); stroke-width: 2.5; stroke-linejoin: round; }
.sr-page .sr-mission-diagram .d-badge circle { fill: var(--sr-yellow); }
.sr-page .sr-mission-diagram .d-badge text {
  fill: var(--sr-ink);
  font-family: var(--sr-font);
  font-size: 16px;
  font-weight: 700;
  text-anchor: middle;
}

.sr-page .sr-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 14px 4px 2px;
  font-size: var(--sr-small);
  color: var(--sr-on-dark-muted);
}
.sr-page .sr-legend__note { width: 100%; font-size: 0.75rem; letter-spacing: 0.02em; }
.sr-page .sr-legend__item { display: inline-flex; align-items: center; gap: 10px; }
.sr-page .sr-legend__route { width: 28px; border-top: 3px dashed var(--sr-yellow); }
.sr-page .sr-legend__point { width: 14px; height: 14px; border: 3px solid var(--sr-yellow); border-radius: 50%; }
.sr-page .sr-legend__finding { width: 16px; height: 16px; border: 2px dashed var(--sr-yellow); background: rgba(244, 215, 44, 0.12); }

.sr-page .sr-mission-steps { display: grid; border-top: 1px solid var(--sr-ink); }
.sr-page .sr-mission-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding-block: 18px;
  border-bottom: 1px solid var(--sr-line);
}
.sr-page .sr-mission-steps__num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--sr-ink);
  background: var(--sr-yellow);
  border-radius: 50%;
}
.sr-page .sr-mission-steps h3 { font-size: var(--sr-h3); line-height: 1.35; margin-bottom: 4px; }
.sr-page .sr-mission-steps p { color: var(--sr-muted); }

@media (max-width: 899px) {
  .sr-page .sr-missions__layout { grid-template-columns: minmax(0, 1fr); }
  .sr-page .sr-mission-diagram { max-width: 640px; width: 100%; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   5. Site context
   -------------------------------------------------------------------------- */

.sr-page .sr-context__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(32px, 4vw, 48px);
}
.sr-page .sr-context__media { display: grid; gap: 10px; justify-self: center; width: 100%; max-width: 560px; }
.sr-page .sr-context__media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }

.sr-page .sr-context__side { display: grid; gap: 28px; }
.sr-page .sr-outcomes { display: grid; border-top: 1px solid var(--sr-line-dark); }
.sr-page .sr-outcomes li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 20px;
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--sr-on-dark);
  border-bottom: 1px solid var(--sr-line-dark);
}
.sr-page .sr-outcomes li::before {
  content: "";
  flex: none;
  width: 24px;
  height: 3px;
  background: var(--sr-yellow);
  transform: translateY(-0.3em);
}
.sr-page .sr-context__control {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 500;
  color: var(--sr-on-dark);
}
.sr-page .sr-context__control .sr-icon { width: 22px; height: 22px; flex: none; color: var(--sr-yellow); }

@media (max-width: 899px) {
  .sr-page .sr-context__layout { grid-template-columns: minmax(0, 1fr); }
}

/* Reduced motion: matches the homepage rule for this page's components */
@media (prefers-reduced-motion: reduce) {
  .sr-page .sr-capnav a { transition: none; }
}

/* --------------------------------------------------------------------------
   2. Operational challenge: key value cards (homepage white-card style)
   -------------------------------------------------------------------------- */
.sr-page .sr-values .sr-value { border-top: 3px solid var(--sr-yellow); gap: 10px; }
.sr-page .sr-values .sr-value .sr-value__word {
  font-size: clamp(2.5rem, 1.9rem + 1.8vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sr-ink);
}
.sr-page .sr-values .sr-value h3 { font-size: 1.1875rem; line-height: 1.3; margin-top: 6px; }