.capability-page {
  background: #f2f1ec;
  color: #17191d;
}

.capability-hero {
  position: relative;
  overflow: hidden;
  min-height: 720px;
  padding: 154px 0 86px;
  background: #090a0d;
  color: #fff;
}

.capability-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #090a0d 0%, rgba(9, 10, 13, 0.96) 45%, rgba(9, 10, 13, 0.56) 100%),
    var(--capability-photo) 82% center / cover no-repeat;
}

.capability-page--engineering { --capability-photo: url("/assets/img/zyel-office-ai/service-custom-platforms.webp"); }
.capability-page--data { --capability-photo: url("/assets/img/zyel-office-ai/service-ai-data.webp"); }
.capability-page--cloud { --capability-photo: url("/assets/img/zyel-office-ai/service-system-rescue.webp"); }
.capability-page--experience { --capability-photo: url("/assets/img/zyel-office-ai/service-growth-measurement.webp"); }
.capability-page--intelligence { --capability-photo: url("/assets/img/zyel-office-ai/service-ai-data.webp"); }
.capability-page--media { --capability-photo: url("/assets/img/zyel-office-ai/service-websites.webp"); }

.capability-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.55fr);
  align-items: end;
  gap: clamp(3rem, 8vw, 8rem);
  min-height: 480px;
}

.capability-hero h1 {
  max-width: 950px;
  margin: 0;
  font-size: clamp(4rem, 8.6vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.066em;
}

.capability-lede {
  max-width: 760px;
  margin: 2rem 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.55;
}

.capability-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: 2.2rem;
}

.capability-directory-link {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 850;
  text-decoration: none;
}

.capability-parent {
  border-top: 1px solid rgba(255, 255, 255, 0.34);
  padding-top: 1rem;
}

.capability-parent > span {
  display: block;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.capability-parent a {
  display: grid;
  gap: 0.35rem;
  text-decoration: none;
}

.capability-parent strong { color: var(--accent); font-size: 0.9rem; }
.capability-parent em { color: rgba(255, 255, 255, 0.76); font-size: 0.92rem; font-style: normal; line-height: 1.45; }

.capability-context,
.capability-scope,
.capability-method,
.capability-proof { padding: clamp(5rem, 9vw, 8rem) 0; }

.capability-section-grid {
  display: grid;
  grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1.66fr);
  gap: clamp(2rem, 7vw, 7rem);
}

