/* Four graphic compositions; concise, always-visible service labels. */
.project-info .project-business { margin-top: 20px; }
.project-info .project-role { margin-top: 16px; color: #c9c6bf; }
.project-business > span, .project-role > span {
  display: block;
  margin-bottom: 5px;
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--muted);
}
.project-foot { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px 20px; margin-top: 22px; }
.project-foot .project-scope { margin: 0; }
.project-foot > a { font-size: 10px; color: #d9d6cf; white-space: nowrap; }
.project-foot > a:hover { text-decoration: underline; text-underline-offset: 4px; }

.theme-a .expertise {
  --ink: #f4f2ed;
  --muted: #bbb8b1;
  --line: #f4f2ed2e;
  --accent: #e7ff5b;
  background: #141414;
  color: var(--ink);
  padding: 58px 5vw 52px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.services-heading { margin-bottom: 34px; }
.services-heading .micro { color: var(--accent); margin-bottom: 18px; }
.services-heading h2 { font-size: calc(clamp(25px, 2.3vw, 33px) * var(--heading-scale, 1)); }
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.service-panel { position: relative; padding: 22px 24px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); isolation: isolate; min-width: 0; }
.service-panel:last-child { border-right: 0; }
.service-panel::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 50% 40%, #e7ff5b09, transparent 75%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.service-panel:hover::before, .service-panel:focus-within::before, .service-panel.is-current::before { opacity: 1; }
.service-number { display: block; font: 9px/1.4 monospace; letter-spacing: .1em; color: var(--muted); }
.service-panel h3 { font-size: calc(clamp(21px, 2vw, 29px) * var(--heading-scale, 1)); font-weight: 700; letter-spacing: -.05em; line-height: 1.2; white-space: normal; text-wrap: balance; }
.service-panel .service-label { margin-top: 8px; font-size: 10px; color: var(--muted); letter-spacing: .08em; }
.service-panel .service-description { margin: 16px 0 0; font-size: 12px; line-height: 1.7; color: #d9d6cf; }
.service-visual { position: relative; width: clamp(120px, 12vw, 180px); height: clamp(120px, 12vw, 180px); margin: 24px auto 30px; color: var(--accent); pointer-events: none; }
.service-visual svg { width: 100%; height: 100%; overflow: visible; stroke: currentColor; stroke-width: 1; }
.service-guide { opacity: .25; }
.service-point { fill: currentColor; stroke: none; }
.service-scan { opacity: .6; }
.service-sample { display: inline-flex; align-items: center; max-width: 100%; gap: 18px; font: inherit; }
.service-sample span { display: inline-block; font-size: 17px; font-weight: 400; color: var(--accent); transition: transform .3s; }
.service-sample:hover span { transform: translate(3px, -3px); }
.service-trace { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform-origin: left center; opacity: .7; pointer-events: none; }
@media (max-width: 1000px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-panel:nth-child(even) { border-right: 0; }
  .service-panel h3 { font-size: calc(26px * var(--heading-scale, 1)); }
  .service-visual { width: 125px; height: 125px; margin: 14px auto 22px; }
}
@media (max-width: 700px) {
  .theme-a .expertise { padding: 42px 24px 32px; }
  .services-heading { margin-bottom: 26px; }
  .services-heading .micro { font-size: 9px; margin-bottom: 16px; }
  .service-panel { padding: 18px 16px 20px; }
  .service-panel:nth-child(odd) { padding-left: 0; }
  .service-panel:nth-child(even) { padding-right: 0; }
  .service-number { font-size: 7px; letter-spacing: .05em; white-space: nowrap; }
  .service-panel h3 { font-size: calc(clamp(17px, 4.5vw, 23px) * var(--heading-scale, 1)); }
  .service-visual { width: 92px; height: 92px; margin: 14px auto 20px; }
  .service-panel .service-label { font-size: 9px; }
  .service-panel .service-description { margin-top: 13px; font-size: 10px; }
  .service-sample { gap: 10px; }
  .service-sample span { font-size: 13px; }
}
@media (max-width: 360px) {
  .theme-a .expertise { padding-inline: 20px; }
  .service-panel h3 { font-size: calc(16px * var(--heading-scale, 1)); }
  .service-visual { width: 82px; height: 82px; }
}