/* Shared About navigation and company pages; existing Invenire tokens and type scale. */
@layer components {
  .site-header .nav-about-group { display: flex; align-items: center; gap: 1px; position: static; }
  .site-header .nav-about-group > a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; line-height: 1.4; }
  .site-header .nav-about-group > a:hover, .site-header .nav-about-group.is-current-section > a { color: #69d9f5; }
  .site-header .nav-about { position: static; }
  .site-header .nav-about > summary { display: grid; place-items: center; min-width: 32px; min-height: 44px; border-radius: 4px; cursor: pointer; list-style: none; }
  .site-header .nav-about > summary::-webkit-details-marker { display: none; }
  .site-header .nav-about > summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .site-header .nav-about[open] > summary svg { transform: rotate(180deg); }
  .site-header .nav-about > summary:hover, .site-header .nav-about[open] > summary { color: #69d9f5; background: #ffffff0a; }
  .about-menu-panel { position: absolute; top: 100%; left: 0; right: 0; background: #021a2e; color: #fff; border-top: 1px solid #25465a; border-bottom: 1px solid #31576d; box-shadow: 0 18px 28px #021a2e24; z-index: 24; max-height: calc(100dvh - var(--site-header-height, 93px) - 12px); overflow-y: auto; overscroll-behavior: contain; }
  .about-menu-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.05fr) minmax(0, 1.15fr); gap: 52px; position: relative; padding-block: 34px 36px; padding-right: 55px; align-items: start; }
  .about-menu-kicker, .about-partner-kicker { display: block; font-size: 11px; font-weight: 600; letter-spacing: .11em; line-height: 1.6; }
  .about-menu-kicker { color: #9edeea; margin-bottom: 16px; }
  .about-overview-link { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; font-size: clamp(1.3rem, 2vw, 1.65rem); letter-spacing: -.035em; font-weight: 550; }
  .about-overview-link:hover { color: #69d9f5; }
  .about-menu-overview > p:last-child { color: #bed0dc; font-size: 14px; line-height: 1.75; margin-top: 12px; max-width: 275px; }
  .about-menu-links { margin: 0; padding: 0; list-style: none; }
  .about-menu-links li + li { border-top: 1px solid #28495c; }
  .about-menu-links a { display: grid; gap: 5px; padding: 13px 12px; min-height: 64px; border-radius: 4px; overflow-wrap: anywhere; }
  .about-menu-links strong { font-size: 15px; font-weight: 550; }
  .about-menu-links a > span { color: #bed0dc; font-size: 12px; line-height: 1.55; }
  .about-menu-links a:hover, .about-menu-links a[aria-current] { color: #69d9f5; background: #ffffff08; }
  .about-partner-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid #5bd1eb; border-radius: 9px; background: #e9f8fc; color: #021a2e; min-width: 0; gap: 13px; transition: background .15s ease; }
  .about-partner-card:hover, .about-partner-card[aria-current] { background: #d4f2f9; }
  .about-partner-card:focus-visible { outline-color: #69d9f5; outline-offset: 5px; }
  .about-partner-kicker { color: #005b7b; }
  .about-partner-card > strong { font-size: 28px; line-height: 1.15; letter-spacing: -.045em; font-weight: 550; }
  .about-partner-detail { color: #345565; font-size: 13px; line-height: 1.7; }
  .about-partner-cta { border-top: 1px solid #b6dce6; padding-top: 15px; display: flex; justify-content: space-between; gap: 15px; font-size: 13px; font-weight: 600; }
  .about-partner-language { font-size: 11px; color: #496671; }
  .about-menu-close { position: absolute; right: 0; top: 24px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid transparent; border-radius: 5px; color: #d9e9f1; background: transparent; }
  .about-menu-close:hover { background: #ffffff0a; border-color: #31576d; }
  .about-menu-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.2; }
  .company-page .breadcrumbs { padding-top: 28px; }
  .company-hero { padding-block: 42px 72px; }
  .company-hero h1 { font-size: clamp(2.8rem, 5vw, 4.8rem); margin: 17px 0 27px; }
  .company-hero h1 span { color: var(--primary); }
  .company-lead { font-size: 21px; line-height: 1.6; max-width: 850px; color: var(--muted); }
  .company-section { padding-block: 75px; }
  .company-values-wrap { background: var(--surface); }
  .company-value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px; margin-top: 30px; }
  .company-value-grid article { border-top: 2px solid var(--primary); padding-top: 26px; }
  .company-value-grid h2 { font-size: 31px; margin-bottom: 24px; }
  .company-value-grid h3 { font-size: 19px; letter-spacing: -.03em; line-height: 1.4; margin-bottom: 13px; }
  .company-value-grid p, .company-responsibility-grid p, .company-prose p { color: var(--muted); font-size: 15px; line-height: 1.85; }
  .company-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 75px; }
  .company-split h2 { margin-top: 15px; max-width: 490px; }
  .company-prose p + p { margin-top: 18px; }
  .company-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 26px; margin-top: 26px; }
  .company-actions .text-link { color: var(--primary); min-height: 44px; }
  .company-callout { border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 50px; padding-block: 48px 30px; }
  .company-callout > div { max-width: 760px; }
  .company-callout h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
  .company-callout p { color: var(--muted); margin-top: 18px; }
  .company-callout .button { flex-shrink: 0; }
  .company-callout .company-actions { flex-shrink: 0; margin: 0; }
  .company-responsibility-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 65px; margin-top: 38px; }
  .company-responsibility-grid article { border-top: 1px solid var(--line); padding-top: 25px; }
  .company-responsibility-grid h3 { font-size: 25px; line-height: 1.25; margin-bottom: 17px; }
}
@layer responsive {
  @media (min-width: 1024px) {
    .site-header .nav-about-group { flex-shrink: 0; }
  }
  @media (max-width: 1023px) {
    .site-header .nav-about-group { display: block; position: relative; }
    .site-header .nav-about-group > a { padding: 12px 4px; min-height: 48px; font-size: 16px; max-width: calc(100% - 54px); }
    .site-header .nav-about > summary { position: absolute; top: 0; right: 0; width: 48px; height: 48px; }
    .about-menu-panel { position: static; border: 1px solid #28495c; border-radius: 6px; box-shadow: none; max-height: none; overflow: visible; margin: 3px 0 12px; }
    .about-menu-inner.container { width: 100%; grid-template-columns: 1fr; gap: 20px; padding: 22px 20px; }
    .about-menu-overview { padding-right: 34px; }
    .about-menu-kicker { margin-bottom: 3px; font-size: 10px; }
    .about-overview-link { font-size: 20px; }
    .about-menu-overview > p:last-child { max-width: none; margin-top: 4px; font-size: 13px; }
    .about-menu-links a { padding-inline: 0; }
    .about-partner-card { padding: 20px; }
    .about-menu-close { top: 14px; right: 10px; }
    .company-callout { flex-direction: column; align-items: flex-start; gap: 25px; }
    .company-split { gap: 40px; }
  }
  @media (max-width: 760px) {
    .company-hero { padding-block: 30px 50px; }
    .company-lead { font-size: 18px; }
    .company-section { padding-block: 50px; }
    .company-value-grid, .company-split, .company-responsibility-grid { grid-template-columns: 1fr; gap: 32px; }
    .company-value-grid h2 { margin-bottom: 18px; }
    .company-callout .company-actions { flex-shrink: 1; }
  }
  @media (prefers-reduced-motion: reduce) { .about-partner-card { transition: none; } }
  @media print { .about-menu-panel { display: none; } .company-section { padding-block: 30px; } }
}