.uu-hero__media {
aspect-ratio: 1448 / 1173;
position: relative;
}
@media (min-width: 1280px) {
.uu-hero .service-hero__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
@media (max-width: 1023.98px) {
.uu-hero .service-hero__media {
max-width: min(34rem, 100%);
}
}
.uu-hero__media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: linear-gradient(
to bottom,
rgb(1 1 1 / 0) 58%,
rgb(1 1 1 / 0.35) 78%,
rgb(1 1 1 / 0.8) 92%,
var(--color-bg) 100%
);
}
.uu-story .section__intro { text-align: center; }
.uu-story .section__intro h2 {
max-width: 32ch;
margin-inline: auto;
}
.uu-story .section__intro > p {
margin-inline: auto;
}
.uu-miles {
--uu-dot: 9px;
--uu-blue: var(--color-blue-light);
list-style: none;
margin: var(--space-8) 0 0;
padding: 0;
display: grid;
gap: var(--space-6);
}
.uu-mile {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-left: var(--space-6);
}
.uu-mile__dot {
position: absolute;
left: 0;
top: 8px;
width: var(--uu-dot);
height: var(--uu-dot);
border-radius: 50%;
background-color: var(--uu-blue);
}
.uu-mile__dot::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
border: 1px solid var(--uu-blue);
opacity: 0;
transform: translate(-50%, -50%) scale(0.4);
pointer-events: none;
}
.uu-mile.is-arrived .uu-mile__dot::after {
animation: uu-mile-halo 0.9s var(--easing-premium);
}
@keyframes uu-mile-halo {
0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.4); }
35%  { opacity: 0.5; }
100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.7); }
}
.uu-mile:not(:last-child)::after {
content: "";
position: absolute;
left: calc(var(--uu-dot) / 2 - 0.5px);
top: calc(8px + var(--uu-dot) + 6px);
bottom: calc(-1 * (var(--space-6) + 6px));
width: 1px;
background-color: var(--uu-blue);
transform: scaleY(var(--step-line, 1));
transform-origin: top center;
}
@media (min-width: 768px) {
.uu-miles {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--space-4);
}
.uu-mile {
padding-left: 0;
padding-top: var(--space-5);
}
.uu-mile__dot { top: 0; }
.uu-mile:not(:last-child)::after {
left: calc(var(--uu-dot) + 6px);
top: calc(var(--uu-dot) / 2 - 0.5px);
right: calc(-1 * (var(--space-4) - 6px));
bottom: auto;
width: auto;
height: 1px;
transform: scaleX(var(--step-line, 1));
transform-origin: left center;
}
}
@media (min-width: 1100px) {
.uu-miles {
grid-template-columns:
minmax(0, 5fr) minmax(9.5rem, 1fr) minmax(9.5rem, 1fr) minmax(16rem, 1fr) 0;
gap: 0;
}
.uu-mile:not(:last-child)::after { right: 6px; }
.uu-mile:nth-child(4)::after { right: calc(var(--uu-dot) + 6px); }
.uu-mile__what {
max-width: 8.25rem;
-webkit-hyphens: none;
hyphens: none;
}
.uu-mile:nth-child(4) .uu-mile__what { max-width: 6.75rem; }
.uu-mile:last-child {
width: max-content;
max-width: 8.25rem;
justify-self: end;
text-align: right;
}
.uu-mile:last-child .uu-mile__dot {
left: auto;
right: 0;
}
}
.uu-mile__year {
font-size: 1.5rem;
line-height: 1;
color: var(--uu-blue);
font-variant-numeric: tabular-nums;
}
.uu-mile__what {
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
color: rgb(59 73 86 / 0.75);
}
.uu-lead__grid {
display: grid;
gap: var(--space-7);
align-items: center;
}
@media (min-width: 900px) {
.uu-lead__grid {
grid-template-columns: 1fr 0.8fr;
gap: var(--space-9);
}
}
@media (min-width: 600px) and (max-width: 899.98px) {
.uu-lead__text {
text-align: center;
}
.uu-lead .uu-lead__text p {
margin-inline: auto;
hyphens: none;
}
.uu-lead__photo {
margin-inline: auto;
}
}
.uu-lead__photo {
position: relative;
aspect-ratio: 4 / 5;
max-width: 26rem;
}
.uu-lead__caption {
display: block;
max-width: 26rem;
color: inherit;
text-decoration: none;
text-align: center;
}
.uu-lead__caption:hover .uu-fuehrung__name,
.uu-lead__caption:focus-visible .uu-fuehrung__name {
color: var(--color-accent);
}
.uu-lead__caption:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: var(--space-2);
}
.uu-lead__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.uu-lead__text p {
margin-top: var(--space-4);
max-width: 46rem;
color: var(--color-text-muted);
line-height: var(--line-height-base);
}
.uu-lead {
background-image: linear-gradient(
to top,
rgb(61 154 211 / 0.14) 0,
rgb(61 154 211 / 0.06) 60px,
rgb(61 154 211 / 0) 150px
);
}
.uu-promises {
background-image: linear-gradient(
to bottom,
rgb(61 154 211 / 0.14) 0,
rgb(61 154 211 / 0.06) 60px,
rgb(61 154 211 / 0) 150px
);
}
.uu-promises .section__intro { text-align: center; }
.uu-promises .section__intro h2 {
max-width: 28ch;
margin-inline: auto;
text-wrap: balance;
}
.uu-promises__list {
list-style: none;
margin: var(--space-8) 0 0;
padding: 0;
display: grid;
gap: var(--space-7);
}
@media (min-width: 640px) {
.uu-promises__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
.uu-promises__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: var(--space-8);
column-gap: var(--space-7);
}
.uu-promises__item:not(:nth-child(3n)) {
border-right: 1px solid var(--color-border);
padding-right: var(--space-7);
}
.uu-promises__item:nth-child(n + 4) {
border-top: 1px solid var(--color-border);
padding-top: var(--space-7);
}
}
.uu-promises__item {
position: relative;
}
.uu-promises__num {
display: block;
margin-bottom: var(--space-3);
font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem);
font-weight: var(--font-weight-light);
line-height: 1;
color: var(--color-accent);
font-variant-numeric: tabular-nums;
}
.uu-promises__title {
margin-bottom: var(--space-3);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-regular);
letter-spacing: normal;
line-height: var(--line-height-heading);
}
.uu-promises__mark {
background-image: linear-gradient(
color-mix(in srgb, var(--color-blue-dark) 85%, var(--color-logo-black)),
color-mix(in srgb, var(--color-blue-dark) 85%, var(--color-logo-black))
);
background-repeat: no-repeat;
background-position: left center;
background-size: 100% 100%;
padding-inline: 0.14em;
border-radius: 3px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
color: var(--color-white);
}
.uu-promises--live .uu-promises__mark {
background-size: calc(var(--mark, 1) * 100%) 100%;
}
.uu-promises__text {
max-width: 28rem;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
}
.uu-certs {
margin-top: var(--space-7);
padding-top: 0;
border-top: 0;
}
.uu-zert .section__intro { text-align: center; }
.uu-zert .section__intro h2 {
max-width: 24ch;
margin-inline: auto;
}
.uu-inno {
--nav-surface: var(--surface-navy);
background-color: var(--surface-navy);
background-image:
linear-gradient(
to bottom,
rgb(61 154 211 / 0.38) 0,
rgb(61 154 211 / 0.16) 80px,
rgb(61 154 211 / 0) 190px
),
linear-gradient(
to top,
rgb(61 154 211 / 0.38) 0,
rgb(61 154 211 / 0.16) 80px,
rgb(61 154 211 / 0) 190px
);
color: var(--color-white);
padding-bottom: calc(var(--space-9) + var(--space-8));
}
.pixel-seam + .uu-inno {
padding-top: calc(var(--space-9) + 200px + var(--space-8));
}
.uu-inno .section__intro { text-align: center; }
.uu-inno .section__intro h2 {
max-width: 28ch;
margin-inline: auto;
}
.uu-inno .section__intro > p {
margin-inline: auto;
}
.uu-tools {
list-style: none;
margin: var(--space-8) 0 0;
padding: 0;
display: grid;
gap: var(--space-7) var(--space-6);
}
@media (min-width: 640px) {
.uu-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uu-tools__item:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
.uu-tools {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--space-6) var(--space-5);
}
.uu-tools__item:last-child { grid-column: auto; }
}
.uu-tools__item {
display: grid;
justify-items: center;
align-content: start;
gap: var(--space-4);
text-align: center;
}
.uu-tools__icon {
width: 2.5rem;
height: 2.5rem;
justify-self: center;
fill: none;
stroke: currentColor;
stroke-width: 1.05;
stroke-linecap: round;
stroke-linejoin: round;
color: var(--color-blue-light);
}
.uu-tools__name {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
color: rgb(255 255 255 / 0.86);
-webkit-hyphens: none;
hyphens: none;
}
.uu-team .section__intro { text-align: center; }
.uu-team .section__intro h2 {
max-width: 34ch;
margin-inline: auto;
text-wrap: balance;
}
.uu-team .section__intro > p {
margin-inline: auto;
}
.uu-team__link {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-3) var(--space-4);
margin-top: var(--space-6);
color: var(--color-text-muted);
}
.uu-fuehrung {
margin-top: var(--space-9);
}
@media (min-width: 768px) {
.uu-fuehrung {
margin-top: var(--space-10);
}
}
.uu-fuehrung__title {
text-align: center;
font-size: var(--font-size-lg);
font-weight: 500;
letter-spacing: normal;
margin: 0 0 var(--space-7);
color: var(--color-text);
}
.uu-fuehrung__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: var(--space-6) var(--space-5);
}
.uu-fuehrung__item {
flex: 0 1 clamp(10rem, 21vw, 17rem);
max-width: 17rem;
text-align: center;
}
.uu-fuehrung__link {
display: block;
color: inherit;
text-decoration: none;
border-radius: var(--radius-md);
transition: transform var(--duration-base) var(--easing-standard);
}
.uu-fuehrung__link:hover,
.uu-fuehrung__link:focus-visible {
transform: translateY(-4px);
}
.uu-fuehrung__link:hover .uu-fuehrung__name,
.uu-fuehrung__link:focus-visible .uu-fuehrung__name {
color: var(--color-accent);
}
.uu-fuehrung__link:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: var(--space-2);
}
.uu-fuehrung__foto {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: contain;
}
.uu-fuehrung__name {
display: block;
margin: var(--space-2) 0 0;
font-size: var(--font-size-base);
font-weight: 500;
color: var(--color-text);
}
.uu-fuehrung__role {
display: block;
margin: 0.125rem 0 0;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
-webkit-hyphens: none;
hyphens: none;
text-wrap: balance;
}
@media (max-width: 639.98px) {
.uu-fuehrung {
margin-top: var(--space-8);
}
.uu-fuehrung__list {
gap: var(--space-5) var(--space-4);
}
.uu-fuehrung__item {
flex: 0 1 calc(50% - var(--space-4));
max-width: none;
}
}
.uu-lead__person {
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--color-border-strong);
transition: color var(--duration-base) var(--easing-standard),
border-color var(--duration-base) var(--easing-standard);
}
.uu-lead__person:hover,
.uu-lead__person:focus-visible {
color: var(--color-accent);
border-bottom-color: var(--color-accent);
}