/* About Hub V1 owns page composition and atmosphere only.
 * Public PageModule CSS remains the sole owner of Cards, Feed, Process, CTA,
 * media ratios, surfaces, responsive columns and internal interaction. */
.about-hub-v1-page {
  background: #f7fafc;
}

@media (max-width: 1199px) {
  body.about-hub-v1-page {
    min-width: 0;
  }
}

.about-hub-v1 {
  --about-hub-ink: var(--ui-color-text-strong, #0f172a);
  --about-hub-muted: var(--ui-color-text-muted, #64748b);
  color: var(--about-hub-ink);
  background:
    radial-gradient(
      circle at 92% 10%,
      color-mix(in srgb, var(--ui-color-accent, #06b6d4) 7%, transparent),
      transparent 30rem
    ),
    #f7fafc;
}

/* Page-level interpretation of the public inherit background. Explicit public
 * section background choices remain the final owner. */
.about-hub-v1 > .page-module:not(#about-hub-cta) {
  --page-module-page-background: var(--ui-section-bg-ambient-wash);
}

.about-hub-v1 > .page-module:is(
  #about-hub-organization_summary,
  #about-hub-project_coverage,
  #about-hub-core_capabilities,
  #about-hub-credentials,
  #about-hub-service_capabilities,
  #about-hub-development_summary,
  #about-hub-pathways
) {
  --ui-section-ambient-x: 88%;
  --ui-section-ambient-y: 10%;
}

.about-hub-v1 > .page-module:is(
  #about-hub-enterprise_facts,
  #about-hub-brand_relationships,
  #about-hub-customer_case_proof,
  #about-hub-team_technical
) {
  --ui-section-ambient-x: 12%;
  --ui-section-ambient-y: 12%;
}

/* Public icon-feature cards preserve a fixed 56px holder for established
 * consumers. About exposes the canonical icon-size control for Team &
 * Technical Capability, so this Section bridges that saved value to the
 * holder while preserving the established 22px / 56px default. */
.about-hub-v1 #about-hub-team_technical.is-variant-icon-feature {
  --page-module-icon-feature-holder-size: clamp(
    50px,
    calc(var(--page-module-icon-size, 22px) + 34px),
    82px
  );
}

/* The optional classic Company pathway Variant carries the proven hierarchy
 * from the former About page onto the Public default Card DOM. Public Cards
 * still owns the grid, column controls, card surface, hover and typography;
 * About only orders its structural metadata and adds the directory divider. */
.about-hub-v1 #about-hub-pathways.is-variant-default {
  --page-module-icon-holder-size: clamp(
    56px,
    calc(var(--page-module-icon-size, 22px) + 42px),
    90px
  );
}

.about-hub-v1 #about-hub-pathways.is-variant-default .page-module-card__icon {
  order: 1;
}

.about-hub-v1 #about-hub-pathways.is-variant-default .page-module-card__eyebrow {
  order: 2;
}

.about-hub-v1 #about-hub-pathways.is-variant-default .page-module-card__title {
  order: 3;
}

.about-hub-v1 #about-hub-pathways.is-variant-default .page-module-card__description {
  order: 4;
}

.about-hub-v1 #about-hub-pathways.is-variant-default .page-module-tags {
  order: 5;
  margin-top: 20px;
  margin-bottom: 0;
}

.about-hub-v1 #about-hub-pathways.is-variant-default .page-module-card__link {
  order: 6;
  width: 100%;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--ui-color-border, #e2e8f0);
  box-sizing: border-box;
}

.about-hub-v1 #about-hub-pathways.is-variant-default .page-module-card__link[data-entry-style="minimal"]::after {
  content: none;
}

/* About media pathways keep the entity reading order consistent with the
 * classic directory: role and title first, then explanation and live Sort
 * keywords, followed by the real destination. Public Media Cards continue to
 * own media, spacing, typography, entry styling and responsive columns. */
.about-hub-v1 #about-hub-pathways.is-variant-media .page-module-card__eyebrow {
  order: 1;
}

.about-hub-v1 #about-hub-pathways.is-variant-media .page-module-card__title {
  order: 2;
}

