/*
* Overrides for the original Webflow stylesheet.
* Loaded LAST in , so these rules win.
*
* Each rule documents the Webflow bug it compensates for. Resist editing
* the upstream Webflow CSS directly — we treat it as immutable.
*/
/* ---------------------------------------------------------------
* Hero ("Wir machen LinkedIn zu deinem Wettbewerbsvorteil")
*
* Original Webflow styles the middle line in italic Noto Serif Display
* with aggressive negative letter-spacing (-9.6px on >=1440px screens).
* With the long German word "Wettbewerbsvorteil" the italic serif
* spills off the right edge and visually clashes with the sans-serif
* lines above and below. Unify to Inter + sane letter-spacing.
* --------------------------------------------------------------- */
.hero-second-title {
font-family: Inter, sans-serif !important;
font-style: normal !important;
font-weight: 400 !important;
letter-spacing: normal !important;
padding-left: 0 !important;
line-height: 100% !important;
}
@media screen and (min-width: 1440px) {
.hero-second-title {
letter-spacing: normal !important;
padding-left: 0 !important;
}
.hero-second-title.short {
letter-spacing: normal !important;
}
}
/* ---------------------------------------------------------------
* About page v3 — amce-studios-inspired modular layout.
* Dark throughout; stacked sections with generous whitespace;
* clear H2 per section; numbered value grid; team cards with
* portrait placeholders + LinkedIn pills.
* --------------------------------------------------------------- */
/* Sitewide-for-about light mode: wrapper owns the beige backdrop, all
* section backgrounds go transparent, all text becomes dark. Keeps
* only the very first class definition untouched below — the rest of
* the dark-mode rules get overridden by the "light mode" block
* that follows. */
.about-v3 {
background: #eceae1;
color: #111;
position: relative;
}
/* --- LIGHT-MODE OVERRIDES FOR THE WHOLE ABOUT PAGE --- */
.about-v3-hero,
.about-v3-founding,
.about-v3-facts,
.about-v3-team-combined,
.about-v3-cta {
background: transparent !important;
border-color: rgba(0, 0, 0, 0.1) !important;
}
.about-v3-hero,
.about-v3-founding,
.about-v3-facts,
.about-v3-team-combined {
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.about-v3 .about-v3-h1,
.about-v3 .about-v3-h2,
.about-v3 .about-v3-kicker-value,
.about-v3 .about-v3-fact-value {
color: #111;
}
.about-v3 .about-v3-lede,
.about-v3 .about-v3-anchors,
.about-v3 .about-v3-founding-text p,
.about-v3 .about-v3-founding-text strong,
.about-v3 .about-v3-cta-body,
.about-v3 .about-v3-fact-body,
.about-v3 .about-v3-fact-label {
color: #3a3a35;
opacity: 0.88;
}
.about-v3 .about-v3-section-label,
.about-v3 .about-v3-kicker-label {
color: #8a8a82;
opacity: 1;
border-bottom-color: rgba(0, 0, 0, 0.15) !important;
}
.about-v3 .about-v3-anchors {
border-top-color: rgba(0, 0, 0, 0.1);
}
.about-v3 .about-v3-anchors a:hover {
opacity: 0.55;
}
.about-v3 .about-v3-fact {
border-top-color: rgba(0, 0, 0, 0.18);
}
/* Approach statement already tuned for light bg in the earlier block —
* the wrapper-level beige just matches it now. Remove the old
* ".about-v3-light" wrapper's redundant beige from the light shell
* since the whole page is beige. */
.about-v3-light {
background: transparent;
}
.about-v3-light::before {
display: none;
}
.about-v3-light-label {
color: #8a8a82;
}
.about-v3-value-number {
color: #111;
}
.about-v3-value-number span {
color: #c0bfb5;
}
.about-v3-value-body {
color: #6a6a63;
}
.about-v3-light-dot {
background: #111;
}
/* Founding placeholder image tint matches the warm cream shell. */
.about-v3 .about-v3-founding-image {
background-color: #dad7cb;
}
/* CTA — swap primary button to a dark pill on light, ghost stays
* understated. */
.about-v3 .about-v3-cta {
background: transparent;
}
.about-v3 .about-v3-cta-button-primary {
background: #111;
color: #eceae1;
}
.about-v3 .about-v3-cta-button-primary:hover {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}
.about-v3 .about-v3-cta-button-ghost {
color: #111;
border-color: rgba(0, 0, 0, 0.25);
}
.about-v3 .about-v3-cta-button-ghost:hover {
background: rgba(0, 0, 0, 0.06);
border-color: rgba(0, 0, 0, 0.45);
}
/* Italic serif accent stays the same colour as surrounding text — it's
* the font that does the work, not a tint. */
.about-v3 .about-v3-italic {
color: inherit;
}
/* Remove the radial glow on the CTA and approach since we're on light. */
.about-v3 .about-v3-approach {
background: transparent;
}
.about-v3 .w-layout-blockcontainer {
padding-left: 24px;
padding-right: 24px;
}
.about-v3-italic {
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 300;
}
.about-v3-h1 {
font-family: Inter, sans-serif;
font-size: clamp(36px, 4.6vw, 68px);
font-weight: 300;
line-height: 1.08;
letter-spacing: -0.025em;
color: var(--light-gray);
margin: 0;
max-width: 22ch;
}
.about-v3-h2 {
font-family: Inter, sans-serif;
font-size: clamp(32px, 4.6vw, 64px);
font-weight: 300;
line-height: 1.05;
letter-spacing: -0.028em;
color: var(--light-gray);
margin: 0;
}
.about-v3-h2-center {
text-align: center;
}
.about-v3-section-head {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 72px;
}
.about-v3-section-label {
font-family: Inter, sans-serif;
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.55;
padding-bottom: 12px;
border-bottom: 1px solid rgba(200, 215, 255, 0.12);
align-self: flex-start;
}
/* 1 — HERO -------------------------------------------------- */
.about-v3-hero {
position: relative;
padding: 140px 0 100px;
background: var(--very-dark-gray);
border-bottom: 1px solid rgba(200, 215, 255, 0.06);
}
.about-v3-hero-inner {
display: flex;
flex-direction: column;
gap: 40px;
max-width: 1100px;
}
.about-v3-lede {
font-family: Inter, sans-serif;
font-size: clamp(18px, 1.5vw, 22px);
line-height: 1.55;
color: var(--light-gray);
opacity: 0.82;
margin: 0;
max-width: 72ch;
}
.about-v3-anchors {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px;
padding-top: 12px;
border-top: 1px solid rgba(200, 215, 255, 0.1);
font-family: Inter, sans-serif;
font-size: 14px;
color: var(--light-gray);
opacity: 0.78;
}
.about-v3-anchors a {
color: inherit;
text-decoration: none;
transition: opacity 0.2s ease;
}
.about-v3-anchors a:hover {
opacity: 0.6;
}
/* 2 — FOUNDING --------------------------------------------- */
.about-v3-founding {
padding: 120px 0;
border-bottom: 1px solid rgba(200, 215, 255, 0.06);
}
.about-v3-founding-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.about-v3-founding-image {
border-radius: 20px;
overflow: hidden;
aspect-ratio: 4 / 5;
background-color: #0b0c14;
}
.about-v3-founding-image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.92) contrast(1.05);
}
.about-v3-founding-text {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 52ch;
}
.about-v3-founding-text p {
font-family: Inter, sans-serif;
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.65;
color: var(--light-gray);
opacity: 0.85;
margin: 0;
}
.about-v3-founding-text strong {
color: var(--light-gray);
font-weight: 500;
}
.about-v3-kicker {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 8px;
}
.about-v3-kicker-value {
font-family: Inter, sans-serif;
font-size: clamp(40px, 4vw, 64px);
font-weight: 300;
line-height: 1;
letter-spacing: -0.03em;
color: var(--light-gray);
}
.about-v3-kicker-label {
font-family: Inter, sans-serif;
font-size: 13px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.55;
}
/* 3 — FACTS ------------------------------------------------ */
.about-v3-facts {
padding: 120px 0;
border-bottom: 1px solid rgba(200, 215, 255, 0.06);
}
.about-v3-facts-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}
.about-v3-fact {
display: flex;
flex-direction: column;
gap: 12px;
padding: 32px 0 0 0;
border-top: 1px solid rgba(200, 215, 255, 0.12);
}
.about-v3-fact-value {
font-family: Inter, sans-serif;
font-size: clamp(48px, 5vw, 76px);
font-weight: 300;
line-height: 1;
letter-spacing: -0.035em;
color: var(--light-gray);
}
.about-v3-fact-label {
font-family: Inter, sans-serif;
font-size: 14px;
font-weight: 500;
color: var(--light-gray);
letter-spacing: 0;
}
.about-v3-fact-body {
font-family: Inter, sans-serif;
font-size: 14px;
line-height: 1.6;
color: var(--light-gray);
opacity: 0.65;
margin: 0;
}
/* 4 + 5 — ANSATZ + WERTE (shared light section, amce-style) -
*
* Breaks the dark sequence with a warm off-white block. Approach is
* one oversized statement (no H2), Werte is a 4-col grid of numbered
* headlines + body copy. A small dark dot at the end signals the end
* of the light block.
* --------------------------------------------------------------- */
.about-v3-light {
background-color: #eceae1;
position: relative;
color: #111;
}
/* Subtle grain texture to match amce's off-white. */
.about-v3-light::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.35;
mix-blend-mode: multiply;
background-image:
radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
radial-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px);
background-size: 3px 3px, 5px 5px;
background-position: 0 0, 1px 2px;
}
.about-v3-light > section {
position: relative;
z-index: 1;
}
.about-v3-light-label {
display: block;
font-family: Inter, sans-serif;
font-size: 13px;
letter-spacing: 0;
text-transform: none;
color: #9b9b94;
font-weight: 400;
}
.about-v3-light-dot {
display: inline-block;
width: 8px;
height: 8px;
background: #111;
border-radius: 50%;
margin-top: 64px;
}
/* 4 — APPROACH (light) */
.about-v3-approach {
padding: 120px 0 100px;
}
.about-v3-approach-statement {
font-family: Inter, sans-serif;
font-weight: 400;
font-size: clamp(32px, 4vw, 58px);
line-height: 1.25;
letter-spacing: -0.02em;
color: #111;
margin: 32px 0 0 0;
max-width: 28ch;
}
/* 5 — WERTE (light) */
.about-v3-values {
padding: 80px 0 140px;
}
.about-v3-values-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 48px;
margin-top: 48px;
}
.about-v3-value {
display: flex;
flex-direction: column;
gap: 24px;
padding: 0;
border-top: none;
}
.about-v3-value-number {
font-family: Inter, sans-serif;
font-size: clamp(20px, 1.8vw, 26px);
font-weight: 400;
color: #111;
letter-spacing: -0.015em;
line-height: 1.2;
}
.about-v3-value-number span {
color: #bbbbb3;
margin: 0 4px;
}
.about-v3-value-body {
font-family: Inter, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #6a6a63;
margin: 48px 0 0 0;
}
/* 6 — TEAM (amce-style combined intro + member grid) ------
*
* One 3-column layout: narrow intro on the left, two large team
* portraits on the right. Each portrait has a name/role row underneath
* (name large left, role muted right) and a paragraph bio below that.
* --------------------------------------------------------------- */
.about-v3-team-combined {
padding: 120px 0 140px;
}
.about-v3-team-combined-grid {
display: grid;
grid-template-columns: 1fr auto auto;
column-gap: 20px;
row-gap: 56px;
align-items: start;
justify-items: start;
}
.about-v3-team-intro-col {
display: flex;
flex-direction: column;
gap: 20px;
padding-top: 8px;
}
.about-v3-team-intro-heading {
font-family: Inter, sans-serif;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.005em;
color: #111;
margin: 0;
}
.about-v3-team-intro-copy {
font-family: Inter, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #3a3a35;
margin: 0;
max-width: 36ch;
}
.about-v3-team-member {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 0;
width: 280px;
}
.about-v3-team-member-photo {
width: 280px;
aspect-ratio: 4 / 5;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #26282e 0%, #0a0b10 100%);
color: #eceae1;
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 300;
font-size: clamp(72px, 7vw, 110px);
letter-spacing: -0.04em;
}
.about-v3-team-member-meta {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 12px;
margin-top: 24px;
width: 280px;
}
.about-v3-team-member-name {
font-family: Inter, sans-serif;
font-size: clamp(22px, 2vw, 30px);
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.02em;
color: #111;
margin: 0;
}
.about-v3-team-member-role {
font-family: Inter, sans-serif;
font-size: 14px;
font-weight: 400;
color: #8a8a82;
letter-spacing: 0;
text-transform: none;
}
.about-v3-team-member-bio {
font-family: Inter, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #3a3a35;
margin: 20px 0 18px 0;
width: 280px;
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}
.about-v3-team-member-linkedin {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
width: fit-content;
background: rgba(17, 17, 17, 0.05);
border: 1px solid rgba(17, 17, 17, 0.18);
border-radius: 999px;
color: #111;
font-family: Inter, sans-serif;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: background-color 0.25s ease, border-color 0.25s ease;
}
.about-v3-team-member-linkedin:hover {
background: rgba(17, 17, 17, 0.12);
border-color: rgba(17, 17, 17, 0.4);
}
/* 8 — CTA ------------------------------------------------ */
.about-v3-cta {
padding: 140px 0;
background: radial-gradient(
900px circle at 50% 0%,
rgba(60, 90, 180, 0.14),
transparent 60%
),
var(--very-dark-gray);
}
.about-v3-cta-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
text-align: center;
max-width: 720px;
margin: 0 auto;
}
.about-v3-cta-body {
font-family: Inter, sans-serif;
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.6;
color: var(--light-gray);
opacity: 0.78;
margin: 0;
max-width: 56ch;
}
.about-v3-cta-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
margin-top: 12px;
}
.about-v3-cta-button-primary,
.about-v3-cta-button-ghost {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 28px;
border-radius: 999px;
font-family: Inter, sans-serif;
font-weight: 500;
font-size: 15px;
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.about-v3-cta-button-primary {
background: var(--light-gray);
color: var(--very-dark-gray);
}
.about-v3-cta-button-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(200, 215, 255, 0.2);
}
.about-v3-cta-button-ghost {
color: var(--light-gray);
border: 1px solid rgba(200, 215, 255, 0.25);
background: transparent;
}
.about-v3-cta-button-ghost:hover {
background: rgba(200, 215, 255, 0.08);
border-color: rgba(200, 215, 255, 0.45);
}
@media (max-width: 960px) {
.about-v3-founding-grid,
.about-v3-team-intro-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.about-v3-founding-image,
.about-v3-team-intro-image {
aspect-ratio: 5 / 4;
}
.about-v3-facts-grid,
.about-v3-values-grid {
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.about-v3-team-grid {
grid-template-columns: 1fr;
}
.about-v3-hero {
padding: 100px 0 72px;
}
.about-v3-founding,
.about-v3-facts,
.about-v3-approach,
.about-v3-values,
.about-v3-team-intro,
.about-v3-team,
.about-v3-cta {
padding: 80px 0;
}
}
@media (max-width: 560px) {
.about-v3-facts-grid,
.about-v3-values-grid {
grid-template-columns: 1fr;
}
}
/* ---------------------------------------------------------------
* About page v2 — balanced layout with clear section headings.
* Alternates between centered and split compositions so the page
* doesn't feel like one long left-aligned column.
* --------------------------------------------------------------- */
.about-v2 {
position: relative;
}
.about-v2-italic {
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 300;
}
.about-v2-label {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: Inter, sans-serif;
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.7;
margin-bottom: 20px;
}
.about-v2-label-mark {
display: inline-block;
width: 24px;
height: 1px;
background-color: rgba(200, 215, 255, 0.5);
}
.about-v2-h2 {
font-family: Inter, sans-serif;
font-size: clamp(32px, 4.4vw, 56px);
font-weight: 300;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--light-gray);
margin: 0;
}
.about-v2-h2-center {
text-align: center;
}
/* 1. HERO ---------------------------------------------------- */
.about-v2-hero {
position: relative;
overflow: hidden;
padding: 120px 0 100px;
background-color: var(--very-dark-gray);
}
.about-v2-hero-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 18px;
padding: 40px 24px;
}
/* ── Dark animated starfield backdrop for the hero.
* Two parallax layers of pin-prick "stars" (via radial-gradient
* tiles), a slow-breathing glow pass on top, and a barely-there
* horizon glow at the bottom. All dark — no bright colours. */
.about-v2-starfield {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
background:
radial-gradient(ellipse at 50% 100%, rgba(30, 40, 80, 0.35) 0%, transparent 55%),
radial-gradient(ellipse at 50% 0%, rgba(20, 22, 35, 0.8) 0%, transparent 65%),
linear-gradient(180deg, #050610 0%, #02030a 100%);
}
.about-v2-stars {
position: absolute;
inset: -50%;
background-repeat: repeat;
will-change: transform;
}
/* Far layer: many tiny dim stars that crawl slowly. */
.about-v2-stars-far {
background-image:
radial-gradient(1px 1px at 20px 30px, rgba(220, 230, 255, 0.55), transparent),
radial-gradient(1px 1px at 60px 90px, rgba(200, 210, 240, 0.4), transparent),
radial-gradient(1px 1px at 130px 150px, rgba(220, 230, 255, 0.5), transparent),
radial-gradient(1px 1px at 200px 40px, rgba(180, 200, 240, 0.35), transparent),
radial-gradient(1px 1px at 250px 210px, rgba(220, 230, 255, 0.45), transparent),
radial-gradient(1px 1px at 320px 120px, rgba(200, 215, 245, 0.4), transparent),
radial-gradient(1px 1px at 80px 260px, rgba(220, 230, 255, 0.5), transparent),
radial-gradient(1px 1px at 370px 290px, rgba(190, 205, 240, 0.35), transparent);
background-size: 400px 340px;
animation: about-v2-starfield-drift-far 180s linear infinite;
opacity: 0.7;
}
/* Near layer: fewer, slightly larger, brighter — faster drift, stronger parallax. */
.about-v2-stars-near {
background-image:
radial-gradient(1.5px 1.5px at 40px 60px, rgba(230, 235, 255, 0.85), transparent),
radial-gradient(2px 2px at 160px 180px, rgba(240, 245, 255, 0.75), transparent),
radial-gradient(1.5px 1.5px at 280px 80px, rgba(220, 230, 255, 0.8), transparent),
radial-gradient(2px 2px at 460px 240px, rgba(235, 240, 255, 0.9), transparent),
radial-gradient(1.5px 1.5px at 530px 40px, rgba(210, 225, 255, 0.7), transparent);
background-size: 600px 320px;
animation: about-v2-starfield-drift-near 120s linear infinite;
opacity: 0.85;
}
/* A few bigger stars that slowly pulse to give life. */
.about-v2-stars-glow {
background-image:
radial-gradient(3px 3px at 220px 140px, rgba(255, 255, 255, 0.95), transparent 55%),
radial-gradient(2.5px 2.5px at 620px 320px, rgba(235, 240, 255, 0.9), transparent 55%),
radial-gradient(3px 3px at 900px 90px, rgba(230, 235, 255, 0.85), transparent 55%);
background-size: 1100px 500px;
animation:
about-v2-starfield-drift-near 160s linear infinite,
about-v2-starfield-twinkle 5s ease-in-out infinite;
opacity: 0.75;
filter: blur(0.3px);
}
/* Barely-there horizon glow at the bottom edge. */
.about-v2-horizon {
position: absolute;
left: -10%;
right: -10%;
bottom: -30%;
height: 70%;
background: radial-gradient(
ellipse at center,
rgba(60, 80, 160, 0.22) 0%,
rgba(30, 40, 90, 0.1) 40%,
transparent 75%
);
filter: blur(40px);
animation: about-v2-horizon-breathe 14s ease-in-out infinite;
pointer-events: none;
}
@keyframes about-v2-starfield-drift-far {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-400px, -340px, 0); }
}
@keyframes about-v2-starfield-drift-near {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-600px, -320px, 0); }
}
@keyframes about-v2-starfield-twinkle {
0%, 100% { opacity: 0.75; }
50% { opacity: 0.4; }
}
@keyframes about-v2-horizon-breathe {
0%, 100% { opacity: 0.85; transform: translateY(0); }
50% { opacity: 1; transform: translateY(-12px); }
}
/* Vignette so the centred text remains crisp. */
.about-v2-hero::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at 50% 45%,
transparent 0%,
rgba(4, 4, 4, 0.45) 70%,
rgba(2, 3, 10, 0.85) 100%
);
pointer-events: none;
z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
.about-v2-stars,
.about-v2-horizon {
animation: none;
}
}
.about-v2-hero-eyebrow {
font-family: Inter, sans-serif;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.6;
}
.about-v2-hero-title {
font-family: Inter, sans-serif;
font-size: clamp(44px, 6.5vw, 96px);
font-weight: 300;
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--light-gray);
margin: 0;
max-width: 16ch;
}
.about-v2-hero-sub {
font-family: Inter, sans-serif;
font-size: clamp(17px, 1.6vw, 20px);
line-height: 1.55;
color: var(--light-gray);
opacity: 0.75;
margin: 6px 0 0 0;
max-width: 54ch;
}
/* 2. STORY — split ------------------------------------------ */
.about-v2-story {
position: relative;
padding: 120px 0;
background: linear-gradient(180deg, var(--very-dark-gray) 0%, #070810 100%);
}
.about-v2-story-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.about-v2-story-left {
position: sticky;
top: 120px;
}
.about-v2-story-right {
display: flex;
flex-direction: column;
gap: 22px;
padding-top: 8px;
}
.about-v2-prose {
font-family: Inter, sans-serif;
font-size: clamp(16px, 1.3vw, 18px);
line-height: 1.65;
color: var(--light-gray);
opacity: 0.82;
margin: 0;
max-width: 58ch;
}
/* 3. STATS — centered row ---------------------------------- */
.about-v2-stats {
position: relative;
padding: 120px 0;
background: linear-gradient(180deg, #070810 0%, #0a0b14 100%);
border-top: 1px solid rgba(200, 215, 255, 0.06);
border-bottom: 1px solid rgba(200, 215, 255, 0.06);
}
.about-v2-stats-inner,
.about-v2-principles-inner,
.about-v2-team-inner,
.about-v2-cta-inner {
display: flex;
flex-direction: column;
align-items: center;
}
.about-v2-stats-head,
.about-v2-principles-head,
.about-v2-team-head {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
margin-bottom: 64px;
}
.about-v2-stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
width: 100%;
max-width: 1100px;
}
.about-v2-stat {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 32px 16px;
border-left: 1px solid rgba(200, 215, 255, 0.1);
}
.about-v2-stat:first-child {
border-left: none;
}
.about-v2-stat-value {
font-family: Inter, sans-serif;
font-size: clamp(48px, 5.5vw, 80px);
font-weight: 300;
line-height: 1;
letter-spacing: -0.035em;
color: var(--light-gray);
}
.about-v2-stat-label {
font-family: Inter, sans-serif;
font-size: 15px;
font-weight: 500;
color: var(--light-gray);
margin-top: 12px;
}
.about-v2-stat-detail {
font-family: Inter, sans-serif;
font-size: 13px;
line-height: 1.45;
color: var(--light-gray);
opacity: 0.6;
margin-top: 4px;
max-width: 22ch;
}
/* 4. PRINCIPLES — 3-card grid centered --------------------- */
.about-v2-principles {
position: relative;
padding: 120px 0;
background: linear-gradient(180deg, #0a0b14 0%, #080910 100%);
}
.about-v2-principles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
width: 100%;
max-width: 1100px;
}
.about-v2-principle {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
padding: 36px 30px;
background: linear-gradient(180deg, rgba(23, 25, 34, 0.75), rgba(10, 11, 18, 0.8));
border: 1px solid rgba(200, 215, 255, 0.08);
border-radius: 18px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: border-color 0.25s ease, transform 0.25s ease;
}
.about-v2-principle:hover {
border-color: rgba(200, 215, 255, 0.22);
transform: translateY(-3px);
}
.about-v2-principle-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(200, 215, 255, 0.1);
border: 1px solid rgba(200, 215, 255, 0.2);
font-size: 20px;
color: var(--light-gray);
}
.about-v2-principle-title {
font-family: Inter, sans-serif;
font-size: 22px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--light-gray);
margin: 0;
}
.about-v2-principle-body {
font-family: Inter, sans-serif;
font-size: 15px;
line-height: 1.6;
color: var(--light-gray);
opacity: 0.72;
margin: 0;
}
/* 5. TEAM — centered cards -------------------------------- */
.about-v2-team {
position: relative;
padding: 120px 0;
background:
radial-gradient(
700px circle at 50% 40%,
rgba(60, 90, 180, 0.14),
transparent 65%
),
linear-gradient(180deg, #080910 0%, var(--very-dark-gray) 100%);
}
.about-v2-team-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
width: 100%;
max-width: 920px;
}
.about-v2-team-card {
display: flex;
flex-direction: column;
background: linear-gradient(180deg, rgba(23, 25, 34, 0.8), rgba(10, 11, 18, 0.9));
border: 1px solid rgba(200, 215, 255, 0.1);
border-radius: 20px;
overflow: hidden;
transition: border-color 0.3s ease, transform 0.3s ease;
}
.about-v2-team-card:hover {
border-color: rgba(200, 215, 255, 0.25);
transform: translateY(-4px);
}
.about-v2-team-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, #1e2030 0%, #0a0b12 100%);
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 300;
font-size: clamp(72px, 9vw, 112px);
color: var(--light-gray);
opacity: 0.82;
letter-spacing: -0.04em;
border-bottom: 1px solid rgba(200, 215, 255, 0.1);
}
.about-v2-team-body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 32px;
}
.about-v2-team-role {
font-family: Inter, sans-serif;
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.55;
}
.about-v2-team-name {
font-family: Inter, sans-serif;
font-size: 26px;
font-weight: 500;
line-height: 1.15;
color: var(--light-gray);
margin: 0;
}
.about-v2-team-bio {
font-family: Inter, sans-serif;
font-size: 15px;
line-height: 1.6;
color: var(--light-gray);
opacity: 0.76;
margin: 6px 0 14px 0;
}
.about-v2-team-linkedin {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
width: fit-content;
background: rgba(200, 215, 255, 0.1);
border: 1px solid rgba(200, 215, 255, 0.2);
border-radius: 999px;
color: var(--light-gray);
font-family: Inter, sans-serif;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: background-color 0.25s ease, border-color 0.25s ease;
}
.about-v2-team-linkedin:hover {
background: rgba(200, 215, 255, 0.22);
border-color: rgba(200, 215, 255, 0.4);
}
/* 6. CTA ------------------------------------------------- */
.about-v2-cta {
position: relative;
padding: 100px 0 140px;
background: var(--very-dark-gray);
}
.about-v2-cta-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
text-align: center;
}
.about-v2-cta-title {
font-family: Inter, sans-serif;
font-size: clamp(32px, 4.5vw, 56px);
font-weight: 300;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--light-gray);
margin: 0;
max-width: 20ch;
}
.about-v2-cta-button {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 32px;
background: var(--light-gray);
color: var(--very-dark-gray);
border-radius: 999px;
font-family: Inter, sans-serif;
font-weight: 500;
font-size: 16px;
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.about-v2-cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 14px 40px rgba(200, 215, 255, 0.2);
}
@media (max-width: 880px) {
.about-v2-story-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.about-v2-story-left {
position: static;
}
.about-v2-stats-row {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.about-v2-stat {
border-left: none;
border-top: 1px solid rgba(200, 215, 255, 0.1);
}
.about-v2-stat:nth-child(-n + 2) {
border-top: none;
}
.about-v2-principles-grid,
.about-v2-team-grid {
grid-template-columns: 1fr;
}
.about-v2-hero,
.about-v2-story,
.about-v2-stats,
.about-v2-principles,
.about-v2-team,
.about-v2-cta {
padding: 72px 0;
}
}
/* ---------------------------------------------------------------
* About page — creative composition with flowing sections
* (legacy, kept for backwards compatibility if any links remain)
*
* Five chapters held together by a left-edge scroll-driven thread
* and gradient section backgrounds that bleed into each other.
* --------------------------------------------------------------- */
.about-x {
position: relative;
}
.about-x-thread {
position: fixed;
top: 0;
bottom: 0;
left: clamp(16px, 3vw, 48px);
width: 1px;
z-index: 4;
pointer-events: none;
}
.about-x-thread-track {
position: absolute;
inset: 10% 0;
background: rgba(200, 215, 255, 0.08);
}
.about-x-thread-fill {
position: absolute;
inset: 10% 0;
background: linear-gradient(
to bottom,
rgba(200, 215, 255, 0) 0%,
rgba(200, 215, 255, 0.65) 50%,
rgba(200, 215, 255, 0) 100%
);
}
/* Chapter markers reused across sections */
.about-x-chapter {
display: inline-flex;
align-items: center;
gap: 14px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(200, 215, 255, 0.12);
font-family: Inter, sans-serif;
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.65;
margin-bottom: 48px;
}
.about-x-chapter-num {
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 300;
font-size: 14px;
letter-spacing: 0.5px;
text-transform: none;
opacity: 0.75;
}
.about-x-chapter-label {
font-weight: 500;
color: var(--light-gray);
opacity: 0.85;
}
/* 1. HERO ----------------------------------------------------- */
.about-x-hero {
position: relative;
min-height: 82vh;
display: flex;
align-items: center;
padding: 80px 0 40px;
background:
radial-gradient(
900px circle at 25% 30%,
rgba(60, 90, 180, 0.22),
transparent 60%
),
linear-gradient(180deg, var(--very-dark-gray) 0%, #07080f 100%);
}
.about-x-hero-inner {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
}
.about-x-eyebrow {
font-family: Inter, sans-serif;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.6;
}
.about-x-hero-title {
margin: 0;
font-family: Inter, sans-serif;
font-size: clamp(44px, 7vw, 108px);
font-weight: 300;
line-height: 1.02;
letter-spacing: -0.03em;
color: var(--light-gray);
max-width: 14ch;
}
.about-x-hero-accent {
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 300;
}
.about-x-hero-sub {
font-family: Inter, sans-serif;
font-size: clamp(17px, 1.6vw, 22px);
line-height: 1.5;
color: var(--light-gray);
opacity: 0.75;
max-width: 48ch;
margin: 0;
}
.about-x-scroll-hint {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: auto;
padding-top: 56px;
font-family: Inter, sans-serif;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.45;
}
/* 2. MANIFESTO ------------------------------------------------ */
.about-x-manifesto {
position: relative;
padding: 120px 0;
background: linear-gradient(180deg, #07080f 0%, #05060c 100%);
}
.about-x-manifesto-glow {
position: absolute;
top: 30%;
left: 10%;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(120, 150, 230, 0.14),
transparent 60%
);
filter: blur(40px);
pointer-events: none;
}
.about-x-manifesto-text {
font-family: Inter, sans-serif;
font-weight: 300;
font-size: clamp(20px, 2.4vw, 32px);
line-height: 1.4;
letter-spacing: -0.01em;
color: var(--light-gray);
max-width: 42ch;
margin: 0 0 36px 0;
}
.about-x-manifesto-text-muted {
font-size: clamp(16px, 1.6vw, 20px);
line-height: 1.6;
opacity: 0.7;
max-width: 54ch;
margin-top: 16px;
}
.about-x-highlight {
position: relative;
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 400;
color: var(--light-gray);
padding: 0 4px;
background: linear-gradient(
120deg,
rgba(120, 150, 230, 0.18),
rgba(120, 150, 230, 0.06)
);
border-radius: 4px;
}
/* 3. STATS ---------------------------------------------------- */
.about-x-stats {
position: relative;
padding: 80px 0 120px;
background: linear-gradient(180deg, #05060c 0%, #070810 100%);
}
.about-x-stats-prose p {
font-family: Inter, sans-serif;
font-weight: 300;
font-size: clamp(22px, 2.5vw, 36px);
line-height: 1.45;
letter-spacing: -0.015em;
color: var(--light-gray);
opacity: 0.88;
max-width: 22ch;
margin: 0;
}
.about-x-stat {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
line-height: 0.95;
padding: 4px 10px 2px;
margin: 0 4px;
border-radius: 10px;
background: rgba(120, 150, 230, 0.1);
border: 1px solid rgba(120, 150, 230, 0.18);
vertical-align: middle;
}
.about-x-stat em {
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 400;
font-size: 1.12em;
color: #ffffff;
letter-spacing: -0.02em;
}
.about-x-stat small {
font-family: Inter, sans-serif;
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
opacity: 0.55;
margin-top: 2px;
}
/* 4. PRINCIPLES ---------------------------------------------- */
.about-x-principles {
position: relative;
padding: 120px 0;
background: linear-gradient(180deg, #070810 0%, #05060c 100%);
}
.about-x-principles-title {
font-family: Inter, sans-serif;
font-size: clamp(32px, 4.5vw, 56px);
font-weight: 300;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--light-gray);
margin: 0 0 56px 0;
}
.about-x-principles-accent {
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 300;
}
.about-x-principles-list {
display: flex;
flex-direction: column;
gap: 48px;
max-width: 820px;
}
.about-x-principle {
display: grid;
grid-template-columns: 80px 1fr;
gap: 28px;
padding-top: 32px;
border-top: 1px solid rgba(200, 215, 255, 0.08);
}
.about-x-principle-num {
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 300;
font-size: 48px;
line-height: 1;
color: var(--light-gray);
opacity: 0.4;
letter-spacing: -0.02em;
}
.about-x-principle-content {
display: flex;
flex-direction: column;
gap: 10px;
}
.about-x-principle-title {
font-family: Inter, sans-serif;
font-size: clamp(22px, 2.2vw, 28px);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--light-gray);
margin: 0;
}
.about-x-principle-body {
font-family: Inter, sans-serif;
font-size: 16px;
line-height: 1.65;
color: var(--light-gray);
opacity: 0.72;
margin: 0;
max-width: 56ch;
}
/* 5. TEAM ---------------------------------------------------- */
.about-x-team {
position: relative;
padding: 120px 0;
background:
radial-gradient(
700px circle at 80% 30%,
rgba(60, 90, 180, 0.16),
transparent 60%
),
linear-gradient(180deg, #05060c 0%, var(--very-dark-gray) 100%);
}
.about-x-team-title {
font-family: Inter, sans-serif;
font-size: clamp(36px, 5vw, 64px);
font-weight: 300;
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--light-gray);
margin: 0 0 72px 0;
}
.about-x-team-accent {
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 300;
}
.about-x-team-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
max-width: 980px;
}
.about-x-team-card {
display: flex;
flex-direction: column;
gap: 24px;
padding: 32px;
background: linear-gradient(180deg, rgba(23, 25, 34, 0.8), rgba(10, 11, 18, 0.9));
border: 1px solid rgba(200, 215, 255, 0.1);
border-radius: 20px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: border-color 0.3s ease, transform 0.3s ease;
}
.about-x-team-card:hover {
border-color: rgba(200, 215, 255, 0.22);
transform: translateY(-3px);
}
.about-x-team-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 14px;
background: linear-gradient(135deg, #1a1c26 0%, #0a0b12 100%);
border: 1px solid rgba(200, 215, 255, 0.08);
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 300;
font-size: clamp(64px, 9vw, 104px);
color: var(--light-gray);
opacity: 0.85;
letter-spacing: -0.04em;
}
.about-x-team-body {
display: flex;
flex-direction: column;
gap: 8px;
}
.about-x-team-name {
font-family: Inter, sans-serif;
font-size: 24px;
font-weight: 500;
line-height: 1.2;
color: var(--light-gray);
margin: 0;
}
.about-x-team-role {
font-family: Inter, sans-serif;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.55;
}
.about-x-team-bio {
font-family: Inter, sans-serif;
font-size: 15px;
line-height: 1.55;
color: var(--light-gray);
opacity: 0.78;
margin: 6px 0 12px 0;
}
.about-x-team-linkedin {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
width: fit-content;
background: rgba(200, 215, 255, 0.08);
border: 1px solid rgba(200, 215, 255, 0.18);
border-radius: 999px;
color: var(--light-gray);
font-family: Inter, sans-serif;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: background-color 0.25s ease, border-color 0.25s ease;
}
.about-x-team-linkedin:hover {
background: rgba(200, 215, 255, 0.18);
border-color: rgba(200, 215, 255, 0.35);
}
.about-x-team-linkedin.is-placeholder {
opacity: 0.5;
cursor: default;
}
.about-x-team-cta {
margin-top: 80px;
display: flex;
justify-content: center;
}
.about-x-team-cta-button {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 32px;
background: var(--light-gray);
color: var(--very-dark-gray);
border-radius: 999px;
font-family: Inter, sans-serif;
font-weight: 500;
font-size: 16px;
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.about-x-team-cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 14px 40px rgba(200, 215, 255, 0.2);
}
@media (max-width: 880px) {
.about-x-thread {
display: none;
}
.about-x-hero {
min-height: 72vh;
}
.about-x-manifesto,
.about-x-stats,
.about-x-principles,
.about-x-team {
padding: 72px 0;
}
.about-x-principle {
grid-template-columns: 56px 1fr;
gap: 18px;
}
.about-x-team-grid {
grid-template-columns: 1fr;
}
}
/* ---------------------------------------------------------------
* Article detail page (app/articles/[slug]/page.tsx) — light theme
* shared with the rest of the home / blog / info pages.
* --------------------------------------------------------------- */
.article-x {
padding: 24px 0 64px;
}
.article-x-header {
padding: 0 0 40px;
}
.article-x-header-inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 18px;
max-width: 820px;
margin: 0 auto;
padding: 0 24px;
}
.article-x-back {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: Inter, sans-serif;
font-size: 13px;
font-weight: 500;
color: #111;
text-decoration: none;
opacity: 0.65;
transition: opacity 0.2s ease, gap 0.2s ease;
align-self: center;
margin-bottom: 8px;
}
.article-x-back:hover {
opacity: 1;
gap: 12px;
}
.article-x-meta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: Inter, sans-serif;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #111;
opacity: 0.65;
}
.article-x-category {
font-weight: 500;
}
.article-x-dot {
opacity: 0.4;
}
.article-x-title {
font-family: Inter, sans-serif;
font-size: clamp(32px, 4.6vw, 60px);
font-weight: 300;
line-height: 1.1;
letter-spacing: -0.025em;
color: #111;
margin: 0;
max-width: 22ch;
}
.article-x-lead {
font-family: Inter, sans-serif;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.5;
color: #3a3a35;
max-width: 56ch;
margin: 0;
}
.article-x-author {
display: inline-flex;
align-items: baseline;
gap: 6px;
margin-top: 6px;
font-family: Inter, sans-serif;
font-size: 13px;
color: #111;
}
.article-x-author-label {
opacity: 0.55;
}
.article-x-author-name {
font-weight: 500;
}
.article-x-cover-wrap {
padding: 16px 0 32px;
}
.article-x-cover {
display: block;
width: 100%;
max-width: 980px;
margin: 0 auto;
height: auto;
max-height: 560px;
object-fit: cover;
border-radius: 18px;
}
.article-x-body-wrap {
padding: 24px 0 40px;
}
.article-x-body {
max-width: 680px;
margin: 0 auto;
padding: 0 24px;
font-family: Inter, sans-serif;
color: #1c1c19;
}
.article-x-h2 {
font-family: Inter, sans-serif;
font-size: clamp(24px, 2.4vw, 32px);
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.015em;
color: #111;
margin: 56px 0 16px 0;
}
.article-x-h3 {
font-family: Inter, sans-serif;
font-size: clamp(20px, 2vw, 24px);
font-weight: 500;
line-height: 1.3;
color: #111;
margin: 40px 0 12px 0;
}
.article-x-p {
font-size: 17px;
line-height: 1.75;
color: #2c2c27;
margin: 0 0 20px 0;
}
.article-x-quote {
border-left: 3px solid #111;
padding-left: 20px;
margin: 32px 0;
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 400;
font-size: 21px;
line-height: 1.5;
color: #111;
}
.article-x-list {
padding-left: 22px;
margin: 0 0 24px 0;
}
.article-x-li {
font-size: 17px;
line-height: 1.7;
color: #2c2c27;
margin-bottom: 8px;
}
.article-x-link {
color: #111;
text-decoration: underline;
text-decoration-color: rgba(17, 17, 17, 0.4);
text-underline-offset: 3px;
transition: text-decoration-color 0.2s ease;
}
.article-x-link:hover {
text-decoration-color: #111;
}
.article-x-body-image {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
margin: 32px 0;
}
/* Related posts strip below the article */
.article-x-related {
padding: 80px 0 100px;
border-top: 1px solid rgba(17, 17, 17, 0.1);
margin-top: 40px;
}
.article-x-related-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
margin-bottom: 48px;
}
.article-x-related-eyebrow {
font-family: Inter, sans-serif;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: #111;
opacity: 0.6;
}
.article-x-related-title {
font-family: Inter, sans-serif;
font-size: clamp(28px, 3.2vw, 40px);
font-weight: 300;
line-height: 1.1;
letter-spacing: -0.02em;
color: #111;
margin: 0;
}
.article-x-related-italic {
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 300;
}
.article-x-related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1080px;
margin: 0 auto;
}
.article-x-related-card {
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #f5f3ec 0%, #e7e3d7 100%);
border: 1px solid rgba(17, 17, 17, 0.08);
border-radius: 18px;
overflow: hidden;
color: #111;
text-decoration: none;
transition: border-color 0.25s ease, transform 0.25s ease;
}
.article-x-related-card:hover {
border-color: rgba(17, 17, 17, 0.25);
transform: translateY(-3px);
}
.article-x-related-cover {
width: 100%;
aspect-ratio: 16 / 10;
background-color: #d8d4c6;
background-size: cover;
background-position: center;
}
.article-x-related-body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 22px 22px;
}
.article-x-related-meta {
display: flex;
align-items: center;
gap: 6px;
font-family: Inter, sans-serif;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: #111;
opacity: 0.6;
}
.article-x-related-card-title {
font-family: Inter, sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.01em;
color: #111;
margin: 4px 0 0 0;
}
@media (max-width: 880px) {
.article-x-related-grid {
grid-template-columns: 1fr;
}
.article-x {
padding: 16px 0 48px;
}
}
/* ---------------------------------------------------------------
* Info pages (Impressum + Datenschutz) — light theme
* Shared with app/impressum, app/datenschutz, app/contact hero.
* --------------------------------------------------------------- */
.info-page-hero {
padding: 0 0 16px;
}
.info-page-hero-inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 18px;
max-width: 820px;
margin: 0 auto;
padding: 0 24px;
}
.info-page-eyebrow {
font-family: Inter, sans-serif;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: #111;
opacity: 0.65;
}
.info-page-title {
font-family: Inter, sans-serif;
font-size: clamp(36px, 5vw, 72px);
font-weight: 300;
line-height: 1.08;
letter-spacing: -0.03em;
color: #111;
margin: 0;
max-width: 22ch;
}
.info-page-italic {
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 300;
}
.info-page-lead {
font-family: Inter, sans-serif;
font-size: clamp(16px, 1.4vw, 18px);
line-height: 1.6;
color: #3a3a35;
max-width: 56ch;
margin: 0;
}
.info-page-body {
padding: 32px 0 96px;
}
.info-page-body-inner {
max-width: 720px;
margin: 0 auto;
padding: 0 24px;
}
.info-page-section {
margin-top: 48px;
}
.info-page-section:first-child {
margin-top: 0;
}
.info-page-h2 {
display: flex;
align-items: baseline;
gap: 16px;
font-family: Inter, sans-serif;
font-size: clamp(20px, 2vw, 24px);
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.01em;
color: #111;
margin: 0 0 16px 0;
}
.info-page-h2-num {
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 300;
font-size: 0.9em;
color: #8a8a82;
flex-shrink: 0;
}
.info-page-body p,
.info-page-body ul {
font-family: Inter, sans-serif;
font-size: 15px;
line-height: 1.7;
color: #3a3a35;
margin: 0 0 12px 0;
}
.info-page-body p strong {
color: #111;
font-weight: 500;
}
.info-page-body a {
color: #111;
text-decoration: underline;
text-decoration-color: rgba(17, 17, 17, 0.35);
text-underline-offset: 3px;
transition: text-decoration-color 0.2s ease;
}
.info-page-body a:hover {
text-decoration-color: #111;
}
.info-page-list {
padding-left: 20px;
margin: 8px 0 12px 0;
}
.info-page-list li {
margin-bottom: 6px;
}
.info-page-meta {
margin-top: 56px !important;
padding-top: 24px;
border-top: 1px solid rgba(17, 17, 17, 0.1);
font-size: 13px !important;
color: #8a8a82 !important;
font-style: italic;
}
/* Contact page specific */
.contact-page-body {
padding: 32px 0 96px;
}
.contact-page-inner {
max-width: 900px;
margin: 0 auto;
padding: 0 24px;
}
.contact-page-embed {
border-radius: 20px;
overflow: hidden;
background: #f5f3ec;
border: 1px solid rgba(17, 17, 17, 0.08);
}
.contact-page-iframe {
display: block;
width: 100%;
/* Tall enough to hold the full TidyCal flow (date picker → time slots
* → confirmation form) without an inner scrollbar, so visitors can
* flow naturally from the page into the booking UI. */
height: 1180px;
border: 0;
}
.contact-page-placeholder {
padding: 56px 40px;
background: #f5f3ec;
border: 1px dashed rgba(17, 17, 17, 0.2);
border-radius: 20px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.contact-page-placeholder-badge {
display: inline-flex;
padding: 6px 14px;
background: rgba(17, 17, 17, 0.08);
border-radius: 999px;
font-family: Inter, sans-serif;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: #111;
opacity: 0.7;
}
.contact-page-placeholder-title {
font-family: Inter, sans-serif;
font-size: clamp(22px, 2.2vw, 28px);
font-weight: 400;
color: #111;
margin: 0;
}
.contact-page-placeholder-body {
font-family: Inter, sans-serif;
font-size: 15px;
line-height: 1.6;
color: #3a3a35;
max-width: 48ch;
margin: 0;
}
.contact-page-placeholder-body code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.95em;
padding: 2px 6px;
background: rgba(17, 17, 17, 0.08);
border-radius: 4px;
}
.contact-page-placeholder-body a {
color: #111;
text-decoration: underline;
text-decoration-color: rgba(17, 17, 17, 0.35);
text-underline-offset: 3px;
}
.contact-page-alt {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 56px;
padding-top: 40px;
border-top: 1px solid rgba(17, 17, 17, 0.1);
}
.contact-page-alt-col {
display: flex;
flex-direction: column;
gap: 6px;
}
.contact-page-alt-label {
font-family: Inter, sans-serif;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: #8a8a82;
}
.contact-page-alt-link {
font-family: Inter, sans-serif;
font-size: 16px;
color: #111;
text-decoration: none;
transition: opacity 0.2s ease;
width: fit-content;
}
.contact-page-alt-link:hover {
opacity: 0.65;
}
.contact-page-alt-socials {
display: flex;
flex-direction: column;
gap: 6px;
}
.contact-page-alt-address {
font-family: Inter, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #111;
}
@media (max-width: 720px) {
.contact-page-alt {
grid-template-columns: 1fr;
gap: 24px;
}
.contact-page-iframe {
height: 1480px;
}
}
/* ---------------------------------------------------------------
* Blog index page (app/blog/page.tsx) — light theme
* --------------------------------------------------------------- */
.blog-page-hero {
padding: 0 0 16px;
}
.blog-page-hero-inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 18px;
max-width: 820px;
margin: 0 auto;
padding: 0 24px;
}
.blog-page-hero-eyebrow {
font-family: Inter, sans-serif;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: #111;
opacity: 0.65;
}
.blog-page-hero-title {
font-family: Inter, sans-serif;
font-size: clamp(36px, 5vw, 72px);
font-weight: 300;
line-height: 1.08;
letter-spacing: -0.03em;
color: #111;
margin: 0;
max-width: 20ch;
}
.blog-page-hero-italic {
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 300;
color: inherit;
}
.blog-page-hero-lead {
font-family: Inter, sans-serif;
font-size: clamp(16px, 1.4vw, 18px);
line-height: 1.6;
color: #3a3a35;
opacity: 1;
max-width: 56ch;
margin: 0;
}
.blog-page-grid-wrap {
padding: 48px 0 120px;
}
/* On the blog page the grid fits 6+ items in rows of 3 — reuse the
* .blog-t-* palette but widen the row gap so the two rows read as
* separate beats instead of a dense mosaic. */
.blog-page-grid {
grid-template-columns: repeat(3, 1fr) !important;
column-gap: 20px;
row-gap: 48px;
}
/* Placeholder cards are visually present but not interactive — dim
* slightly and disable hover + pointer events. */
.blog-t-card.is-placeholder {
opacity: 0.72;
cursor: default;
pointer-events: none;
}
.blog-t-card.is-placeholder:hover {
transform: none;
}
/* Spacing between the initial grid and the archive grid when the
* expand is open — same gap as between rows inside either grid. */
.blog-page-archive {
margin-top: 20px;
}
/* Expand button below both grids. */
.blog-page-expand-wrap {
display: flex;
justify-content: center;
margin-top: 56px;
}
.blog-page-expand-button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: transparent;
border: 1px solid rgba(17, 17, 17, 0.22);
border-radius: 999px;
color: #111;
font-family: Inter, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}
.blog-page-expand-button:hover {
background-color: rgba(17, 17, 17, 0.06);
border-color: rgba(17, 17, 17, 0.4);
gap: 14px;
}
.blog-page-expand-arrow {
transition: transform 0.3s ease;
}
.blog-page-expand-arrow.is-up {
transform: rotate(180deg);
}
@media (max-width: 960px) {
.blog-page-grid {
grid-template-columns: 1fr !important;
}
.blog-page-hero {
padding: 100px 0 24px;
}
.blog-page-grid-wrap {
padding: 32px 0 80px;
}
.blog-page-expand-wrap {
margin-top: 40px;
}
}
/* ---------------------------------------------------------------
* Home partners marquee (components/HomePartners.tsx)
*
* Endless horizontal scroll of placeholder partner wordmarks.
* Pauses on hover, fades at the edges so logos enter/exit the
* viewport softly. Pure CSS animation, no JS.
* --------------------------------------------------------------- */
.home-partners {
padding: 60px 0 80px;
overflow: hidden;
}
.home-partners-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
margin-bottom: 44px;
}
.home-partners-eyebrow {
font-family: Inter, sans-serif;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.6;
}
.home-partners-title {
font-family: Inter, sans-serif;
font-size: clamp(26px, 3vw, 40px);
font-weight: 300;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--light-gray);
margin: 0;
}
.home-partners-italic {
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 300;
}
.home-partners-marquee {
position: relative;
width: 100%;
overflow: hidden;
/* Edge fade so logos dissolve in/out instead of cutting off. */
-webkit-mask-image: linear-gradient(
to right,
transparent 0,
black 8%,
black 92%,
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0,
black 8%,
black 92%,
transparent 100%
);
}
.home-partners-track {
display: flex;
gap: 96px;
width: max-content;
align-items: center;
padding: 32px 0;
animation: home-partners-scroll 42s linear infinite;
will-change: transform;
}
.home-partners-marquee:hover .home-partners-track {
animation-play-state: paused;
}
.home-partners-logo {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
height: 150px;
opacity: 0.85;
transition: opacity 0.25s ease;
}
.home-partners-logo:hover {
opacity: 1;
}
/* Force every logo to render at the same fixed height so wide
* logos no longer stop short of the row baseline that the squarer
* Hortmann Law one was already filling. Width adapts to the source
* aspect ratio and is allowed to grow as needed. */
.home-partners-logo-img {
display: block;
height: 150px;
width: auto;
max-width: none;
max-height: none;
object-fit: contain;
}
@keyframes home-partners-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.home-partners-track {
animation: none;
}
}
/* Light-mode palette */
.home-light .home-partners-eyebrow,
.home-light .home-partners-title,
.home-light .home-partners-logo {
color: #111;
}
.home-light .home-partners-eyebrow {
opacity: 0.65;
}
.home-light .home-partners-logo {
opacity: 0.45;
}
.home-light .home-partners-logo:hover {
opacity: 1;
}
/* ---------------------------------------------------------------
* Home team section (components/HomeTeamSection.tsx)
*
* Compact intro of Celine + Lorena on the home page so the site can
* function as a one-pager. Two cards side by side, each with a
* portrait tile, name + role row, one-line intro and a LinkedIn pill.
* --------------------------------------------------------------- */
.home-team {
padding: 100px 0 120px;
}
.home-team-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
margin-bottom: 56px;
}
.home-team-eyebrow {
font-family: Inter, sans-serif;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.6;
}
.home-team-title {
font-family: Inter, sans-serif;
font-size: clamp(30px, 4vw, 48px);
font-weight: 300;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--light-gray);
margin: 0;
max-width: 20ch;
}
.home-team-italic {
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 300;
}
.home-team-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
max-width: 900px;
margin: 0 auto;
}
.home-team-card {
display: flex;
flex-direction: column;
background: linear-gradient(180deg, rgba(23, 25, 34, 0.8), rgba(10, 11, 18, 0.9));
border: 1px solid rgba(200, 215, 255, 0.1);
border-radius: 18px;
overflow: hidden;
transition: border-color 0.3s ease, transform 0.3s ease;
}
.home-team-card:hover {
border-color: rgba(200, 215, 255, 0.22);
transform: translateY(-3px);
}
.home-team-photo {
position: relative;
width: 100%;
/* Square gives extra vertical space over 4:3 without the
* exaggerated portrait stretch of 4:5. */
aspect-ratio: 1 / 1;
background: linear-gradient(135deg, #1c1e2c 0%, #0a0b12 100%);
overflow: hidden;
}
.home-team-photo-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
}
.home-team-body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 22px 24px 24px;
flex: 1;
}
.home-team-name-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.home-team-name {
font-family: Inter, sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--light-gray);
margin: 0;
}
.home-team-role {
font-family: Inter, sans-serif;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.55;
}
.home-team-intro {
font-family: Inter, sans-serif;
font-size: 14px;
line-height: 1.55;
color: var(--light-gray);
opacity: 0.76;
margin: 4px 0 6px 0;
}
.home-team-linkedin {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
width: fit-content;
background: rgba(200, 215, 255, 0.08);
border: 1px solid rgba(200, 215, 255, 0.18);
border-radius: 999px;
color: var(--light-gray);
font-family: Inter, sans-serif;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: background-color 0.25s ease, border-color 0.25s ease;
/* Stick the button to the bottom of the card body so the buttons
* line up across cards regardless of bio length. */
margin-top: auto;
}
.home-team-linkedin:hover {
background: rgba(200, 215, 255, 0.2);
border-color: rgba(200, 215, 255, 0.4);
}
@media (max-width: 720px) {
.home-team-grid {
grid-template-columns: 1fr;
}
}
/* Light-mode home-team palette */
.home-light .home-team-eyebrow,
.home-light .home-team-title,
.home-light .home-team-name,
.home-light .home-team-intro,
.home-light .home-team-role {
color: #111;
}
.home-light .home-team-eyebrow {
opacity: 0.65;
}
.home-light .home-team-role {
opacity: 0.6;
}
.home-light .home-team-intro {
color: #4a4a43;
opacity: 1;
}
.home-light .home-team-card {
background: linear-gradient(180deg, #f5f3ec 0%, #e7e3d7 100%);
border-color: rgba(17, 17, 17, 0.08);
}
.home-light .home-team-card:hover {
border-color: rgba(17, 17, 17, 0.25);
}
.home-light .home-team-photo {
background: linear-gradient(135deg, #26282e 0%, #0a0b12 100%);
color: #eceae1;
}
.home-light .home-team-linkedin {
background: rgba(17, 17, 17, 0.06);
border-color: rgba(17, 17, 17, 0.18);
color: #111;
}
.home-light .home-team-linkedin:hover {
background: rgba(17, 17, 17, 0.14);
border-color: rgba(17, 17, 17, 0.4);
}
/* ---------------------------------------------------------------
* Home page light-mode (.home-light on the page wrapper)
*
* Paints the home page in the same warm #eceae1 beige the about
* page uses and flips every bold dark surface to a light-on-light
* treatment. Revert: drop the "home-light" class from app/page.tsx.
* --------------------------------------------------------------- */
.page-wrapper.home-light {
background: #eceae1 !important;
color: #111;
}
/* --- Hide decorative dark artifacts that don't work on light --- */
.home-light .section.second-banner {
background-image: none !important;
background-color: transparent !important;
}
.home-light .hero-x::before,
.home-light .hero-x::after,
.home-light .section-13::after,
.home-light .section.second-banner + .section-14::before {
display: none !important;
}
/* --- Hero (HeroExperimental) --- */
.home-light .hero-x,
.home-light .hero-x-inner {
background-color: transparent !important;
}
.home-light .hero-x-spotlight {
background: radial-gradient(
1200px circle at 50% 110%,
rgba(180, 175, 150, 0.18),
transparent 60%
);
mix-blend-mode: multiply;
}
.home-light .hero-x-eyebrow,
.home-light .hero-x-line,
.home-light .hero-x-line-muted,
.home-light .hero-x-word {
color: #111;
}
.home-light .hero-x-line-muted {
opacity: 0.55;
}
.home-light .hero-x-dot {
background-color: rgba(17, 17, 17, 0.25);
}
.home-light .hero-x-dot.is-active {
background-color: #111;
}
.home-light .hero-x-cta {
background-color: rgba(17, 17, 17, 0.04);
border-color: rgba(17, 17, 17, 0.14);
}
.home-light .hero-x-cta-text {
color: #111;
}
.home-light .hero-x-cta-button {
background: #111;
color: #eceae1;
}
.home-light .hero-x-cta-button:hover {
box-shadow: 0 10px 30px rgba(17, 17, 17, 0.2);
}
/* --- Stats / dashboard section --- */
.home-light .stats-x-eyebrow,
.home-light .stats-x-title,
.home-light .stats-x-lead {
color: #111;
}
.home-light .stats-x-lead {
opacity: 0.75;
}
.home-light .stats-x-card {
background: linear-gradient(180deg, #f5f3ec 0%, #e7e3d7 100%);
border-color: rgba(17, 17, 17, 0.08);
box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.12);
}
.home-light .stats-x-card:hover {
border-color: rgba(17, 17, 17, 0.2);
box-shadow: 0 18px 56px -16px rgba(0, 0, 0, 0.18);
}
.home-light .stats-x-card-head,
.home-light .stats-x-card-value,
.home-light .stats-x-card-label,
.home-light .stats-x-card-desc {
color: #111;
}
.home-light .stats-x-card-head {
opacity: 0.72;
}
.home-light .stats-x-card-desc {
color: #4a4a43;
opacity: 1;
}
.home-light .stats-x-card-live {
color: #2a8a3a;
}
.home-light .stats-x-card-dot {
background-color: #2a8a3a;
box-shadow: 0 0 10px rgba(42, 138, 58, 0.35);
}
.home-light .stats-x-button {
background: #111;
color: #eceae1;
}
.home-light .stats-x-button:hover {
box-shadow: 0 12px 32px rgba(17, 17, 17, 0.2);
}
/* --- Services teaser (ServicesEditorial) --- */
.home-light .svc-lite-eyebrow,
.home-light .svc-lite-headline {
color: #111;
}
.home-light .svc-lite-eyebrow {
opacity: 0.7;
}
.home-light .svc-lite-card {
background: linear-gradient(180deg, #f5f3ec 0%, #e7e3d7 100%);
border-color: rgba(17, 17, 17, 0.08);
color: #111;
}
.home-light .svc-lite-card:hover {
border-color: rgba(17, 17, 17, 0.25);
}
.home-light .svc-lite-number,
.home-light .svc-lite-title,
.home-light .svc-lite-description,
.home-light .svc-lite-footer,
.home-light .svc-lite-footer-text,
.home-light .svc-lite-feature,
.home-light .svc-lite-price-amount,
.home-light .svc-lite-price-cadence,
.home-light .svc-lite-footer-link,
.home-light .svc-lite-footnote {
color: #111;
}
.home-light .svc-lite-description,
.home-light .svc-lite-feature {
color: #4a4a43;
opacity: 1;
}
.home-light .svc-lite-feature-mark {
background: rgba(17, 17, 17, 0.08);
color: #111;
}
.home-light .svc-lite-price {
border-top-color: rgba(17, 17, 17, 0.12);
}
.home-light .svc-lite-price-cadence,
.home-light .svc-lite-footnote {
opacity: 0.6;
}
.home-light .svc-lite-footer {
border-top-color: rgba(17, 17, 17, 0.08);
color: #111;
}
.home-light .svc-lite-button {
background: #111;
color: #eceae1;
}
.home-light .svc-lite-button:hover {
box-shadow: 0 12px 32px rgba(17, 17, 17, 0.2);
}
/* --- Testimonials slider --- */
.home-light .section-top-wrap.testimonial,
.home-light .section-top-wrap.testimonial .title,
.home-light .section-top-wrap.testimonial .title-design,
.home-light .section-subtitle {
color: #111 !important;
}
.home-light .section-top-wrap.testimonial .section-subtitle {
opacity: 0.7;
}
.home-light .testimonial-wrapper .slider.w-slider {
background-color: transparent !important;
}
.home-light .testimonial-wrapper .testimonial-details-wrapper {
background: linear-gradient(180deg, #f5f3ec 0%, #e7e3d7 100%) !important;
border: 1px solid rgba(17, 17, 17, 0.08);
}
.home-light .testimonial-wrapper .testimonial-details,
.home-light .testimonial-wrapper .testimonial-author-title,
.home-light .testimonial-wrapper .testimonialauthor-designation {
color: #111 !important;
}
.home-light .testimonial-wrapper .testimonialauthor-designation {
opacity: 0.7;
}
/* Service tag above the quote ("LINKEDIN ZUSAMMENARBEIT" etc.) */
.home-light .testimonial-wrapper .testimonial-details-wrapper > div:first-child {
color: #111 !important;
opacity: 0.65;
}
.home-light .testimonial-wrapper .slider-direction-title {
color: #111 !important;
}
.home-light .testimonial-wrapper .slider-arrow-icon {
filter: invert(1);
}
/* Pagination dots at the bottom: white-on-white invisible on light — flip. */
.home-light .testimonial-wrapper .w-slider-dot {
background-color: rgba(17, 17, 17, 0.28) !important;
}
.home-light .testimonial-wrapper .w-slider-dot.w-active {
background-color: #111 !important;
}
.home-light .testimonial-wrapper .w-slider-dot:focus {
box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.35) !important;
}
/* Portrait side: the inline-SVG avatars are already dark-gradient with
* cream initials, so they read well on the beige page. Wrap the 340×340
* tile with a soft rounded border so it reads as a framed photo. */
.home-light .testimonial-wrapper .slider-image-wrapper {
border-radius: 16px;
overflow: hidden;
}
/* --- FAQ --- */
.home-light .section.faq {
background-image: none !important;
background-color: transparent !important;
}
.home-light .section.faq .title,
.home-light .section.faq .title-details,
.home-light .section.faq .section-subtitle {
color: #111 !important;
opacity: 1;
}
.home-light .faq-details-wrapper {
border-color: rgba(17, 17, 17, 0.1) !important;
}
.home-light .faq-title,
.home-light .faq-details {
color: #111 !important;
}
.home-light .faq-details {
color: #4a4a43 !important;
}
/* --- Blog teaser --- */
.home-light .blog-t-eyebrow,
.home-light .blog-t-headline,
.home-light .blog-t-all-link {
color: #111;
}
.home-light .blog-t-all-link {
border-bottom-color: rgba(17, 17, 17, 0.35);
}
.home-light .blog-t-all-link:hover {
border-bottom-color: #111;
}
.home-light .blog-t-card {
background: linear-gradient(180deg, #f5f3ec 0%, #e7e3d7 100%);
border-color: rgba(17, 17, 17, 0.08);
color: #111;
}
.home-light .blog-t-card:hover {
border-color: rgba(17, 17, 17, 0.25);
}
/* Category tag inside the meta row inherits .blog-t-category's
* dark-mode colour (light-gray) which is invisible on the cream
* card. Force it to dark in light mode. */
.home-light .blog-t-category {
color: #111;
}
.home-light .blog-t-title,
.home-light .blog-t-excerpt,
.home-light .blog-t-meta,
.home-light .blog-t-footer {
color: #111;
}
.home-light .blog-t-excerpt {
color: #4a4a43;
opacity: 1;
}
.home-light .blog-t-meta {
opacity: 0.65;
}
/* --- Footer (FooterExperimental) --- */
.home-light .footer-x {
background:
radial-gradient(
800px circle at 50% 0%,
rgba(60, 90, 180, 0.1),
transparent 60%
),
#d9d5c7;
}
.home-light .footer-x-greeting,
.home-light .footer-x-headline,
.home-light .footer-x-headline-accent,
.home-light .footer-x-cta-text,
.home-light .footer-x-connect-label,
.home-light .footer-x-address,
.home-light .footer-x-link,
.home-light .footer-x-legal {
color: #111;
}
.home-light .footer-x-greeting {
border-color: rgba(17, 17, 17, 0.18);
background-color: rgba(255, 255, 255, 0.3);
}
.home-light .footer-x-connect {
border-top-color: rgba(17, 17, 17, 0.12);
}
.home-light .footer-x-connect-label {
opacity: 0.55;
}
.home-light .footer-x-legal {
border-top-color: rgba(17, 17, 17, 0.1);
opacity: 0.75;
}
.home-light .footer-x-magnet {
background: #111;
color: #eceae1;
}
.home-light .footer-x-magnet:hover {
background: #000;
}
/* --- Outstanding dark-mode leftovers flipped to light --- */
/* Each slide container in the testimonial slider had its own dark bg. */
.home-light .testimonial-wrapper .slide-contents,
.home-light .testimonial-wrapper .w-slider,
.home-light .testimonial-wrapper .w-slider-mask {
background-color: transparent !important;
}
/* FAQ cards had dark-gray background — flip to cream panel. */
.home-light .faq-details-wrapper {
background-color: #f5f3ec !important;
border: 1px solid rgba(17, 17, 17, 0.1) !important;
}
.home-light .faq-title,
.home-light .faq-details {
color: #111 !important;
opacity: 1;
}
.home-light .faq-details {
color: #4a4a43 !important;
}
.home-light .faq-icon {
filter: invert(1);
}
/* The tiny "book-a-call" hero pill card uses the same dark var — flip. */
.home-light .hero-butoon-content-wrap {
background-color: #f5f3ec !important;
border-color: rgba(17, 17, 17, 0.12) !important;
}
.home-light .hero-details,
.home-light .hero-left-subtitle {
color: #111 !important;
}
/* --- Navbar — transparent top-of-page bar with dark nav links. ---
*
* Webflow's base .navbar is already transparent (#ddd0), so we only
* need to flip the nav link color + invert the (white) PNG logo so
* it reads on the beige backdrop. The "Contact us" button inverts to
* black-on-cream for contrast. */
.home-light .navbar-menu-title {
color: #111 !important;
}
.home-light .navbar-logo {
filter: invert(1) brightness(0);
}
/* Mobile hamburger icon (Webflow sprite) on light needs inverting too. */
.home-light .menu-button .icon.w-icon-nav-menu {
filter: invert(1);
}
/* Contact-us pill in the navbar flips from cream-on-dark to dark-on-cream. */
.home-light .navbar .button.nav {
background-color: #111 !important;
color: #eceae1 !important;
border: 1px solid #111;
}
.home-light .navbar .button.nav .button-text {
color: #eceae1 !important;
}
/* Hover state — pull in a slight lift + keep contrast. */
.home-light .navbar .button.nav:hover {
background-color: #000 !important;
}
/* When the mobile nav is open, the drop-down backdrop was dark — match page. */
.home-light .nav-menu.w--open {
background-color: #eceae1 !important;
}
/* --- Mobile navbar — inline clickable links, no hamburger.
* Webflow's default mobile nav paints a dark block with fixed width
* (519px / 354px) that overflows narrow phones. We flatten it: show
* the links as plain text next to the logo, kill the dark bg, hide
* the big "Contact us" pill and the unused hamburger button. */
@media screen and (max-width: 991px) {
.home-light .navbar-container,
.navbar-container {
padding-left: 16px;
padding-right: 16px;
}
.home-light .navbar-wrapper,
.navbar-wrapper {
flex-wrap: wrap;
gap: 8px 16px;
align-items: center;
}
/* Force the nav links to render inline, transparently, with visible
* text — beats the Webflow mobile rule that paints a dark-gray box. */
.home-light .navbar .nav-menu,
.navbar .nav-menu,
.nav-menu.w-nav-menu {
display: flex !important;
position: static !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 12px 18px !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
.navbar .nav-menu .global-text-style {
height: auto !important;
overflow: visible !important;
}
.navbar .nav-menu .link-wrap {
display: inline !important;
}
/* Webflow's hover animation duplicates the label inside .link-wrap
* so a second copy can slide in. On mobile we only want one. */
.navbar .nav-menu .link-wrap .navbar-menu-title + .navbar-menu-title {
display: none !important;
}
.navbar .nav-menu .navbar-menu-title {
color: #111 !important;
font-size: 15px !important;
line-height: 1.2 !important;
}
/* Hide the Webflow overlay div that can paint a dark backdrop. */
.navbar .w-nav-overlay {
display: none !important;
}
/* Hide the duplicated inline Contact-us pill and the (now unused)
* hamburger button on mobile. */
.home-light .navbar .button.nav.v1,
.nav-button-wrapper .button.nav.v1,
.menu-button.w-nav-button {
display: none !important;
}
.navbar-logo {
width: 120px !important;
height: auto !important;
}
}
/* Prevent horizontal overflow on phones so the page fills the screen. */
@media (max-width: 991px) {
html,
body {
max-width: 100%;
overflow-x: hidden;
}
}
/* ---------------------------------------------------------------
* Experimental closing footer (components/FooterExperimental.tsx)
*
* Time-aware greeting, oversized three-line statement, magnetic
* contact button. Only mounted on the home page; other pages keep
* the classic .
* --------------------------------------------------------------- */
.footer-x {
position: relative;
padding: 120px 0 40px;
overflow: hidden;
background:
radial-gradient(
800px circle at 50% 0%,
rgba(60, 90, 180, 0.18),
transparent 60%
),
var(--very-dark-gray);
}
.footer-x-inner {
display: flex;
flex-direction: column;
gap: 48px;
}
.footer-x-greeting {
display: inline-flex;
align-items: center;
gap: 10px;
align-self: flex-start;
padding: 8px 16px;
border: 1px solid rgba(200, 215, 255, 0.15);
border-radius: 999px;
font-family: Inter, sans-serif;
font-size: 13px;
letter-spacing: 0.5px;
color: var(--light-gray);
opacity: 0.78;
min-height: 34px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.footer-x-greeting-icon {
font-size: 14px;
}
.footer-x-headline {
margin: 0;
padding: 0;
font-family: Inter, sans-serif;
font-weight: 300;
font-size: clamp(64px, 14vw, 220px);
line-height: 0.95;
letter-spacing: -0.04em;
color: var(--light-gray);
display: flex;
flex-direction: column;
gap: 0;
}
.footer-x-headline-row {
display: block;
line-height: 0.95;
}
.footer-x-headline-accent {
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 300;
}
.footer-x-cta-wrap {
display: flex;
align-items: center;
gap: 28px;
margin-top: -24px;
}
.footer-x-magnet {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(96px, 11vw, 140px);
height: clamp(96px, 11vw, 140px);
border-radius: 50%;
background: var(--light-gray);
color: var(--very-dark-gray);
text-decoration: none;
font-size: clamp(28px, 3.2vw, 44px);
flex-shrink: 0;
box-shadow:
0 20px 60px -20px rgba(140, 170, 255, 0.45),
0 4px 20px -8px rgba(0, 0, 0, 0.4);
will-change: transform;
transition: background-color 0.3s ease, color 0.3s ease;
}
.footer-x-magnet:hover {
background: #ffffff;
}
.footer-x-magnet-arrow {
display: inline-block;
will-change: transform;
}
.footer-x-cta-text {
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 300;
font-size: clamp(20px, 2.2vw, 32px);
color: var(--light-gray);
opacity: 0.85;
line-height: 1.15;
max-width: 320px;
}
.footer-x-connect {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding-top: 40px;
border-top: 1px solid rgba(200, 215, 255, 0.1);
}
.footer-x-connect-col {
display: flex;
flex-direction: column;
gap: 6px;
}
.footer-x-connect-label {
font-family: Inter, sans-serif;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.5;
}
.footer-x-link {
font-family: Inter, sans-serif;
font-size: 16px;
color: var(--light-gray);
text-decoration: none;
transition: opacity 0.2s ease;
width: fit-content;
}
.footer-x-link:hover {
opacity: 0.7;
}
.footer-x-address {
font-family: Inter, sans-serif;
font-size: 16px;
color: var(--light-gray);
opacity: 0.85;
line-height: 1.5;
}
.footer-x-legal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-top: 28px;
border-top: 1px solid rgba(200, 215, 255, 0.08);
font-family: Inter, sans-serif;
font-size: 13px;
color: var(--light-gray);
opacity: 0.6;
}
.footer-x-legal-links {
display: flex;
gap: 24px;
}
.footer-x-legal .footer-x-link {
font-size: 13px;
}
@media (max-width: 720px) {
.footer-x {
padding: 80px 0 32px;
}
.footer-x-cta-wrap {
flex-direction: column;
align-items: flex-start;
gap: 20px;
margin-top: -12px;
}
.footer-x-connect {
grid-template-columns: 1fr;
gap: 24px;
}
.footer-x-legal {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
/* ---------------------------------------------------------------
* Home blog teaser (components/BlogTeaser.tsx)
*
* Three latest Sanity posts as compact cards. Section auto-hides
* when no posts exist — no broken placeholders on the home page.
* --------------------------------------------------------------- */
.blog-t {
position: relative;
padding: 60px 0 100px;
}
.blog-t-header {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 40px;
}
.blog-t-header-left {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 640px;
}
.blog-t-eyebrow {
font-family: Inter, sans-serif;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.6;
}
.blog-t-headline {
font-family: Inter, sans-serif;
font-size: clamp(30px, 4vw, 48px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--light-gray);
margin: 0;
}
.blog-t-headline-accent {
font-family: "Noto Serif Display", serif;
font-style: italic;
}
.blog-t-all-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding-bottom: 4px;
color: var(--light-gray);
font-family: Inter, sans-serif;
font-size: 15px;
font-weight: 500;
text-decoration: none;
border-bottom: 1px solid rgba(218, 218, 218, 0.35);
transition: border-color 0.25s ease, gap 0.25s ease;
}
.blog-t-all-link:hover {
border-color: var(--light-gray);
gap: 12px;
}
.blog-t-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.blog-t-card {
display: flex;
flex-direction: column;
background: linear-gradient(180deg, rgba(23, 25, 34, 0.7), rgba(14, 15, 22, 0.7));
border: 1px solid rgba(200, 215, 255, 0.08);
border-radius: 18px;
overflow: hidden;
color: var(--light-gray);
text-decoration: none;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: border-color 0.25s ease, transform 0.25s ease;
}
.blog-t-card:hover {
border-color: rgba(200, 215, 255, 0.24);
transform: translateY(-3px);
}
.blog-t-cover {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
background-color: var(--dark-gray);
background-size: cover;
background-position: center;
overflow: hidden;
}
.blog-t-cover-placeholder {
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(40, 50, 80, 0.45) 0%,
rgba(14, 15, 22, 0.9) 100%
);
}
.blog-t-card-body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 22px 24px 10px;
flex: 1;
}
.blog-t-meta {
display: flex;
align-items: center;
gap: 8px;
font-family: Inter, sans-serif;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.6;
}
.blog-t-category {
color: var(--light-gray);
}
.blog-t-dot {
opacity: 0.4;
}
.blog-t-title {
font-family: Inter, sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--light-gray);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-t-excerpt {
font-family: Inter, sans-serif;
font-size: 14px;
line-height: 1.55;
color: var(--light-gray);
opacity: 0.7;
margin: 4px 0 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-t-footer {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 24px 22px;
margin-top: auto;
font-family: Inter, sans-serif;
font-size: 14px;
font-weight: 500;
color: var(--light-gray);
opacity: 0.9;
}
.blog-t-arrow {
transition: transform 0.25s ease;
}
.blog-t-card:hover .blog-t-arrow {
transform: translateX(4px);
}
@media (max-width: 960px) {
.blog-t-grid {
grid-template-columns: 1fr;
}
}
/* ---------------------------------------------------------------
* Compact services teaser (components/ServicesEditorial.tsx)
*
* One-section signpost to /pricing. Three narrow cards side by side
* with a small square thumbnail, ghosted number, title, short teaser
* and an arrow — everything else lives on the pricing page.
* --------------------------------------------------------------- */
.svc-lite {
position: relative;
padding: 8px 0 100px;
}
.svc-lite-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
max-width: 720px;
margin-bottom: 48px;
}
.svc-lite-eyebrow {
font-family: Inter, sans-serif;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.6;
}
.svc-lite-headline {
font-family: Inter, sans-serif;
font-size: clamp(30px, 4vw, 48px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--light-gray);
margin: 0;
}
.svc-lite-headline-accent {
font-family: "Noto Serif Display", serif;
font-style: italic;
}
.svc-lite-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
}
.svc-lite-features {
list-style: none;
padding: 0;
margin: 18px 0 0 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.svc-lite-feature {
display: flex;
align-items: flex-start;
gap: 10px;
font-family: Inter, sans-serif;
font-size: 13px;
line-height: 1.5;
color: var(--light-gray);
opacity: 0.8;
}
.svc-lite-feature-mark {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(200, 215, 255, 0.1);
color: var(--light-gray);
font-size: 10px;
font-weight: 600;
margin-top: 2px;
}
.svc-lite-price {
display: flex;
flex-direction: column;
gap: 2px;
/* Pushes the price row to the bottom of the flex card-body so the
* divider line aligns across all three cards regardless of how long
* each description + feature list is. */
margin-top: auto;
padding-top: 20px;
border-top: 1px solid rgba(200, 215, 255, 0.1);
}
.svc-lite-price-amount {
font-family: Inter, sans-serif;
font-size: 24px;
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--light-gray);
}
.svc-lite-price-cadence {
font-family: Inter, sans-serif;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.55;
}
.svc-lite-footer-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--light-gray);
font-family: Inter, sans-serif;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: gap 0.25s ease;
}
.svc-lite-footer-link:hover {
gap: 12px;
}
.svc-lite-arrow-inline {
transition: transform 0.25s ease;
}
.svc-lite-footnote {
text-align: center;
margin: 40px auto 0;
font-family: Inter, sans-serif;
font-size: 13px;
color: var(--light-gray);
opacity: 0.6;
}
.svc-lite-card {
position: relative;
display: flex;
flex-direction: column;
padding: 0;
background: linear-gradient(180deg, rgba(23, 25, 34, 0.65), rgba(14, 15, 22, 0.65));
border: 1px solid rgba(200, 215, 255, 0.08);
border-radius: 18px;
color: var(--light-gray);
text-decoration: none;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
overflow: hidden;
transition: border-color 0.25s ease, transform 0.25s ease;
width: 100%;
height: 100%;
}
.svc-lite-card:hover {
border-color: rgba(200, 215, 255, 0.22);
transform: translateY(-3px);
}
.svc-lite-thumb {
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background-color: var(--dark-gray);
flex-shrink: 0;
}
.svc-lite-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.9) contrast(1.05);
transition: transform 0.6s ease;
}
.svc-lite-card:hover .svc-lite-thumb-img {
transform: scale(1.04);
}
.svc-lite-card-body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 24px 26px 18px;
flex: 1;
}
.svc-lite-number {
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 300;
font-size: 14px;
letter-spacing: 0.5px;
color: var(--light-gray);
opacity: 0.45;
line-height: 1;
}
.svc-lite-title {
font-family: Inter, sans-serif;
font-size: 22px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--light-gray);
margin: 0;
}
.svc-lite-description {
font-family: Inter, sans-serif;
font-size: 14px;
line-height: 1.6;
color: var(--light-gray);
opacity: 0.72;
margin: 6px 0 0 0;
}
.svc-lite-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 16px 26px 22px;
border-top: 1px solid rgba(200, 215, 255, 0.08);
margin-top: auto;
}
.svc-lite-footer-text {
font-family: Inter, sans-serif;
font-size: 14px;
font-weight: 500;
color: var(--light-gray);
opacity: 0.85;
}
.svc-lite-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(200, 215, 255, 0.18);
color: var(--light-gray);
font-size: 16px;
flex-shrink: 0;
transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.svc-lite-card:hover .svc-lite-arrow {
background-color: var(--light-gray);
color: var(--very-dark-gray);
transform: translateX(2px);
}
.svc-lite-cta {
display: flex;
justify-content: center;
margin-top: 48px;
}
.svc-lite-button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
background: var(--light-gray);
color: var(--very-dark-gray);
border-radius: 999px;
font-family: Inter, sans-serif;
font-weight: 500;
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.svc-lite-button:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(200, 215, 255, 0.18);
}
.svc-lite-button-arrow {
transition: transform 0.25s ease;
}
.svc-lite-button:hover .svc-lite-button-arrow {
transform: translateX(4px);
}
@media (max-width: 960px) {
.svc-lite-grid {
grid-template-columns: 1fr;
gap: 14px;
}
}
/* ---------------------------------------------------------------
* Experimental stats section (components/StatsExperimental.tsx)
*
* Live-dashboard motif: eyebrow + headline + lead + 4 count-up cards
* with sparklines. Sits where the old Webflow slot-machine counter
* section-14 did. Revert: swap in app/page.tsx
* back to the original section-14 markup from git history.
* --------------------------------------------------------------- */
.stats-x {
position: relative;
margin-top: 0;
padding: 40px 0 60px;
}
.stats-x-inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
}
.stats-x-eyebrow {
font-family: Inter, sans-serif;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.6;
}
.stats-x-title {
font-family: Inter, sans-serif;
font-size: clamp(30px, 4.4vw, 56px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--light-gray);
margin: 0;
max-width: 900px;
}
.stats-x-title-accent {
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 400;
}
.stats-x-lead {
max-width: 620px;
color: var(--light-gray);
opacity: 0.8;
font-family: Inter, sans-serif;
font-size: 17px;
line-height: 1.55;
margin: 8px 0 40px;
}
.stats-x-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
width: 100%;
max-width: 1180px;
}
.stats-x-card {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
padding: 26px 24px;
background: linear-gradient(
180deg,
rgba(23, 25, 34, 0.85) 0%,
rgba(14, 15, 22, 0.85) 100%
);
border: 1px solid rgba(200, 215, 255, 0.08);
border-radius: 18px;
text-align: left;
transform-style: preserve-3d;
will-change: transform;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.45);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.stats-x-card:hover {
border-color: rgba(200, 215, 255, 0.2);
box-shadow: 0 18px 60px -12px rgba(60, 90, 180, 0.25);
}
.stats-x-card-head {
display: flex;
align-items: center;
gap: 8px;
font-family: Inter, sans-serif;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.7;
margin-bottom: 4px;
}
.stats-x-card-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #6cf98a;
box-shadow: 0 0 10px rgba(108, 249, 138, 0.6);
animation: stats-x-pulse 2s ease-in-out infinite;
}
@keyframes stats-x-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
.stats-x-card-live {
color: #6cf98a;
}
.stats-x-card-value {
font-family: Inter, sans-serif;
font-size: clamp(44px, 4.2vw, 64px);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--light-gray);
font-variant-numeric: tabular-nums;
}
.stats-x-card-label {
font-family: Inter, sans-serif;
font-size: 16px;
font-weight: 500;
color: var(--light-gray);
margin-top: 4px;
}
.stats-x-card-desc {
font-family: Inter, sans-serif;
font-size: 13px;
line-height: 1.45;
color: var(--light-gray);
opacity: 0.6;
max-width: 260px;
}
.stats-x-card-spark {
margin-top: auto;
padding-top: 14px;
}
.stats-x-cta {
margin-top: 48px;
}
.stats-x-button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
background: var(--light-gray);
color: var(--very-dark-gray);
border-radius: 999px;
font-family: Inter, sans-serif;
font-weight: 500;
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.stats-x-button:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(200, 215, 255, 0.18);
}
.stats-x-button-arrow {
transition: transform 0.25s ease;
}
.stats-x-button:hover .stats-x-button-arrow {
transform: translateX(4px);
}
@media (max-width: 640px) {
.stats-x {
padding: 64px 0 100px;
}
.stats-x-card {
padding: 22px 20px;
}
}
/* ---------------------------------------------------------------
* Navbar: signal which links lead to a separate page.
*
* Anchor links (Home / About / Work with us) stay plain text — they
* scroll on the current page. Links that navigate to a different
* route (only "Blog" for now) get a small ↗ mark after the label so
* visitors can tell at a glance that clicking leaves the one-pager.
* --------------------------------------------------------------- */
/* Wrap links that lead to a separate page so the diagonal ↗ mark
* can sit outside the link's clipped box (Webflow's
* `.global-text-style` uses overflow: hidden + fixed height for its
* hover text-swap animation — we keep that intact). */
.navbar-page-link-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.navbar-page-mark {
position: absolute;
top: -10px;
right: -20px;
font-size: 12px;
line-height: 1;
color: inherit;
opacity: 0.75;
transition: transform 0.25s ease, opacity 0.25s ease;
pointer-events: none;
}
.navbar-page-link-wrap:hover .navbar-page-mark {
opacity: 1;
transform: translate(3px, -3px);
}
.home-light .navbar-page-mark {
color: #111;
}
/* ---------------------------------------------------------------
* Experimental custom cursor (components/CursorExperimental.tsx)
*
* While mounted, html.cursor-x-active hides the native cursor and
* lets the two motion-driven layers paint the pointer. Both use
* mix-blend-mode: difference so they invert their backdrop and stay
* visible across every page. Revert: remove
* from app/layout.tsx — this CSS block can stay, it's inert without
* the component.
* --------------------------------------------------------------- */
html.cursor-x-active,
html.cursor-x-active body,
html.cursor-x-active a,
html.cursor-x-active button,
html.cursor-x-active input,
html.cursor-x-active textarea,
html.cursor-x-active select,
html.cursor-x-active label {
cursor: none;
}
.cursor-x-dot,
.cursor-x-ring {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 2147483647;
mix-blend-mode: difference;
will-change: transform;
}
/* Warm orange glow that follows the cursor across the entire site,
* not just the hero. Sits below the cursor dot/ring; uses mix-blend
* mode multiply so the beige page picks up a visible terra-cotta
* tint and the dark pages get a subtle warming glow. */
.cursor-x-spotlight {
position: fixed;
top: 0;
left: 0;
width: 220px;
height: 220px;
margin: -110px 0 0 -110px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(220, 110, 50, 0.55) 0%,
rgba(220, 110, 50, 0.35) 35%,
transparent 70%
);
filter: blur(20px);
pointer-events: none;
z-index: 2147483646;
mix-blend-mode: multiply;
will-change: transform;
}
.cursor-x-dot {
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
border-radius: 50%;
background-color: #ffffff;
}
.cursor-x-ring {
width: 36px;
height: 36px;
margin: -18px 0 0 -18px;
border-radius: 50%;
border: 1.5px solid #ffffff;
background: transparent;
}
/* ---------------------------------------------------------------
* Home – experimental hero (components/HeroExperimental.tsx)
*
* Kinetic typography + cursor spotlight. Sits on top of the extended
* blue-wave background. Revert: swap the import
* in app/page.tsx back to the classic inline hero block.
* --------------------------------------------------------------- */
.hero-x {
position: relative;
overflow: hidden;
min-height: 92vh;
display: flex;
align-items: center;
justify-content: center;
}
/* Top + bottom fades — dissolves the blue wave smoothly into the page
* background on both edges, so the hero has no hard seam with the
* sections above or below. */
.hero-x::before,
.hero-x::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 260px;
pointer-events: none;
z-index: 0;
}
.hero-x::before {
top: 0;
background: linear-gradient(
to top,
rgba(4, 4, 4, 0) 0%,
rgba(4, 4, 4, 0.55) 55%,
var(--very-dark-gray) 100%
);
}
.hero-x::after {
bottom: 0;
background: linear-gradient(
to bottom,
rgba(4, 4, 4, 0) 0%,
rgba(4, 4, 4, 0.55) 55%,
var(--very-dark-gray) 100%
);
}
/* Section-13 (Plant-your-Flags teaser) sits directly above the hero.
* Webflow originally used a distinct brand-board image here which
* created a hard visual seam against the hero's blue wave. Strip it
* and let the hero's wave motif reach up through this section instead. */
.section-13 {
position: relative;
isolation: isolate;
background-image: none !important;
background-color: transparent !important;
}
/* Neighbouring sections pick up the motif — the same wave continues
* in from the adjacent edge and fades into the page background, so
* the hero reads as one continuous surface with what's above AND below. */
.section-13::after,
.section.second-banner + .section-14::before {
content: "";
position: absolute;
left: 0;
right: 0;
background-image: url("/images/image-5823-1.png");
background-size: 100% auto;
background-repeat: no-repeat;
pointer-events: none;
z-index: -1;
}
/* Above the hero — wave fills most of section-13 and fades out toward
* the navbar / top edge so the impression is "the wave has always been
* there, softly brightening as you scroll down into the hero". */
.section-13::after {
bottom: -80px;
height: 140%;
background-position: 50% 100%;
opacity: 0.85;
-webkit-mask-image: linear-gradient(
to top,
black 0%,
black 15%,
rgba(0, 0, 0, 0.35) 55%,
transparent 100%
);
mask-image: linear-gradient(
to top,
black 0%,
black 15%,
rgba(0, 0, 0, 0.35) 55%,
transparent 100%
);
}
/* Below the hero — wave drifts down into section-14 and dissolves. */
.section.second-banner + .section-14 {
position: relative;
isolation: isolate;
}
.section.second-banner + .section-14::before {
top: -1px;
height: 360px;
background-position: 50% 0;
opacity: 0.45;
-webkit-mask-image: linear-gradient(
to bottom,
black 0%,
rgba(0, 0, 0, 0.45) 55%,
transparent 100%
);
mask-image: linear-gradient(
to bottom,
black 0%,
rgba(0, 0, 0, 0.45) 55%,
transparent 100%
);
}
.hero-x-spotlight {
position: absolute;
inset: 0;
/* Cursor-following part removed — replaced by the site-wide
* .cursor-x-spotlight in CursorExperimental.tsx. Static bottom-edge
* glow stays for hero atmosphere. */
background: radial-gradient(
1200px circle at 50% 110%,
rgba(40, 70, 140, 0.22),
transparent 60%
);
pointer-events: none;
z-index: 0;
}
.hero-x-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 18px;
padding: 40px 24px;
width: 100%;
}
.hero-x-eyebrow {
font-family: Inter, sans-serif;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--light-gray);
opacity: 0.65;
}
.hero-x-headline {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: var(--light-gray);
font-family: Inter, sans-serif;
font-weight: 300;
}
.hero-x-line {
display: block;
font-size: clamp(30px, 4vw, 56px);
line-height: 1.05;
letter-spacing: -0.02em;
}
.hero-x-line-muted {
opacity: 0.62;
}
.hero-x-cycler {
position: relative;
display: block;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
height: clamp(56px, 7vw, 92px);
overflow: visible;
margin-top: 4px;
}
.hero-x-word {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: "Noto Serif Display", serif;
font-style: italic;
font-weight: 400;
font-size: clamp(36px, 5.2vw, 76px);
line-height: 1.05;
letter-spacing: -0.015em;
color: var(--light-gray);
white-space: nowrap;
padding: 0 16px;
}
/* At narrow viewports the longest German compound words still wouldn't
* fit on one line even after the clamp — allow graceful wrapping. */
@media (max-width: 640px) {
.hero-x-cycler {
height: auto;
min-height: clamp(52px, 14vw, 100px);
}
.hero-x-word {
position: relative;
inset: auto;
white-space: normal;
word-break: break-word;
hyphens: auto;
font-size: clamp(30px, 8vw, 52px);
}
}
.hero-x-dots {
display: flex;
gap: 10px;
margin-top: 8px;
}
.hero-x-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: rgba(218, 218, 218, 0.25);
transition: width 0.4s ease, background-color 0.4s ease;
}
.hero-x-dot.is-active {
width: 24px;
background-color: var(--light-gray);
border-radius: 4px;
}
.hero-x-cta {
display: inline-flex;
align-items: center;
gap: 20px;
margin-top: 20px;
padding: 10px 12px 10px 28px;
background-color: rgba(17, 17, 17, 0.55);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(218, 218, 218, 0.18);
border-radius: 999px;
}
.hero-x-cta-text {
color: var(--light-gray);
font-family: Inter, sans-serif;
font-size: 17px;
font-weight: 500;
}
.hero-x-cta-button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
background: var(--light-gray);
color: var(--very-dark-gray);
border-radius: 999px;
font-family: Inter, sans-serif;
font-weight: 500;
font-size: 15px;
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-x-cta-button:hover {
transform: translateY(-1px);
box-shadow: 0 10px 30px rgba(200, 215, 255, 0.18);
}
.hero-x-cta-arrow {
transition: transform 0.25s ease;
}
.hero-x-cta-button:hover .hero-x-cta-arrow {
transform: translateX(3px);
}
/* Desktop shows "Contact Us", mobile swaps to a single "Jetzt
* zusammenarbeiten" label inside the button and drops the separate
* text above it so the hero has only one CTA. */
.hero-x-cta-label-mobile {
display: none;
}
@media (max-width: 640px) {
/* Drop the outer dark pill entirely so only the inner light-gray
* button remains. */
.hero-x-cta {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
.hero-x-cta-text {
display: none !important;
}
.hero-x-cta-label-desktop {
display: none !important;
}
.hero-x-cta-label-mobile {
display: inline !important;
}
}
@media (max-width: 640px) {
.hero-x {
min-height: 80vh;
}
.hero-x-cta {
flex-direction: column;
gap: 12px;
padding: 16px;
}
}
/* ---------------------------------------------------------------
* Home – main hero ("Wir machen LinkedIn…") background
*
* Original Webflow sets the blue-wave background on .hero-content-wrapper,
* which sits inside a container capped at 1410px — so the image gets
* clipped at the container edges on wide screens and looks chopped.
* Move the image onto the full-width section and strip it from the
* inner wrapper so it spans the full viewport.
* --------------------------------------------------------------- */
.section.second-banner {
background-image: url("/images/image-5823-1.png");
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
padding-top: 0;
padding-bottom: 100px;
margin-top: -80px;
}
.section.second-banner .hero-content-wrapper {
background-image: none;
background-color: transparent;
}
/* ---------------------------------------------------------------
* Home – Testimonial slider
*
* The original Webflow CSS assumed long quote blocks at 32px/120% with
* an 80px spacer, which made the text card tower over the portrait.
* Constrain both halves to the same footprint, tighten the type, and
* push the Previous / Next arrows off to the sides.
* --------------------------------------------------------------- */
.testimonial-wrapper .slider.w-slider {
background-color: transparent;
padding: 0 88px; /* reserve space on each side for the arrows */
overflow: visible;
}
.testimonial-wrapper .slider-content-wrapper {
grid-template-columns: 340px 340px;
justify-content: center;
align-items: stretch;
column-gap: 32px;
}
.testimonial-wrapper .slider-image-wrapper {
width: 340px;
height: 340px;
display: flex;
align-items: stretch;
justify-content: stretch;
}
.testimonial-wrapper .slider-image {
width: 340px !important;
height: 340px !important;
object-fit: cover;
border-radius: 16px;
}
.testimonial-wrapper .testimonial-details-wrapper {
width: 340px;
/* Let the card grow so longer quotes (e.g. Julian Meier's) aren't
* cut off; keep a 340px minimum so shorter quotes still match the
* portrait tile next to them. */
min-height: 340px;
height: auto;
padding: 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
.testimonial-wrapper .testimonial-details {
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.15px;
margin-bottom: 0;
flex: 1;
}
.testimonial-wrapper .testimonial-author-title {
font-size: 17px;
}
.testimonial-wrapper .testimonialauthor-designation {
font-size: 14px;
margin-top: 4px;
}
/* Arrows — move from Webflow's top-corner positioning to vertically
* centred, tucked to the outer edge of the slider padding. */
.testimonial-wrapper .left-arrow-wrapper,
.testimonial-wrapper .right-arrow-wrapper {
top: 50%;
bottom: auto;
transform: translateY(-50%);
max-height: none;
width: auto;
padding: 0 12px;
}
.testimonial-wrapper .left-arrow-wrapper {
left: 0;
}
.testimonial-wrapper .right-arrow-wrapper {
right: 0;
}
/* Dots below the slides, nudged down a bit for breathing room. */
.testimonial-wrapper .slide-nav {
padding-top: 24px;
}
@media (max-width: 820px) {
.testimonial-wrapper .slider.w-slider {
padding: 0 48px;
}
.testimonial-wrapper .slider-content-wrapper {
grid-template-columns: 1fr;
row-gap: 20px;
justify-items: center;
}
.testimonial-wrapper .testimonial-details {
-webkit-line-clamp: 9;
}
}
/* Narrow phones: redesign the testimonial slider as a clean stacked
* card — rounded square portrait on top, rounded quote card below,
* identical layout for every customer, and only arrow icons for nav
* (no PREVIOUS / NEXT labels).
* Uses the .home-light prefix so it wins over the existing
* .home-light .testimonial-wrapper rules earlier in this file. */
@media (max-width: 600px) {
.home-light .testimonial-wrapper {
padding: 0 16px;
overflow: hidden;
}
.home-light .testimonial-wrapper .slider.w-slider {
padding: 0 0 72px 0 !important;
background: transparent !important;
min-height: 0 !important;
overflow: visible !important;
position: relative !important;
width: 100% !important;
}
/* Force the slider mask + slides to the container width so the
* next/previous slide doesn't bleed through. */
.home-light .testimonial-wrapper .w-slider-mask {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
border-radius: 0 !important;
}
.home-light .testimonial-wrapper .w-slide,
.home-light .testimonial-wrapper .slide-contents {
width: 100% !important;
background: transparent !important;
height: auto !important;
}
.home-light .testimonial-wrapper .slider-content-wrapper {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
gap: 14px !important;
width: 100% !important;
padding: 0 !important;
}
.home-light .testimonial-wrapper .slider-image-wrapper {
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1;
border-radius: 18px !important;
overflow: hidden !important;
}
.home-light .testimonial-wrapper .slider-image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 18px !important;
display: block !important;
}
.home-light .testimonial-wrapper .testimonial-details-wrapper {
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
height: auto !important;
padding: 22px !important;
border-radius: 18px !important;
background: linear-gradient(180deg, #f5f3ec 0%, #e7e3d7 100%) !important;
border: 1px solid rgba(17, 17, 17, 0.08) !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
box-sizing: border-box !important;
}
.home-light .testimonial-wrapper .testimonial-details-wrapper > div:first-child {
margin-bottom: 0 !important;
font-size: 11px !important;
letter-spacing: 1.4px !important;
}
.home-light .testimonial-wrapper .testimonial-details {
font-size: 15px !important;
line-height: 1.55 !important;
letter-spacing: -0.1px !important;
-webkit-line-clamp: unset !important;
display: block !important;
overflow: visible !important;
margin: 0 !important;
}
.home-light .testimonial-wrapper .testimonial-author-title {
font-size: 16px !important;
margin-top: 4px !important;
}
.home-light .testimonial-wrapper .testimonialauthor-designation {
font-size: 13px !important;
margin-top: 2px !important;
}
/* Hide PREVIOUS / NEXT text labels completely. */
.home-light .testimonial-wrapper .slider-direction-title {
display: none !important;
}
/* Arrows as rounded icon buttons, pinned to the bottom of the
* slider (which now has padding-bottom: 72px for them). */
.home-light .testimonial-wrapper .left-arrow-wrapper,
.home-light .testimonial-wrapper .right-arrow-wrapper {
position: absolute !important;
top: auto !important;
bottom: 12px !important;
transform: none !important;
width: 44px !important;
height: 44px !important;
max-height: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 999px !important;
background-color: rgba(17, 17, 17, 0.06) !important;
border: 1px solid rgba(17, 17, 17, 0.12) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.home-light .testimonial-wrapper .left-arrow-wrapper {
left: 0 !important;
right: auto !important;
}
.home-light .testimonial-wrapper .right-arrow-wrapper {
right: 0 !important;
left: auto !important;
}
.home-light .testimonial-wrapper .slider-arrow-wrapper {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
flex-direction: row !important;
gap: 0 !important;
}
.home-light .testimonial-wrapper .slider-arrow-icon {
width: 18px !important;
height: 18px !important;
margin: 0 !important;
}
/* Slide nav dots centered between the two arrows. */
.home-light .testimonial-wrapper .slide-nav {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 0 !important;
margin: 0 !important;
position: absolute !important;
left: 64px !important;
right: 64px !important;
bottom: 22px !important;
height: 24px !important;
}
}
/* ---------------------------------------------------------------
* Home – "Das können wir am besten" service rows
*
* Each row collapses its description by default; on hover (or keyboard
* focus) the description slides down and the arrow indicator tilts.
* --------------------------------------------------------------- */
.service-row {
display: block;
}
.service-row-head {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
column-gap: 24px;
}
.service-row-number {
font-family: Inter, sans-serif;
font-size: 14px;
letter-spacing: 1px;
opacity: 0.45;
color: var(--light-gray);
min-width: 28px;
}
.service-row-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid var(--medium-dark-gray);
color: var(--light-gray);
font-size: 20px;
flex-shrink: 0;
transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.service-row-expand {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.35s ease, margin-top 0.35s ease, opacity 0.3s ease;
opacity: 0;
margin-top: 0;
}
.service-row-expand > .service-row-description {
overflow: hidden;
color: var(--light-gray);
font-family: Inter, sans-serif;
font-size: 16px;
line-height: 1.55;
opacity: 0.82;
margin: 0;
padding-right: 72px; /* keep text clear of the arrow column */
}
.service-row:hover .service-row-expand,
.service-row:focus-visible .service-row-expand {
grid-template-rows: 1fr;
opacity: 1;
margin-top: 12px;
}
.service-row:hover .service-row-arrow,
.service-row:focus-visible .service-row-arrow {
background-color: var(--light-gray);
color: var(--very-dark-gray);
transform: rotate(45deg);
}
/* ---------------------------------------------------------------
* Button vertical alignment inside hero "book a call" card
*
* Webflow's base `.button` sets `margin-top: 30px`, and `.button.hero`
* never resets it, so inside a flex row with centered items the button
* sits visibly lower than its sibling text.
* --------------------------------------------------------------- */
.hero-butoon-content-wrap .button.hero,
.hero-button-wrapper .button.hero {
margin-top: 0;
align-self: center;
}