.capability-page { background: var(--paper); }

.capability-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: 68px;
  padding: 12px var(--pad);
  color: var(--paper);
  background: rgba(17, 16, 14, .94);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(12px);
}

.capability-header > p,
.capability-back {
  margin: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.capability-back { justify-self: end; }

.capability-back:hover,
.capability-back:focus-visible { color: var(--clay); }

.capability-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
  min-height: 100svh;
  color: var(--paper);
  background: var(--ink);
  overflow: hidden;
}

.capability-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding: 112px var(--pad) 42px;
}

.capability-hero h1 {
  max-width: 8ch;
  margin: 28px 0 12px;
  font-size: clamp(72px, 10vw, 170px);
  font-weight: 650;
  line-height: .79;
  letter-spacing: -.08em;
}

.capability-accent {
  margin: 0;
  color: var(--clay);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(40px, 6vw, 100px);
  font-style: italic;
  line-height: .9;
  letter-spacing: -.065em;
}

.capability-hero-image {
  position: relative;
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  border-left: 1px solid rgba(255, 255, 255, .2);
}

.capability-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 16, 14, .16);
  pointer-events: none;
}

.capability-hero-image img {
  filter: saturate(.58) contrast(1.04);
  animation: capability-image-in 1.4s var(--ease) both;
}

.capability-scroll {
  position: absolute;
  right: calc(41.667% + var(--pad));
  bottom: 30px;
  display: flex;
  gap: 28px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .45);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .09em;
}

@keyframes capability-image-in {
  from { opacity: .25; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}

.capability-overview {
  display: grid;
  grid-template-columns: 1fr 5fr 4fr;
  gap: clamp(34px, 6vw, 110px);
  padding: clamp(100px, 12vw, 190px) var(--pad);
  border-bottom: 1px solid var(--line);
}

.capability-number {
  color: var(--brick);
  font-size: clamp(58px, 7vw, 112px);
  font-weight: 650;
  line-height: .8;
  letter-spacing: -.07em;
}

.capability-statement h2 {
  max-width: 12ch;
  margin: 24px 0 32px;
  font-size: clamp(42px, 5vw, 84px);
  font-weight: 650;
  line-height: .94;
  letter-spacing: -.055em;
}

.capability-statement > p[lang="th"] {
  max-width: 28ch;
  margin: 0;
  color: var(--brick);
  font-family: var(--font-accent);
  font-size: clamp(20px, 1.9vw, 31px);
  line-height: 1.42;
}

.capability-intro {
  align-self: end;
  max-width: 570px;
  padding-top: 44px;
  border-top: 1px solid var(--ink);
}

.capability-intro p {
  margin: 0;
  color: #5f5b55;
  font-size: clamp(17px, 1.45vw, 23px);
  line-height: 1.42;
  letter-spacing: -.025em;
}

.capability-intro p[lang="th"] {
  margin-top: 28px;
  color: var(--ink);
  font-family: var(--font-accent);
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.62;
  letter-spacing: 0;
}

.capability-signals {
  padding: clamp(100px, 12vw, 180px) var(--pad);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.capability-signals-head {
  display: grid;
  grid-template-columns: 2fr 9fr;
  gap: 36px;
  align-items: start;
}

.capability-signals-head h2 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(46px, 6vw, 98px);
  font-weight: 650;
  line-height: .9;
  letter-spacing: -.065em;
}

.capability-signals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(72px, 9vw, 138px);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.capability-signals-grid article {
  display: flex;
  flex-direction: column;
  min-height: 370px;
  padding: 18px 30px 32px 0;
  border-right: 1px solid var(--line);
}

.capability-signals-grid article + article { padding-left: 30px; }
.capability-signals-grid article:last-child { border-right: 0; }

.capability-signals-grid span {
  color: var(--brick);
  font-size: 10px;
  letter-spacing: .08em;
}

.capability-signals-grid h3 {
  max-width: 12ch;
  margin: auto 0 26px;
  font-size: clamp(30px, 3.2vw, 54px);
  font-weight: 500;
  line-height: .94;
  letter-spacing: -.05em;
}

.capability-signals-grid p {
  max-width: 34ch;
  margin: 0;
  color: #514d47;
  font-family: var(--font-accent);
  font-size: 15px;
  line-height: 1.62;
}

.capability-scope {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
  gap: 7vw;
  padding: clamp(100px, 12vw, 190px) var(--pad);
  background: #dedbd3;
}

.capability-scope-lead h2,
.capability-process-head h2 {
  max-width: 12ch;
  margin: 28px 0 38px;
  font-size: clamp(54px, 7vw, 118px);
  font-weight: 650;
  line-height: .86;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.capability-scope-lead > p[lang="th"] {
  max-width: 46ch;
  margin: 0;
  font-family: var(--font-accent);
  font-size: clamp(18px, 1.6vw, 26px);
  line-height: 1.58;
}

.capability-includes { border-top: 1px solid var(--ink); }

.capability-includes > .eyebrow { padding: 18px 0 34px; }

.capability-includes ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--ink);
}