.about-hub-v1 #about-hub-pathways.is-variant-media .page-module-card__description {
  order: 3;
}

.about-hub-v1 #about-hub-pathways.is-variant-media .page-module-tags {
  order: 4;
}

.about-hub-v1 #about-hub-pathways.is-variant-media .page-module-card__link {
  order: 5;
}

/* Brand identity images are compact signatures rather than editorial media.
 * Public vertical Cards keep card/grid/column ownership; About only adapts the
 * media stage so a four-column directory does not waste half the reading width
 * on a permanent left Logo rail. */
.about-hub-v1 #about-hub-brand_relationships .page-module-card__media {
  display: flex;
  height: 78px;
  min-height: 78px;
  padding: 16px 20px 0;
  align-items: center;
  justify-content: flex-start;
  aspect-ratio: auto;
  box-sizing: border-box;
  background: transparent;
}

.about-hub-v1 #about-hub-brand_relationships .page-module-card__media img {
  width: auto;
  max-width: min(112px, calc(100% - 128px));
  height: auto;
  max-height: 46px;
  object-fit: contain;
  object-position: left center;
}

/* Relationship roles are page-owned business presentation, not Brand facts.
 * Their text remains in About config while the linked Brand keeps owning its
 * name, URL and Logo. The compact badge shares the Logo row without changing
 * the Public Cards grid or card surface. */
.about-hub-v1 #about-hub-brand_relationships .about-brand-relationship-badge {
  position: absolute;
  top: -45px;
  right: 20px;
  display: inline-flex;
  min-height: 28px;
  margin: 0;
  padding: 5px 9px;
  align-items: center;
  gap: 6px;
  color: #2563eb;
  background: #eaf2ff;
  border: 0;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  box-sizing: border-box;
}

.about-hub-v1 #about-hub-brand_relationships .about-brand-relationship-badge i {
  width: 13px;
  flex: 0 0 13px;
  text-align: center;
  font-size: 12px;
}

/* The frontend deliberately loads a small Font Awesome 4.7 selector subset.
 * These About-only mappings expose the two glyphs used by the saved badge
 * variants without expanding or changing the public icon subset. */
.about-hub-v1 #about-hub-brand_relationships
  .about-brand-relationship-badge .fa-tag::before {
  content: "\f02b";
}

.about-hub-v1 #about-hub-brand_relationships
  .about-brand-relationship-badge .fa-diamond::before {
  content: "\f219";
}

.about-hub-v1 #about-hub-brand_relationships
  .about-brand-relationship-badge[data-relationship-badge-style="partner-gold"] {
  color: #f59e0b;
  background: #fff7dc;
}

.about-hub-v1 #about-hub-brand_relationships
  .about-brand-relationship-badge[data-relationship-badge-style="diamond-violet"] {
  color: #8b5cf6;
  background: #eee9ff;
}

.about-hub-v1 #about-hub-brand_relationships .about-hub-v1__brand-trademark-notice {
  margin: 22px auto 0;
  color: var(--about-hub-muted, #64748b);
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

/* Public Cards owns the credential caption size, color and one-line clamp.
 * About only closes the media-card trailing margin and centers this evidence
 * caption directly below its image. */
.about-hub-v1 #about-hub-credentials .page-module-card__description {
  margin: 0;
  text-align: center;
}

.about-hub-v1 #about-hub-credentials
  .page-module-card__media[data-about-credential-lightbox-trigger] {
  cursor: zoom-in;
}

.about-hub-v1 #about-hub-credentials
  .page-module-card__media[data-about-credential-lightbox-trigger]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--page-module-accent, var(--ui-color-accent)) 52%, transparent);
  outline-offset: 4px;
}

body.about-hub-v1-credential-lightbox-open {
  overflow: hidden;
}

.about-hub-v1-credential-lightbox {
  position: fixed;
  z-index: 10020;
  inset: 0;
  display: grid;
  padding: clamp(18px, 4vw, 52px);
  place-items: center;
  background: rgba(7, 15, 29, .86);
  backdrop-filter: blur(10px);
}

.about-hub-v1-credential-lightbox[hidden] {
  display: none;
}

