/* ============================================================
   SERVICES PAGE — page stylesheet
   Only layout / positioning rules specific to services.html.
   Reuses everything from page.css and the component CSS files
   (cards, menu, captions, buttons, machine-header, footer).
   ============================================================ */

/* ---- top section: menu + machine header --------------------
   Uses the same .sc-card .sc-card--solid .section wrapper as the
   machine pages so the menu inherits the identical layout chain
   (1680px max-width, .section__inner 150px padding, etc.) and
   renders at the exact same horizontal position.

   We strip the card's visible chrome (border / background /
   shadow / corner markers) since this page doesn't want a card
   outline around the top section.
   ------------------------------------------------------------ */
.section--servicespage {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.section--servicespage::before,
.section--servicespage::after {
  display: none !important;
}

/* keep top padding at 0 (matching the machine pages) so the menu
   sits at the exact same vertical position. Bottom padding gives
   space before the footer. */
.section--servicespage .section__inner {
  padding-top: 0;
  padding-bottom: 80px;
}

/* machine header sits below the menu, aligned to the menu's logo.
   The menu has 14px internal padding, so the header gets the same
   14px horizontal offset for perfect left-edge alignment. */
.servicespage__header {
  margin-top: 60px;
  padding-left: 14px;
  padding-right: 14px;
  max-width: 1400px; /* same cap as the menu */
  width: 100%;
}
@media (max-width: 1100px) {
  .servicespage__header {
    margin-top: 40px;
  }
}
@media (max-width: 720px) {
  .servicespage__header {
    margin-top: 32px;
  }
}

/* ============================================================
   SERVICES — capabilities card
   Solid section (.sc-card--solid) holding a cleanroom photo on the
   left and two capability groups on the right. Reuses the caption
   component (.sc-heading--display) for the orange headings, and
   inherits the "+" corner markers (.section::before/::after) and
   the side rails from the shared system.
   ============================================================ */
.section--servicesinfo .section__inner,
.section--servicesrd .section__inner,
.section--servicescta .section__inner {
  padding: 72px 60px;
}

/* CTA section ("Tailored solutions…") — reuses the .sc-cta component
   with grey body copy; the button is the component's standard dark
   accent button (.sc-btn--accent). */
.section--servicescta .sc-cta {
  --sc-cta-desc-color: var(--sc-gray-2); /* grey body copy, matching the mockup */
}
/* CTA layout: keep the first line at the caption top, and group the second
   line with the button, pushing that group down so it sits just above the
   button. Desktop two-column layout only; stacked layout keeps even spacing. */
.section--servicescta .sc-cta__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
@media (min-width: 1101px) {
  .section--servicescta .sc-cta__body {
    gap: 0;
  }
  .section--servicescta .sc-cta__foot {
    margin-top: 56px;
  }
}
.servicesinfo__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 72px;
  width: 100%;
}

/* LEFT — photo */
.servicesinfo__media {
  /* dashed picture frame — same treatment as index.html .services__frame:
     8px padding gives the photo breathing room inside the dashed rectangle.
     Square corners (no border-radius). */
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, var(--sc-gray) 0 16px, transparent 16px 26px),
    linear-gradient(90deg, var(--sc-gray) 0 16px, transparent 16px 26px),
    linear-gradient(0deg, var(--sc-gray) 0 16px, transparent 16px 26px),
    linear-gradient(0deg, var(--sc-gray) 0 16px, transparent 16px 26px);
  background-size:
    26px 1px,
    26px 1px,
    1px 26px,
    1px 26px;
  background-position:
    left top,
    left bottom,
    left top,
    right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}
.servicesinfo__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* RIGHT — two capability groups */
.servicesinfo__content {
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.servicesinfo__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Capability-group headings ("POC coatings", "Pilot production").
   These are NOT .sc-heading — they mirror the metrics of the
   "Programmable Layer Sequencing" sub-heading (Inter 48 / 900, tight
   leading) but use the accent colour, exposed as its own variable. */
.servicesinfo__heading {
  --sc-servicesinfo-accent: var(--sc-accent); /* new heading accent var */
  margin: 0;
  font-family: var(--sc-font-sans);
  font-size: 48px;
  font-weight: var(--sc-weight-black);
  line-height: 1;
  letter-spacing: normal;
  color: var(--sc-servicesinfo-accent);
  -webkit-font-smoothing: antialiased;
}
.servicesinfo__desc {
  margin: 0;
  font-family: var(--sc-font-sans);
  font-size: var(--sc-text-md);
  font-weight: var(--sc-weight-regular);
  line-height: 1.45;
  color: var(--sc-gray-2);
  max-width: 520px;
}

/* figure = framed photo + credit line beneath it (R&D section) */
.servicesinfo__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.servicesinfo__credit {
  margin: 0;
  align-self: flex-end; /* sit under the right portion of the photo */
  text-align: left; /* the two name lines align to each other */
  font-family: var(--sc-font-sans);
  font-size: var(--sc-text-md);
  font-weight: var(--sc-weight-regular);
  line-height: 1.45;
  color: var(--sc-gray-2);
}

@media (max-width: 1100px) {
  .section--servicesinfo .section__inner,
  .section--servicesrd .section__inner,
  .section--servicescta .section__inner {
    padding: 56px 40px;
  }
  .servicesinfo__grid {
    gap: 48px;
  }
  .servicesinfo__content {
    gap: 36px;
  }
  .servicesinfo__heading {
    font-size: 40px;
  }
}
@media (max-width: 720px) {
  .section--servicesinfo .section__inner,
  .section--servicesrd .section__inner,
  .section--servicescta .section__inner {
    padding: 40px 22px;
  }
  .servicesinfo__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .servicesinfo__content {
    gap: 28px;
  }
  .servicesinfo__heading {
    font-size: 32px;
  }
  .servicesinfo__desc {
    font-size: var(--sc-text-base);
    max-width: none;
  }
  .servicesinfo__credit {
    align-self: flex-start;
    font-size: var(--sc-text-base);
  }
}