/* Skills page — editorial, image-led capability sections.
   Inspired by the spacious project presentation style of Rich McNabb's UX portfolio.
   No card radius, borders or shadows. */

body.homepage-v4 .capabilities .cap-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(88px, 9vw, 144px) !important;
  margin-top: clamp(56px, 7vw, 96px) !important;
}

body.homepage-v4 .capabilities .cap-enhanced {
  width: 100% !important;
  height: 620px !important;
  min-height: 620px !important;
  padding: 0 !important;
  overflow: hidden;
  display: grid !important;
  grid-template-columns: minmax(0, 56%) minmax(360px, 44%) !important;
  align-items: stretch !important;
  background: #fff;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: none !important;
}



body.homepage-v4 .capabilities .cap-enhanced:hover {
  transform: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.homepage-v4 .cap-enhanced .cap-visual {
  min-height: 620px;
  height: 100%;
  width: 100%;
  padding: 0 !important;
  display: block;
  overflow: hidden;
  background: #f3f4f4;
  border: 0 !important;
  border-radius: 0 !important;
}

body.homepage-v4 .cap-enhanced .cap-visual img {
  width: 100%;
  height: 100%;
  min-height: 620px;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  display: block;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Keep detailed workflow / UI artwork visually balanced inside the large image area. */
body.homepage-v4 .cap-enhanced:nth-child(1) .cap-visual img {
  object-position: 50% 48%;
}

body.homepage-v4 .cap-enhanced:nth-child(2) .cap-visual img {
  object-position: 50% 50%;
}

body.homepage-v4 .cap-enhanced:nth-child(3) .cap-visual img {
  object-position: 50% 50%;
}

body.homepage-v4 .cap-enhanced:nth-child(4) .cap-visual img {
  object-position: 50% 48%;
}

body.homepage-v4 .cap-enhanced:nth-child(5) .cap-visual img {
  object-position: 50% 50%;
}

body.homepage-v4 .cap-enhanced:nth-child(6) .cap-visual img {
  object-position: 50% 50%;
}

body.homepage-v4 .cap-enhanced .cap-copy {
  min-height: 620px;
  padding: clamp(64px, 7vw, 112px) clamp(44px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: #fff;
}

body.homepage-v4 .cap-enhanced .cap-accent {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 0.78rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.homepage-v4 .cap-enhanced h3 {
  margin: 0 0 26px !important;
  max-width: 540px;
  font-size: clamp(2.25rem, 3.6vw, 4rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.05em;
}

body.homepage-v4 .cap-enhanced p {
  max-width: 560px !important;
  margin: 0 !important;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.75 !important;
}

/* Alternate the visual/text relationship while keeping generous editorial spacing. */
body.homepage-v4 .cap-enhanced:nth-child(even) {
  grid-template-columns: minmax(360px, 44%) minmax(0, 56%) !important;
}

body.homepage-v4 .cap-enhanced:nth-child(even) .cap-visual {
  grid-column: 2;
  grid-row: 1;
}

body.homepage-v4 .cap-enhanced:nth-child(even) .cap-copy {
  grid-column: 1;
  grid-row: 1;
}

@media (max-width: 1100px) {
  body.homepage-v4 .capabilities .cap-grid {
    gap: 88px !important;
  }

  body.homepage-v4 .capabilities .cap-enhanced,
  body.homepage-v4 .cap-enhanced:nth-child(even) {
    min-height: 560px !important;
    grid-template-columns: minmax(0, 54%) minmax(320px, 46%) !important;
  }

  body.homepage-v4 .cap-enhanced .cap-visual,
  body.homepage-v4 .cap-enhanced .cap-visual img {
    min-height: 560px;
  }

  body.homepage-v4 .cap-enhanced .cap-copy {
    min-height: 560px;
    padding: 56px 46px;
  }

  body.homepage-v4 .cap-enhanced h3 {
    font-size: clamp(2rem, 4vw, 3.1rem) !important;
  }
}

@media (max-width: 900px) {
  body.homepage-v4 .capabilities .cap-grid {
    gap: 72px !important;
    margin-top: 52px !important;
  }

  body.homepage-v4 .capabilities .cap-enhanced,
  body.homepage-v4 .cap-enhanced:nth-child(even) {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  body.homepage-v4 .cap-enhanced .cap-visual,
  body.homepage-v4 .cap-enhanced:nth-child(even) .cap-visual {
    grid-column: 1;
    grid-row: 1;
    min-height: auto !important;
    height: auto !important;

  }

  body.homepage-v4 .cap-enhanced .cap-visual img,
  body.homepage-v4 .cap-enhanced:nth-child(even) .cap-visual img {
    min-height: 500px;
    height: 500px;
  }

  body.homepage-v4 .cap-enhanced .cap-copy,
  body.homepage-v4 .cap-enhanced:nth-child(even) .cap-copy {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    padding: 64px 42px 72px;
  }
}

@media (max-width: 600px) {
  body.homepage-v4 .capabilities .cap-grid {
    gap: 56px !important;
    margin-top: 42px !important;
  }

  body.homepage-v4 .cap-enhanced .cap-visual,
  body.homepage-v4 .cap-enhanced:nth-child(even) .cap-visual {
    min-height: 360px;
    height: 360px;
  }

  body.homepage-v4 .cap-enhanced .cap-visual img,
  body.homepage-v4 .cap-enhanced:nth-child(even) .cap-visual img {
    min-height: 360px;
    height: 360px;
  }

  body.homepage-v4 .cap-enhanced .cap-copy,
  body.homepage-v4 .cap-enhanced:nth-child(even) .cap-copy {
    padding: 48px 24px 56px;
  }

  body.homepage-v4 .cap-enhanced .cap-accent {
    margin-bottom: 16px;
  }

  body.homepage-v4 .cap-enhanced h3 {
    margin-bottom: 20px !important;
    font-size: clamp(1.9rem, 10vw, 2.65rem) !important;
  }

  body.homepage-v4 .cap-enhanced p {
    font-size: 1rem;
    line-height: 1.7 !important;
  }
}