/* Public site design layer. Shared by every language and content template. */
:root {
  --site-width: 1200px;
  --page-gutter: max(24px, calc((100vw - var(--site-width)) / 2));
  --section-space: clamp(68px, 7vw, 104px);
  --body-muted: #505866;
  --soft-line: rgba(21, 23, 28, .13);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body main { min-width: 0; }
body main :is(section, article, div, form) { min-width: 0; }
body main :is(p, li, h2, h3, a) { overflow-wrap: break-word; }
body main p { text-wrap: pretty; }
body main :is(h1, h2, h3) { text-wrap: balance; }

/* A predictable visual hierarchy across marketing and editorial pages. */
body main .section-label,
body main .eyebrow {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .11em;
}
body main :is(.intro, .solutions, .insights, .content-page, .support-management, .home-renewals) > .section-label { margin-bottom: 26px; }
body main :is(.intro-copy, .prose, .service-overview__intro, .home-renewals__header, .support-management__header) p { color: var(--body-muted); line-height: 1.75; }
body main .text-link { min-height: 44px; max-width: 100%; min-width: 0; display: inline-flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 700; line-height: 1.4; white-space: normal; }
body main .text-link span { flex: 0 0 auto; }
body main .support-management .text-link { display: inline-block; align-self: flex-start; white-space: normal; }
body main .button,
body .header-cta { min-height: 48px; padding: 13px 22px; font-size: 13px; font-weight: 700; line-height: 1.35; letter-spacing: 0; box-shadow: none; }
body main .button span,
body .header-cta span { font-size: 18px; line-height: 1; }
body main .button:hover,
body .header-cta:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .18); }
body :is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid #e4525b; outline-offset: 4px; }

