main h2 {
font-size: clamp(2rem, 0.4rem + 3.7vw, 3.75rem);
font-weight: var(--font-weight-regular);
}
.hero {
--hero-header-overlap: 6rem;
position: relative;
margin-top: calc(-1 * var(--hero-header-overlap));
display: grid;
grid-template-areas: "hero";
grid-template-rows: minmax(0, 1fr);
--hero-frame-ratio: 1.85;
--hero-frame-s: 1;
--hero-frame-x: 0px;
--hero-frame-y: 0px;
--hero-wash: 0.82;
--hero-wash-reach: 0.88;
min-height: calc(100vw / var(--hero-frame-ratio));
}
.hero__bg {
grid-area: hero;
z-index: 0;
min-width: 0;
}
.hero__bg picture {
display: block;
}
.hero__bg img {
display: block;
width: 100%;
height: auto;
}
.hero__bg--layers {
position: absolute;
inset: 0;
overflow: hidden;
--hero-zoom-inset: 0%;
--amp-ext-x: 12px;  --amp-ext-y: 2px;
--amp-int-x:  0px;  --amp-int-y: 0px;
--amp-per-x:  7px;  --amp-per-y: 2px;
}
.hero__bg--layers .hero__layer {
position: absolute;
inset: var(--hero-zoom-inset);
display: block;
}
.hero__bg--layers picture {
display: block;
width: 100%;
height: 100%;
}
.hero__bg--layers .hero__layer img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
transform: translate(
calc(var(--hero-frame-x, 0px) + var(--layer-x, 0px)),
calc(var(--hero-frame-y, 0px) + var(--layer-y, 0px))
)
scale(var(--hero-frame-s, 1));
}
.hero__bg--layers .hero__layer--ext {
inset: -6%;
}
.hero__bg--layers .hero__layer--ext img {
--layer-x: calc(var(--mx, 0) * var(--amp-ext-x) / 2);
--layer-y: calc(var(--my, 0) * var(--amp-ext-y) / 2);
}
.hero__bg--layers .hero__layer--int img {
--layer-x: calc(var(--mx, 0) * var(--amp-int-x) / 2 * -1);
--layer-y: calc(var(--my, 0) * var(--amp-int-y) / 2 * -1);
}
.hero__bg--layers .hero__layer--per img {
--layer-x: calc(var(--mx, 0) * var(--amp-per-x) / 2 * -1);
--layer-y: calc(var(--my, 0) * var(--amp-per-y) / 2 * -1);
}
.hero__bg::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
90deg,
rgb(0 0 0 / calc(0.94 * var(--hero-wash, 1))) 0,
rgb(0 0 0 / calc(0.9 * var(--hero-wash, 1))) calc(24rem * var(--hero-wash-reach, 1)),
rgb(0 0 0 / calc(0.82 * var(--hero-wash, 1))) calc(38rem * var(--hero-wash-reach, 1)),
rgb(0 0 0 / calc(0.55 * var(--hero-wash, 1))) calc(45rem * var(--hero-wash-reach, 1)),
rgb(0 0 0 / calc(0.18 * var(--hero-wash, 1))) calc(49rem * var(--hero-wash-reach, 1)),
rgb(0 0 0 / 0) calc(53rem * var(--hero-wash-reach, 1))
),
linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 15%),
linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 15%);
}
@media (max-width: 767.98px) {
.hero {
grid-template-areas: none;
grid-template-rows: auto auto;
min-height: 0;
}
.hero .hero__bg--layers {
position: relative;
inset: auto;
grid-row: 1;
grid-column: 1;
width: 100%;
height: calc(clamp(13rem, 34svh, 20rem) + var(--hero-header-overlap));
}
.hero .hero__grid {
grid-row: 2;
grid-column: 1;
align-self: start;
padding-block: var(--space-6) var(--space-7);
}
.hero .hero__bg--layers::after {
background:
linear-gradient(to bottom, rgb(0 0 0 / 0.55) 0, rgb(0 0 0 / 0) var(--hero-header-overlap)),
linear-gradient(to top, rgb(0 0 0 / 0.85) 0, rgb(0 0 0 / 0) 22%);
}
.hero__bg::after {
background:
linear-gradient(
to bottom,
rgba(0, 0, 0, 0.25) 0%,
rgba(0, 0, 0, 0.34) 22%,
rgba(0, 0, 0, 0.58) 34%,
rgba(0, 0, 0, 0.74) 50%,
rgba(0, 0, 0, 0.84) 70%,
rgba(0, 0, 0, 0.94) 100%
),
linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) var(--hero-header-overlap));
}}
.hero__content {
max-width: 44rem;
padding-inline-start: var(--content-inset);
}
.pain-hook__intro,
.services .section__intro,
.outfits__intro,
.konzept__grid {
padding-inline-start: var(--content-inset);
}
@media (max-width: 767.98px) {
.hero__content,
.pain-hook__intro,
.services .section__intro,
.outfits__intro {
padding-inline-start: var(--space-2);
}
.konzept__grid {
padding-inline-start: calc(var(--container-padding) + var(--space-2));
}}
.hero__content h1 {
font-size: clamp(2rem, 1.6rem + 2.2vw, 3.25rem);
font-weight: var(--font-weight-regular);
}
.hero__grid {
grid-area: hero;
z-index: 1;
align-self: center;
padding-block: var(--hero-header-overlap);
}
.hero__lead {
margin-top: var(--space-5);
font-size: var(--font-size-md);
color: rgb(255 255 255 / 0.82);
max-width: 32rem;
line-height: 1.5;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-5);
margin-top: var(--space-6);
}
.hero__reassurance {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-5);
margin-top: var(--space-5);
padding: 0;
font-size: var(--font-size-sm);
color: var(--color-white);
}
.hero__reassurance-item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.hero__reassurance-icon {
flex-shrink: 0;
width: 1.125rem;
height: 1.125rem;
color: var(--color-blue-light);
fill: none;
stroke: currentColor;
stroke-width: 2.25;
stroke-linecap: round;
stroke-linejoin: round;
}
.hero__trust {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4) var(--space-5);
margin-top: var(--space-6);
}
.hero__rating {
margin-top: 0;
}
.hero__badges {
display: flex;
align-items: center;
gap: var(--space-4);
}
.hero__badge {
height: 2.75rem;
width: auto;
}
@media (max-width: 767.98px) {
.hero {
--hero-header-h: calc(2.75rem + var(--space-4) * 2);
min-height: calc(100svh + var(--hero-header-overlap) - var(--hero-header-h));
}
.hero__grid {
padding-block: calc(var(--hero-header-overlap) + var(--space-3))
calc(3rem + var(--space-5) + var(--space-3));
align-self: end;
}
.hero__content h1 {
font-size: clamp(1.6875rem, 1.28rem + 2.35vw, 2.125rem);
line-height: 1.16;
letter-spacing: -0.015em;
}
.hero__lead {
margin-top: var(--space-4);
max-width: none;
line-height: 1.55;
color: rgb(255 255 255 / 0.76);
}
.hero__actions {
margin-top: var(--space-6);
}
@media (max-width: 639.98px) {
.hero__actions {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}}
@media (max-width: 639.98px) {
.hero__actions .btn--primary {
width: 100%;
justify-content: center;
min-height: 3rem;
}}
@media (max-width: 639.98px) {
.hero__phone {
width: 100%;
justify-content: center;
min-height: 3rem;
}}
.hero__reassurance {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
margin-top: var(--space-5);
font-size: 0.8125rem;
}
.hero__reassurance-item {
align-items: flex-start;
gap: var(--space-2);
line-height: 1.45;
}
.hero__reassurance-icon {
width: 0.875rem;
height: 0.875rem;
flex-shrink: 0;
margin-top: 0.18em;
}
.hero__trust {
margin-top: var(--space-6);
padding-top: var(--space-4);
border-top: 1px solid rgb(255 255 255 / 0.14);
gap: var(--space-3);
}
.hero__badge { height: 2rem; }}
@media (max-width: 359.98px) {
.hero__actions .btn--primary {
padding-inline: var(--space-3);
font-size: var(--font-size-sm);
}}
.trust-metrics__intro {
max-width: 44rem;
margin-inline: auto;
text-align: center;
}
.trust-metrics__text {
margin-top: var(--space-4);
margin-inline: auto;
max-width: 30rem;
color: var(--color-text);
}
.trust-diagram {
max-width: 46rem;
margin: var(--space-7) auto 0;
text-align: center;
}
.trust-diagram__lines {
display: none;
}
.trust-diagram__metrics {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
justify-items: center;
gap: var(--space-6);
position: relative;
}
.trust-diagram__metrics::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1.5px;
transform: translateX(-50%);
background-color: var(--color-accent);
opacity: 0.5;
z-index: 0;
}
.trust-diagram__metrics .stat {
position: relative;
z-index: 1;
align-items: center;
text-align: center;
padding-inline: var(--space-4);
background-color: var(--color-bg);
}
.trust-diagram__metrics .stat__value {
font-size: clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem);
font-weight: var(--font-weight-regular);
font-variant-numeric: tabular-nums;
}
.trust-metrics__heading-line {
display: block;
}
.trust-metrics__intro h2 {
line-height: 1;
}
@media (min-width: 768px) {
.trust-diagram__lines {
display: block;
position: relative;
width: 100%;
height: 9rem;
margin: 0 auto;
}
.trust-diagram__svg {
display: block;
width: 100%;
height: 100%;
}
.trust-diagram__line,
.trust-diagram__branch {
stroke: var(--color-accent);
stroke-width: 1.5;
stroke-linecap: round;
}
.trust-diagram__node {
position: absolute;
left: 50%;
top: 48%;
width: 0.7rem;
height: 0.7rem;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: var(--color-accent);
}
.trust-diagram__metrics {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
margin-top: var(--space-4);
}
.trust-diagram__metrics::before {
display: none;
}
.trust-diagram__metrics .stat {
background: none;
padding-inline: var(--space-4);
}}
.trust-metrics__logos-label {
margin: var(--space-8) auto var(--space-4);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-regular);
color: var(--color-text-muted);
text-align: center;
letter-spacing: 0.02em;
}
.trust-metrics__clients {
margin-top: 0;
margin-bottom: 8rem;
}
.logo-marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee__track {
display: flex;
width: max-content;
animation: logo-marquee-scroll 70s linear infinite;
}
.logo-marquee:hover .logo-marquee__track {
animation-play-state: paused;
}
.logo-marquee__group {
display: flex;
align-items: center;
gap: var(--space-8);
padding-right: var(--space-8);
flex-shrink: 0;
}
.logo-marquee__logo {
height: 2.75rem;
width: auto;
flex-shrink: 0;
opacity: 0.8;
transition: opacity var(--duration-base) var(--easing-standard);
}
.logo-marquee__logo:hover {
opacity: 1;
}
@keyframes logo-marquee-scroll {
to {
transform: translateX(-50%);
}}
@media (prefers-reduced-motion: reduce) {
.logo-marquee {
overflow-x: auto;
-webkit-mask-image: none;
mask-image: none;
}
.logo-marquee__track {
animation: none;
}}
.story-intro {
text-align: center;
background-color: var(--color-bg);
padding-block: var(--space-10);
}
.story-intro__inner {
max-width: 48rem;
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-5);
}
.story-intro h2 {
line-height: 1.05;
}
.story-intro__text {
margin: 0;
max-width: 40rem;
color: var(--color-text-muted);
font-size: var(--font-size-base);
}
.story-intro__text.u-reveal {
transition-delay: 0.28s;
}
.story-logos {
display: flex;
flex-direction: column;
width: 100%;
}
.story-logos__row {
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.story-logos__track {
display: flex;
width: max-content;
animation: story-logos-scroll 90s linear infinite;
}
.story-logos__row:hover .story-logos__track {
animation-play-state: paused;
}
.story-logos__group {
display: flex;
flex-shrink: 0;
align-items: center;
gap: clamp(2.5rem, 4vw, 4.5rem);
padding-right: clamp(2.5rem, 4vw, 4.5rem);
}
.story-logos__logo {
height: clamp(2rem, 1rem + 1.5vw, 2.85rem);
max-width: clamp(7rem, 11vw, 9.5rem);
width: auto;
object-fit: contain;
flex-shrink: 0;
}
.story-logos__link {
display: inline-flex;
align-items: center;
flex: none;
border-radius: var(--radius-sm);
}
.story-logos__link:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: var(--space-2);
}
@keyframes story-logos-scroll {
to { transform: translateX(-25%); }}
@media (max-width: 1023.98px) {
.story-logos__track {
animation-duration: 65s;
}}
@media (prefers-reduced-motion: reduce) {
.story-logos__row { -webkit-mask-image: none; mask-image: none; }
.story-logos__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
.story-logos__group:nth-child(n+2) { display: none; }
.story-logos__group { flex-wrap: wrap; justify-content: center; padding-right: 0; row-gap: clamp(2rem, 4vw, 3rem); }}
@media (prefers-reduced-motion: reduce) and (max-width: 1023.98px) {
.story-logos__group {
flex-shrink: 1;
min-width: 0;
}}
.trust-metrics {
padding-bottom: 0;
}
.trust-metrics__cards-heading {
margin-bottom: var(--space-7);
text-align: center;
font-size: clamp(2rem, 0.4rem + 3.7vw, 3.75rem);
font-weight: var(--font-weight-regular);
color: var(--color-white);
}
.pain-hook {
overflow: hidden;
}
.pain-hook__intro {
max-width: 40rem;
text-align: left;
}
.pain-hook__journey {
position: relative;
}
.pain-hook__route {
display: none;
}
.pain-hook__node {
display: none;
position: absolute;
z-index: 3;
width: 0.4rem;
height: 0.4rem;
border-radius: 1px;
background-color: rgb(255 255 255 / 0.3);
transform: translate(-50%, -50%) scale(1);
transition: background-color var(--duration-base) var(--easing-premium),
transform var(--duration-base) var(--easing-premium);
}
.pain-hook__node.is-active {
background-color: var(--color-accent);
transform: translate(-50%, -50%) scale(1.45);
}
.pain-hook__node.is-passed {
background-color: rgb(61 154 211 / 0.5);
transform: translate(-50%, -50%) scale(1);
}
.pain-hook__node::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
border: 1px solid var(--color-accent);
opacity: 0;
transform: translate(-50%, -50%) scale(0.4);
pointer-events: none;
}
.pain-hook__node.is-active::after {
animation: pain-hook-halo 0.9s var(--easing-premium);
}
@keyframes pain-hook-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); }}
.pain-hook__progress {
position: absolute;
top: 0.25rem;
bottom: 0.25rem;
left: 0.9rem;
width: 2px;
background-color: var(--color-border);
}
.pain-hook__progress-fill {
display: block;
width: 100%;
height: 0%;
background-color: var(--color-accent);
transform-origin: top;
}
.pain-hook__list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-8);
padding-left: var(--space-8);
}
.pain-hook__item {
max-width: 32rem;
}
.pain-hook__title {
font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem);
font-weight: var(--font-weight-regular);
line-height: 1.05;
letter-spacing: -0.01em;
margin-bottom: var(--space-3);
}
.pain-hook__mark {
background-image: linear-gradient(var(--color-blue-light), var(--color-blue-light));
background-repeat: no-repeat;
background-position: left center;
background-size: calc(var(--mark, 0) * 100%) 100%;
padding-inline: 0.12em;
border-radius: 3px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.pain-hook--journey.is-static .pain-hook__mark {
background-size: 100% 100%;
}
.pain-hook__text {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
max-width: 32rem;
}
.pain-hook__cta {
display: flex;
justify-content: center;
margin-top: var(--space-9);
}
.pain-hook__cta .btn {
transition: transform var(--duration-base) var(--easing-premium),
box-shadow var(--duration-base) var(--easing-premium);
}
.pain-hook__cta.is-active .btn {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.pain-hook--journey.is-static .pain-hook__progress-fill {
height: 100%;
}
.pain-hook--journey.is-static .pain-hook__route-path--active {
stroke-dashoffset: 0;
}
.pain-hook--journey.is-static .pain-hook__node {
background-color: var(--color-accent);
}
@media (min-width: 1024px) {
.pain-hook__journey {
height: clamp(56rem, 58vw, 72rem);
}
.pain-hook__route {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.pain-hook__route-path {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.pain-hook__route-path--base {
stroke: rgb(255 255 255 / 0.14);
stroke-width: 1;
}
.pain-hook__route-path--active {
stroke: url(#pain-hook-active-grad);
stroke-width: 1.6;
}
.pain-hook__grad-tail {
stop-color: var(--color-white);
stop-opacity: 0.18;
}
.pain-hook__grad-mid {
stop-color: var(--color-accent);
stop-opacity: 1;
}
.pain-hook__grad-head {
stop-color: var(--color-white);
stop-opacity: 1;
}
.pain-hook__node {
display: block;
}
.pain-hook__progress {
display: none;
}
.pain-hook__list {
position: relative;
height: 100%;
padding-left: 0;
}
.pain-hook__item {
position: absolute;
max-width: min(32%, 26rem);
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
z-index: 2;
}
.pain-hook__item::before {
content: "";
position: absolute;
inset: -0.7rem -1rem;
z-index: -1;
background-color: rgb(9 9 9);
}
.pain-hook__item--1 { top: 5%;  right: 11%; }
.pain-hook__item--2 { top: 31%; left: 6%; }
.pain-hook__item--3 { top: 56%; right: 5%; }
.pain-hook__item--4 { top: 81%; left: 8%; }
.pain-hook__text {
max-width: 22rem;
}}
.trust-metrics__cards {
list-style: none;
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
margin-top: var(--space-8);
justify-items: center;
}
@media (min-width: 640px) {
.trust-metrics__cards {
grid-template-columns: repeat(2, 1fr);
}}
@media (min-width: 1024px) {
.trust-metrics__cards {
grid-template-columns: repeat(3, 1fr);
}}
@media (min-width: 1200px) {
.trust-metrics__cards {
grid-template-columns: repeat(6, 1fr);
gap: var(--space-3);
}
.pillar-card {
min-height: 280px;
max-width: none;
}}
.pillar-card {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: var(--space-2);
padding: var(--space-5);
width: 100%;
max-width: 320px;
min-height: 220px;
background-color: var(--color-white);
box-shadow:
0 16px 40px rgb(1 1 1 / 0.16),
0 4px 10px rgb(1 1 1 / 0.08);
border-radius: var(--radius-md);
transition: background-color var(--duration-base) var(--easing-standard);
}
.pillar-card:hover {
background-color: var(--color-blue-light);
}
.pillar-card__icon {
display: inline-flex;
}
.pillar-card__icon img {
width: 3.5rem;
height: 3.5rem;
filter: invert(1);
}
.pillar-card__title {
font-size: var(--font-size-md);
font-weight: 500;
color: var(--color-logo-black);
}
.pillar-card__text {
color: var(--color-logo-black);
font-weight: 350;
font-size: var(--font-size-sm);
line-height: var(--line-height-tight);
margin-top: auto;
}
.services {
padding-top: calc(var(--space-9) + 200px);
}
@media (max-width: 767.98px) {
.services {
padding-top: calc(var(--space-9) + 120px);
}}
.services__index {
display: grid;
gap: var(--space-7);
}
.services__list {
list-style: none;
}
.services__list li {
border-bottom: 1px solid var(--color-border);
}
.services__list li:first-child {
border-top: 1px solid var(--color-border);
}
.services__item {
display: flex;
align-items: center;
gap: var(--space-5);
padding-block: var(--space-5);
padding-inline: var(--space-4);
color: var(--color-text);
text-decoration: none;
transition: background-color var(--duration-base) var(--easing-standard),
color var(--duration-base) var(--easing-standard);
}
.services__item-number {
flex-shrink: 0;
width: 2.5ch;
font-variant-numeric: tabular-nums;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
transition: color var(--duration-base) var(--easing-standard);
}
.services__item-name {
flex: 1;
font-size: var(--font-size-2xl);
}
.services__item-arrow {
flex-shrink: 0;
font-size: var(--font-size-lg);
color: var(--color-accent);
stroke: currentColor;
transform-origin: center;
transform: translateX(-0.4rem) rotate(0deg);
transition: transform var(--duration-base) var(--easing-standard),
color var(--duration-base) var(--easing-standard);
}
.services__thumb {
display: none;
}
@media (max-width: 1023.98px) {
.services__thumb {
display: block;
flex-shrink: 0;
width: 4rem;
height: 3rem;
object-fit: cover;
border-radius: var(--radius-sm);
border: 1px solid rgb(255 255 255 / 0.12);
}}
@media (max-width: 767.98px) {
.services__item {
gap: var(--space-3);
padding-block: var(--space-3);
padding-inline: var(--space-2);
min-height: 4.5rem;
}
.services__item-name {
font-size: var(--font-size-lg);
line-height: 1.25;
-webkit-hyphens: manual;
hyphens: manual;
min-width: 0;
overflow-wrap: anywhere;
}
.services__item-number {
align-self: flex-start;
margin-top: 0.15em;
font-size: var(--font-size-xs);
}
.services__item-arrow {
font-size: var(--font-size-base);
transform: rotate(45deg);
color: rgb(255 255 255 / 0.55);
}}
.services__item:hover,
.services__item:focus-visible,
.services__item.is-active {
background-color: var(--color-bg-inverse);
color: var(--color-text-inverse);
}
.services__item:hover .services__item-number,
.services__item:focus-visible .services__item-number,
.services__item.is-active .services__item-number {
color: rgb(1 1 1 / 0.55);
}
.services__item:hover .services__item-arrow,
.services__item:focus-visible .services__item-arrow,
.services__item.is-active .services__item-arrow {
transform: translateX(0) rotate(45deg);
}
.services__item:focus-visible {
outline: 2px solid var(--color-text-inverse);
outline-offset: -2px;
}
.services__preview {
display: none;
max-width: 28rem;
}
.services__preview-media {
aspect-ratio: 820 / 1227;
max-width: 28rem;
overflow: hidden;
background-color: var(--color-bg-elevated);
border-radius: 10% / 6.7%;
}
.services__preview-media picture {
display: block;
width: 100%;
height: 100%;
}
.services__preview-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity var(--duration-base) var(--easing-standard);
}
.services__preview-media img.is-swapping {
opacity: 0;
}
.services__item-more {
display: none;
}
@media (min-width: 1024px) {
.services__index {
grid-template-columns: minmax(0, 1fr) max-content;
align-items: start;
}
.services__preview {
display: block;
position: sticky;
top: calc(var(--space-6) + 5rem);
}
.services__item-more {
display: block;
flex-shrink: 0;
font-size: var(--font-size-sm);
letter-spacing: 0.01em;
color: var(--color-accent);
margin-inline-end: calc(-1 * var(--space-3));
opacity: 0;
transform: translateX(var(--space-2));
transition: opacity var(--duration-base) var(--easing-standard),
transform var(--duration-base) var(--easing-standard);
}
.services__item:hover .services__item-more,
.services__item:focus-visible .services__item-more,
.services__item.is-active .services__item-more {
opacity: 1;
transform: none;
}}
@media (prefers-reduced-motion: reduce) {
.services__item-more {
transition: none;
transform: none;
}}
@media (prefers-reduced-motion: reduce) {
.services__preview-media img {
transition: none;
}}
.outfits__layout {
display: grid;
gap: var(--space-8);
}
.outfits__intro {
max-width: none;
}
.outfits__intro h2 {
margin-top: var(--space-3);
line-height: 1.1;
color: var(--color-logo-black);
}
.outfits__intro > p {
margin-top: var(--space-4);
max-width: 34rem;
color: var(--color-text-muted);
}
.outfits__viewer {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-5);
}
.outfits__stage {
position: relative;
width: 100%;
max-width: 32rem;
margin-inline: auto;
margin-top: -4rem;
}
.outfits__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2.75rem;
height: 2.75rem;
font-size: 2.5rem;
font-weight: 300;
line-height: 1;
border: none;
border-radius: var(--radius-sm);
color: var(--text-on-light-secondary);
background-color: transparent;
cursor: pointer;
transition: color var(--duration-fast) var(--easing-standard);
}
.outfits__arrow--prev {
left: var(--space-2);
}
.outfits__arrow--next {
right: var(--space-2);
}
.outfits__arrow:hover {
color: var(--color-logo-black);
}
.outfits__arrow:focus-visible {
outline: 2px solid var(--color-blue-dark);
outline-offset: 2px;
}
.outfits__image-frame {
position: relative;
width: 100%;
max-width: 32rem;
aspect-ratio: 800 / 1200;
}
.outfits__image-frame::after {
content: "";
position: absolute;
left: 50%;
bottom: 4%;
transform: translateX(-50%);
width: 55%;
height: 6%;
background: radial-gradient(ellipse, rgb(1 1 1 / 0.16) 0%, rgb(1 1 1 / 0) 70%);
pointer-events: none;
z-index: 0;
}
.outfits__image-frame img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
transition: opacity var(--duration-base) var(--easing-standard);
}
.outfits__image-frame img.is-swapping {
opacity: 0;
}
.outfits__views {
display: inline-flex;
margin-top: var(--space-2);
padding: 2px;
background-color: rgb(82 135 201 / 0.12);
border-radius: var(--radius-md);
position: relative;
z-index: 2;
}
.outfits__view-btn {
padding: var(--space-1) var(--space-3);
font-size: 0.8125rem;
font-weight: var(--font-weight-regular);
color: rgb(1 1 1 / 0.55);
background-color: transparent;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background-color var(--duration-fast) var(--easing-standard),
color var(--duration-fast) var(--easing-standard);
}
.outfits__view-btn:hover {
color: var(--color-logo-black);
}
.outfits__view-btn[aria-pressed="true"] {
background-color: var(--color-white);
color: var(--color-logo-black);
}
.outfits__view-btn:focus-visible {
outline: 2px solid var(--color-logo-black);
outline-offset: 2px;
}
.outfits__view-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.outfits {
--color-link-hover: var(--color-logo-black);
--nav-surface: var(--surface-outfits);
padding-top: calc(var(--space-9) + 200px);
background-color: var(--surface-outfits);
color: var(--color-gray);
}
@media (max-width: 767.98px) {
.outfits {
padding-top: calc(var(--space-9) + 120px);
}}
.outfits__intro > p {
color: var(--text-on-light-secondary);
}
.outfits__names {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-1);
margin-top: var(--space-6);
}
.outfits__name-btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
width: 100%;
position: relative;
white-space: nowrap;
padding: var(--space-2) var(--space-4);
margin-inline: calc(-1 * var(--space-4));
font-size: var(--font-size-lg);
font-weight: var(--font-weight-regular);
color: var(--color-logo-black);
background-color: transparent;
border: none;
text-align: left;
cursor: pointer;
transition: color var(--duration-fast) var(--easing-standard),
background-color var(--duration-fast) var(--easing-standard);
}
.outfits__name-btn + .outfits__name-btn {
border-top: 1px solid rgb(59 73 86 / 0.15);
}
.outfits__name-detail {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-regular);
color: var(--color-logo-black);
position: absolute;
white-space: normal;
min-width: 0;
opacity: 0;
transform: translateX(-0.4rem);
transition: opacity var(--duration-fast) var(--easing-standard),
transform var(--duration-fast) var(--easing-standard),
color var(--duration-fast) var(--easing-standard);
}
.outfits__name-btn:hover .outfits__name-detail,
.outfits__name-btn:focus-visible .outfits__name-detail,
.outfits__name-btn[aria-pressed="true"] .outfits__name-detail {
position: static;
opacity: 1;
transform: translateX(0);
color: var(--color-white);
}
.outfits__name-arrow {
flex-shrink: 0;
margin-left: auto;
font-size: var(--font-size-lg);
color: var(--color-logo-black);
stroke: currentColor;
transform-origin: center;
transform: rotate(0deg);
transition: transform var(--duration-base) var(--easing-standard),
color var(--duration-fast) var(--easing-standard);
}
.outfits__name-btn:hover,
.outfits__name-btn:focus-visible,
.outfits__name-btn[aria-pressed="true"] {
background-color: var(--color-logo-black);
color: var(--color-white);
}
.outfits__name-btn:hover .outfits__name-arrow,
.outfits__name-btn:focus-visible .outfits__name-arrow,
.outfits__name-btn[aria-pressed="true"] .outfits__name-arrow {
transform: rotate(45deg);
color: var(--color-white);
}
.outfits__name-btn:focus-visible {
outline: 2px solid var(--color-white);
outline-offset: -2px;
}
@media (max-width: 1023.98px) {
.outfits__layout {
gap: var(--space-5);
}
.outfits__intro {
display: contents;
}
.outfits__intro h2,
.outfits__intro > p {
text-align: center;
}
.outfits__intro > p {
margin-inline: auto;
-webkit-hyphens: none;
hyphens: none;
}
.outfits__intro h2 { order: 1; }
.outfits__intro > p { order: 2; }
.outfits__names { order: 3; }
.outfits__viewer { order: 4; }
.outfits__stage { order: 1; }
.outfits__views { order: 2; }
.outfits__stage { margin-top: 0; }
.outfits__view-btn {
min-height: 2.75rem;
padding-inline: var(--space-4);
font-size: var(--font-size-sm);
}
.outfits__names {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-4);
}
.outfits__name-btn {
width: auto;
min-height: 2.75rem;
padding: 0.5rem var(--space-4);
margin-inline: 0;
border: 1px solid rgb(59 73 86 / 0.28);
border-radius: var(--radius-pill);
font-size: var(--font-size-sm);
}
.outfits__name-btn + .outfits__name-btn { border-top: 1px solid rgb(59 73 86 / 0.28); }
.outfits__name-arrow { display: none; }
.outfits__name-btn:hover:not([aria-pressed="true"]) {
background-color: transparent;
color: var(--color-logo-black);
}
.outfits__name-btn[aria-pressed="true"] {
border-color: var(--color-logo-black);
}
.outfits__name-detail {
display: none;
}
.outfits__arrow {
width: 3rem;
height: 3rem;
color: rgb(59 73 86 / 0.75);
}}
@media (min-width: 1024px) {
.outfits__layout {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: start;
}}
@media (prefers-reduced-motion: reduce) {
.outfits__image-frame img {
transition: none;
}}
.references .container {
max-width: 75rem;
}
.references__intro {
max-width: 34rem;
margin-inline: auto;
margin-bottom: 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
.references__intro .section-eyebrow {
justify-content: center;
}
.references .section-eyebrow {
color: var(--color-gray);
}
.references__lede {
color: rgb(59 73 86 / 0.75);
max-width: 34rem;
}
.references__results {
list-style: none;
display: grid;
gap: var(--space-6);
margin-top: var(--space-7);
margin-bottom: var(--space-7);
}
.references__results .stat {
align-items: center;
text-align: center;
}
.references__results .stat__value {
font-size: clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem);
font-weight: var(--font-weight-regular);
color: var(--color-accent-strong);
font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.references__results .stat__value {
font-size: clamp(2.25rem, 6.7vw - 0.9rem, 4.15rem);
}}
.references__results .stat__label {
color: rgb(59 73 86 / 0.75);
}
.references__result-link {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
text-decoration: none;
color: inherit;
border-radius: var(--radius-sm);
padding-block: var(--space-3);
transition: transform var(--duration-base) var(--easing-premium);
}
.references__result-cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-2);
font-size: var(--font-size-sm);
font-weight: 500;
color: color-mix(in srgb, var(--color-blue-dark) 85%, black);
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
}
.references__result-arrow {
width: 1rem;
height: 1rem;
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 2;
transition: transform var(--duration-base) var(--easing-premium);
}
.references__result-link:hover .references__result-arrow,
.references__result-link:focus-visible .references__result-arrow {
transform: translate(3px, -3px);
}
.references__result-link:hover {
transform: translateY(-2px);
}
.references__result-link:focus-visible {
outline: 2px solid color-mix(in srgb, var(--color-blue-dark) 85%, black);
outline-offset: 4px;
}
@media (min-width: 768px) {
.references__results {
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.references__results li {
padding-inline: var(--space-6);
border-inline-start: 1px solid rgb(59 73 86 / 0.2);
}
.references__results li:first-child {
border-inline-start: none;
}}
.references__quotes-title {
margin: calc(var(--space-9) + var(--space-5)) 0 var(--space-6);
text-align: center;
font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-tight);
letter-spacing: -0.01em;
color: var(--color-logo-black);
}
.references__testimonials {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
@media (max-width: 767.98px) {
.references {
--swipe-bleed: calc(-1 * var(--container-padding));
}
.references .references__testimonials {
align-items: stretch;
}}
@media (min-width: 768px) {
.references__testimonials {
grid-template-columns: repeat(3, minmax(0, 1fr));
}}
.references {
--color-link-hover: var(--color-logo-black);
background-color: var(--color-white);
color: var(--color-gray);
padding-top: calc(var(--space-9) + 200px);
}
@media (max-width: 767.98px) {
.references {
padding-top: calc(var(--space-9) + 120px);
}}
.references__intro h2 {
color: var(--color-logo-black);
}
.social {
overflow-x: clip;
padding-top: calc(var(--space-9) + 110px);
}
@media (max-width: 767.98px) {
.social {
padding-top: calc(var(--space-9) + 60px);
}}
.social__intro {
text-align: center;
margin-inline: auto;
}
.social__lede {
margin-top: var(--space-3);
color: var(--color-text-muted);
}
.services__lede {
margin-top: var(--space-3);
color: var(--color-text-muted);
max-width: 46rem;
}
.konzept {
--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) 150px,
rgb(61 154 211 / 0) 340px
),
linear-gradient(
to top,
rgb(61 154 211 / 0.38) 0,
rgb(61 154 211 / 0.16) 150px,
rgb(61 154 211 / 0) 340px
);
color: var(--color-white);
padding-top: calc(var(--space-9) + 200px);
}
@media (max-width: 767.98px) {
.konzept { padding-top: calc(var(--space-9) + 120px); }
.konzept {
background-image:
linear-gradient(
to bottom,
rgb(61 154 211 / 0.38) 0,
rgb(61 154 211 / 0.16) 95px,
rgb(61 154 211 / 0) 210px
),
linear-gradient(
to top,
rgb(61 154 211 / 0.38) 0,
rgb(61 154 211 / 0.16) 95px,
rgb(61 154 211 / 0) 210px
);
}}
.konzept__grid {
display: grid;
gap: var(--space-7);
}
@media (min-width: 900px) {
.konzept__grid {
grid-template-columns: 1.05fr 0.95fr;
align-items: center;
gap: var(--space-9);
padding-inline-end: var(--content-inset);
}}
.konzept__lede {
margin-top: var(--space-4);
max-width: 40rem;
color: rgb(255 255 255 / 0.85);
}
.konzept__actions {
margin-top: var(--space-6);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4) var(--space-5);
}
.konzept__link {
color: var(--color-white);
font-weight: 500;
text-decoration: none;
border-bottom: 1px solid rgb(255 255 255 / 0.5);
padding-bottom: 1px;
}
.konzept__link:hover,
.konzept__link:focus-visible {
border-bottom-color: var(--color-white);
}
.konzept__points {
list-style: none;
margin: 0;
padding: 0;
}
.konzept__point {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding-block: var(--space-4);
border-top: 1px solid rgb(255 255 255 / 0.2);
font-size: var(--font-size-lg);
line-height: 1.4;
}
.konzept__point:last-child {
border-bottom: 1px solid rgb(255 255 255 / 0.2);
}
.konzept__tick {
flex-shrink: 0;
width: 1.4rem;
height: 1.4rem;
margin-top: 0.1em;
color: var(--color-accent);
fill: none;
stroke: currentColor;
stroke-width: 2.25;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (max-width: 767.98px) {
.konzept__point {
font-size: var(--font-size-md);
hyphens: none;
}
.konzept__tick {
width: 1.125rem;
height: 1.125rem;
}
.konzept__grid {
gap: var(--space-6);
}}
@media (max-width: 359.98px) {
.konzept__actions .btn--primary {
padding-inline: var(--space-3);
font-size: var(--font-size-sm);
}}
.konzept__diagram {
display: block;
width: 100%;
margin-top: var(--space-9);
}
.konzept__diagram img {
display: block;
width: 100%;
height: auto;
}
.social__grid {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-6);
margin-top: var(--space-8);
}
.social__item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
width: 12.5rem;
}
.social__item--featured {
width: 14.5rem;
}
@media (min-width: 768px) and (max-width: 1023.98px) {
.social {
--swipe-card: min(35vh, 62vw);
--swipe-gap: 2vw;
}}
.social__grid.is-carousel {
display: block;
position: relative;
--social-card-h: min(calc(var(--social-card-w) * 16 / 9), 62svh);
min-height: calc(var(--social-card-h) + 2.5rem);
perspective: 1400px;
transform-style: preserve-3d;
cursor: grab;
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
.social__grid.is-carousel.is-dragging {
cursor: grabbing;
}
.social__grid.is-carousel:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: var(--space-3);
border-radius: var(--radius-md);
}
.social__grid.is-carousel {
--social-card-w: 15rem;
--social-radius: 300;
--social-step: 52;
--social-drag: 260;
}
.social__stage {
--social-ring-half: 270px;
}
.social__grid.is-carousel .social__item,
.social__grid.is-carousel .social__item--featured {
position: absolute;
top: 0;
left: 50%;
width: var(--social-card-w);
margin-left: calc(var(--social-card-w) / -2);
transition: transform 0.55s var(--easing-premium),
opacity 0.55s var(--easing-premium);
will-change: transform;
}
.social__grid.is-carousel.is-dragging .social__item,
.social__grid.is-carousel.is-stepping .social__item {
transition: none;
}
.social__grid.is-carousel .social__placeholder {
max-height: var(--social-card-h);
}
@media (min-width: 1200px) {
.social__grid.is-carousel {
--social-card-w: 17rem;
--social-radius: 360;
}
.social__stage {
--social-ring-half: 313px;
}}
@media (max-width: 1023.98px) {
.social__grid.is-carousel {
--social-card-w: 24rem;
--social-radius: 500;
--social-step: 50;
--social-drag: 190;
perspective: 1100px;
}}
@media (max-width: 639.98px) {
.social__grid.is-carousel {
--social-card-w: 17.5rem;
--social-radius: 360;
--social-step: 50;
--social-drag: 150;
perspective: 800px;
}}
.social__placeholder {
position: relative;
width: 100%;
aspect-ratio: 9 / 16;
background-color: var(--color-bg);
border-radius: var(--radius-md);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.social__cover {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--easing-premium);
}
.social__play {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: var(--radius-pill);
background-color: rgb(255 255 255 / 0.12);
transition: background-color var(--duration-base) var(--easing-standard);
}
.social__play::before {
content: "";
margin-left: 3px;
border-style: solid;
border-width: 7px 0 7px 11px;
border-color: transparent transparent transparent var(--color-text);
}
.social__caption {
display: flex;
justify-content: center;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
text-align: center;
transition: color var(--duration-base) var(--easing-standard);
}
.social__stage-btn:hover ~ picture .social__cover,
.social__stage-btn:focus-visible ~ picture .social__cover,
.social__placeholder:hover .social__cover {
transform: scale(1.04);
}
.social__placeholder:hover .social__play,
.social__stage-btn:focus-visible ~ .social__play {
background-color: rgb(255 255 255 / 0.24);
}
.social__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity var(--duration-slow) var(--easing-standard);
}
.social__placeholder.is-playing .social__video {
opacity: 1;
}
.social__placeholder.is-playing .social__play {
opacity: 0;
}
.social__grid.is-carousel {
pointer-events: none;
}
.social__grid.is-carousel .social__item {
pointer-events: auto;
}
.social__stage-btn {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: var(--space-3);
margin: 0;
border: 0;
background: none;
color: inherit;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.social__stage-btn:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: -4px;
border-radius: var(--radius-md);
}
.social__sound {
width: 2.25rem;
height: 2.25rem;
padding: 0.5rem;
box-sizing: border-box;
border-radius: var(--radius-pill);
background-color: rgb(1 1 1 / 0.55);
color: var(--color-white);
fill: none;
stroke: currentColor;
opacity: 0;
transition: opacity var(--duration-base) var(--easing-standard),
background-color var(--duration-base) var(--easing-standard);
}
.social__placeholder.is-playing .social__sound {
opacity: 1;
}
.social__stage-btn:hover .social__sound,
.social__stage-btn:focus-visible .social__sound {
background-color: rgb(1 1 1 / 0.8);
}
.social__stage {
position: relative;
}
.social__nav-btn {
display: none;
position: absolute;
top: 50%;
z-index: 200;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
padding: 0;
border: 1px solid var(--color-white);
border-radius: 50%;
background-color: transparent;
color: var(--color-white);
cursor: pointer;
transition:
background-color var(--duration-base) var(--easing-standard),
transform var(--duration-base) var(--easing-standard);
}
@media (min-width: 1024px) {
.social__nav-btn:not([hidden]) {
display: inline-flex;
}
}
.social__nav-btn {
--social-nav-gap: var(--space-5);
--social-nav-inset: max(
0px,
calc(50% - var(--social-ring-half, 20rem) - var(--social-nav-gap) - 3rem)
);
}
.social__nav-btn--prev {
left: var(--social-nav-inset);
transform: translateY(-50%);
}
.social__nav-btn--next {
right: var(--social-nav-inset);
transform: translateY(-50%);
}
.social__nav-btn:hover,
.social__nav-btn:focus-visible {
background-color: rgb(255 255 255 / 0.08);
}
.social__nav-btn--prev:hover,
.social__nav-btn--prev:focus-visible {
transform: translateY(-50%) translateX(-3px);
}
.social__nav-btn--next:hover,
.social__nav-btn--next:focus-visible {
transform: translateY(-50%) translateX(3px);
}
.social__nav-btn:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 3px;
}
.social__nav-arrow {
width: 1.5rem;
height: 1.5rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
transform-origin: center;
}
.social__nav-btn--next .social__nav-arrow {
transform: rotate(45deg);
}
.social__nav-btn--prev .social__nav-arrow {
transform: rotate(225deg);
}
.social__cta {
display: flex;
justify-content: center;
margin-top: var(--space-8);
}
@media (max-width: 1023.98px) {
.social__item,
.social__item--featured {
width: 100%;
max-width: 26rem;
}
.social__grid:not(.is-carousel) .social__placeholder {
max-height: 42svh;
}
}
@media (max-width: 767.98px) {
.social__caption {
-webkit-hyphens: none;
hyphens: none;
font-size: var(--font-size-xs);
}
}@media (max-width: 767.98px) {
.pixel-seam + .conversion {
padding-top: 120px;
}}
.faq__intro {
max-width: none;
margin-inline: auto;
text-align: center;
}
.faq__intro h2 {
font-weight: var(--font-weight-regular);
}
.faq .section-eyebrow {
color: var(--color-gray);
}
.philosophy__intro {
max-width: 46rem;
margin-inline: auto;
text-align: center;
}
.philosophy {
--phil-frame-box: 1px;
--phil-frame-w: 0.5px;
}
.philosophy__grid {
display: grid;
gap: var(--space-7);
margin-top: var(--space-8);
}
.philosophy__item {
position: relative;
height: 100%;
padding: var(--space-6);
border: var(--phil-frame-box) solid var(--color-accent);
border-radius: var(--radius-md);
background-color: rgb(255 255 255 / 0.035);
display: flex;
flex-direction: column;
}
.philosophy__frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: none;
overflow: visible;
pointer-events: none;
}
.philosophy__frame rect {
fill: none;
stroke: var(--color-accent);
stroke-width: var(--phil-frame-w);
stroke-linejoin: round;
}
.philosophy--live .philosophy__item {
border-color: transparent;
}
.philosophy__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);
}
.philosophy--live .philosophy__mark {
background-size: calc(var(--mark, 0) * 100%) 100%;
}
@media (min-width: 1200px) {
.philosophy__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-8);
}}
@media (min-width: 768px) and (max-width: 1199.98px) {
.philosophy__grid {
grid-template-columns: minmax(0, 1fr);
max-width: 44rem;
margin-inline: auto;
}}
.philosophy__item-title {
font-size: var(--font-size-md);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-heading);
letter-spacing: normal;
margin-bottom: var(--space-3);
text-wrap: balance;
}
.philosophy__item:not(:first-child) .philosophy__item-title {
max-width: 18ch;
}
.philosophy__item:first-child .philosophy__item-title {
max-width: 32ch;
}
.philosophy__item-title--masked {
overflow: hidden;
padding-bottom: 0.12em;
}
.philosophy__item-title-inner {
display: block;
will-change: transform;
}
.philosophy__item-text {
color: rgb(255 255 255 / 0.78);
font-size: var(--font-size-sm);
line-height: 1.5;
}
.faq {
--color-link-hover: var(--color-logo-black);
background-color: var(--color-white);
color: var(--color-gray);
padding-top: calc(var(--space-9) + 200px);
}
@media (max-width: 767.98px) {
.faq {
padding-top: calc(var(--space-9) + 120px);
}}
.faq__intro h2 {
color: var(--color-logo-black);
}
.faq__cta {
margin-top: var(--space-8);
display: flex;
justify-content: center;
}
@media (max-width: 639.98px) {
.faq__cta .btn {
width: 100%;
justify-content: center;
}}
.faq__toggle {
border-color: rgb(59 73 86 / 0.35);
color: var(--color-gray);
}
.faq__toggle:hover {
border-color: var(--color-blue-light);
color: var(--color-blue-light);
}
.pixel-seam {
position: relative;
z-index: 2;
height: 0;
overflow: visible;
}
.pixel-seam__band {
position: absolute;
left: 0;
right: 0;
top: 0;
height: var(--pixel-band-h);
display: grid;
grid-template-columns: repeat(var(--pixel-cols, 10), var(--pixel-tile-size, 24px));
grid-template-rows: repeat(var(--pixel-rows, 3), var(--pixel-tile-size, 24px));
pointer-events: none;
overflow: hidden;
}
.pixel-seam__tile {
background-color: var(--pixel-tile-color, var(--color-bg));
opacity: 1;
transition: opacity 0.5s var(--easing-standard);
}
.pixel-seam--light {
--pixel-tile-color: var(--surface-outfits);
}
.pixel-seam--sys {
--pixel-tile-color: var(--color-white);
}
.pixel-seam--white {
--pixel-tile-color: var(--color-white);
}
.pixel-seam--subtle {
--pixel-tile-color: rgb(9 9 9);
}
.pixel-seam--konzept {
--pixel-tile-color: var(--surface-navy);
}
.pixel-seam--konzept .pixel-seam__tile {
background-color: var(--surface-navy);
background-image: linear-gradient(
rgb(61 154 211 / 0.38),
rgb(61 154 211 / 0.38)
);
}
.pixel-seam + .pain-hook {
padding-top: calc(var(--space-9) + 200px);
}
@media (max-width: 767.98px) {
.pixel-seam + .pain-hook {
padding-top: calc(var(--space-9) + 120px);
}}
.pixel-seam + .philosophy {
padding-top: calc(var(--space-9) + 200px);
}
@media (max-width: 767.98px) {
.pixel-seam + .philosophy {
padding-top: calc(var(--space-9) + 120px);
}}
.pixel-seam__tile.is-revealed {
opacity: 0;
}
@media (max-width: 767.98px) {
.pixel-seam {
--pixel-band-h: 120px;
}}
.pricevalue__panel {
max-width: 48rem;
margin-inline: auto;
padding: clamp(var(--space-5), 3.4vw, var(--space-7));
background-color: rgb(255 255 255 / 0.045);
border: 1px solid rgb(255 255 255 / 0.1);
border-radius: var(--radius-lg);
}
.pricevalue__copy h2 {
text-align: center;
text-wrap: balance;
}
.pricevalue__lede {
margin-top: var(--space-4);
max-width: 40rem;
color: rgb(255 255 255 / 0.85);
}
.pricevalue__points {
list-style: none;
margin: var(--space-6) 0 0;
padding: 0;
}
.pricevalue__point {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding-block: var(--space-4);
border-top: 1px solid rgb(255 255 255 / 0.2);
font-size: var(--font-size-md);
line-height: 1.4;
}
.pricevalue__point:last-child {
border-bottom: 1px solid rgb(255 255 255 / 0.2);
}
.pricevalue__tick {
flex-shrink: 0;
width: 1.4rem;
height: 1.4rem;
margin-top: 0.1em;
color: var(--color-accent);
fill: none;
stroke: currentColor;
stroke-width: 2.25;
stroke-linecap: round;
stroke-linejoin: round;
}
.pricevalue__actions {
margin-top: var(--space-6);
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
justify-content: center;
}
@media (max-width: 767.98px) {
.konzept__link {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
}}
.partners {
--color-link-hover: var(--color-logo-black);
background-color: var(--color-white);
padding-top: var(--space-7);
}
.partners__title {
margin: 0 0 var(--space-6);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
letter-spacing: 0.08em;
line-height: var(--line-height-base);
text-transform: uppercase;
text-align: center;
color: var(--color-gray);
}
.partners__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-4) var(--space-8);
}
.partners__link {
display: flex;
align-items: center;
padding: var(--space-2);
border-radius: var(--radius-sm);
opacity: 0.78;
transition: opacity var(--duration-base) var(--easing-standard);
}
.partners__link:hover,
.partners__link:focus-visible {
opacity: 1;
}
.partners__logo {
display: block;
width: auto;
height: 2.75rem;
max-width: 100%;
}
.partners__logo--wide {
height: auto;
max-width: 13rem;
}
@media (max-width: 599.98px) {
.partners {
padding-top: var(--space-6);
}
.partners__list {
gap: var(--space-4) var(--space-6);
}
.partners__logo {
height: 2.25rem;
}
.partners__logo--wide {
max-width: 10.5rem;
}}