/* Round six (23 Oct 2026): the pitch deck's colour code on the Offerings pages, the tool names as headings, and the
   booking panel on the contact page. Each group colour comes with the group's name, never on its own.
   product: the brand's logo blue; tech: violet; company: green. --g for shapes and icons, --g-ink for text on light
   ground (AA), --g-light on dark ground. */
.g-product { --g: #0476C7; --g-ink: #0466AD; --g-light: #8CC4F8; --g-tint: #EEF3F9; }
.g-tech { --g: #6A4BD6; --g-ink: #5A3BC4; --g-light: #C9BBF7; --g-tint: #F1EEFC; }
.g-company { --g: #1E9A62; --g-ink: #157A4C; --g-light: #9EDCBB; --g-tint: #EAF6F0; }

/* the group chip: filled with the group colour, white text */
.m .g-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px;
  background: var(--g-ink); color: #fff; font: 600 12px/1 var(--f-body); letter-spacing: .02em; white-space: nowrap; }
.m .g-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: .85; }

/* Compliance Suite (user, 23 Oct 2026): one heading per tool, its name, in the group colour, with no icon */
.m .tool-sec .ts-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.m .tool-sec .ts-name { margin: 0 0 22px; font: 600 44px/1.08 var(--f-display); letter-spacing: -0.02em; color: var(--g-ink); text-wrap: balance; }
.m .tool-sec .ts-name .ts-abbr { margin-left: 6px; font: 500 16px/1 var(--f-mono); letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
/* the carousel tabs: a short bar in the group colour under each tool's abbreviation */
.m .sw-tab.g-product, .m .sw-tab.g-tech, .m .sw-tab.g-company { box-shadow: inset 0 -3px 0 var(--g); }

/* Services: the index on the dark hero, and each service row */
.m .svc-index li[class^="g-"] .si-ico { color: var(--g-light); }
.m .svc-row .sr-ico { color: var(--g); }
.m .svc-row .sr-head .g-chip { justify-self: start; align-self: start; width: max-content; margin-bottom: 12px; }
.m .svc-row .sr-h { color: var(--ink); }
.m .svc-row .sr-k { color: var(--g-ink); }

/* Contact: "Consult with us" books a call */
.m .book-panel { margin-top: 28px; padding: 28px 32px; background: var(--tint); border-left: 4px solid var(--brand); }
.m .book-panel p { margin: 0 0 18px; max-width: 46ch; font-size: 18px; line-height: 1.5; color: var(--body); }
.m .book-panel[hidden], .m .demo-grid[hidden] { display: none; }

@media (max-width: 760px) {
  .m .tool-sec .ts-name { font-size: 32px; }
}

/* The Offerings tab matches the other tabs at every width: it was 13px against their 12.5px (11.5px between 1321 and
   1480px); and from 1320px down it takes the drawer style the other links already had (it switched only at 1100px). */
.r2.m .nav-parent { font-size: 12.5px; }
@media (max-width: 1480px) and (min-width: 1321px) { .r2.m .nav-parent { font-size: 11.5px; letter-spacing: .05em; } }
@media (max-width: 1320px) {
  .r2.m .nav-group { display: block; }
  .r2.m .nav-parent { display: block; width: 100%; text-align: left; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 20px; letter-spacing: .02em; text-transform: none; font-family: var(--f-body); }
  .r2.m .nav-parent::after { display: none; }
  .r2.m .nav-sub, .r2.m .nav-group.is-open .nav-sub { display: block; position: static; min-width: 0; padding: 0 0 0 18px; background: none; border: 0; box-shadow: none; border-radius: 0; }
  .r2.m .main-nav .nav-sub a { padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); border-radius: 0; color: #fff; font-size: 18px; }
  .r2.m .main-nav .nav-sub a:hover { background: none; }
  .r2.m .main-nav .nav-sub a[aria-current] { background: none; text-decoration: underline; text-underline-offset: 5px; }
}

/* Home: the two kinds of SMEs on the warm ground, so it no longer runs on from the dark hero (23 Oct 2026) */
.m .kinds-band .intro { color: var(--body); }
.m .kinds-band .kind { border: 1px solid #E4DCCB; box-shadow: 0 10px 30px rgba(21, 23, 29, .06); }
.m .kinds-band .kind:hover { box-shadow: 0 22px 48px rgba(21, 23, 29, .14); }

/* ---------------------------------------------------------------- About (round six): the same copy, the other pages' design */
.page-about .ab-k { display: block; margin-bottom: 18px; font: 500 13px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.page-about .ab-story-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 80px; align-items: center; }
.page-about .ab-story-copy .h-section { margin-bottom: 30px; }
.page-about .ab-story-p p { margin: 0 0 18px; max-width: 34em; font-size: 19px; line-height: 1.62; color: var(--body); }
.page-about .ab-story-img img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 26px; box-shadow: 0 34px 70px rgba(0, 31, 71, .2); }
/* mission and vision on two photographs (user, 23 Oct: text on blue "still feels flat"): the mission over a small
   workshop, the vision over world trade, joined by an arrow. Left aligned: justified display text left wide gaps. */
.page-about .ab-mv { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 1fr; background: #001F47; }
.page-about .ab-mv-panel { position: relative; display: flex; align-items: flex-end; min-height: 700px; overflow: hidden; isolation: isolate;
  padding: 120px 88px 104px max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter))); }
.page-about .ab-mv-panel--vision { padding: 120px max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter))) 104px 88px; border-left: 1px solid rgba(255, 255, 255, .14); }
.page-about .ab-mv-panel > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.page-about .ab-mv-panel::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0, 22, 52, .46) 0%, rgba(0, 22, 52, .8) 50%, rgba(0, 22, 52, .96) 100%); }
.page-about .ab-mv-panel--vision::before { background: linear-gradient(180deg, rgba(0, 59, 122, .5) 0%, rgba(0, 44, 97, .84) 50%, rgba(0, 31, 71, .97) 100%); }
.page-about .ab-mv-copy { max-width: 580px; }
.page-about .ab-mv-h { margin: 0 0 26px; font: 600 50px/1.05 var(--f-display); letter-spacing: -0.02em; color: #fff; }
.page-about .ab-mv-h em { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.12em; color: #8CC4F8; }
.page-about .ab-mv-copy p { margin: 0; font: 500 28px/1.38 var(--f-display); letter-spacing: -0.01em; color: rgba(255, 255, 255, .95);
  text-align: left; text-align-last: auto; hyphens: none; -webkit-hyphens: none; text-wrap: pretty; }
.page-about .ab-mv-copy p em { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.1em; line-height: 1; color: #8CC4F8; }
.page-about .ab-mv-arrow { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border-radius: 50%; background: #fff; color: var(--brand); box-shadow: 0 18px 44px rgba(0, 0, 0, .35); }
/* the milestones as cards on a drawn line that ends in today: only two dates are milestones (user, 23 Oct) */
.page-about .ab-line { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 8px 0 0; padding: 0; list-style: none; }
.page-about .ab-line::before { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: linear-gradient(90deg, rgba(0, 59, 122, .28) 88%, transparent); }
.page-about .ab-line > li { position: relative; display: flex; flex-direction: column; padding-top: 46px; }
.page-about .ab-line > li::before { content: ''; position: absolute; left: 30px; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 6px var(--warm); }
.page-about .ab-line > .ab-today::before { box-sizing: border-box; background: #fff; border: 5px solid var(--brand); }
.page-about .ab-c { position: relative; flex: 1; padding: 30px 30px 32px; border: 1px solid #E4DCCB; border-radius: 22px; background: #fff; box-shadow: 0 12px 32px rgba(21, 23, 29, .05); }
.page-about .ab-c::before { content: ''; position: absolute; left: 34px; top: -7px; width: 12px; height: 12px; background: #fff; border-left: 1px solid #E4DCCB; border-top: 1px solid #E4DCCB; transform: rotate(45deg); }
/* the tag sits above the date, in the flow: beside it, longer languages ran into the date ("Gefördertes Projekt") */
.page-about .ab-tag { display: block; margin-bottom: 14px; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.page-about .ab-d { display: block; margin-bottom: 14px; font: 600 40px/1 var(--f-display); letter-spacing: -0.02em; color: var(--brand); }
.page-about .ab-c p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--body); text-align: left; text-align-last: auto; hyphens: none; }
.page-about .ab-today .ab-c { border-color: transparent; background: linear-gradient(150deg, #003B7A 0%, #001F47 100%); box-shadow: 0 22px 48px rgba(0, 31, 71, .28); }
.page-about .ab-today .ab-c::before { border: 0; background: #003B7A; }
.page-about .ab-today .ab-d { color: #fff; }
/* no tag on today (it only repeated "Today"): the heading keeps the height of the tagged dates beside it */
.page-about .ab-today .ab-d { margin-top: calc(11.5px * 1.3 + 14px); }
.page-about .ab-now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); }
.page-about .ab-now b { display: block; font: 600 46px/1 var(--f-display); letter-spacing: -0.02em; color: #fff; }
/* no count-up here: its digit columns are as wide as the widest digit, which split 12 into 1 2 */
.page-about .ab-now .ab-now-l { display: block; margin-top: 8px; font-size: 14px; line-height: 1.35; color: #BBD3F3; }
/* the objectives as cards */
.page-about .ab-towards-head { margin-top: 96px; }
.page-about .ab-obj { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.page-about .ab-obj article { position: relative; overflow: hidden; padding: 32px 28px 32px; border: 1px solid #E4DCCB; border-radius: 22px; background: #fff; box-shadow: 0 12px 32px rgba(21, 23, 29, .05); }
.page-about .ab-obj article::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--brand); }
.page-about .ab-obj h3 { margin: 0 0 14px; font: 600 23px/1.18 var(--f-display); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.page-about .ab-obj p { margin: 0; font-size: 15.5px; line-height: 1.56; color: var(--body); text-align: left; text-align-last: auto; hyphens: none; }
/* the team in cards: the three directors, then the two who work on product data, centred under them */
.page-about .ab-team { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px; }
.page-about .ab-member { grid-column: span 2; }
.page-about .ab-member:nth-child(4) { grid-column: 2 / span 2; }
.page-about .ab-member { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--card-line); border-radius: 24px; background: #fff;
  box-shadow: 0 14px 36px rgba(0, 31, 71, .07); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.page-about .ab-member:hover { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(0, 31, 71, .14); }
.page-about .ab-member img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: center top; }
.page-about .ab-member-body { padding: 26px 28px 30px; }
.page-about .ab-member h3 { margin: 0 0 6px; font: 600 24px/1.2 var(--f-display); color: var(--ink); }
.page-about .ab-role { display: block; margin-bottom: 16px; font: 500 12.5px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.page-about .ab-member p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--body); text-align: left; text-align-last: auto; hyphens: none; }
/* governance: the documents in a card */
.page-about .ab-gov-card { padding: 30px 32px; border: 1px solid #E4DCCB; border-radius: 22px; background: #fff; }
.page-about .close-band .intro a { color: #fff; }
@media (max-width: 1100px) {
  .page-about .ab-story-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .page-about .ab-story-img img { aspect-ratio: 16 / 10; }
  .page-about .ab-obj, .page-about .ab-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-about .ab-member, .page-about .ab-member:nth-child(4) { grid-column: auto; }
  .page-about .ab-mv-panel { min-height: 620px; padding: 96px 56px 88px var(--gutter); }
  .page-about .ab-mv-panel--vision { padding: 96px var(--gutter) 88px 56px; }
  .page-about .ab-mv-h { font-size: 40px; }
  .page-about .ab-mv-copy p { font-size: 23px; }
  .page-about .ab-now b { font-size: 38px; }
}
@media (max-width: 900px) {
  .page-about .ab-mv { grid-template-columns: minmax(0, 1fr); }
  .page-about .ab-mv-panel, .page-about .ab-mv-panel--vision { min-height: 540px; padding: 96px var(--gutter) 72px; }
  .page-about .ab-mv-panel--vision { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  .page-about .ab-mv-arrow { transform: rotate(90deg); }
  .page-about .ab-line { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .page-about .ab-line::before { left: 9px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(rgba(0, 59, 122, .28) 88%, transparent); }
  .page-about .ab-line > li { padding: 0 0 0 44px; }
  .page-about .ab-line > li::before { left: 0; top: 34px; }
  .page-about .ab-c::before { display: none; }
}
@media (max-width: 700px) {
  .page-about .ab-obj, .page-about .ab-team { grid-template-columns: minmax(0, 1fr); }
  .page-about .ab-mv-h { font-size: 34px; }
  .page-about .ab-mv-copy p { font-size: 21px; }
  .page-about .ab-d { font-size: 34px; }
}