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

.sr-page .sr-dark .sr-section-head p { color: #CFCFD3; }
.sr-page .sr-section-head--center p + p { margin-top: 4px; }

/* 1. Hero: page name as the main heading (small label), large headline.
   The person stands near the image's left edge, so the edge fade is narrow. */
.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--accent { display: block; color: var(--sr-yellow); }
@media (min-width: 1180px) {
  .sr-page .sr-hero--company .sr-hero__media::before {
    background:
      linear-gradient(to right, var(--sr-ink) 0%, rgba(11, 11, 12, 0.55) 3%, rgba(11, 11, 12, 0) 8%),
      linear-gradient(to bottom, var(--sr-ink) 0%, rgba(11, 11, 12, 0) 6%, rgba(11, 11, 12, 0) 94%, var(--sr-ink) 100%);
  }
}

/* 2. Why we exist: image left, three white cards right */
.sr-page .sr-why__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  margin-top: clamp(32px, 4vw, 48px);
}
.sr-page .sr-why__media { display: grid; gap: 10px; }
.sr-page .sr-why__media img { width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: contain; }
.sr-page .sr-why__cards { display: grid; gap: 14px; }
.sr-page .sr-why__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: 16px;
  padding: 20px 22px;
  background: var(--sr-paper);
  border-top: 3px solid var(--sr-yellow);
}
.sr-page .sr-why__card .sr-icon { width: 28px; height: 28px; color: var(--sr-ink); }
.sr-page .sr-why__card h3 { font-size: var(--sr-h3); line-height: 1.3; margin-bottom: 4px; }
.sr-page .sr-why__card p { color: var(--sr-muted); }

/* 3. Our approach: connected steps left, portrait image right */
.sr-page .sr-approach__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(32px, 4vw, 48px);
}
.sr-page .sr-approach__body { display: grid; gap: 28px; }
.sr-page .sr-steps { display: grid; gap: 0; }
.sr-page .sr-steps__item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  padding-bottom: 28px;
}
/* Yellow connector running down from each badge to the next */
.sr-page .sr-steps__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 48px;
  bottom: 4px;
  width: 2px;
  background: var(--sr-yellow);
}
.sr-page .sr-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--sr-yellow);
}
.sr-page .sr-steps__num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--sr-ink);
  background: var(--sr-yellow);
  font-variant-numeric: tabular-nums;
}
.sr-page .sr-steps h3 { font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem); line-height: 1.2; margin: 10px 0 6px; }
.sr-page .sr-steps p { color: var(--sr-muted); max-width: 32rem; }

.sr-page .sr-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 20px 22px;
  background: var(--sr-ink);
  color: #CFCFD3;
}
.sr-page .sr-control .sr-icon { width: 26px; height: 26px; color: var(--sr-yellow); }
.sr-page .sr-control__title { font-size: 1.125rem; font-weight: 600; color: var(--sr-on-dark); margin-bottom: 4px; }

.sr-page .sr-approach__media { display: grid; gap: 10px; justify-self: center; width: 100%; max-width: 460px; }
.sr-page .sr-approach__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;          /* 1145 x 1374 into 4:5 trims only 2% of height */
  object-position: 50% 40%;   /* keeps her face, the tablet screen and the yard */
}
.sr-page .sr-approach__close {
  max-width: 44rem;
  margin: clamp(32px, 4vw, 48px) auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--sr-line);
  font-size: var(--sr-lead);
  font-weight: 500;
  color: var(--sr-ink);
  text-align: center;
  text-wrap: balance;
}

/* 4. Our ambition: three question cards */
.sr-page .sr-questions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(32px, 4vw, 48px);
}
.sr-page .sr-question {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 26px 24px 28px;
  border: 1px solid var(--sr-line-dark);
  border-top: 3px solid var(--sr-yellow);
}
.sr-page .sr-question__num {
  justify-self: start;
  padding: 4px 10px;
  font-size: var(--sr-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sr-ink);
  background: var(--sr-yellow);
  font-variant-numeric: tabular-nums;
}
.sr-page .sr-question h3 { font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem); line-height: 1.2; }
.sr-page .sr-question p { color: #CFCFD3; }

/* Tablet: image above, the three cards in one even row beneath it */
@media (max-width: 1179px) {
  .sr-page .sr-why__layout { grid-template-columns: minmax(0, 1fr); }
  .sr-page .sr-why__media { max-width: 760px; width: 100%; margin-inline: auto; }
  .sr-page .sr-why__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sr-page .sr-why__card { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 899px) {
  .sr-page .sr-approach__layout { grid-template-columns: minmax(0, 1fr); }
  .sr-page .sr-approach__media { order: -1; max-width: 360px; }
  .sr-page .sr-questions { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
}
@media (max-width: 899px) {
  .sr-page .sr-why__cards { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
  .sr-page .sr-why__card { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
}

/* Keep the longer hero paragraph on the black ground, clear of the image */
@media (min-width: 1180px) {
  .sr-page .sr-hero--company .sr-hero__copy { max-width: min(33rem, calc(100vw - var(--sr-hero-img-w) - 2 * var(--sr-gutter))); }
}