/* Capabilities overview, six core capabilities as alternating photo rows (user mockup, 2026-10-28).
   Loaded after capabilities-seven-layer.css. Photo and text swap sides on every other row;
   each text column reads number, serif title, one line, English label, link. */
.cap-main #services { background: #f6f2ea; }
.cap-rows { display: grid; }
.cap-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: 'copy photo'; align-items: center; column-gap: clamp(40px, 6vw, 96px); padding-block: 36px; border-bottom: 1px solid #e2d9cb; }
.cap-row:first-child { padding-top: 8px; }
.cap-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cap-row:nth-child(even) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: 'photo copy'; }
.cap-row-photo { grid-area: photo; overflow: hidden; border-radius: 10px; }
.cap-row-photo img { aspect-ratio: 16 / 9; height: auto; object-fit: cover; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.cap-row:hover .cap-row-photo img { transform: scale(1.03); }
.cap-row-copy { grid-area: copy; display: grid; justify-items: start; gap: 12px; max-width: 30em; }
.cap-row:nth-child(even) .cap-row-copy { justify-self: start; }

/* site-typography.css forces one family and size with !important; the row title keeps the serif. */
html body .cap-row-no { color: #a57a45; font-size: 13px !important; letter-spacing: .08em !important; }
html body .cap-row-copy h3 { font-family: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif !important; font-size: clamp(24px, 2.2vw, 30px) !important; line-height: 1.35 !important; letter-spacing: .06em !important; color: #231d18; }
.cap-row-copy p { color: #5c544c; }
html body .cap-row-en { margin-top: 4px; color: #231d18; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .16em !important; }
.cap-row-link { display: inline-flex; align-items: center; gap: 16px; margin-top: 8px; padding-bottom: 6px; border-bottom: 1px solid currentColor; color: #a57a45 !important; }
.cap-row-link svg { width: 22px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; transition: transform .3s; }
.cap-row-link:hover svg { transform: translateX(4px); }

@media (max-width: 820px) {
  .cap-row, .cap-row:nth-child(even) { grid-template-columns: 1fr; grid-template-areas: 'photo' 'copy'; row-gap: 20px; padding-block: 28px; }
  .cap-row:first-child { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .cap-row-photo img, .cap-row-link svg { transition: none; } }

/* Top banner, same treatment as the About page hero: full-width photo, dark fade from the left,
   white title, gold lead, two-line description. */
.cap-banner { position: relative; isolation: isolate; min-height: 466px; color: #fff9ed; background: linear-gradient(90deg, rgba(28,21,15,.82) 0%, rgba(28,21,15,.6) 34%, rgba(28,21,15,.14) 72%), #33271e url("/assets/capabilities-seven-layer-20261019/banner-textile-desk.webp") center / cover no-repeat; overflow: hidden; }
.cap-banner-inner { width: calc(100% - 80px); max-width: 1264px; margin-inline: auto; min-height: 466px; display: flex; align-items: center; padding-block: 44px 62px; }
.cap-banner-copy { max-width: 660px; }
.cap-banner h1 { margin: 0 0 20px; color: #fff9ed; font-size: clamp(50px, 5.6vw, 76px); line-height: 1.15; letter-spacing: .04em; }
.cap-banner-lead { margin: 0; color: #e8c691; font-family: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif; font-size: clamp(22px, 2.3vw, 31px); line-height: 1.5; }
.cap-mobile-break { display: none; }
.cap-banner-description { margin: 26px 0 0 !important; color: #eee5d8; font-size: 16px; line-height: 1.9; }
@media (max-width: 760px) {
  .cap-banner, .cap-banner-inner { min-height: 446px; }
  .cap-banner { background-image: linear-gradient(90deg, rgba(28,21,15,.78), rgba(28,21,15,.3)), url("/assets/capabilities-seven-layer-20261019/banner-textile-desk.webp"); background-position: center, 62% center; }
  .cap-banner-inner { width: calc(100% - 48px); padding-block: 38px 50px; }
  .cap-banner h1 { margin-bottom: 22px; font-size: 52px; }
  .cap-banner-lead { max-width: 320px; font-size: 25px; }
  .cap-mobile-break { display: initial; }
  .cap-banner-description { margin-top: 25px !important; font-size: 14px; }
}