

@layer components {

  .industry-intro {
    max-inline-size: var(--text-width-m);
  }

  .industry-intro__heading {
    font-size: var(--heading-s);
    font-weight: var(--weight-bold);
    color: var(--text-accent);
    margin: 0;
  }

  .industry-intro__text {
    color: var(--text-body);
    line-height: var(--leading-relaxed);
  }

  .industry-sidebar {
    padding: var(--space-l);
    background-color: var(--surface-tinted);
    border-radius: var(--card-radius);
    border-block-start: var(--card-accent-strip);
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
  }

  /* Sticky sidebar (desktop 2-col only). For position:sticky to actually
     pin while the left column scrolls, two conditions must hold:
       1. No `overflow` ancestor creates a scroll container — fixed in
          layout.css (#page uses `overflow: clip`, not `hidden`).
       2. The sticky element must sit at the TOP of its grid cell, and that
          cell must NOT be height-matched to the row. The grid uses
          `align-items: start`, so each cell already hugs its content — but
          that means the sidebar cell is short. We therefore stick the
          INNER .industry-sidebar and let it travel within the (tall) row.
     `align-self: start` on the sticky element pins it to the row start.
     The height cap + internal scroll handle a sidebar taller than the
     viewport so it never leaves dead space beside the scrolling content. */
  @media (min-width: 64em) {
    /* Sticky-until-end. Pin the sidebar grid cell (it's the grid item, so it
       travels within the grid row, which is as tall as the content column).
       NO height cap and NO internal scroll on purpose: with a tall sidebar
       (nav + specialist CTA + Follow Us) a height cap would hide the lower
       blocks behind an inner scrollbar. Instead the cell pins while there's
       room, then releases and scrolls up with the page once its full height
       has passed — so every block is reachable in normal scroll and there's
       no dead space (content keeps scrolling past it). */
    .industry-body__sidebar {
      position: sticky;
      inset-block-start: calc(var(--header-height) + var(--space-s));
    }
  }

  .industry-sidebar__title {
    margin: 0;
    font-size: var(--text-m);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-accent);
  }

  .industry-sidebar__groups {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

  .industry-sidebar__group-link,
  .industry-sidebar__group-label {
    display: block;
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
    text-decoration: none;
    padding-block-end: var(--space-2xs);
    border-block-end: 1px solid var(--border-muted);
  }

  .industry-sidebar__group-link:hover {
    color: var(--text-accent);
  }

  .industry-sidebar__group-link:active {
    opacity: var(--opacity-subdued);
  }

  .industry-sidebar__group-link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-xs);
  }

  .industry-sidebar__items {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-block-start: var(--space-xs);
  }

  .industry-sidebar__link {
    display: block;
    padding-block: var(--space-2xs);
    padding-inline: var(--space-s);
    font-size: var(--text-s);
    color: var(--text-body);
    text-decoration: none;
    border-radius: var(--radius-xs);
    border-inline-start: 2px solid transparent;
    transition:
      color            var(--duration-fast) var(--ease-default),
      background-color var(--duration-fast) var(--ease-default),
      border-color     var(--duration-fast) var(--ease-default);
  }

  .industry-sidebar__link:hover {
    background-color: var(--surface-highlight);
    color: var(--text-accent);
  }

  .industry-sidebar__link:active {
    background-color: var(--surface-tinted);
  }

  .industry-sidebar__link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .industry-sidebar__link--active {
    color: var(--text-accent);
    font-weight: var(--weight-semibold);
    border-inline-start-color: var(--card-accent);
    background-color: var(--surface-highlight);
  }

  .industry-sidebar__services {
    list-style: none;
    padding-inline-start: var(--space-m);
    border-inline-start: 1px solid var(--border-muted);
    margin-block-start: var(--space-2xs);
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .industry-sidebar__service-link {
    display: block;
    padding-block: var(--space-3xs);
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-default);
  }

  .industry-sidebar__service-link:hover,
  .industry-sidebar__service-link--active {
    color: var(--text-accent);
  }

  .industry-sidebar__service-link--active {
    font-weight: var(--weight-semibold);
  }

  .industry-sidebar__contact {
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--border-muted);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .industry-sidebar__contact-title {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .industry-sidebar__contact-item {
    margin: 0;
    font-size: var(--text-s);
  }

  .industry-sidebar__contact-item a {
    color: var(--text-link);
    text-decoration: none;
  }

  .industry-sidebar__contact-item a:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
  }

  .industry-sidebar__contact-item a:active {
    opacity: var(--opacity-subdued);
  }

  .industry-sidebar__cta,
  .industry-sidebar__cta:visited,
  .industry-sidebar__cta:hover {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-m);
    background-color: var(--surface-primary);
    color: var(--text-on-primary);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    border-radius: var(--radius-s);
    transition:
      background-color var(--duration-fast) var(--ease-default),
      transform        var(--duration-fast) var(--ease-default);
  }

  .industry-sidebar__cta:hover {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
  }

  .industry-sidebar__cta:active {
    background-color: var(--primary-ultra-dark);
    transform: translateY(1px);
  }

  .industry-sidebar__cta:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-s);
  }

  .industry-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block-end: var(--space-s);
  }

  .industry-sidebar__header-title {
    font-size: var(--text-s);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-main);

    display: inline-block;
    padding-block-end: var(--space-2xs);
    border-block-end: 2px solid transparent;
    border-image: var(--brand-gradient) 1;
  }

  .industry-sidebar__header-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xs);
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    transition: color var(--duration-fast) var(--ease-default),
                background-color var(--duration-fast) var(--ease-default);
  }

  .industry-sidebar__header-link:hover {
    color: var(--text-accent);
    background-color: var(--surface-tinted);
  }

  .industry-sidebar__header-link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-xs);
  }

  .industry-accordion {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xs);
    overflow: hidden;
  }

  .industry-accordion__item {
    border-block-end: 1px solid var(--border-default);
  }

  .industry-accordion__item:last-child {
    border-block-end: none;
  }

  .industry-accordion__heading {
    display: flex;
    align-items: center;
    background: var(--white);
    transition: background-color var(--duration-fast) var(--ease-default);
  }

  .industry-accordion__heading:hover {
    background-color: var(--surface-tinted);
  }

  .industry-accordion__heading:active {
    background-color: var(--surface-sunken);
  }

  .industry-accordion__heading:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .industry-accordion__heading--active {
    background-color: var(--surface-primary);
  }

  .industry-accordion__heading--active .industry-accordion__link {
    color: var(--text-on-primary);
    font-weight: var(--weight-bold);
  }

  .industry-accordion__heading--active .industry-accordion__icon {
    border-color: var(--text-on-primary);
    transform: rotate(-135deg);
    opacity: 1;
  }

  .industry-accordion__heading--active:hover {
    background-color: var(--primary-hover);
  }

  .industry-accordion__link {
    flex: 1;
    padding: var(--space-s) var(--space-m);
    font-family: var(--font-body);
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
    text-decoration: none;
  }

  .industry-accordion__link:hover {
    text-decoration: underline;
  }

  .industry-accordion__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-s) var(--space-m);
    background: none;
    border: none;
    border-inline-start: 1px solid var(--border-subtle);
    cursor: pointer;
    flex-shrink: 0;
  }

  .industry-accordion__heading--active .industry-accordion__toggle {
    border-inline-start-color: color-mix(in oklch, var(--white) 20%, transparent);
  }

  .industry-accordion__icon {
    flex-shrink: 0;
    display: inline-block;
    inline-size: var(--icon-indicator-size);
    block-size: var(--icon-indicator-size);
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform var(--duration-normal) var(--ease-default);
    opacity: var(--opacity-moderate);
  }

  .industry-accordion__panel {
    overflow: hidden;
  }

  .industry-accordion__panel.is-animating {
    display: block;
    transition: block-size var(--duration-normal) var(--ease-default);
  }

  .industry-accordion__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .industry-accordion__child-link {
    display: block;
    padding: var(--space-xs) var(--space-m) var(--space-xs) var(--space-l);
    font-size: var(--text-m);
    color: var(--text-body);
    text-decoration: none;
    border-block-end: 1px solid var(--border-subtle);
    transition:
      color            var(--duration-fast) var(--ease-default),
      background-color var(--duration-fast) var(--ease-default);
  }

  .industry-accordion__child:last-child .industry-accordion__child-link {
    border-block-end: none;
  }

  .industry-accordion__child-link:hover {
    color: var(--text-accent);
    background-color: var(--surface-tinted);
  }

  .industry-accordion__child-link:active {
    background-color: var(--surface-sunken);
  }

  .industry-accordion__child-link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .industry-accordion__child-link--active {
    color: var(--text-accent);
    font-weight: var(--weight-semibold);
    background-color: var(--surface-tinted);
    border-inline-start: 3px solid var(--primary);
    padding-inline-start: calc(var(--space-l) - 3px); 
  }

  .industry-accordion__child-link--active:hover {
    background-color: var(--surface-highlight);
  }

  .industry-sidebar__accreditations {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--space-l);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xs);
  }

  .industry-sidebar__accreditations-title {
    margin: 0;
    font-size: var(--text-s);
    font-weight: var(--weight-bold);
    color: var(--text-main);
  }

  .industry-sidebar__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .industry-sidebar__badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2xs) var(--space-s);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-accent);
    border: 1px solid var(--card-accent);
    border-radius: var(--radius-xs);
    white-space: nowrap;
  }

  /* Horizontal scroll tabs — left gutter aligns with page content,
     right edge clips mid-pill so the user sees ~10% of the next tab
     as a visual cue that more content is scrollable. */
  .industry-subnav {
    overflow-x: hidden;
    padding-block: var(--space-s);
    padding-inline-start: var(--gutter);
    padding-inline-end: 0;
    border-block-end: 1px solid var(--border-subtle);
  }

  .industry-subnav__list {
    display: flex;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
    padding-inline-end: var(--gutter);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    /* Mask fades the right edge so the clipped pill is clearly "more" */
    mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent);
  }

  .industry-subnav__list::-webkit-scrollbar {
    display: none;
  }

  .industry-subnav__list > * {
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  .industry-subnav__link {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2xs) var(--space-s);
    border-radius: var(--radius-full);

    border: 1px solid var(--primary-semi-light);
    background-color: var(--primary-ultra-light);
    color: var(--primary-dark);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition:
      background-color var(--duration-fast) var(--ease-default),
      color            var(--duration-fast) var(--ease-default),
      border-color     var(--duration-fast) var(--ease-default);
  }

  .industry-subnav__link:hover,
  .industry-subnav__link:focus-visible {
    background-color: var(--primary-ultra-light);
    border-color: color-mix(in oklch, var(--primary) 30%, transparent);
    color: var(--primary);
    outline: none; 
  }

  .industry-subnav__link[aria-current="page"],
  .industry-subnav__link--active {
    background-color: var(--surface-primary);
    border-color: var(--card-accent);
    color: var(--text-on-primary);
  }

  .industry-subnav__link[aria-current="page"]:hover,
  .industry-subnav__link--active:hover {
    background-color: var(--primary-dark, var(--primary));
    border-color: var(--primary-dark, var(--primary));
  }

  .industries-hub__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }

  @media (width >= 36em) {
    .industries-hub__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (width >= 64em) {
    .industries-hub__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .industries-hub__card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-m);
    padding: var(--card-padding);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--card-radius);
    border-block-start: var(--card-accent-strip);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--duration-fast) var(--ease-default),
                transform var(--duration-fast) var(--ease-default);
  }

  .industries-hub__card:hover {
    box-shadow: var(--shadow-m);
    transform: translateY(calc(var(--space-3xs) * -1));
  }

  .industries-hub__card:active {
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
  }

  .industries-hub__card:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--card-radius);
  }

  .industries-hub__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
  }

  .industries-hub__name {
    font-size: var(--text-l);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    line-height: var(--leading-tight);
  }

  .industries-hub__desc {
    font-size: var(--text-s);
    color: var(--text-muted);
    line-height: var(--leading-normal);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .industries-hub__meta {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-subtle);
  }

  .industries-hub__arrow {
    font-size: var(--text-l);
    color: var(--icon-color);
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease-default);
  }

  .industries-hub__card:hover .industries-hub__arrow {
    transform: translateX(4px);
  }

  .stype-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-l);
  }

  @media (max-width: 64em) {
    .stype-nav-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 40em) {
    .stype-nav-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Equal-height rows so single-line and two-line titles render at the
     same box-size — keeps visual font weight uniform across the grid. */
  .stype-nav-card {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    min-block-size: calc(var(--text-m) * var(--leading-snug) * 2 + var(--card-padding-compact) * 2);
    padding: var(--card-padding-compact);
    background-color: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--card-radius);
    text-decoration: none;
    color: var(--text-main);
    transition:
      border-color var(--duration-fast) var(--ease-default),
      box-shadow   var(--duration-fast) var(--ease-default),
      color        var(--duration-fast) var(--ease-default);
  }

  .stype-nav-card:hover {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 6px 20px color-mix(in oklch, var(--primary) 12%, transparent);
  }

  .stype-nav-card:active {
    box-shadow: none;
  }

  .stype-nav-card:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--card-radius);
  }

  .stype-nav-card__num {
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-subtle);
    transition: color var(--duration-fast) var(--ease-default);
  }

  .stype-nav-card:hover .stype-nav-card__num {
    color: var(--primary);
  }

  .stype-nav-card__label {
    flex: 1;
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    text-wrap: balance;
  }

  .stype-nav-card__arrow {
    flex-shrink: 0;
    font-size: var(--text-m);
    color: var(--text-muted);
    transition:
      color     var(--duration-fast) var(--ease-default),
      transform var(--duration-fast) var(--ease-default);
  }

  .stype-nav-card:hover .stype-nav-card__arrow {
    color: var(--primary);
    transform: translateX(3px);
  }

  .stype-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-s);
    padding-block-end: var(--space-s);
    border-block-end: 2px solid var(--card-accent);
  }

  .stype-section__heading {
    margin: 0;
    font-size: var(--heading-s);
    font-weight: var(--weight-bold);
    color: var(--text-main);
  }

  .stype-section__heading a {
    color: inherit;
    text-decoration: none;
  }

  .stype-section__heading a:hover {
    color: var(--text-accent);
  }

  .stype-section__all-link {
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--text-accent);
    text-decoration: none;
    white-space: nowrap;
  }

  .stype-section__all-link:hover {
    text-decoration: underline;
  }

  .stype-section__empty {
    color: var(--text-muted);
    font-size: var(--text-s);
  }

  .service-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: start;
  }

  @media (min-width: 64em) {
    .service-layout {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
  }

  .service-layout__main {
    min-inline-size: 0;
  }

  .service-layout__sidebar {
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
  }

  /* Sticky-until-end on the single service page (desktop 2-col only). Same
     pattern as the industry sidebar: pin the whole aside while there's room,
     then release and scroll up with the page so the lower blocks (specialist
     CTA, Follow Us) are always reachable — no inner scrollbar, no dead space.
     Works now that #page uses `overflow: clip` (layout.css). */
  @media (min-width: 64em) {
    .service-layout__sidebar {
      position: sticky;
      inset-block-start: calc(var(--header-height) + var(--space-s));
    }
  }

  .industry-sidebar__inner {
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
  }

  .service-sibling-nav {
    background-color: var(--surface-tinted);
    border: var(--card-border);
    border-block-start: var(--card-accent-strip);
    border-radius: var(--card-radius);
    padding: var(--space-l);
  }

  .service-sibling-nav__heading {
    margin-block-end: var(--space-s);
    font-size: var(--text-m);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-accent);
  }

  .service-sibling-nav__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .service-sibling-nav__link {
    display: block;
    padding-block: var(--space-xs);
    padding-inline: var(--space-s);
    font-size: calc(var(--text-s) * 1.1);
    color: var(--text-body);
    text-decoration: none;
    border-radius: var(--radius-xs);
    border-inline-start: 2px solid transparent;
    transition:
      color            var(--duration-fast) var(--ease-default),
      background-color var(--duration-fast) var(--ease-default),
      border-color     var(--duration-fast) var(--ease-default);
  }

  .service-sibling-nav__link:hover {
    background-color: var(--surface-highlight);
    color: var(--text-accent);
    border-inline-start-color: var(--card-accent);
  }

  .service-sibling-nav__link:active {
    background-color: var(--surface-tinted);
  }

  .service-sibling-nav__link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .service-sibling-nav__item[hidden] {
    display: none;
  }

  .service-sibling-nav__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-block-start: var(--space-xs);
    padding: var(--space-2xs) var(--space-s);
    background: none;
    border: none;
    cursor: pointer;
    font-size: calc(var(--text-s) * 1.1);
    font-weight: var(--weight-semibold);
    color: var(--text-accent);
    border-radius: var(--radius-xs);
    transition: background-color var(--duration-fast) var(--ease-default);
  }

  .service-sibling-nav__toggle:hover {
    background-color: var(--surface-highlight);
  }

  .service-sibling-nav__toggle:active {
    background-color: var(--surface-tinted);
    transform: scale(0.97);
  }

  .service-sibling-nav__toggle:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-xs);
  }

  .service-sibling-nav__toggle-icon {
    display: inline-block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--duration-fast) var(--ease-default);
  }

  .service-sibling-nav__toggle[aria-expanded="true"] .service-sibling-nav__toggle-icon {
    transform: rotate(225deg) translateY(-2px);
  }

  .service-features__heading,
  .service-instruments__heading,
  .service-standards__heading {
    font-size: var(--heading-s);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    margin: 0;
  }

  .service-features__list,
  .service-instruments__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }

  .service-features__item {
    padding: var(--space-m);
    background-color: var(--surface-tinted);
    border: var(--card-border);
    border-radius: var(--card-radius);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .service-features__title {
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
  }

  .service-features__desc {
    margin: 0;
    font-size: var(--text-s);
    color: var(--text-body);
    line-height: var(--leading-relaxed);
  }

  .service-instruments__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs);
    padding-block: var(--space-xs);
    border-block-end: 1px solid var(--border-subtle);
    font-size: var(--text-s);
  }

  .service-instruments__item:last-child {
    border-block-end: none;
  }

  .service-instruments__item strong {
    color: var(--text-main);
    font-weight: var(--weight-semibold);
  }

  .service-instruments__item span {
    color: var(--text-muted);
  }

  .service-standards__text {
    margin: 0;
    font-size: var(--text-s);
    color: var(--text-body);
    line-height: var(--leading-relaxed);
    white-space: pre-line;
  }

  .industry-intro__bar {
    display: flex;
    gap: var(--space-m);
    align-items: center;
  }

  .industry-intro__accent {
    flex-shrink: 0;
    width: var(--space-xs);
    align-self: stretch;
    background: var(--brand-gradient-vertical);
    border-radius: var(--radius-xs);
  }

  .industry-intro__text {
    font-size: var(--text-lead);
    font-weight: var(--weight-medium);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
  }

  .industry-body__content {
    gap: var(--space-2xl);
  }

  .industry-block {
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
  }

  .industry-body__grid {
    display: grid;
    grid-template-columns: var(--grid-wide-narrow);
    gap: var(--space-2xl);
    align-items: start; 
  }

  .industry-body__sidebar {
    min-inline-size: 0;
  }

  .industry-block__heading {
    font-family: var(--font-heading);
    font-size: var(--heading-s);
    font-weight: var(--weight-bold);
    color: var(--text-main);
  }

  .industry-block__heading a {
    color: inherit;
    text-decoration: none;
  }

  .industry-block__heading a:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .industry-block__heading a:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-xs);
  }

  .industry-block__text {
    font-size: var(--text-m);
    line-height: var(--leading-loose);
    color: var(--text-body);
    margin-block-start: var(--space-s);
  }

  @media (max-width: 63.99em) {
    .industry-body__grid {
      grid-template-columns: 1fr;
    }

    .industry-sidebar {
      position: static;
    }
  }

  .service-intro-excerpt {
    border-inline-start: var(--space-2xs) solid var(--primary);
    padding-inline-start: var(--space-m);
    padding-block: var(--space-xs);
    max-inline-size: var(--text-width-s);
  }

  .service-intro-excerpt p {
    margin: 0;
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
  }

  .service-accreditations {
    padding: var(--space-l);
    background-color: var(--surface-tinted);
    border: var(--card-border);
    border-radius: var(--card-radius);
  }

  .service-accreditations__header {
    display: flex;
    align-items: center;
    gap: var(--space-s);
  }

  .service-accreditations__heading {
    margin: 0;
    font-size: var(--heading-s);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    flex: 1;
  }

  .service-accreditations__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xs) var(--space-xs);
    background-color: var(--primary);
    color: var(--text-on-primary);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    border-radius: var(--radius-full);
    letter-spacing: var(--tracking-caps);
    flex-shrink: 0;
  }

  .service-accreditations__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .service-accreditations__pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2xs) var(--space-s);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--text-accent);
    background-color: var(--surface-raised);
    border: 1px solid var(--primary-semi-light);
    border-radius: var(--radius-full);
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease-default),
                border-color     var(--duration-fast) var(--ease-default);
  }

  .service-accreditations__pill:hover {
    background-color: var(--primary-ultra-light);
    border-color: var(--primary-light);
  }

} /* end @layer components */
