.h5-services[hidden] { display: none !important; }
.h5-services {
  width: calc(100% - var(--space-6));
  max-width: var(--h5-extras-width);
  margin-inline: auto;
  padding-block: var(--space-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.h5-services__panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-2);
  border: var(--h5-services-panel-border);
  border-radius: var(--radius-lg);
  background: var(--h5-services-panel-background);
}
.h5-service {
  display: grid;
  grid-template-columns: var(--h5-services-icon-size) minmax(0, 1fr) var(--h5-services-arrow-size);
  grid-template-areas: 'icon copy arrow';
  align-items: center;
  gap: var(--space-3);
  min-height: var(--h5-services-card-height);
  padding: var(--space-4);
  border: var(--h5-services-card-border);
  border-radius: var(--radius-md);
  background: var(--h5-services-card-background);
  box-shadow: var(--h5-services-card-shadow);
  -webkit-backdrop-filter: var(--h5-services-blur);
  backdrop-filter: var(--h5-services-blur);
  color: var(--h5-theme-light);
  text-decoration: none;
  transition: box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.h5-service__icon { grid-area: icon; display: grid; place-items: center; filter: var(--h5-services-icon-glow); }
.h5-service__copy { grid-area: copy; }
.h5-services__panel--right .h5-service {
  grid-template-columns: var(--h5-services-arrow-size) minmax(0, 1fr) var(--h5-services-icon-size);
  grid-template-areas: 'arrow copy icon';
  text-align: right;
}
.h5-service__icon > .h5-icon {
  width: var(--h5-services-icon-size);
  height: var(--h5-services-icon-size);
  overflow: visible;
}
.h5-service__title { display: block; font: var(--h5-services-title); }
.h5-service__description { display: block; margin-top: var(--space-1); font: var(--h5-services-copy); }
.h5-service__arrow {
  grid-area: arrow;
  display: grid;
  place-items: center;
  width: var(--h5-services-arrow-size);
  height: var(--h5-services-arrow-size);
  border: var(--h5-services-card-border);
  border-radius: var(--radius-pill);
  color: var(--h5-theme-colour);
}
.h5-service__arrow > .h5-icon { width: var(--h5-services-chevron-size); height: var(--h5-services-chevron-size); }
.h5-service:hover { box-shadow: var(--h5-services-card-hover-shadow); border-color: var(--h5-theme-light); }
.h5-service:focus-visible { outline: var(--h5-services-focus); outline-offset: var(--focus-offset); }
.h5-services.is-in-scene {
  position: absolute;
  inset: var(--h5-services-top) 0 auto;
  transform: translateY(calc(var(--h5-services-center) + var(--h5-platform-offset, 0px) + var(--h5-hero-content-drop)));
  max-width: var(--h5-services-width);
  width: calc(100% - var(--space-9));
  padding: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: var(--z-raised);
}
.is-in-scene .h5-services__panel {
  width: var(--h5-services-panel-width);
  flex: none;
  pointer-events: auto;
}
.is-in-scene .h5-services__panel--left {
  transform: perspective(var(--h5-services-perspective)) var(--h5-services-left-angle);
}
.is-in-scene .h5-services__panel--right {
  transform: perspective(var(--h5-services-perspective)) var(--h5-services-right-angle);
}
@media (max-height: 800px) {
  .is-in-scene .h5-service { min-height: var(--tap-min); padding-block: var(--space-2); }
  .is-in-scene .h5-services__panel { gap: var(--space-2); }
}
@media (max-width: 560px) {
  .h5-services { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .h5-service { transition: none; }
}

.h6-fit-screen .is-in-scene .h5-service {
  min-height: var(--h6-services-height-compact); padding-block: var(--space-2);
}
.h6-fit-screen .is-in-scene .h5-services__panel { gap: var(--space-2); }
.h6-fit-screen .h5-services.is-in-scene {
  top: var(--h6-services-center-y);
  transform: translateY(var(--h5-services-center));
}

/* Stats use the same glass and perspective as the original six service cards. */
.h8-facts .h8-fact {
  grid-template-columns: var(--h8-fact-icon-size) minmax(0, 1fr);
  grid-template-areas: 'icon copy';
  min-height: var(--h8-fact-card-height);
  padding-block: var(--space-3);
}
.h8-facts .h5-services__panel--right .h8-fact {
  grid-template-columns: minmax(0, 1fr) var(--h8-fact-icon-size);
  grid-template-areas: 'copy icon';
}
.h8-fact .h5-service__icon > .h5-icon { width: var(--h8-fact-icon-size); height: var(--h8-fact-icon-size); }
.h8-fact__value { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-1); }
.h8-fact__number { font: var(--h8-fact-number-type); font-variant-numeric: tabular-nums; color: var(--h8-fact-ink); white-space: nowrap; }
.h8-fact__suffix { color: var(--brand-preview-yellow); }
.h8-fact__number--text { font: var(--h8-fact-text-type); }
.h8-fact .h5-service__title { margin: 0; font: var(--h8-fact-title-type); color: var(--h8-fact-ink); }
.h8-fact .h5-service__description { font: var(--h8-fact-copy-type); color: var(--h8-fact-muted); }
.h5-services__panel--right .h8-fact__value { justify-content: flex-end; }
@media (max-height: 800px) and (min-width: 1280px) {
  .h8-facts.is-in-scene .h8-fact { min-height: var(--h8-fact-card-compact); padding-block: var(--space-2); }
  .h8-fact__number { font: var(--h8-fact-number-compact); }
}

@media (max-height: 800px) and (min-width: 1280px) {
  .h8-fact__number--text { font: var(--h8-fact-text-type); }
}

/* Approved AI capabilities, with mirrored alignment around the cube. */
.h8-offering .h5-service__title { font: var(--h8-offering-title-type); min-height: 0; }
.h8-offering .h5-service__description { margin-bottom: 0; font: var(--h8-offering-copy-type); }
@media (max-height: 800px) and (min-width: 1280px) {
  .h8-offering .h5-service__title { font: var(--h8-fact-title-type); }
  .h8-offering .h5-service__description { font: var(--h8-fact-copy-type); }
}

.h8-offering .h8-fact__sample { margin: var(--space-1) 0 0; font: var(--h8-fact-sample-type); color: var(--h8-fact-muted); }

/* Give descriptions the full card width, with mirrored top-row arrows. */
.h8-facts .h8-offering {
  grid-template-columns: var(--h8-fact-icon-size) minmax(0, 1fr) var(--h5-services-arrow-size);
  grid-template-areas: 'icon metric arrow' 'title title title' 'description description description';
  row-gap: var(--space-1);
  column-gap: var(--space-2);
  padding: var(--space-3);
}
.h8-facts .h5-services__panel--right .h8-offering {
  grid-template-columns: var(--h5-services-arrow-size) minmax(0, 1fr) var(--h8-fact-icon-size);
  grid-template-areas: 'arrow metric icon' 'title title title' 'description description description';
}
.h8-offering .h8-fact__value { grid-area: metric; margin: 0; }
.h8-offering .h5-service__title { grid-area: title; }
.h8-offering .h8-offering__benefit { grid-area: description; margin: 0; }
@media (max-height: 800px) and (min-width: 1280px) {
  .h8-facts .h8-offering { padding: var(--space-2); }
  .h8-offering .h8-offering__benefit { font: var(--h8-offering-copy-compact); }
}