#services { scroll-margin-top: 110px; }
#about .operation-panel + .operation-panel { margin-top: 32px; }
#about .operation-panel-head h3 { font-size: 19px; }
#about .delivery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#about .operation-grid:not(.delivery-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#about .operation-grid .service-card {
  --service-ink: #252823; --service-muted: #53584e;
  position: relative; display: flex; align-items: stretch; isolation: isolate;
  min-width: 0; min-height: 210px; padding: 24px; overflow: hidden;
  border: 0; border-radius: 8px; background: #e6e8df;
  box-shadow: inset 0 0 0 1px #ffffff18;
}
/* Material effects never sit over the independently rendered text. */
#about .service-material { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
#about .service-material i { position: absolute; display: block; }
#about .service-card-copy { display: flex; flex-direction: column; justify-content: space-between; position: relative; width: 100%; min-width: 0; }
#about .service-card h3 { max-width: 85%; margin: 0 0 28px; color: var(--service-ink); font-size: 24px; line-height: 1.4; font-weight: 700; text-wrap: balance; }
#about .service-card ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 20px; width: min(310px, 76%); margin: 0; padding: 0; list-style: none; color: var(--service-muted); font-size: 13px; line-height: 1.8; font-weight: 400; }
#about .service-card li { margin: 0; padding: 0; }

/* Ivory satin, with sharp folds and a softly diffused shadow. */
#about [data-service='planning'] .service-material i:nth-child(1) { width: 50%; height: 160%; right: -5%; top: -50%; transform: rotate(32deg); background: linear-gradient(90deg, #c0c5b1, #f9faf3 38%, #d9decb 65%, #f2f4e9); box-shadow: -24px 0 40px #7b826d30; }
#about [data-service='planning'] .service-material i:nth-child(2) { width: 24%; height: 150%; right: 2%; top: -40%; transform: rotate(32deg); background: linear-gradient(90deg, #f5f7e670, #abb29c50, #fdfef6a0); filter: blur(5px); }
#about [data-service='planning'] .service-material i:nth-child(3) { inset: 0; background: linear-gradient(90deg, #e6e8df 35%, #e6e8df00 74%); }

/* Smoked glass: diffuse light behind a translucent, finely edged plane. */
#about .service-card[data-service='storyboard'] { --service-ink: #f7f8f3; --service-muted: #d0d6ce; background: #252b29; }
#about [data-service='storyboard'] .service-material i:nth-child(1) { width: 38%; height: 160%; right: -2%; top: -28%; transform: rotate(36deg); background: linear-gradient(90deg, #718d8390, #d9e7d5, #596f5d); filter: blur(23px); opacity: .9; }
#about [data-service='storyboard'] .service-material i:nth-child(2) { width: 48%; height: 150%; right: -10%; top: -30%; transform: rotate(36deg); border-left: 1px solid #ffffff80; background: linear-gradient(90deg, #cfe2dc24, #a2a99d08 70%); box-shadow: inset 10px 0 18px #ffffff08, -14px 0 30px #00000024; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
#about [data-service='storyboard'] .service-material i:nth-child(3) { inset: 0; background: linear-gradient(90deg, #252b29 20%, #252b29dd 42%, #252b2900 90%); }

/* Broad spectral light refracted through a crisp glass ribbon. */
#about .service-card[data-service='generation'] { --service-ink: #f5f5f9; --service-muted: #d2d4e1; background: #242630; }
#about [data-service='generation'] .service-material i:nth-child(1) { width: 90%; height: 47%; right: -17%; top: 4%; transform: rotate(-38deg); background: linear-gradient(90deg, #8582a9, #e8bdc9 40%, #b8d5dd 70%, #d8e2d8); filter: blur(30px); }
#about [data-service='generation'] .service-material i:nth-child(2) { width: 83%; height: 28%; right: -28%; top: 26%; transform: rotate(-38deg); background: linear-gradient(180deg, #ffffff3d, #dedbea0a 28%, #00000018); border-top: 1px solid #ffffff80; box-shadow: 0 12px 36px #0c112b2b; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
#about [data-service='generation'] .service-material i:nth-child(3) { inset: 0; background: linear-gradient(90deg, #242630 16%, #242630d9 40%, #24263000 88%); }

/* Solid coral counterbalances the glass and satin treatments. */
#about .service-card[data-service='advertising'] { --service-ink: #2d2423; --service-muted: #493733; background: #da9b90; }
#about [data-service='advertising'] .service-material i:nth-child(1) { width: 51%; height: 180%; right: -6%; top: -65%; transform: rotate(35deg); background: #f0b8a6; box-shadow: -16px 0 0 #c9837b, -32px 0 0 #d08a7e; }
#about [data-service='advertising'] .service-material i:nth-child(2) { width: 34%; height: 150%; right: -4%; top: -40%; transform: rotate(35deg); background: linear-gradient(90deg, #ffffff15, #ffffff00); border-left: 1px solid #ffe7da9c; }
#about [data-service='advertising'] .service-material i:nth-child(3) { inset: 0; background: linear-gradient(90deg, #da9b90 25%, #da9b9000 80%); }

