/* Measured from live Covix Services, 2026-09-23. See SERVICES_REFERENCE.md. */
#services {
  --services-bg: #000;
  --services-text: #fff;
  --services-text-muted: rgba(255, 255, 255, .5);
  --services-number: rgba(255, 255, 255, .12);
  --services-border: rgba(255, 255, 255, .2);
  --services-chip-bg: transparent;
  --services-chip-border: rgba(255, 255, 255, .2);
  --services-chip-text: #fff;
  --services-hover: rgba(255, 255, 255, .1);
  --services-chip-radius: 40px;
  --services-control-radius: 52px;
  --services-heading-gap: 64px;
  --services-heading-size: 52px;
  --services-number-size: 100px;
  --services-title-size: 32px;
  --services-row-padding: 24px;
  --services-row-height: 148px;
  --services-number-column: 27%;
  --services-column-gap: 32px;
  --services-duration: 220ms;
  --services-ease: var(--motion-state);
  background: var(--services-bg);
  color: var(--services-text);
  padding-block: var(--space);
  padding-inline: 0;
  overflow-anchor: none;
}
#services .services-heading {width: 100%; margin: 0 auto var(--services-heading-gap); text-align: center;}
#services h2 {margin: 0; color: var(--services-text); font-size:52px; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance;}
#services .service-item {border-top: 1px solid var(--services-border);}
#services .service-item:last-child {border-bottom: 1px solid var(--services-border);}
#services .service-row-heading {margin: 0; font: inherit;}
#services .service-trigger {
  appearance: none; border: 0; border-radius: 0; background: transparent;
  color: var(--services-text); width: 100%; min-height: var(--services-row-height);
  padding: var(--services-row-padding); margin: 0;
  display: grid; grid-template-columns: var(--services-number-column) minmax(0, 1fr) 32px;
  grid-template-rows: auto auto; column-gap: var(--services-column-gap); row-gap: 20px;
  align-content: start; align-items: start; text-align: left; font: inherit; cursor: pointer;
  transition: background-color 160ms var(--services-ease);
}
#services .service-trigger:focus-visible {outline: 2px solid var(--services-text); outline-offset: -2px;}
#services .service-number {grid-column: 1; grid-row: 1 / 3; color: var(--services-number); font-size: var(--services-number-size); font-weight: 700; line-height: 1; letter-spacing: -.07em;}
#services .service-title {grid-column: 2; grid-row: 1; font-size: var(--services-title-size); font-weight: 500; line-height: 1.1; letter-spacing: -.02em;}
#services .service-tags {grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 8px;}
#services .service-chip {padding: 4px 12px; outline: 1px solid var(--services-chip-border); outline-offset: -1px; border-radius: var(--services-chip-radius); background: var(--services-chip-bg); color: var(--services-chip-text); font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: normal;}
#services .service-control {grid-column: 3; grid-row: 1; position: relative; display: block; width: 32px; height: 32px; border: 1px solid var(--services-border); border-radius: var(--services-control-radius);}
#services .service-control::before, #services .service-control::after {content: ''; position: absolute; width: 18px; height: 2px; border-radius: 5px; background: var(--services-text); left: 6px; top: 14px;}
#services .service-control::after {transform: rotate(90deg); transition: transform 180ms var(--services-ease);}
#services [data-open="true"] .service-control::after {transform: rotate(0deg);}
#services .service-panel {display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--services-duration) var(--services-ease), visibility 0s var(--services-duration);}
#services [data-open="true"] {--services-duration: 280ms;}
#services [data-open="true"] .service-panel {grid-template-rows: 1fr; visibility: visible; transition-delay: 0s;}
#services .service-panel-clip {min-height: 0; overflow: hidden;}
#services .service-detail {
  margin: 0 var(--services-row-padding); padding: 16px 64px 40px calc((100% - 48px) * .27 + var(--services-column-gap));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px;
  opacity: 0;
  transition: opacity 140ms linear;
}
#services [data-open="true"] .service-detail {opacity: 1;}
#services .service-statement {margin: 0; color: var(--services-text-muted); font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -.03em;}
#services .service-description {margin: 0; color: var(--services-text-muted); font-size: 16px; line-height: 1.5; letter-spacing: normal;}
#services .service-media {display: block; width: 100%; height: auto; border-radius: 16px; grid-column: 1 / -1;}
@media (hover: hover) and (pointer: fine) {#services .service-trigger:hover {background: var(--services-hover);}}
@media (max-width: 1199.98px) {
  #services {--services-heading-gap: 50px; --services-heading-size: 40px; --services-number-size: 80px; --services-title-size: 26px; --services-row-height: 128px; --services-number-column: 150px; --services-column-gap: 24px;}
  #services .service-detail {padding-left: calc(var(--services-number-column) + var(--services-column-gap)); padding-right: 56px; grid-template-columns: minmax(0, 1fr); gap: 24px;}
  #services .service-statement {font-size: 20px;}
}
@media (max-width: 767.98px) {
  #services {--services-heading-gap: 40px; --services-heading-size: 32px; --services-number-size: 50px; --services-title-size: 24px; --services-row-padding: 16px; --services-row-height: 0px;}
  #services .service-trigger {grid-template-columns: minmax(0, 1fr) 32px; grid-template-rows: auto auto auto; row-gap: 12px; column-gap: 12px; padding-inline: 0; padding-block: 24px; min-height: 44px;}
  #services .service-number {grid-column: 1 / -1; grid-row: 1;}
  #services .service-title {grid-column: 1; grid-row: 2; align-self: center;}
  #services .service-control {grid-column: 2; grid-row: 2;}
  #services .service-tags {grid-column: 1 / -1; grid-row: 3; margin-top: 8px;}
  #services .service-detail {margin: 0; padding: 6px 0 30px; grid-template-columns: minmax(0, 1fr); gap: 20px;}
  #services .service-statement {font-size: 24px;}
}
@media (prefers-reduced-motion: reduce) {
  #services {--services-duration: 0ms;}
  #services .service-detail {transform: none;}
}