/* Shared material and composition for the five illustrated page introductions. */
.route-intro.service-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(30px,3.2vw,48px);
  background: #03045E;
}
.service-hero .service-hero-main {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
  gap: clamp(26px,4vw,56px);
  align-items: center;
}
.service-hero-main > * { min-width: 0; }
.service-hero h1 { max-width: 760px; font-size: clamp(2.3rem,3.8vw,3.65rem); line-height: 1.14; }
.service-hero h1 br { display: initial; }
.service-hero .eyebrow { margin-bottom: 16px; color: #82dced; }
.service-hero .route-lead { max-width: 53ch; margin: 24px 0 26px; font-size: 1.125rem; line-height: 1.6; color: #b3eaf4; }
.service-hero .lead-privacy-note { max-width: 58ch; margin-top: 14px; }
.service-art {
  position: relative;
  isolation: isolate;
  width: min(100%,430px);
  justify-self: center;
  align-self: center;
  pointer-events: none;
}
.service-art::before {
  content: '';
  position: absolute;
  inset: 9% 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse,#28c0de2e,transparent 69%);
}
.service-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.service-art-object { transform-origin: 260px 230px; animation: serviceArtFloat 9.090909s ease-in-out infinite; animation-play-state: paused; }
.service-art-sheen { opacity: 0; animation: serviceArtSheen 12.727273s linear infinite; animation-play-state: paused; }
.service-art.is-art-active :is(.service-art-object,.service-art-sheen) { animation-play-state: running; }
.service-art--consorcios .service-art-object { animation-delay: -2s; }
.service-art--financiamento .service-art-object { animation-delay: -4s; }
.service-art--energia-solar .service-art-object { animation-delay: -1s; }
.service-art--contato .service-art-object { animation-delay: -3s; }
.service-hero .lead-landing-summary {
  max-width: none;
  margin-top: 30px;
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid #6fd6ea33;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.service-hero .lead-summary-label { margin: 0 0 14px; color: #85dded; font: 600 .8125rem/1.5 var(--font-body); letter-spacing: .02em; }
.service-hero .lead-landing-summary ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.service-hero .lead-landing-summary li { padding: 0; border: 0; font-size: .9375rem; line-height: 1.6; }
.service-hero .lead-landing-summary li + li { padding-left: 24px; border-left: 1px solid #6fd6ea26; }
.service-hero--contato .route-lead { margin-bottom: 0; }
@keyframes serviceArtFloat {
  0%,100% { transform: translateY(3.3px) rotate(-.55deg); }
  50% { transform: translateY(-7.7px) rotate(.66deg); }
}
@keyframes serviceArtSheen {
  0%,72% { opacity: 0; transform: translateX(-180px) skewX(-18deg); }
  76% { opacity: .24; }
  95% { opacity: .24; }
  100% { opacity: 0; transform: translateX(650px) skewX(-18deg); }
}
/* HD notebook screens, including the height available below browser toolbars. */
@media (min-width: 901px) and (max-height: 820px) {
  .route-intro.service-hero { padding-block: 30px; }
  .service-hero h1 { font-size: clamp(2.3rem,3.65vw,3.2rem); }
  .service-hero .route-lead { margin-block: 20px 22px; line-height: 1.55; }
  .service-art { width: min(100%,370px); }
  .service-hero .lead-landing-summary { margin-top: 24px; padding-top: 18px; }
}
/* Keep a composed centre on Full HD, 4K and ultrawide displays. */
@media (min-width: 1600px) {
  .service-hero > .page-shell { width: min(1360px,calc(100% - 96px)); }
  .service-art { width: min(100%,460px); }
  .route-intro.service-hero { padding-block: 48px; }
}
/* Tablet and landscape phone: the artwork remains beside the text. */
@media (min-width: 621px) and (max-width: 900px) {
  .service-hero .service-hero-main { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 24px; }
  .service-hero h1 { font-size: clamp(2rem,4.2vw,2.5rem); }
  .service-hero .route-lead { font-size: 1.0625rem; margin-block: 20px; }
  .service-art { width: min(100%,290px); }
  .service-hero .lead-landing-summary ul { gap: 16px; }
  .service-hero .lead-landing-summary li + li { padding-left: 16px; }
}
/* Portrait phone: give the illustration its own space, never behind the copy. */
@media (max-width: 620px) {
  .route-intro.service-hero { padding-block: 20px 30px; }
  .service-hero .service-hero-main { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .service-art { order: -1; width: clamp(158px,44vw,210px); }
  .service-hero h1 { font-size: clamp(1.95rem,7.4vw,2.65rem); }
  .service-hero .eyebrow { margin-bottom: 12px; }
  .service-hero .route-lead { margin-block: 18px 22px; font-size: 1rem; line-height: 1.6; }
  .service-hero .lead-privacy-note { font-size: .8125rem; }
  .service-hero .lead-landing-summary { margin-top: 26px; padding-top: 20px; }
  .service-hero .lead-landing-summary ul { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .service-hero .lead-landing-summary li + li { padding-left: 0; border-left: 0; }
  .service-art-object { animation-name: serviceArtFloatSmall; }
  .service-art-sheen { animation: none; }
}
@keyframes serviceArtFloatSmall { 0%,100% { transform: translateY(1.1px); } 50% { transform: translateY(-3.3px); } }
/* Reuse the Partner emblem motion on the HTML wrapper so its pixel amplitude
   remains the same even when the vector scales down on phones. */
.lead-landing-hero .service-art { animation: partnerEmblemFloat 5.8s ease-in-out infinite; animation-play-state: paused; transform-origin: center; }
.lead-landing-hero .service-art.is-art-active { animation-play-state: running; }
.lead-landing-hero .service-art .service-art-object { animation: none; transform: none; }
.lead-landing-hero .service-art--consorcios { animation-delay: -2s; }
.lead-landing-hero .service-art--financiamento { animation-delay: -4s; }
.lead-landing-hero .service-art--energia-solar { animation-delay: -1s; }
@media (max-width: 620px) {
  .lead-landing-hero .service-art { margin-block: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lead-landing-hero .service-art { animation: none; transform: none; }
  .service-art .service-art-object { animation: none; transform: none; }
  .service-art .service-art-sheen { animation: none; opacity: 0; }
}