#about .operation-grid:not(.delivery-grid) .service-card { min-height: 210px; padding: 22px; }
#about .operation-grid:not(.delivery-grid) .service-card h3 { font-size: 21px; margin-bottom: 14px; }
#about .operation-grid:not(.delivery-grid) .service-card h3 span { display: block; }
#about .operation-grid:not(.delivery-grid) .service-card h3 span + span { font-size: 14px; font-weight: 400; margin-top: 7px; opacity: .75; }
#about .operation-grid:not(.delivery-grid) .service-card ul { grid-template-columns: 1fr; width: min(200px, 85%); font-size: 12px; line-height: 1.65; gap: 3px; }

#about .service-card[data-service='operations'] { --service-ink: #20352e; --service-muted: #344b3f; background: #b4c5b6; }
#about [data-service='operations'] .service-material i:nth-child(1) { right: -10%; top: -10%; width: 42%; height: 150%; transform: rotate(26deg); background: linear-gradient(90deg, #88a690, #d8e6d2, #b4c5b6); filter: blur(12px); }
#about [data-service='operations'] .service-material i:nth-child(2) { right: -6%; top: -15%; width: 31%; height: 150%; transform: rotate(26deg); border-left: 1px solid #f2f7edab; background: #e9f3e72b; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
#about [data-service='operations'] .service-material i:nth-child(3) { inset: 0; background: linear-gradient(90deg, #b4c5b6 28%, #b4c5b600 90%); }

#about .service-card[data-service='matrix'] { --service-ink: #252b2f; --service-muted: #4b5358; background: #c3cccf; }
#about [data-service='matrix'] .service-material i:nth-child(1) { right: -10%; top: -24%; width: 39%; height: 160%; transform: rotate(-28deg); background: linear-gradient(90deg, #9caaaf, #f1f4f3 40%, #839398 75%, #dbe2e2); box-shadow: -12px 0 25px #6d7a8020; }
#about [data-service='matrix'] .service-material i:nth-child(2) { right: 4%; top: -20%; width: 14%; height: 160%; transform: rotate(-28deg); background: #eef4f261; filter: blur(6px); }
#about [data-service='matrix'] .service-material i:nth-child(3) { inset: 0; background: linear-gradient(90deg, #c3cccf 35%, #c3cccf00 85%); }

#about .service-card[data-service='community'] { --service-ink: #f3eee9; --service-muted: #dcd1c7; background: #514449; }
#about [data-service='community'] .service-material i:nth-child(1) { right: -12%; top: -25%; width: 45%; height: 180%; transform: rotate(40deg); background: linear-gradient(90deg, #d2b7a0, #d69798 40%, #b4b4bf); filter: blur(22px); }
#about [data-service='community'] .service-material i:nth-child(2) { right: -20%; top: -25%; width: 47%; height: 180%; transform: rotate(40deg); border-left: 1px solid #fbe5dc9c; background: linear-gradient(90deg, #eedcd01f, #0000000d); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
#about [data-service='community'] .service-material i:nth-child(3) { inset: 0; background: linear-gradient(90deg, #514449 25%, #514449ba 48%, #51444900); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #about .service-material i { transition: translate 800ms cubic-bezier(.2, .7, .2, 1); }
  #about .service-card:hover .service-material i:nth-child(1) { translate: -8px 0; }
}
@media (max-width: 1080px) {
  #about .operation-grid .service-card { padding: 22px; min-height: 210px; }
  #about .service-card h3 { font-size: 23px; }
  #about .operation-grid:not(.delivery-grid) .service-card { padding: 20px; }
  #about .operation-grid:not(.delivery-grid) .service-card h3 { font-size: 20px; max-width: 100%; }
  #about .service-card ul { width: 90%; gap: 5px 12px; }
}
@media (max-width: 760px) {
  #about .delivery-grid, #about .operation-grid:not(.delivery-grid) { grid-template-columns: 1fr; gap: 12px; }
  #about .operation-grid .service-card, #about .operation-grid:not(.delivery-grid) .service-card { min-height: 200px; padding: 22px; }
  #about .service-card h3, #about .operation-grid:not(.delivery-grid) .service-card h3 { font-size: 22px; margin-bottom: 20px; }
  #about .service-card ul { width: 85%; font-size: 12px; gap: 6px 12px; }
  #about .operation-grid:not(.delivery-grid) .service-card ul { width: 85%; }
}