.about-hub-v1-credential-lightbox__frame {
  position: relative;
  display: flex;
  width: min(100%, 1180px);
  height: min(88vh, 900px);
  padding: clamp(12px, 2vw, 22px);
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--ui-radius-xl, 24px);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .38);
}

.about-hub-v1-credential-lightbox__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.about-hub-v1-credential-lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  width: 42px;
  height: 42px;
  padding: 0;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(15, 23, 42, .82);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .22);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}

.about-hub-v1-credential-lightbox__close:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-color-accent, #06b6d4) 72%, #fff);
  outline-offset: 3px;
}

.about-hub-v1__breadcrumb-bar {
  position: relative;
  z-index: 3;
}

.about-hub-v1__hero {
  position: relative;
  isolation: isolate;
  min-height: var(--about-hub-hero-min-height, 520px);
  overflow: hidden;
  color: var(--ui-color-text, #334155);
  background: #071827;
}

.about-hub-v1__hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.about-hub-v1__hero-image-layer {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: flex;
  overflow: hidden;
  opacity: calc(1 - var(--about-hub-hero-overlay-strength, .78));
  pointer-events: none;
}

.about-hub-v1__hero-image {
  display: block;
  width: 100%;
  height: auto;
  align-self: stretch;
  object-fit: cover;
  object-position: var(--about-hub-hero-image-position, center);
}

.about-hub-v1__hero[data-section-background="inherit"]::after {
  background:
    linear-gradient(
      90deg,
      rgba(4, 15, 27, .97) 0%,
      rgba(4, 20, 31, .88) 54%,
      rgba(4, 20, 31, .5) 100%
    ),
    radial-gradient(
      circle at 72% 28%,
      color-mix(in srgb, var(--about-hub-hero-accent, #06b6d4) 18%, transparent),
      transparent 26rem
    );
}

.about-hub-v1__hero[data-section-background="white"] {
  background: var(--ui-color-surface, #fff);
}

.about-hub-v1__hero[data-section-background="surface"] {
  background: var(--ui-color-surface-muted, #f8fafc);
}

.about-hub-v1__hero[data-section-background="accent-soft"] {
  background: color-mix(
    in srgb,
    var(--about-hub-hero-accent, #06b6d4) 10%,
    var(--ui-color-surface, #fff)
  );
}

.about-hub-v1__hero[data-section-background="custom"][data-section-background-fill="solid"] {
  background: var(--about-hub-hero-background-start, #fff);
}

.about-hub-v1__hero[data-section-background="custom"][data-section-background-fill="gradient"] {
  background: linear-gradient(
    var(--about-hub-hero-background-angle, 120deg),
    var(--about-hub-hero-background-start, #071827),
    var(--about-hub-hero-background-end, #0b3340)
  );
}

.about-hub-v1__hero[data-foreground="light"] {
  --about-hub-hero-title-inherit: var(--ui-color-on-accent, #fff);
  --about-hub-hero-lead-inherit: #e2e8f0;
  --about-hub-hero-description-inherit: rgba(255, 255, 255, .78);
  color: #f8fafc;
}

.about-hub-v1__hero[data-foreground="dark"] {
  --about-hub-hero-title-inherit: var(--ui-color-text-strong, #0f172a);
  --about-hub-hero-lead-inherit: var(--ui-color-text-secondary, #334155);
  --about-hub-hero-description-inherit: var(--ui-color-text-muted, #64748b);
  color: var(--ui-color-text, #334155);
}

.about-hub-v1__hero[data-hero-image-position="auto"] {
  --about-hub-hero-image-position: 72% center;
}

.about-hub-v1__hero[data-hero-image-position="left"] {
  --about-hub-hero-image-position: left center;
}

.about-hub-v1__hero[data-hero-image-position="center"] {
  --about-hub-hero-image-position: center;
}

.about-hub-v1__hero[data-hero-image-position="right"] {
  --about-hub-hero-image-position: right center;
}

.about-hub-v1__hero-grid {
  display: grid;
  min-height: inherit;
  padding-top: clamp(56px, 6.5vw, 84px);
  padding-bottom: clamp(56px, 6.5vw, 84px);
  align-items: center;
}

.about-hub-v1__hero .ui-eyebrow {
  --ui-eyebrow-resolved-color: var(
    --about-hub-hero-eyebrow-color,
    var(--about-hub-hero-accent, #06b6d4)
  );
  --page-module-eyebrow-size: var(--about-hub-hero-eyebrow-size, 12px);
}

.about-hub-v1__hero-copy {
  width: min(100%, 850px);
  min-width: 0;
  justify-self: start;
  text-align: left;
}

.about-hub-v1__hero[data-title-align="center"] .about-hub-v1__hero-copy {
  justify-self: center;
  margin-inline: auto;
  text-align: center;
}

.about-hub-v1__hero[data-title-align="right"] .about-hub-v1__hero-copy {
  justify-self: end;
  margin-left: auto;
  text-align: right;
}

.about-hub-v1__hero h1 {
  max-width: 100%;
  margin: 18px 0 20px;
  color: var(--about-hub-hero-title-color, var(--about-hub-hero-title-inherit, #f8fafc));
  font-size: min(var(--about-hub-hero-title-size, 50px), clamp(40px, 5vw, 66px));
  font-weight: var(--about-hub-hero-title-weight, 700);
  line-height: 1.35;
  letter-spacing: -.04em;
}

.about-hub-v1__hero-lead {
  max-width: 38em;
  margin: 0 0 14px;
  color: var(--about-hub-hero-title-color, var(--about-hub-hero-title-inherit, #f8fafc));
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
}

.about-hub-v1__hero-description {
  max-width: 62em;
  margin: 0;
  color: var(--about-hub-hero-description-color, var(--about-hub-hero-description-inherit, #cbd5e1));
  font-size: var(--about-hub-hero-description-size, 16px);
  line-height: 1.9;
}

.about-hub-v1__hero[data-title-align="center"] :is(
  h1,
  .about-hub-v1__hero-lead,
  .about-hub-v1__hero-description
) {
  margin-left: auto;
  margin-right: auto;
}

.about-hub-v1__hero[data-title-align="right"] :is(
  h1,
  .about-hub-v1__hero-lead,
  .about-hub-v1__hero-description
) {
  margin-left: auto;
  margin-right: 0;
}

.about-hub-v1__hero-actions {
  --ui-color-accent: var(--about-hub-hero-action-color, var(--about-hub-hero-accent, var(--theme-accent, #06b6d4)));
  --ui-color-on-accent: var(--about-hub-hero-action-contrast, #fff);
  --ui-color-accent-deep: color-mix(
    in srgb,
    var(--about-hub-hero-action-color, var(--about-hub-hero-accent, var(--theme-accent, #06b6d4))) 78%,
    #0f172a
  );
  --ui-color-accent-soft: color-mix(
    in srgb,
    var(--about-hub-hero-action-color, var(--about-hub-hero-accent, var(--theme-accent, #06b6d4))) 12%,
    transparent
  );
  --ui-color-border-strong: color-mix(
    in srgb,
    var(--about-hub-hero-action-color, var(--about-hub-hero-accent, var(--theme-accent, #06b6d4))) 38%,
    var(--ui-color-border, #e2e8f0)
  );
  --ui-action-radius: var(--about-hub-hero-action-radius, var(--ui-radius-sm));
  display: flex;
  margin-top: 34px;
  flex-wrap: wrap;
  gap: 12px;
}

.about-hub-v1__hero[data-foreground="light"] .about-hub-v1__hero-actions :is(
  .ui-button--outline,
  .ui-button--ghost,
  .ui-button--text
) {
  color: color-mix(in srgb, var(--about-hub-hero-action-color, var(--about-hub-hero-accent, #06b6d4)) 28%, #fff);
}

.about-hub-v1__hero[data-foreground="light"] .about-hub-v1__hero-actions .ui-button--outline {
  background: rgba(255, 255, 255, .06);
  border-color: color-mix(
    in srgb,
    var(--about-hub-hero-action-color, var(--about-hub-hero-accent, #06b6d4)) 44%,
    #fff
  );
}

.about-hub-v1__hero[data-title-align="center"] .about-hub-v1__hero-actions {
  justify-content: center;
}

.about-hub-v1__hero[data-title-align="right"] .about-hub-v1__hero-actions {
  justify-content: flex-end;
}

@media (max-width: 767px) {
  .about-hub-v1__hero-grid {
    padding-top: 48px;
    padding-bottom: 54px;
  }

  .about-hub-v1__hero[data-mobile-title-align="left"] .about-hub-v1__hero-copy {
    justify-self: start;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
  }

  .about-hub-v1__hero[data-mobile-title-align="left"] :is(
    h1,
    .about-hub-v1__hero-lead,
    .about-hub-v1__hero-description
  ) {
    margin-left: 0;
    margin-right: auto;
  }

  .about-hub-v1__hero[data-mobile-title-align="left"] .about-hub-v1__hero-actions {
    justify-content: flex-start;
  }

  .about-hub-v1__hero[data-mobile-title-align="center"] .about-hub-v1__hero-copy {
    justify-self: center;
    margin-inline: auto;
    text-align: center;
  }

  .about-hub-v1__hero[data-mobile-title-align="center"] :is(
    h1,
    .about-hub-v1__hero-lead,
    .about-hub-v1__hero-description
  ) {
    margin-left: auto;
    margin-right: auto;
  }

  .about-hub-v1__hero[data-mobile-title-align="center"] .about-hub-v1__hero-actions {
    justify-content: center;
  }

  

  .about-hub-v1__hero-lead {
    font-size: 18px;
  }

  .about-hub-v1__hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .about-hub-v1__hero-actions .ui-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-hub-v1__hero {
    scroll-behavior: auto;
  }
}

/* Mobile H1 scale: preserve smaller editor values; desktop/tablet stay unchanged. */
@media (max-width: 767px) {
  .about-hub-v1__hero h1 {
    font-size: min(var(--about-hub-hero-title-size, 50px), 26px);
    line-height: 1.4;
  }
}

@media (max-width: 360px) {
  .about-hub-v1__hero h1 {
    font-size: min(var(--about-hub-hero-title-size, 50px), 24px);
  }
}

/* Brand semantic rows: share actual chip/title heights within each visual row.
 * This About composition keeps Public Cards responsible for columns, surface,
 * typography and hover. Empty tracks collapse; no label count/height limit.
 * Single-column cards use their own content heights; mobile two-column cards
+ * share rows just like desktop. */
@supports (grid-template-rows: subgrid) {
  .about-hub-v1 #about-hub-brand_relationships .page-module__grid--cards {
    row-gap: 0;
    margin-bottom: calc(-1 * var(--page-module-grid-gap));
  }

  .about-hub-v1 #about-hub-brand_relationships .page-module-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: span 6;
    row-gap: 0;
    height: auto;
    min-height: 0;
    margin-bottom: var(--page-module-grid-gap);
  }

  .about-hub-v1 #about-hub-brand_relationships .page-module-card__media {
    grid-row: 1;
  }

  .about-hub-v1 #about-hub-brand_relationships .page-module-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: 2 / span 5;
    row-gap: 0;
    align-items: start;
    min-height: 0;
  }

  .about-hub-v1 #about-hub-brand_relationships .page-module-card__eyebrow { grid-row: 1; }
  .about-hub-v1 #about-hub-brand_relationships .page-module-tags { grid-row: 2; }
  .about-hub-v1 #about-hub-brand_relationships .page-module-card__title { grid-row: 3; }
  .about-hub-v1 #about-hub-brand_relationships .page-module-card__description { grid-row: 4; }
  .about-hub-v1 #about-hub-brand_relationships .page-module-card__link { grid-row: 5; }
}

/* Independently maintained partner logos: contain the complete logo, never crop it. */
.about-hub-v1 #about-hub-partner_brands .page-module-card__media {
  padding: 16px;
  box-sizing: border-box;
  background: transparent;
}
.about-hub-v1 #about-hub-partner_brands .page-module-card__media img {
  object-fit: contain;
  object-position: center;
}