.capability-includes li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  font-size: clamp(21px, 2vw, 34px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.035em;
}

.capability-includes li span {
  color: var(--brick);
  font-size: 10px;
  letter-spacing: .08em;
}

.capability-process {
  padding: clamp(100px, 12vw, 180px) var(--pad);
  color: var(--paper);
  background: var(--brown);
}

.capability-process-head {
  display: grid;
  grid-template-columns: 2fr 9fr;
  gap: 36px;
  align-items: start;
}

.capability-process-head h2 { margin-top: 0; }

.capability-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(70px, 9vw, 140px);
  border-top: 1px solid rgba(255, 255, 255, .34);
}

.capability-process-grid article {
  min-height: 310px;
  padding: 18px 30px 30px 0;
  border-right: 1px solid rgba(255, 255, 255, .34);
}

.capability-process-grid article + article { padding-left: 30px; }
.capability-process-grid article:last-child { border-right: 0; }

.capability-process-grid span {
  color: var(--clay);
  font-size: 10px;
  letter-spacing: .08em;
}

.capability-process-grid h3 {
  margin: 72px 0 20px;
  font-size: clamp(35px, 4vw, 66px);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.055em;
}

.capability-process-grid p {
  max-width: 31ch;
  margin: 0;
  color: #d5ccc5;
  font-family: var(--font-accent);
  font-size: 15px;
  line-height: 1.58;
}

.capability-result {
  display: grid;
  grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr);
  gap: clamp(55px, 8vw, 140px);
  align-items: center;
  padding: clamp(100px, 12vw, 180px) var(--pad);
  background: #dedbd3;
}

.capability-result-copy h2 {
  max-width: 11ch;
  margin: 28px 0 34px;
  font-size: clamp(52px, 6.5vw, 108px);
  font-weight: 650;
  line-height: .88;
  letter-spacing: -.067em;
}

.capability-result-copy > p[lang="th"] {
  max-width: 39ch;
  margin: 0;
  color: #4f4b45;
  font-family: var(--font-accent);
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.64;
}

