/* Scoped independently from the hero's service cards and cube transforms. */
.h8-expertise {
  position: relative;
  isolation: isolate;
  padding-block: var(--h8-expertise-top-space) var(--h8-expertise-space);
  background: var(--h8-expertise-background);
  color: var(--h8-expertise-text);
  font-family: var(--font-body);
  scroll-margin-top: var(--space-8);
}
.h8-expertise *, .h8-services-dialog * { box-sizing: border-box; overflow-wrap: anywhere; }
.h8-expertise::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: var(--h8-expertise-background-image); background-size: cover; background-position: center;
  filter: var(--h8-expertise-background-filter);
}
.h8-expertise::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--h8-expertise-background-overlay); }
.h8-expertise__inner { max-width: var(--h8-expertise-content-width); margin-inline: auto; padding-inline: var(--space-4); }
.h8-expertise__intro { max-width: var(--h8-expertise-intro-width); margin: 0 auto var(--h8-expertise-intro-gap); text-align: center; }
.h8-expertise__eyebrow { margin: 0 0 var(--space-4); color: var(--brand-preview-teal); font: var(--h5-copy-eyebrow); letter-spacing: var(--h5-copy-tracking); text-transform: uppercase; }
.h8-expertise h2 { margin: 0; font: 600 var(--h8-expertise-title-size)/1.05 var(--font-display); letter-spacing: var(--h8-expertise-tight-tracking); text-wrap: balance; }
.h8-expertise h2 span { color: var(--brand-preview-yellow); }
.h8-expertise__lead { margin: var(--space-2) 0 0; font-size: var(--h8-expertise-lead-size); line-height: var(--h8-expertise-line-height); color: var(--h8-expertise-muted); text-wrap: pretty; }
.h8-expertise__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--h8-expertise-gap); }
.h8-expertise__card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start;
  min-height: var(--h8-expertise-card-height);
  backdrop-filter: var(--h8-expertise-card-glass); -webkit-backdrop-filter: var(--h8-expertise-card-glass);
  padding: var(--h8-expertise-padding) var(--h8-expertise-padding) 0; min-width: 0;
  border: var(--h8-expertise-border); border-radius: var(--h8-expertise-radius);
  background: var(--h8-expertise-surface); box-shadow: var(--h8-expertise-shadow);
  transition: border-color var(--h8-expertise-duration) var(--ease-out);
}
.h8-expertise__card:hover, .h8-expertise__card:focus-within { border-color: var(--brand-preview-teal); }
.h8-expertise__border { display: none; position: absolute; z-index: 2; inset: calc(var(--h8-expertise-border-width) * -1); padding: var(--h8-expertise-border-width); border-radius: inherit; overflow: hidden; pointer-events: none; }
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .h8-expertise__border { display: block; -webkit-mask: var(--h5-border-mask) content-box, var(--h5-border-mask); mask: var(--h5-border-mask) content-box, var(--h5-border-mask); -webkit-mask-composite: xor; mask-composite: exclude; }
}
.h8-expertise__border-sweep { position: absolute; left: 50%; top: 50%; width: var(--h8-expertise-sweep-size, 200%); aspect-ratio: 1; background: var(--h8-expertise-border-gradient); transform: var(--h5-border-gradient-start); animation: h5-gradient-border-turn var(--h8-expertise-border-duration) var(--h8-expertise-border-easing) infinite; animation-play-state: paused; }
.h8-expertise__card.is-border-visible .h8-expertise__border-sweep { animation-play-state: running; }
.h8-expertise__card-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--h8-expertise-card-heading-gap); width: 100%; }
.h8-expertise__icon { display: grid; place-items: center; flex-shrink: 0; width: var(--h8-expertise-icon-box); height: var(--h8-expertise-icon-box); border: var(--h8-expertise-border); border-radius: var(--radius-lg); background: var(--h8-expertise-icon-bg); box-shadow: var(--h8-expertise-icon-shadow); color: var(--brand-preview-yellow); }
.h8-expertise__icon svg { display: block; width: var(--h8-expertise-icon-size); height: var(--h8-expertise-icon-size); }
.h8-expertise__icon { position: relative; overflow: hidden; isolation: isolate; }
.h8-expertise__icon svg { position: relative; z-index: 1; }
.h8-expertise__icon-fireflies { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
.h8-section-fireflies { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.h8-section-fireflies.is-gathering { z-index:var(--h8-section-firefly-layer); }
.h8-section-fireflies[hidden] { display:none; }
.h8-expertise__inner { position:relative; z-index:2; }
/* Keep the original glyph colour. The canvas reveals its dark cutout only
   once the swarm has almost filled the square, using the same SVG geometry. */
@media (prefers-reduced-motion:reduce) { .h8-section-fireflies { display:none; } .h8-expertise__icon.is-hollow-icon > svg { color:var(--brand-preview-yellow); } }
.h8-expertise__card h3 { margin: 0; min-width: 0; font: 600 var(--h8-expertise-card-title)/1.35 var(--font-display); text-wrap: balance; }
.h8-expertise__card > p { position: relative; z-index: 1; padding-right: var(--h8-expertise-description-reserve); margin: 0 0 var(--space-1); color: var(--h8-expertise-muted); font: var(--h8-expertise-copy-type); }
.h8-expertise__card-detail { margin-top: auto; width: 100%; }
.h8-expertise__art { position: absolute; z-index: -1; right: 0; bottom: var(--h8-expertise-art-bottom); display: block; width: var(--h8-expertise-art-size); height: auto; object-fit: contain; opacity: var(--h8-expertise-art-opacity); filter: var(--h8-expertise-art-filter); pointer-events: none; }
.h8-expertise__card ul { list-style: none; margin: 0; padding: 0 var(--h8-expertise-list-reserve) var(--space-1) 0; width: 100%; }
.h8-expertise__card li { display: flex; gap: var(--space-2); align-items: baseline; padding-block: 0; font: var(--h8-expertise-copy-type); }
.h8-expertise__card li::before { content: ''; flex: 0 0 var(--space-1); width: var(--space-1); height: var(--space-1); background: var(--brand-preview-yellow); border-radius: var(--radius-pill); transform: translateY(var(--h8-expertise-bullet-offset)); }
.h8-expertise__link { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--tap-min); padding: var(--space-2) 0; border: 0; background: transparent; color: var(--h8-expertise-text); font: 600 var(--h8-expertise-copy-size)/1.5 var(--font-body); text-align: left; cursor: pointer; }
.h8-expertise__card .h8-expertise__link { width: 100%; border-top: var(--h8-expertise-border); min-height: var(--h8-expertise-footer-height); padding-block: 0; margin-top: var(--space-2); flex-shrink: 0; }
.h8-expertise__link svg { width: var(--space-4); height: var(--space-4); flex-shrink: 0; }
.h8-expertise__link svg { color: var(--brand-preview-yellow); }
.h8-expertise__link:hover { color: var(--brand-preview-yellow); }
.h8-expertise :is(button,a):focus-visible, .h8-services-dialog :is(button,a):focus-visible { outline: var(--h8-expertise-focus); outline-offset: var(--h8-expertise-focus-offset); border-radius: var(--space-1); }
.h8-expertise__support { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-1) var(--h8-expertise-padding); margin-top: var(--space-3); border: var(--h8-expertise-border); border-radius: var(--h8-expertise-radius); background: var(--h8-expertise-support-bg); backdrop-filter: var(--h8-expertise-card-glass); -webkit-backdrop-filter: var(--h8-expertise-card-glass); }
.h8-expertise__support p { max-width: var(--h8-expertise-support-width); margin: 0; color: var(--h8-expertise-muted); font-size: var(--h8-expertise-copy-size); line-height: var(--h8-expertise-line-height); }
.h8-expertise__support .h8-expertise__link { flex-shrink: 0; }
.h8-expertise__conversion { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); max-width: var(--h8-expertise-conversion-width); margin: var(--space-5) auto 0; padding: var(--space-3) var(--space-5); border: var(--h8-expertise-border); border-radius: var(--radius-pill); background: var(--h8-expertise-support-bg); backdrop-filter: var(--h8-expertise-card-glass); -webkit-backdrop-filter: var(--h8-expertise-card-glass); }
.h8-expertise__conversion p { margin: 0; max-width: var(--h8-expertise-prompt-width); font-size: var(--h8-expertise-copy-size); line-height: 1.6; text-wrap: balance; }
.h8-expertise__cta.h5-talk { flex-shrink: 0; color: var(--h5-theme-primary-ink); text-decoration: none; }
.h8-services-dialog { --h8-expertise-copy-size: var(--h8-expertise-dialog-copy); --h8-expertise-line-height: 1.6; width: min(var(--h8-expertise-dialog-width), calc(100% - var(--space-6))); max-height: calc(100dvh - var(--space-6)); padding: 0; border: var(--h8-expertise-border); border-radius: var(--h8-expertise-radius); background: var(--h8-expertise-dialog-bg); color: var(--h8-expertise-text); font-family: var(--font-body); }
.h8-services-dialog[open] { display: flex; flex-direction: column; }
.h8-services-dialog::backdrop { background: var(--h8-expertise-backdrop); }
.h8-services-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); border-bottom: var(--h8-expertise-border); }
.h8-services-dialog__head h2 { margin: 0; font: 600 var(--h8-expertise-card-title)/1.4 var(--font-display); }
.h8-services-dialog__close { flex: 0 0 var(--tap-min); width: var(--tap-min); height: var(--tap-min); border: var(--h8-expertise-border); border-radius: var(--radius-pill); background: transparent; color: var(--h8-expertise-text); font-size: var(--text-xl); cursor: pointer; }
.h8-services-dialog__body { padding: var(--space-5); overflow-y: auto; overscroll-behavior: contain; }
.h8-expertise-detail + .h8-expertise-detail { margin-top: var(--space-6); }
.h8-expertise-detail[hidden] { display: none; }
.h8-expertise-detail h3 { margin: 0 0 var(--space-3); font-size: var(--h8-expertise-lead-size); color: var(--brand-preview-yellow); }
.h8-expertise-detail p { color: var(--h8-expertise-muted); line-height: var(--h8-expertise-line-height); }
.h8-expertise-detail ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-6); margin: var(--space-5) 0 0; padding-left: var(--space-5); font-size: var(--h8-expertise-copy-size); line-height: 1.5; }
.h8-expertise-detail li::marker { color: var(--brand-preview-teal); }
.h8-services-dialog__foot { margin: 0; padding: var(--space-5); border-top: var(--h8-expertise-border); color: var(--h8-expertise-muted); line-height: 1.6; }
.h8-services-dialog__foot a { display: inline-block; min-height: var(--tap-min); padding-block: var(--space-3); color: var(--brand-preview-yellow); text-underline-offset: var(--space-1); }
@media (max-width: 1199px) { .h8-expertise__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) { .h8-expertise { --h8-expertise-copy-size: var(--h8-expertise-small-screen-copy); --h8-expertise-copy-type: var(--h8-expertise-small-copy-type); } .h8-expertise__conversion { flex-direction: column; text-align: center; } .h8-expertise__support { flex-direction: column; text-align: center; gap: var(--space-3); } }
@media (max-width: 899px) {
  .h8-expertise__card > p { padding-right: 0; }
  .h8-expertise__card-detail { display: grid; grid-template-columns: minmax(0, 1fr) 30%; align-items: end; gap: var(--space-2); }
  .h8-expertise__card-detail ul { padding-right: 0; }
  .h8-expertise__art { position: static; z-index: auto; width: 100%; }
}
@media (max-width: 559px) {
  .h8-expertise__eyebrow { letter-spacing: var(--tracking-caps); }
  .h8-expertise__inner { padding-inline: var(--space-3); }
  .h8-expertise__grid { grid-template-columns: minmax(0, 1fr); }
  .h8-expertise__card h3 { min-height: 0; }
  .h8-expertise__card > p { padding-right: 0; }
  .h8-expertise__intro { margin-bottom: var(--space-6); }
  .h8-expertise__conversion { border-radius: var(--h8-expertise-radius); padding: var(--space-5); }
  .h8-expertise-detail ul { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .h8-expertise__card { transition: none; } }
@media (prefers-reduced-motion: reduce) { .h8-expertise__border { display: none; } .h8-expertise__border-sweep { animation: none; } }

.h8-expertise__conversion .h8-expertise__cta { margin-left:auto; }
.h8-service-cta { position:relative; isolation:isolate; }
.h8-service-cta > .h8-service-cta-fireflies { position:absolute; inset:0; width:100%; height:100%; z-index:0; border-radius:inherit; pointer-events:none; }
.h8-service-cta > :not(.h8-service-cta-fireflies):not(.h5-cta-border) { position:relative; z-index:1; }
.h8-expertise__conversion .h5-talk.is-firefly-active { background:var(--h8-expertise-surface); color:var(--h5-theme-light); border-color:var(--h5-theme-light); box-shadow:var(--h5-services-card-hover-shadow); }
.h8-service-cta.is-firefly-active > span { text-shadow:var(--h8-firefly-label-shadow); }
@media (prefers-reduced-motion:reduce) { .h8-service-cta-fireflies { display:none; } }