html.vdf-compact-page-headers {
  --vdf-compact-banner-height: 228px;
  --vdf-compact-banner-height-mobile: 244px;
}

/* Shared illustrated banners */
html.vdf-compact-page-headers .quote-flow-hero,
html.vdf-compact-page-headers .requests-hero,
html.vdf-compact-page-headers .profile-hero,
html.vdf-compact-page-headers .contact-hero,
html.vdf-compact-page-headers .realisations-hero,
html.vdf-compact-page-headers body.technical-index .technical-header {
  min-height: var(--vdf-compact-banner-height) !important;
  padding: 18px 24px 22px !important;
}

html.vdf-compact-page-headers .quote-flow-logo {
  width: 96px !important;
  height: 72px !important;
  margin-bottom: 5px !important;
}

html.vdf-compact-page-headers .requests-logo,
html.vdf-compact-page-headers .profile-logo,
html.vdf-compact-page-headers .realisations-logo,
html.vdf-compact-page-headers .contact-hero .logo-container img {
  width: 108px !important;
  height: 82px !important;
  max-width: 108px !important;
  max-height: 82px !important;
  margin-bottom: 5px !important;
}

html.vdf-compact-page-headers .contact-hero .logo-container {
  margin-bottom: 5px !important;
}

html.vdf-compact-page-headers .quote-flow-eyebrow,
html.vdf-compact-page-headers .requests-eyebrow,
html.vdf-compact-page-headers .profile-hero .hero-eyebrow,
html.vdf-compact-page-headers .contact-eyebrow,
html.vdf-compact-page-headers .realisations-eyebrow,
html.vdf-compact-page-headers body.technical-index .technical-eyebrow {
  margin-bottom: 6px !important;
  padding: 4px 9px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

html.vdf-compact-page-headers .quote-flow-hero h1,
html.vdf-compact-page-headers .requests-hero h1,
html.vdf-compact-page-headers .profile-hero h1,
html.vdf-compact-page-headers .contact-hero h1,
html.vdf-compact-page-headers .realisations-hero h1,
html.vdf-compact-page-headers body.technical-index .technical-header h1 {
  margin-bottom: 5px !important;
  font-size: 36px !important;
  line-height: 1.08 !important;
}

html.vdf-compact-page-headers .quote-flow-hero p.quote-flow-intro,
html.vdf-compact-page-headers .requests-hero-inner > p:last-child,
html.vdf-compact-page-headers .profile-hero .hero-intro,
html.vdf-compact-page-headers .contact-hero > .contact-hero-inner > p:last-child,
html.vdf-compact-page-headers .realisations-intro,
html.vdf-compact-page-headers body.technical-index .technical-header p {
  font-size: 14px !important;
  line-height: 1.42 !important;
}

html.vdf-compact-page-headers .profile-hero {
  min-height: 248px !important;
  padding-top: 52px !important;
}

html.vdf-compact-page-headers .profile-navigation {
  inset: 12px 18px auto !important;
}

html.vdf-compact-page-headers body.technical-index .technical-header {
  min-height: 250px !important;
  padding-bottom: 44px !important;
}

html.vdf-compact-page-headers body.technical-index .technical-header .logo-container {
  margin-bottom: 6px !important;
}

html.vdf-compact-page-headers body.technical-index .technical-header .logo-container img {
  width: 108px !important;
  height: 82px !important;
  max-width: 108px !important;
  max-height: 82px !important;
}

html.vdf-compact-page-headers body.technical-index .technical-layout {
  margin-top: -28px !important;
}

/* Compact navigation headers used by administration and legacy configurators. */
html.vdf-compact-page-headers body > header.header,
html.vdf-compact-page-headers body > header.app-topbar,
html.vdf-compact-page-headers body > header.topbar {
  min-height: 68px !important;
  height: auto !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

html.vdf-compact-page-headers body > header.header > .logo,
html.vdf-compact-page-headers body > header.app-topbar .brand-logo,
html.vdf-compact-page-headers body > header.topbar > img,
html.vdf-compact-page-headers body > header.topbar .brand-logo {
  width: auto !important;
  max-width: 102px !important;
  height: 52px !important;
  max-height: 52px !important;
  object-fit: contain !important;
}

/* Dashboard home header */
html.vdf-compact-page-headers .app-header .header-inner {
  min-height: 84px !important;
}

html.vdf-compact-page-headers .app-header .brand img {
  width: 104px !important;
  height: 64px !important;
  flex-basis: 104px !important;
}

html.vdf-compact-page-headers body:has(> .app-header)::before,
html.vdf-compact-page-headers body:has(> .app-header)::after {
  top: 84px !important;
  height: 214px !important;
}

/* Older pages use a logo and title directly above their main content. */
html.vdf-compact-page-headers body > .main-content {
  padding-top: 20px !important;
}

html.vdf-compact-page-headers body > .main-content > .logo-container:first-child {
  min-height: 0 !important;
  margin: 0 auto 8px !important;
  padding: 0 !important;
}

html.vdf-compact-page-headers body > .main-content > .logo-container:first-child img {
  width: 120px !important;
  max-width: 120px !important;
  height: 88px !important;
  max-height: 88px !important;
  object-fit: contain !important;
}

html.vdf-compact-page-headers body > .main-content > h1 {
  margin: 0 auto 22px !important;
  font-size: 32px !important;
  line-height: 1.12 !important;
}

/* Account administration has its own dark introductory area. */
html.vdf-compact-page-headers .gc-shell {
  padding-top: 22px !important;
}

html.vdf-compact-page-headers .gc-topbar {
  margin-bottom: 22px !important;
}

html.vdf-compact-page-headers .gc-logo {
  width: 104px !important;
  max-height: 64px !important;
}

html.vdf-compact-page-headers .gc-hero {
  margin-bottom: 22px !important;
}

@media (max-width: 820px) {
  html.vdf-compact-page-headers .quote-flow-hero,
  html.vdf-compact-page-headers .requests-hero,
  html.vdf-compact-page-headers .profile-hero,
  html.vdf-compact-page-headers .contact-hero,
  html.vdf-compact-page-headers .realisations-hero,
  html.vdf-compact-page-headers body.technical-index .technical-header {
    min-height: var(--vdf-compact-banner-height-mobile) !important;
    padding: 52px 16px 22px !important;
  }

  html.vdf-compact-page-headers .quote-flow-logo,
  html.vdf-compact-page-headers .requests-logo,
  html.vdf-compact-page-headers .profile-logo,
  html.vdf-compact-page-headers .realisations-logo,
  html.vdf-compact-page-headers .contact-hero .logo-container img,
  html.vdf-compact-page-headers body.technical-index .technical-header .logo-container img {
    width: 90px !important;
    height: 68px !important;
    max-width: 90px !important;
    max-height: 68px !important;
  }

  html.vdf-compact-page-headers .quote-flow-hero h1,
  html.vdf-compact-page-headers .requests-hero h1,
  html.vdf-compact-page-headers .profile-hero h1,
  html.vdf-compact-page-headers .contact-hero h1,
  html.vdf-compact-page-headers .realisations-hero h1,
  html.vdf-compact-page-headers body.technical-index .technical-header h1 {
    font-size: 30px !important;
  }

  html.vdf-compact-page-headers body.technical-index .technical-header {
    padding-top: 22px !important;
    padding-bottom: 42px !important;
  }

  html.vdf-compact-page-headers .profile-hero {
    padding-top: 54px !important;
  }

  html.vdf-compact-page-headers .app-header .header-inner {
    min-height: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  html.vdf-compact-page-headers .app-header .brand img {
    width: 82px !important;
    height: 52px !important;
    flex-basis: 82px !important;
  }

  html.vdf-compact-page-headers body:has(> .app-header) .main > .page-title {
    min-height: 198px !important;
    padding: 24px 16px !important;
  }

  html.vdf-compact-page-headers body > header.header,
  html.vdf-compact-page-headers body > header.app-topbar,
  html.vdf-compact-page-headers body > header.topbar {
    gap: 8px !important;
    padding: 8px 12px !important;
  }

  html.vdf-compact-page-headers body > .main-content {
    padding-top: 14px !important;
  }

  html.vdf-compact-page-headers body > .main-content > .logo-container:first-child img {
    width: 96px !important;
    max-width: 96px !important;
    height: 70px !important;
    max-height: 70px !important;
  }

  html.vdf-compact-page-headers body > .main-content > h1 {
    margin-bottom: 18px !important;
    font-size: 27px !important;
  }

  html.vdf-compact-page-headers .gc-shell {
    padding-top: 12px !important;
  }

  html.vdf-compact-page-headers .gc-topbar {
    margin-bottom: 16px !important;
  }

  html.vdf-compact-page-headers .gc-logo {
    width: 88px !important;
    max-height: 54px !important;
  }
}

@media (max-width: 420px) {
  html.vdf-compact-page-headers {
    --vdf-compact-banner-height-mobile: 232px;
  }

  html.vdf-compact-page-headers .quote-flow-hero,
  html.vdf-compact-page-headers .requests-hero,
  html.vdf-compact-page-headers .profile-hero,
  html.vdf-compact-page-headers .contact-hero,
  html.vdf-compact-page-headers .realisations-hero {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  html.vdf-compact-page-headers .quote-flow-hero h1,
  html.vdf-compact-page-headers .requests-hero h1,
  html.vdf-compact-page-headers .profile-hero h1,
  html.vdf-compact-page-headers .contact-hero h1,
  html.vdf-compact-page-headers .realisations-hero h1,
  html.vdf-compact-page-headers body.technical-index .technical-header h1 {
    font-size: 27px !important;
  }
}