.capability-context h2,
.capability-section-heading h2,
.capability-method h2,
.capability-cta h2 {
  margin: 0;
  font-size: clamp(2.8rem, 6vw, 5.8rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.capability-detail {
  max-width: 850px;
  margin: 2rem 0 0;
  color: #4f545d;
  font-size: clamp(1.08rem, 1.7vw, 1.32rem);
  line-height: 1.75;
}

.capability-signals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 3.5rem 0 0;
  padding: 0;
  border-top: 1px solid rgba(23, 25, 29, 0.18);
  list-style: none;
}

.capability-signals li {
  min-height: 170px;
  padding: 1.4rem 1.4rem 1.4rem 0;
  border-right: 1px solid rgba(23, 25, 29, 0.18);
  font-weight: 760;
  line-height: 1.55;
}

.capability-signals li + li { padding-left: 1.4rem; }
.capability-signals li:last-child { border-right: 0; }

.capability-scope { background: #0c0e12; color: #fff; }
.capability-section-heading { display: grid; grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1.66fr); gap: clamp(2rem, 7vw, 7rem); }

.capability-scope-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.capability-scope-grid article {
  min-height: 310px;
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.capability-scope-grid article + article { padding-left: 1.5rem; }
.capability-scope-grid article:last-child { border-right: 0; }
.capability-scope-grid span,
.capability-method li > span { color: var(--accent); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.12em; }
.capability-scope-grid h3 { margin: 4rem 0 0; font-size: 1.35rem; line-height: 1.2; }
.capability-scope-grid p { color: rgba(255, 255, 255, 0.64); font-size: 0.9rem; line-height: 1.6; }

.capability-method { background: #dcecf2; }
.capability-method ol { margin: 0; padding: 0; border-top: 1px solid rgba(23, 25, 29, 0.18); list-style: none; }
.capability-method li { display: grid; grid-template-columns: 52px 1fr; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid rgba(23, 25, 29, 0.18); }
.capability-method h3 { margin: 0; font-size: 1.2rem; }
.capability-method p { max-width: 660px; margin: 0.45rem 0 0; color: #58616a; }

.capability-proof { background: #f8f7f2; }
.capability-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 4rem; border-top: 1px solid rgba(23, 25, 29, 0.18); }
.capability-proof-grid a { display: flex; min-height: 270px; padding: 1.5rem 1.5rem 1.5rem 0; border-right: 1px solid rgba(23, 25, 29, 0.18); flex-direction: column; text-decoration: none; }
.capability-proof-grid a + a { padding-left: 1.5rem; }
.capability-proof-grid a:last-child { border-right: 0; }
.capability-proof-grid span { color: #647038; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.capability-proof-grid h3 { margin: auto 0 1.6rem; font-size: clamp(1.45rem, 2.4vw, 2.2rem); line-height: 1.08; letter-spacing: -0.035em; }
.capability-proof-grid strong { font-size: 0.78rem; }
.capability-no-proof { max-width: 760px; margin: 3rem 0 0 min(25%, 240px); color: #5b6068; font-size: 1.1rem; }

.capability-related { background: #fff; border-top: 1px solid rgba(23, 25, 29, 0.16); border-bottom: 1px solid rgba(23, 25, 29, 0.16); }
.capability-related .shell { display: grid; grid-template-columns: 0.8fr repeat(4, 1fr); }
.capability-related span,
.capability-related a { display: flex; min-height: 92px; padding: 1rem; align-items: center; border-right: 1px solid rgba(23, 25, 29, 0.16); font-size: 0.76rem; font-weight: 800; line-height: 1.35; text-decoration: none; }
.capability-related > .shell > span { padding-left: 0; color: #757981; text-transform: uppercase; letter-spacing: 0.1em; }
.capability-related a:last-child { border-right: 0; }
.capability-related a:hover { background: #eef7d9; }

.capability-cta { padding: clamp(6rem, 12vw, 11rem) 0; background: #090a0d; color: #fff; }
.capability-cta h2 { max-width: 1050px; }
.capability-cta .button { margin-top: 2.4rem; }

@media (max-width: 980px) {
  .capability-hero-grid { grid-template-columns: 1fr; align-items: end; }
  .capability-parent { max-width: 620px; }
  .capability-scope-grid { grid-template-columns: 1fr 1fr; }
  .capability-scope-grid article:nth-child(2) { border-right: 0; }
  .capability-scope-grid article:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.18); }
  .capability-proof-grid { grid-template-columns: 1fr; }
  .capability-proof-grid a,
  .capability-proof-grid a + a { min-height: 210px; padding: 1.5rem 0; border-right: 0; border-bottom: 1px solid rgba(23, 25, 29, 0.18); }
  .capability-related .shell { grid-template-columns: 1fr 1fr; }
  .capability-related > .shell > span { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid rgba(23, 25, 29, 0.16); }
}

@media (max-width: 680px) {
  .capability-hero { min-height: 700px; padding: 116px 0 62px; }
  .capability-hero::before { background: linear-gradient(180deg, rgba(9, 10, 13, 0.38), #090a0d 48%), var(--capability-photo) 70% top / auto 54% no-repeat; }
  .capability-hero-grid { min-height: 520px; }
  .capability-hero h1 { font-size: clamp(3.2rem, 15vw, 5rem); }
  .capability-actions { align-items: stretch; flex-direction: column; }
  .capability-actions .button { width: 100%; }
  .capability-section-grid,
  .capability-section-heading { grid-template-columns: 1fr; }
  .capability-signals { grid-template-columns: 1fr; }
  .capability-signals li,
  .capability-signals li + li { min-height: 0; padding: 1.2rem 0; border-right: 0; border-bottom: 1px solid rgba(23, 25, 29, 0.18); }
  .capability-scope-grid { grid-template-columns: 1fr; }
  .capability-scope-grid article,
  .capability-scope-grid article + article { min-height: 0; padding: 1.5rem 0; border-right: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
  .capability-scope-grid h3 { margin-top: 2.5rem; }
  .capability-no-proof { margin-left: 0; }
  .capability-related .shell { grid-template-columns: 1fr; }
  .capability-related a { min-height: 70px; padding-inline: 0; border-right: 0; border-bottom: 1px solid rgba(23, 25, 29, 0.16); }
  .capability-related > .shell > span { min-height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}