.capability-result-work figure {
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

.capability-result-work img {
  transition: transform .75s var(--ease), filter .75s var(--ease);
}

.capability-result-work:hover img,
.capability-result-work:focus-visible img {
  transform: scale(1.025);
  filter: saturate(.86);
}

.capability-result-work > span {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 0;
  border-bottom: 1px solid var(--ink);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.capability-result-work b { font-weight: 500; }
.capability-result-work i { margin-left: auto; font-style: normal; }

.capability-cta {
  display: grid;
  grid-template-columns: 2fr 8fr 2fr;
  gap: 30px;
  align-items: end;
  min-height: 72svh;
  padding: 90px var(--pad) 42px;
  color: var(--paper);
  background: var(--ink);
}

.capability-cta h2 {
  max-width: 10ch;
  margin: 0;
  font-size: clamp(62px, 8vw, 138px);
  font-weight: 650;
  line-height: .82;
  letter-spacing: -.073em;
}

.capability-cta > a {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  color: var(--clay);
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.next-capability {
  display: grid;
  grid-template-columns: 2fr 9fr 1fr;
  gap: 28px;
  align-items: end;
  min-height: 58svh;
  padding: 80px var(--pad) 38px;
  color: var(--paper);
  background: var(--brick);
}

.next-capability > span:nth-child(2) {
  max-width: 11ch;
  font-size: clamp(64px, 9vw, 154px);
  font-weight: 650;
  line-height: .8;
  letter-spacing: -.075em;
  transition: transform .45s var(--ease);
}

.next-capability > i {
  justify-self: end;
  font-size: clamp(42px, 6vw, 90px);
  font-style: normal;
  line-height: .8;
  transition: transform .45s var(--ease);
}

.next-capability:hover > span:nth-child(2),
.next-capability:focus-visible > span:nth-child(2) { transform: translateX(12px); }

.next-capability:hover > i,
.next-capability:focus-visible > i { transform: translate(10px, 10px); }

.capability-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: 30px;
  padding: 46px var(--pad) 24px;
  color: var(--paper);
  background: var(--ink);
}

.capability-footer p {
  margin: 0;
  color: #8f8b84;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.capability-footer p:last-child { text-align: right; }

@media (max-width: 960px) {
  .capability-hero { grid-template-columns: 1fr; }
  .capability-hero-copy { min-height: 70svh; }
  .capability-hero-image { min-height: 56svh; border-top: 1px solid rgba(255, 255, 255, .2); border-left: 0; }
  .capability-scroll { right: var(--pad); bottom: calc(56svh + 24px); }
  .capability-overview { grid-template-columns: 90px 1fr; }
  .capability-intro { grid-column: 2; }
  .capability-signals-head { grid-template-columns: 1fr; }
  .capability-scope { grid-template-columns: 1fr; }
  .capability-process-head { grid-template-columns: 1fr; }
  .capability-result { grid-template-columns: 1fr; }
  .capability-result-copy { max-width: 720px; }
  .capability-cta { grid-template-columns: 1fr 3fr; }
  .capability-cta > a { grid-column: 2; }
}

@media (max-width: 640px) {
  .capability-header { grid-template-columns: 1fr 1fr; }
  .capability-header > p { display: none; }
  .capability-hero-copy { min-height: 66svh; }
  .capability-hero h1 { font-size: clamp(46px, 13vw, 70px); line-height: .84; }
  .capability-accent { font-size: clamp(38px, 13vw, 66px); }
  .capability-hero-image { min-height: 50svh; }
  .capability-scroll { bottom: calc(50svh + 20px); }
  .capability-overview { grid-template-columns: 1fr; gap: 42px; }
  .capability-intro { grid-column: auto; }
  .capability-signals-grid { grid-template-columns: 1fr; }
  .capability-signals-grid article { min-height: 285px; padding: 18px 0 30px; border-right: 0; border-bottom: 1px solid var(--line); }
  .capability-signals-grid article + article { padding-left: 0; }
  .capability-signals-grid article:last-child { border-bottom: 0; }
  .capability-process-grid { grid-template-columns: 1fr; }
  .capability-process-grid article { min-height: 230px; padding: 18px 0 32px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .34); }
  .capability-process-grid article + article { padding-left: 0; }
  .capability-process-grid article:last-child { border-bottom: 0; }
  .capability-result { gap: 52px; }
  .capability-cta { grid-template-columns: 1fr; min-height: 68svh; }
  .capability-cta > a { grid-column: auto; }
  .next-capability { grid-template-columns: 1fr; align-items: start; min-height: 58svh; }
  .next-capability > i { justify-self: start; }
  .capability-footer { grid-template-columns: 1fr 1fr; }
  .capability-footer > p:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .capability-hero-image img { animation: none; }
}