/* Keep imagery prominent while bringing the next useful section into view. */
body main > .hero { min-height: min(900px, 100svh); }
body main > .page-hero:not(.error-hero),
body main > .solution-hero {
  min-height: clamp(600px, 76svh, 820px);
  padding-top: calc(var(--header-height) + 72px);
  padding-bottom: 88px;
}
body main :is(.hero, .page-hero:not(.error-hero), .solution-hero) h1 {
  max-width: min(17ch, 100%);
  font-size: clamp(42px, 5.4vw, 78px);
  line-height: 1.09 !important;
  margin-bottom: 26px;
}
body main :is(.hero, .page-hero:not(.error-hero), .solution-hero) p:not(.section-label):not(.hero-kicker) { max-width: 62ch; }
body main .page-hero > p:not(.section-label) { color: #d9dde3; }
body main .page-hero--about > p:not(.section-label) { color: #4e535d; }
body main .page-hero > .button { margin-top: 4px; }
body main .hero .hero-content { max-width: 900px; }
body main .hero .hero-copy { max-width: 58ch; }
body main .page-hero:not(.error-hero) .section-label,
body main .solution-hero .section-label { margin-bottom: 28px; }

/* Content columns grow and shrink together, without fixed intrinsic widths. */
body main :is(.intro-grid, .two-col, .service-overview, .solution-body, .ecosystem-project, .specialist-catalogue__header) { gap: clamp(36px, 6vw, 88px); }
body main .service-overview { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
body main .service-overview__intro { top: calc(var(--header-height) + 28px); }
body main .service-group { grid-template-columns: minmax(145px, .65fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); }
body main .service-group h3 { line-height: 1.32; }
body main .service-group li { line-height: 1.65; }
body main .support-management__services,
body main .home-renewals__vendors,
body main .specialist-catalogue__grid { gap: clamp(24px, 3vw, 42px); }
body main .home-renewals article,
body main .support-management article { padding-top: 28px; }
body main .home-renewals article > p,
body main .support-management article p { color: var(--body-muted); }
body main .specialist-tile { border-inline-start: 0 !important; padding-inline: 0 !important; }
body main .specialist-tile:hover { transform: translateY(-2px); }
body main .specialist-tile b { inset-inline-start: 62px; left: auto !important; }

/* Partner cards align captions and logos regardless of translated label length. */
body main .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); }
body main .logo-partner,
body main .logo-partner:nth-child(odd),
body main .logo-partner:nth-child(even) { padding-inline: 0; border-inline: 0; }
body main .logo-stage { height: clamp(190px, 18vw, 255px); }
body main .partner-card-caption { gap: 16px; align-items: baseline; }
body main .partner-card-caption > span { text-align: end; line-height: 1.5; }

/* Enquiry pages have the same readable type and control sizing as the rest of the site. */
body main .form-page { min-height: 0; }
body main .form-page .form-visual,
body main .form-page .form-panel { padding-top: calc(var(--header-height) + 76px); padding-bottom: 80px; }
body main .form-page .form-visual { min-height: 700px; }
body main .form-page .form-visual h1 { font-size: clamp(40px, 4.3vw, 64px); max-width: 14ch; }
body main .form-page .form-panel h2 { font-size: clamp(32px, 3.7vw, 52px); }
body main .enterprise-form { width: 100%; max-width: 600px; gap: 22px; }
body main .enterprise-form label { gap: 9px; font: 700 12px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: #414956; }
body main .enterprise-form :is(input, select, textarea) { width: 100%; min-height: 50px; padding: 12px 14px; background: #fff; border: 1px solid #cbd0d6; border-radius: 2px; font: 500 15px/1.5 var(--sans); color: var(--ink); }
body main .enterprise-form textarea { min-height: 132px; }
body main .enterprise-form :is(input, select, textarea):focus { border-color: var(--red); outline: 2px solid rgba(201, 31, 42, .2); outline-offset: 1px; }
body main .enterprise-form .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Tablet layouts intentionally recompose before text and controls collide. */
@media (max-width: 1040px) {
  body main .service-overview { grid-template-columns: 1fr; }
  body main .service-overview__intro { position: static; max-width: 720px; }
  body main .form-page .form-visual { min-height: 0; }
  body main .form-page .form-visual,
  body main .form-page .form-panel { padding-top: calc(var(--header-height) + 60px); padding-bottom: 64px; }
}
@media (max-width: 800px) {
  :root { --page-gutter: clamp(20px, 5.5vw, 32px); --section-space: clamp(56px, 9vw, 80px); }
  body main > .hero { min-height: 100svh; }
  body main > .page-hero:not(.error-hero),
  body main > .solution-hero { min-height: clamp(520px, 74svh, 710px); padding-top: calc(var(--header-height) + 48px); padding-bottom: 64px; }
  body main :is(.hero, .page-hero:not(.error-hero), .solution-hero) h1 { font-size: clamp(38px, 8.5vw, 60px); max-width: 100%; }
  body main .service-group { grid-template-columns: 1fr; gap: 16px; }
  body main .logo-grid { grid-template-columns: 1fr; }
  body main .logo-stage { height: clamp(180px, 46vw, 240px); }
  body main .form-page .form-visual,
  body main .form-page .form-panel { padding-inline: var(--page-gutter); padding-top: calc(var(--header-height) + 48px); padding-bottom: 56px; }
  body main .form-page .form-panel { padding-top: 60px; }
  body main .form-page .form-visual h1 { font-size: clamp(38px, 8vw, 54px); }
  body main .form-page .form-panel h2 { font-size: clamp(32px, 8vw, 46px); }
}
@media (max-width: 600px) {
  body main .enterprise-form .form-row { grid-template-columns: 1fr; }
  body main .home-renewals__vendors,
  body main .support-management__services { gap: 28px; }
  body main .partner-card-caption { align-items: flex-start; }
  body main .partner-card-caption > span { max-width: 45%; }
  body main .specialist-tile b { inset-inline-start: 42px; }
}
@media (max-height: 620px) and (min-width: 801px) {
  body main > .hero,
  body main > .page-hero:not(.error-hero),
  body main > .solution-hero { min-height: 620px; }
}
@media (prefers-reduced-motion: reduce) {
  body main .specialist-tile { transition: none; }
}