/*
 * formfast — Services page
 */

/* Same stacked heading↔subtitle gap as About / Work when subhero is column (mobile). */
.services-page {
  --about-subhero-stacked-gap: var(--spacing-2xl);
}

.services-page .about-services {
  --about-services-left-gap: var(--spacing-sm);
  --about-services-heading-max-width: 334px;
  --about-services-item-padding-y: var(--spacing-md);
  --about-services-item-min-height: 90px;
  --about-services-item-gap: var(--spacing-lg);
  --about-services-name-family: var(--type-h6-family);
  --about-services-name-size: var(--type-h6-size);
  --about-services-name-weight: var(--type-h5g-weight);
  --about-services-name-letter-spacing: var(--type-h6-letter-spacing);
  --about-services-num-size: 28px;
}

/* Smaller heading scale than About (h5g); keep light section names black. */
.services-page .about-services__name {
  line-height: var(--type-h6-line-height);
}

.services-page .about-services--light .about-services__name {
  color: var(--color-black);
}

/* Hidden on desktop (copy lives in .subhero__subtitle) and on mobile (stacked in hero); shown 768–1439 via responsive.css */
.services-subtitle {
  display: none;
}

/* Intro copy block above banner (Figma 331:2856). */
.services-intro {
  display: flex;
  align-items: center;
  padding: var(--section-padding-y) var(--pad-section-x);
  background-color: var(--color-black);
}

.services-intro__inner {
  width: 100%;
  max-width: 545px;
}

.services-intro__copy {
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-letter-spacing);
  color: var(--color-white);
}

/* ======================================================================
   Discipline section overrides — match Figma node 236:6330 exactly.
   Base styles live in about.css (.about-services / .about-services__*).
   Only override values that differ from the Figma spec.
   ====================================================================== */

/* ======================================================================
   Services hero — "Form to / function"
   Desktop (≥1200): Figma node 285:10561 — hero h 571px; arrow ml 300 / mt 45.25
   Tablet: stagger in responsive.css (768–1199)
   Mobile: stagger in responsive.css (285:10869)
   ====================================================================== */
@media (min-width: 1200px) {
  .services-page .subhero,
  .subhero--services {
    height: 571px;
  }

  .services-page .subhero__line-1,
  .subhero--services .subhero__line-1 {
    margin-top: 0;
    white-space: nowrap;
  }

  .services-page .subhero__arrow,
  .subhero--services .subhero__arrow {
    margin-left: 300px;
    margin-top: 45px;
  }

  .services-page .subhero__line-2,
  .subhero--services .subhero__line-2 {
    margin-left: 150px;
    margin-top: 80px;
    width: 373px;
    text-align: right;
  }
}

/* ======================================================================
   Services banner — full-width image, half-black / half-white background
   Same gradient + full-width media pattern as .about-banner (about.css)
   ====================================================================== */
.svc-banner {
  background: linear-gradient(to bottom, var(--color-black) 50%, var(--color-white) 50%);
  padding-top: 0px;
  padding-bottom: 0;
  display: block;
}

.svc-banner .about-banner__media {
  width: 100%;
}

/* ======================================================================
   Selected work pair — two case-study cards between white and dark sections
   ====================================================================== */
.svc-work-pair {
  padding: 0 var(--pad-section-x);
  /* Black starts at exactly the vertical midpoint of the 1:1 thumbnail images.
     Image height = column width = (content-width − gutter) / 2.
     Half that = (100vw − 2×padding − gutter) / 4. */
  background: linear-gradient(
    to bottom,
    var(--color-white) calc((100vw - 2 * var(--pad-section-x) - var(--layout-grid-gutter)) / 4),
    var(--color-black) calc((100vw - 2 * var(--pad-section-x) - var(--layout-grid-gutter)) / 4)
  );
}

/* ======================================================================
   Reveal animation — same system as case-study.css
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity   0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
      transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  .reveal--scale {
    transform: translateY(16px) scale(0.97);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .reveal--d1 { --reveal-delay:  90ms; }
  .reveal--d2 { --reveal-delay: 180ms; }
}

/* ======================================================================
   Responsive — tablet (768px – 1199px)
   ====================================================================== */
@media (max-width: 1199px) {
}

/* ======================================================================
   Responsive — mobile (≤ 767px)  Figma node 285:10869
   ====================================================================== */
@media (max-width: 767px) {
  .svc-work-pair {
    padding: 0 var(--spacing-xl);
  }

  /* Same 16:9 banner ratio as About. */
  .services-page .svc-banner .about-banner__media {
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: none;
  }

}