/*tokens.css*/
:root {
--color-bg:          #0a0f18;
--color-bg-2:        #0f1724;
--color-bg-3:        #131d2b;
--color-bg-4:        #182334;
--color-card:        #131d2b;
--color-card-h:      #182334;
--color-border:      #243246;
--color-border-2:    #31435c;
--color-text:        #e8edf5;
--color-text-2:      #c8d2e1;
--color-text-3:      #9aa8bc;
--color-heading:     #ffffff;
--color-muted:       #8e9bb0;
--color-muted-2:     #a7b3c5;
--color-accent:        #c65a2e;  
--color-accent-h:      #a94721;  
--color-accent-soft:   #d0693b;
--color-accent-vivid:  #c65a2e;
--color-accent-glow:   rgba(198, 90, 46, 0.16);
--color-accent-deep:   #b85329;  
--color-accent-text:   #ffffff;  
--color-link:    var(--color-accent-soft);  
--color-link-h:  var(--color-accent-h);
--color-success:     #22c55e;
--color-avail-now:   #22c55e;
--color-avail-soon:  var(--color-accent-h);
--nav-height: 72px;
--space-1:  0.25rem;  
--space-2:  0.5rem;   
--space-3:  0.75rem;  
--space-4:  1rem;     
--space-5:  1.25rem;  
--space-6:  1.5rem;   
--space-8:  2rem;     
--space-10: 2.5rem;   
--space-12: 3rem;     
--space-16: 4rem;     
--space-20: 5rem;     
--space-24: 6rem;     
--space-32: 8rem;     
--text-xs:   0.75rem;   
--text-sm:   0.875rem;  
--text-base: 1rem;      
--text-md:   1.0625rem; 
--text-lg:   1.125rem;  
--text-xl:   1.25rem;   
--text-2xl:  1.5rem;    
--text-3xl:  1.875rem;  
--text-4xl:  2.25rem;   
--text-5xl:  3rem;      
--text-6xl:  3.75rem;   
--text-7xl:  4.5rem;    
--lh-tight:  1.1;
--lh-snug:   1.3;
--lh-normal: 1.5;
--lh-relaxed:1.7;
--lh-loose:  1.9;
--ls-tight:  -0.04em;
--ls-normal:  0;
--ls-wide:    0.06em;
--ls-wider:   0.1em;
--ls-widest:  0.18em;
--font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
--font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
--font-body: 'Outfit', system-ui, sans-serif;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
--radius-full: 9999px;
--transition-fast:   0.15s cubic-bezier(0.22, 1, 0.36, 1);
--transition-base:   0.25s cubic-bezier(0.22, 1, 0.36, 1);
--transition-slow:   0.4s cubic-bezier(0.22, 1, 0.36, 1);
--shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
--shadow-md:  0 4px 16px rgba(0, 0, 0, 0.35);
--shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.5);
--z-base:     1;
--z-dropdown: 10;
--z-page-nav: 90;
--z-nav:      100;
--z-modal:    200;
--z-sticky:   900;
--z-noise:    999;
--z-cursor:   1000;
--max-content: 1160px;
--max-text:    68ch;
--max-narrow:  52ch;
}
[data-theme="light"] {
--color-bg:          #f6f4f1;
--color-bg-2:        #efebe6;
--color-bg-3:        #ffffff;
--color-bg-4:        #ffffff;
--color-card:        #ffffff;
--color-card-h:      #f7f3ee;
--color-border:      rgba(31, 43, 61, 0.10);
--color-border-2:    rgba(31, 43, 61, 0.18);
--color-text:        #1f2430;
--color-text-2:      #3a4658;
--color-text-3:      #5a677d;   
--color-heading:     #121722;
--color-muted:       #5b697c;   
--color-muted-2:     #5b697c;   
--color-accent:        #c65a2e;  
--color-accent-h:      #8c3b1c;  
--color-accent-soft:   #a94721;  
--color-accent-vivid:  #c65a2e;
--color-accent-glow:   rgba(198, 90, 46, 0.16);
--color-accent-deep:   #b85329;
--color-accent-text:   #ffffff;
--color-success:       #16a34a;
--color-avail-now:     #16a34a;
--color-avail-soon:    var(--color-accent-h);
}
@media (max-width: 768px) {
:root { --nav-height: 56px; }
}
section[id],
article[id],
[aria-labelledby] {
scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}
.is-hidden { display: none !important; }
.era-founding-line {
font-family: var(--font-heading);
font-weight: 500;
font-style: italic;
font-size: var(--text-lg);
color: var(--color-heading);
margin-bottom: var(--space-4);
line-height: 1.4;
}
/*base.css*/
.cv-skills-group-label {
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-muted-2);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
margin-top: var(--space-4);
margin-bottom: var(--space-2);
}
.cv-skills-group-label:first-child { margin-top: 0; }
@media print {
.cv-skills-group-label { color: #555 !important; }
}
.op-section-intro {
font-size: var(--text-sm);
color: var(--color-muted-2);
margin-top: calc(var(--space-1) * -1);
margin-bottom: var(--space-4);
}
.op-other-engagements {
margin-top: var(--space-6);
padding-top: var(--space-4);
font-size: var(--text-sm);
color: var(--color-muted-2);
border-top: 1px dashed var(--color-border-2);
line-height: var(--lh-snug);
}
.op-other-engagements strong { color: var(--color-heading); }
.cv-print-hint,
.op-print-hint {
display: inline-block;
margin: var(--space-4) 0 var(--space-8);
padding: var(--space-3) var(--space-4);
font-size: var(--text-sm);
color: var(--color-muted-2);
background: var(--color-bg-2);
border: 1px dashed var(--color-border-2);
border-radius: var(--radius-md);
}
.cv-print-hint kbd,
.op-print-hint kbd {
display: inline-block;
padding: 0 var(--space-2);
border: 1px solid var(--color-border-2);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: var(--text-xs);
background: var(--color-bg-3);
color: var(--color-text);
}
@media print {
.cv-print-hint,
.op-print-hint { display: none !important; }
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; text-size-adjust: 100%; scroll-padding-block-start: 80px; }
body {
font-family: 'Outfit', system-ui, -apple-system, sans-serif;
background: var(--color-bg);
color: var(--color-text);
line-height: var(--lh-relaxed);
overflow-x: clip;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background var(--transition-slow), color var(--transition-slow);
}
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; }
.skip-link {
position: absolute;
top: -100%;
left: var(--space-4);
background: var(--color-accent);
color: #fff;
padding: var(--space-3) var(--space-6);
font-size: var(--text-base);
font-weight: 600;
z-index: calc(var(--z-cursor) + 1);
border-radius: 0 0 var(--radius-md) var(--radius-md);
transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; }
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.marquee-track { animation: none; }
html { scroll-behavior: auto; }
}
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: var(--radius-full); }
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.028;
pointer-events: none;
z-index: var(--z-noise);
}
[data-theme="light"] body::before { opacity: 0.015; }
.container {
max-width: var(--max-content);
margin-inline: auto;
padding-inline: var(--space-16);
}
.section-pad { padding-block: var(--space-20); }
.section-pad-lg { padding-block: var(--space-24); }
.section-pad-sm { padding-block: var(--space-12); }
.kicker {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--color-accent-soft);
margin-block-end: var(--space-4);
}
.kicker::before {
content: '';
width: 20px;
height: 1px;
background: var(--color-accent-soft);
flex-shrink: 0;
}
.display-xl {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
font-size: clamp(var(--text-4xl), 5.5vw, var(--text-7xl));
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
color: var(--color-heading);
}
.display-lg {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
color: var(--color-heading);
}
.display-md {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
line-height: var(--lh-snug);
letter-spacing: -0.02em;
color: var(--color-heading);
}
.display-sm {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
font-size: clamp(var(--text-lg), 2vw, var(--text-2xl));
line-height: var(--lh-snug);
letter-spacing: -0.01em;
color: var(--color-heading);
}
.display-xl em, .display-lg em, .display-md em, .display-sm em {
font-style: italic;
color: var(--color-accent-vivid);
}
.body-lg {
font-size: var(--text-md);
line-height: var(--lh-loose);
color: var(--color-text);
font-weight: 300;
}
.body-base {
font-size: var(--text-base);
line-height: var(--lh-relaxed);
color: var(--color-text);
font-weight: 300;
}
.body-sm {
font-size: var(--text-sm);
line-height: var(--lh-relaxed);
color: var(--color-muted);
font-weight: 400;
}
.text-muted   { color: var(--color-muted); }
.text-muted-2 { color: var(--color-muted-2); }
.text-heading { color: var(--color-heading); }
.text-accent  { color: var(--color-accent-h); }
.text-strong  { color: var(--color-heading); font-weight: 500; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-4) var(--space-8);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
border-radius: var(--radius-sm);
transition:
background var(--transition-base),
border-color var(--transition-base),
color var(--transition-base),
transform var(--transition-base),
box-shadow var(--transition-base);
white-space: nowrap;
border: 1px solid transparent;
line-height: 1;
}
.btn:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
.btn-primary {
background: var(--color-accent-deep);
color: var(--color-accent-text);
font-weight: 700;
border-color: var(--color-accent-deep);
}
.btn-primary:hover {
background: var(--color-accent-h);
border-color: var(--color-accent-h);
transform: translateY(-2px);
box-shadow: 0 8px 24px var(--color-accent-glow);
}
.btn-outline {
background: transparent;
color: var(--color-muted-2);
border-color: var(--color-border-2);
}
.btn-outline:hover {
border-color: var(--color-accent);
color: var(--color-accent-h);
transform: translateY(-2px);
}
.avail-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-3);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
border-radius: var(--radius-sm);
border: 1px solid;
}
.avail-badge-now {
color: var(--color-avail-now);
border-color: rgba(34, 197, 94, 0.35);
background: rgba(34, 197, 94, 0.06);
}
.avail-badge-now::before {
content: '';
width: 5px; height: 5px;
border-radius: var(--radius-full);
background: var(--color-avail-now);
flex-shrink: 0;
animation: pulse-dot 2s ease infinite;
}
.avail-badge-soon {
color: var(--color-avail-soon);
border-color: rgba(198, 90, 46, 0.35);
background: var(--color-accent-glow);
}
@keyframes pulse-dot {
0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
50%       { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}
.tag {
display: inline-block;
padding: var(--space-1) var(--space-3);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-muted-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
transition: color var(--transition-base), border-color var(--transition-base);
}
.tag-available {
color: var(--color-avail-now);
border-color: rgba(34, 197, 94, 0.35);
background: rgba(34, 197, 94, 0.06);
font-weight: 600;
}
.tag-unavailable {
color: var(--color-muted-2);          
border-color: rgba(198, 90, 46, 0.35); 
background: var(--color-accent-glow);  
font-weight: 600;
}
.card {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-8);
transition: background var(--transition-base), border-color var(--transition-base);
}
.card:hover { background: var(--color-card-h); }
.divider {
border: none;
border-top: 1px solid var(--color-border);
margin-block: var(--space-8);
}
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.icon svg {
width: 1em; height: 1em;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.icon-sm  { font-size: 14px; }
.icon-md  { font-size: 20px; }
.icon-lg  { font-size: 24px; }
@keyframes fade-up {
from { opacity: 0; transform: translateY(20px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes slide-right {
from { opacity: 0; transform: translateX(-16px); }
to   { opacity: 1; transform: translateX(0); }
}
@keyframes marquee {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}
@keyframes scroll-line {
0%   { transform: scaleY(0); transform-origin: top; }
50%  { transform: scaleY(1); transform-origin: top; }
51%  { transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; }
}
.animate-fade-up { animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.display-line { display: block; }
.js-reveal,
.js-slide,
.js-scale {
transition: opacity 0.55s ease, transform 0.55s ease;
}
.js-enabled .js-reveal {
opacity: 0;
transform: translateY(18px);
}
.js-enabled .js-reveal.is-visible { opacity: 1; transform: translateY(0); }
.js-enabled .js-slide {
opacity: 0;
transform: translateX(-14px);
}
.js-enabled .js-slide.is-visible { opacity: 1; transform: translateX(0); }
.js-enabled .js-scale {
opacity: 0;
transform: scale(0.95);
}
.js-enabled .js-scale.is-visible { opacity: 1; transform: scale(1); }
.theme-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
border-radius: var(--radius-full);
border: 1px solid var(--color-border-2);
background: transparent;
color: var(--color-muted);
transition: border-color var(--transition-base), color var(--transition-base), background var(--transition-base);
flex-shrink: 0;
}
.theme-btn:hover { border-color: var(--color-accent); color: var(--color-accent-h); }
.theme-btn .icon-sun  { display: flex; }
.theme-btn .icon-moon { display: none; }
[data-theme="light"] .theme-btn .icon-sun  { display: none; }
[data-theme="light"] .theme-btn .icon-moon { display: flex; }
.mb-2  { margin-block-end: var(--space-2); }
.mb-3  { margin-block-end: var(--space-3); }
.mb-4  { margin-block-end: var(--space-4); }
.mb-5  { margin-block-end: var(--space-5); }
.mb-6  { margin-block-end: var(--space-6); }
.mb-8  { margin-block-end: var(--space-8); }
.mb-10 { margin-block-end: var(--space-10); }
.mb-12 { margin-block-end: var(--space-12); }
.mb-16 { margin-block-end: var(--space-16); }
.mt-4  { margin-block-start: var(--space-4); }
.mt-6  { margin-block-start: var(--space-6); }
.mt-8  { margin-block-start: var(--space-8); }
.mt-10 { margin-block-start: var(--space-10); }
.mt-12 { margin-block-start: var(--space-12); }
.text-center { text-align: center; }
.mx-auto  { margin-inline: auto; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-col  { display: flex; flex-direction: column; }
.flex-start-gap-2 { display: flex; align-items: flex-start; gap: var(--space-2); }
.flex-start-gap-4 { display: flex; align-items: flex-start; gap: var(--space-4); }
.icon-shrink { flex-shrink: 0; margin-block-start: var(--space-1); }
.text-xs-muted { font-size: var(--text-xs); opacity: 0.7; }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.max-text   { max-width: var(--max-text); }
.max-narrow { max-width: var(--max-narrow); }
.max-55ch { max-width: 55ch; }
.max-60ch { max-width: 60ch; }
.max-65ch { max-width: 65ch; }
.max-72ch { max-width: 72ch; }
.img-rounded { border-radius: var(--radius-md); }
.accent-border-left { border-left: 3px solid var(--color-accent); }
.accent-border-left-sm { border-left: 2px solid var(--color-accent); }
.accent-glow-bg { background: var(--color-accent-glow); }
.opacity-72 { opacity: .72; }
.avail-dot-green { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
.avail-dot-red { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; flex-shrink: 0; }
.avail-dot-soon { width: 8px; height: 8px; border-radius: 50%; background: var(--color-avail-soon); flex-shrink: 0; }
.avail-row { display: flex; align-items: center; gap: var(--space-2); }
/*components.css*/
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: var(--z-nav);
display: flex;
align-items: center;
padding: var(--space-5) var(--space-16);
gap: var(--space-8);
transition:
background var(--transition-slow),
padding var(--transition-slow),
border-color var(--transition-slow),
backdrop-filter var(--transition-slow);
border-bottom: 1px solid transparent;
max-width: 100vw;
background: color-mix(in srgb, var(--color-bg) 60%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.nav.is-scrolled {
background: color-mix(in srgb, var(--color-bg) 92%, transparent);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding-block: var(--space-4);
border-bottom-color: var(--color-border);
}
.nav-brand {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-3);
line-height: 1;
flex-shrink: 0;
color: var(--color-heading);
}
.nav-brand-mark {
width: 34px;
height: 34px;
flex-shrink: 0;
display: block;
}
.nav-brand-text {
display: flex;
flex-direction: column;
gap: 5px;
}
.nav-brand-name {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
font-size: var(--text-base);
color: var(--color-heading);
letter-spacing: -0.02em;
}
.nav-brand-bv {
font-size: var(--text-xs);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-muted);
}
.nav-list {
display: flex;
align-items: center;
gap: var(--space-8);
list-style: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.nav-list a {
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-muted-2);
transition: color var(--transition-base);
padding-block: var(--space-2);
position: relative;
}
.nav-list a::after {
content: '';
position: absolute;
bottom: -1px;
left: 0; right: 0;
height: 1px;
background: var(--color-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-base);
}
.nav-list a:hover,
.nav-list a[aria-current="page"],
.nav-list a.is-active { color: var(--color-accent-h); }
.nav-list a:hover::after,
.nav-list a.is-active::after { transform: scaleX(1); }
.nav-right {
display: flex;
align-items: center;
gap: var(--space-4);
flex-shrink: 0;
margin-inline-start: auto;
}
.nav-lang {
display: flex;
gap: var(--space-1);
}
.nav-lang a {
font-size: var(--text-sm);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-muted);
padding: var(--space-1) var(--space-2);
border: 1px solid var(--color-border-2);
border-radius: var(--radius-sm);
transition: color var(--transition-base), border-color var(--transition-base);
}
.nav-lang a:hover { color: var(--color-accent-h); border-color: var(--color-accent); }
.nav-lang a[aria-current="page"] {
color: var(--color-accent-h);
border-color: var(--color-accent);
}
.nav-avail-btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-accent-h);
border: 1px solid var(--color-accent);
border-radius: var(--radius-sm);
background: transparent;
transition: background var(--transition-base), border-color var(--transition-base);
white-space: nowrap;
}
.nav-avail-btn::before {
content: '';
width: 5px; height: 5px;
border-radius: var(--radius-full);
background: var(--color-success);
flex-shrink: 0;
animation: pulse-dot 2s ease infinite;
}
.nav-avail-btn:hover { background: var(--color-accent-glow); border-color: var(--color-accent-h); }
.nav-hamburger {
display: none;
flex-direction: column;
justify-content: space-between;
width: 24px; height: 16px;
background: none;
border: none;
padding: 0;
color: var(--color-heading);
cursor: pointer;
flex-shrink: 0;
}
.nav-hamburger span {
display: block;
width: 100%; height: 1.5px;
background: currentColor;
border-radius: 1px;
transition: transform var(--transition-base), opacity var(--transition-base);
transform-origin: center;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.25px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.25px) rotate(-45deg); }
.nav-drawer {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: var(--color-bg);
z-index: calc(var(--z-nav) - 1);
padding: var(--space-24) var(--space-8) var(--space-8);
flex-direction: column;
gap: var(--space-8);
overflow-y: auto;
}
.nav-drawer.is-open { display: flex; }
.nav-drawer-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.nav-drawer-list a {
display: block;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: var(--text-2xl);
font-weight: 700;
color: var(--color-heading);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-border);
transition: color var(--transition-base), padding-left var(--transition-base);
}
.nav-drawer-list a:hover { color: var(--color-accent-h); padding-inline-start: var(--space-3); }
.nav-drawer-footer {
display: flex;
flex-direction: column;
gap: var(--space-6);
padding-block-start: var(--space-6);
border-top: 1px solid var(--color-border);
}
.nav-drawer-footer-label {
font-size: var(--text-xs);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-muted);
margin-block-end: var(--space-3);
}
.nav-drawer-lang-row {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.nav-drawer-lang-btn {
font-size: var(--text-base);
color: var(--color-text);
padding: var(--space-2) 0;
transition: color var(--transition-base);
}
.nav-drawer-lang-btn:hover,
.nav-drawer-lang-btn[aria-current="page"] {
color: var(--color-accent-h);
}
.nav-drawer-theme-row {
display: flex;
gap: var(--space-3);
}
.nav-drawer-theme-opt {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-muted-2);
background: var(--color-bg-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: color var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}
.nav-drawer-theme-opt:hover {
color: var(--color-accent-h);
border-color: var(--color-accent);
}
[data-theme="dark"] .nav-drawer-theme-opt.opt-dark {
color: var(--color-accent-h);
border-color: var(--color-accent);
background: var(--color-accent-glow);
}
[data-theme="light"] .nav-drawer-theme-opt.opt-light {
color: var(--color-accent-h);
border-color: var(--color-accent);
background: var(--color-accent-glow);
}
.nav-drawer.is-open {
overscroll-behavior: contain;
}
.marquee-band {
background: var(--color-bg-2);
padding-block: var(--space-6);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
touch-action: pan-y;
}
.marquee-logo {
touch-action: pan-y;
}
.marquee-track {
display: flex;
gap: 0;
animation: marquee 36s linear infinite;
white-space: nowrap;
will-change: transform;
}
.marquee-item {
display: inline-flex;
align-items: center;
padding-inline: var(--space-8);
gap: var(--space-8);
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-style: italic;
font-weight: 700;
font-size: var(--text-base);
color: var(--color-text);
flex-shrink: 0;
}
.marquee-item::after {
content: '\25C6';
font-style: normal;
font-size: 0.4em;
opacity: 0.45;
flex-shrink: 0;
}
.marquee-logo {
display: inline-flex;
align-items: center;
justify-content: center;
padding-inline: var(--space-6);
flex-shrink: 0;
opacity: 0.5;
filter: grayscale(100%);
transition: opacity var(--transition-base), filter var(--transition-base);
}
.marquee-logo:hover {
opacity: 1;
filter: grayscale(0%);
}
.marquee-logo img {
width: 60px;
height: 60px;
aspect-ratio: 1/1;
object-fit: contain;
border-radius: var(--radius-sm);
}
.client-cell img {
width: 100%;
max-width: 100px;
height: auto;
object-fit: contain;
margin: 0 auto;
opacity: 0.8;
transition: opacity var(--transition-base), transform var(--transition-base);
}
.client-cell:hover img {
opacity: 1;
transform: scale(1.05);
}
.band {
background: var(--color-bg-3);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
max-height: calc(100dvh - 120px);
position: relative;
overflow: hidden;
}
.hero::after {
content: '';
position: absolute;
top: 20%;
left: -10%;
width: 50%;
height: 60%;
background: radial-gradient(ellipse, var(--color-accent-glow) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
[data-theme="light"] .hero::after {
background: radial-gradient(ellipse, var(--color-accent-glow) 0%, transparent 70%);
}
.hero-left {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--space-20) var(--space-16) var(--space-12);
position: relative;
z-index: 2;
}
.hero-ghost {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -55%);
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
font-size: clamp(18rem, 28vw, 28rem);
color: var(--color-border);
opacity: 0.06;
pointer-events: none;
user-select: none;
line-height: 0.85;
letter-spacing: -0.05em;
z-index: 0;
}
.hero-eyebrow {
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-muted-2);
margin-block-end: var(--space-5);
animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.hero-name {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
font-size: clamp(var(--text-5xl), 6vw, var(--text-7xl));
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
color: var(--color-heading);
margin-block-end: var(--space-3);
animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.hero-name em {
font-style: italic;
color: var(--color-accent-h);
white-space: nowrap;
}
.hero-subtitle {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-style: italic;
font-weight: 700;
font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));
color: var(--color-accent-h);
margin-block-end: var(--space-2);
animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
.hero-bv {
font-size: var(--text-xs);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-muted);
margin-block-end: var(--space-6);
animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}
.hero-statement {
font-size: var(--text-md);
line-height: var(--lh-loose);
color: var(--color-text);
font-weight: 300;
max-width: 48ch;
margin-block-end: var(--space-8);
animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
.hero-statement strong {
color: var(--color-heading);
font-weight: 500;
}
.hero-badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-block-end: var(--space-8);
animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}
.hero-ctas {
display: flex;
gap: var(--space-4);
animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}
.hero-right {
position: relative;
overflow: hidden;
min-height: 100%;
color: transparent; 
}
.hero-right::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(to right, var(--color-bg) 0%, transparent 35%),
linear-gradient(to top, var(--color-bg) 0%, transparent 25%);
pointer-events: none;
}
.hero-photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 15%;
display: block;
}
.hero-stats {
position: absolute;
bottom: var(--space-16);
right: var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-6);
z-index: 2;
animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
background: rgba(7, 9, 14, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: var(--space-6);
border-radius: var(--radius-md);
max-width: 180px;
}
[data-theme="light"] .hero-stats {
background: rgba(255, 255, 255, 0.75);
}
.hero-stats-mobile {
display: none;
flex-direction: row;
gap: var(--space-8);
margin-block-end: var(--space-6);
animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}
.hero-stat-num {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
font-size: var(--text-3xl);
color: var(--color-heading);
line-height: 1;
display: block;
}
.hero-stat-num sup {
font-size: 0.45em;
vertical-align: super;
color: var(--color-accent-h);
}
.hero-stat-label {
font-size: var(--text-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-muted);
display: block;
margin-block-start: 2px;
}
.section-header-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: end;
margin-block-end: var(--space-16);
}
.section-header-split > p {
font-size: var(--text-md);
line-height: var(--lh-loose);
color: var(--color-muted-2);
font-weight: 300;
max-width: 50ch;
}
.approach-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: start;
}
.approach-body {
position: sticky;
top: calc(var(--space-32) + 60px);
z-index: var(--z-base);
}
.approach-body > p {
font-size: var(--text-md);
line-height: var(--lh-loose);
color: var(--color-muted-2);
font-weight: 300;
max-width: 50ch;
margin-block-end: var(--space-4);
}
.approach-body > p strong {
color: var(--color-heading);
font-weight: 500;
}
.approach-body > p em {
color: var(--color-accent-h);
font-style: italic;
}
.approach-body > .btn-text,
.approach-body > .link-cta {
margin-block-start: var(--space-4);
}
.approach-item {
display: grid;
grid-template-columns: var(--space-12) 1fr;
gap: var(--space-6);
padding-block: var(--space-6);
border-top: 1px solid var(--color-border);
transition: border-color var(--transition-base);
}
.approach-item:last-child { border-bottom: 1px solid var(--color-border); }
.approach-item:hover { border-color: var(--color-accent); }
.approach-num {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: var(--text-xl);
font-weight: 700;
color: var(--color-border-2);
line-height: 1.3;
padding-block-start: 2px;
transition: color var(--transition-base), transform var(--transition-base);
}
.approach-item:hover .approach-num {
color: var(--color-accent-h);
transform: scale(1.1);
}
.approach-name {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-heading);
margin-block-end: var(--space-2);
line-height: var(--lh-snug);
}
.approach-desc { font-size: var(--text-base); color: var(--color-muted-2); font-weight: 300; line-height: var(--lh-relaxed); }
.pillars-section .exp-card {
position: relative;
}
.pillars-section .pillar-number {
display: block;
font-family: var(--font-heading);
font-weight: 700;
font-style: italic;
font-size: var(--text-4xl);
line-height: 1;
color: var(--color-accent-soft);
margin-block-end: var(--space-4);
letter-spacing: var(--ls-tight);
}
.exp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--color-border);
}
.exp-grid-2col {
grid-template-columns: repeat(2, 1fr);
}
.exp-grid:not(.exp-grid-2col) .exp-card:last-child:nth-child(3n+1) {
grid-column: 1 / -1;
}
.exp-card {
background: var(--color-card);
padding: var(--space-8) var(--space-8);
transition: background var(--transition-base), transform var(--transition-base);
position: relative;
overflow: hidden;
}
.exp-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: var(--color-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-base);
}
.exp-card:hover {
background: var(--color-card-h);
}
.exp-card:hover::after { transform: scaleX(1); }
.exp-card:hover .exp-icon { color: var(--color-accent-h); }
.exp-icon {
color: var(--color-accent);
opacity: 0.6;
margin-block-end: var(--space-5);
transition: color var(--transition-base), opacity var(--transition-base);
}
.exp-card:hover .exp-icon { opacity: 1; }
.exp-icon svg { width: 22px; height: 22px; }
.exp-name {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: var(--text-xl);
font-weight: 700;
color: var(--color-heading);
margin-block-end: var(--space-3);
line-height: var(--lh-snug);
}
.exp-desc {
font-size: var(--text-base);
line-height: var(--lh-relaxed);
color: var(--color-muted-2);
font-weight: 300;
margin-block-end: var(--space-5);
}
.exp-redirect {
font-size: var(--text-sm);
line-height: var(--lh-relaxed);
color: var(--color-muted);
font-weight: 400;
margin-block-end: var(--space-5);
}
.exp-redirect a { font-weight: 500; }
.exp-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.exp-tags .tag { transition: color var(--transition-base), border-color var(--transition-base); }
.exp-card:hover .exp-tags .tag {
border-color: var(--color-accent);
color: var(--color-accent-h);
}
.timeline {
position: relative;
padding-inline-start: var(--space-6);
}
.timeline::before {
content: '';
position: absolute;
left: 0; top: 6px; bottom: 0;
width: 1px;
background: linear-gradient(to bottom, var(--color-accent), var(--color-border) 85%, transparent);
}
.tl-item {
position: relative;
padding-block-end: var(--space-10);
padding-inline-start: var(--space-8);
border-bottom: 1px solid var(--color-border);
margin-block-end: var(--space-1);
display: grid;
grid-template-columns: 40px 1fr;
}
.tl-item:last-child { border-bottom: none; padding-block-end: 0; }
.tl-item::before {
content: '';
position: absolute;
left: calc(-1 * var(--space-6) - 4px);
top: 6px;
width: 9px; height: 9px;
border-radius: var(--radius-full);
border: 1.5px solid var(--color-border-2);
background: var(--color-bg);
transition: border-color var(--transition-base), background var(--transition-base);
}
.tl-item:first-child::before {
border-color: var(--color-accent);
background: var(--color-accent);
box-shadow: 0 0 0 4px var(--color-accent-glow);
}
.tl-item:hover::before { border-color: var(--color-accent-h); }
.tl-item > * { grid-column: 2; }
.tl-period {
font-size: var(--text-xs);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-accent-h);
font-weight: 500;
margin-block-end: var(--space-1);
order: 3;
}
.tl-role {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-heading);
line-height: var(--lh-snug);
margin-block-end: var(--space-1);
order: 2;
}
.tl-company {
font-size: var(--text-base);
color: var(--color-muted-2);
margin-block-end: 0;
}
.tl-item > .tl-company {
grid-column: 1 / -1;
order: 1;
margin-block-end: var(--space-2);
padding-inline-start: 40px;
}
.tl-desc {
font-size: var(--text-base);
line-height: var(--lh-relaxed);
color: var(--color-text);
opacity: 0.78;
font-weight: 300;
max-width: 60ch;
margin-block-end: var(--space-4);
order: 5;
}
.tl-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
order: 6;
}
.proof-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--color-border);
}
.proof-card {
background: var(--color-card);
padding: var(--space-8);
border-bottom: 2px solid transparent;
transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
display: flex;
flex-direction: column;
}
.proof-card:hover {
background: var(--color-card-h);
border-bottom-color: var(--color-accent);
}
.proof-quote {
font-size: var(--text-base);
line-height: var(--lh-loose);
color: var(--color-text);
font-style: italic;
font-weight: 300;
opacity: 0.82;
margin-block-end: var(--space-6);
flex: 1;
position: relative;
padding-block-start: var(--space-8);
}
.proof-quote::before {
content: '\201C\201C';
position: absolute;
top: -8px; left: -4px;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 4rem;
line-height: 1;
color: var(--color-accent);
opacity: 0.3;
font-style: normal;
}
.proof-author {
border-top: 1px solid var(--color-border);
padding-block-start: var(--space-4);
margin-block-start: auto;
display: flex;
align-items: center;
gap: var(--space-3);
}
.proof-author > picture {
flex-shrink: 0;
display: block;
width: 40px;
height: 40px;
}
.proof-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
flex-shrink: 0;
object-fit: cover;
object-position: center;
}
div.proof-avatar {
background: var(--color-accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: -0.02em;
}
.proof-name {
font-size: var(--text-base);
font-weight: 600;
color: var(--color-heading);
margin-block-end: var(--space-1);
}
.proof-role {
font-size: var(--text-sm);
color: var(--color-muted-2);
}
.client-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1px;
background: var(--color-border);
}
.client-cell {
background: var(--color-card);
padding: var(--space-8) var(--space-4);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
font-size: var(--text-base);
color: var(--color-border-2);
text-align: center;
line-height: var(--lh-snug);
transition: color var(--transition-base), background var(--transition-base), transform var(--transition-base);
letter-spacing: -0.01em;
}
.client-cell:hover {
color: var(--color-accent-h);
background: var(--color-card-h);
transform: scale(1.03);
}
.cred-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--color-border);
}
.cred-card {
background: var(--color-bg-3);
padding: var(--space-6);
transition: background var(--transition-base);
}
.cred-card:hover { background: var(--color-bg-4); }
.cred-year {
font-size: var(--text-xs);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-accent-h);
margin-block-end: var(--space-2);
}
.cred-year--empty { display: none; }
.cred-name {
font-size: var(--text-base);
font-weight: 500;
color: var(--color-heading);
line-height: var(--lh-snug);
margin-block-end: var(--space-1);
}
.cred-issuer { font-size: var(--text-sm); color: var(--color-muted-2); }
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: var(--space-16);
align-items: start;
}
.contact-avail-box {
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg-3);
margin-block-start: var(--space-5);
}
.contact-avail-label {
font-size: var(--text-xs);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-muted);
margin-block-end: var(--space-2);
}
.contact-avail-text {
font-size: var(--text-base);
color: var(--color-text);
opacity: 0.7;
font-weight: 300;
line-height: var(--lh-relaxed);
}
.form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label {
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-muted);
}
.form-control {
background: var(--color-bg-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-heading);
padding: var(--space-4) var(--space-5);
font-family: inherit;
font-size: var(--text-base);
line-height: var(--lh-normal);
outline: none;
transition: border-color var(--transition-base), background var(--transition-base);
-webkit-appearance: none;
width: 100%;
}
.form-control:focus {
border-color: var(--color-accent);
background: var(--color-bg-4);
box-shadow: 0 0 0 3px var(--color-accent-glow);
}
.form-control::placeholder { color: var(--color-muted); }
.form-control:user-invalid { border-color: #ef4444; }
.form-control.form-error {
border-color: #ef4444;
background: color-mix(in srgb, var(--color-bg-3) 92%, #ef4444 8%);
}
.form-control.form-error:focus {
border-color: #ef4444;
box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 22%, transparent);
}
.form-error-msg {
color: #ef4444;
font-size: var(--text-sm);
line-height: var(--lh-relaxed);
margin: 0;
}
[data-theme="light"] .form-control.form-error {
background: color-mix(in srgb, var(--color-bg-3) 90%, #dc2626 10%);
border-color: #dc2626;
}
[data-theme="light"] .form-error-msg { color: #b91c1c; }
textarea.form-control { resize: vertical; min-height: 110px; }
select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7d96' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-inline-end: 36px; }
select.form-control option { background: var(--color-bg-3); }
.form-submit {
align-self: flex-start;
background: var(--color-accent);
color: #fff;
border: 1px solid var(--color-accent);
border-radius: var(--radius-sm);
padding: var(--space-4) var(--space-10);
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
cursor: pointer;
transition: background var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.form-submit:hover {
background: var(--color-accent-h);
transform: translateY(-2px);
box-shadow: 0 8px 24px var(--color-accent-glow);
}
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.form-note { font-size: var(--text-sm); color: var(--color-muted); line-height: var(--lh-relaxed); }
.form-status {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
details {
border-bottom: 1px solid var(--color-border);
padding: var(--space-5) 0;
}
details summary {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
font-size: var(--text-lg);
color: var(--color-heading);
cursor: pointer;
line-height: var(--lh-snug);
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
transition: color var(--transition-base);
}
details summary:hover { color: var(--color-accent-h); }
details summary::after {
content: '+';
font-family: 'Outfit', system-ui, sans-serif;
font-size: var(--text-xl);
font-weight: 300;
color: var(--color-muted);
flex-shrink: 0;
transition: transform var(--transition-base), color var(--transition-base);
}
details[open] summary::after {
content: '-';
color: var(--color-accent-h);
}
details summary::-webkit-details-marker { display: none; }
details p {
margin-block-start: var(--space-4);
color: var(--color-muted-2);
line-height: var(--lh-loose);
max-width: 60ch;
animation: fade-up 0.3s ease both;
}
.back-to-top {
position: fixed;
bottom: var(--space-8);
right: var(--space-8);
width: 40px; height: 40px;
border-radius: var(--radius-full);
background: var(--color-accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
z-index: var(--z-dropdown);
opacity: 0;
transform: translateY(12px);
transition: opacity var(--transition-base), transform var(--transition-base), background var(--transition-base);
box-shadow: var(--shadow-md);
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--color-accent-h); }
.back-to-top svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2; fill: none; }
.footer {
background: var(--color-bg-2);
border-top: 1px solid var(--color-border);
padding-block: var(--space-16);
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--space-12);
margin-block-end: var(--space-10);
}
.footer-brand-name {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
font-size: var(--text-md);
color: var(--color-text);
opacity: 0.85;
display: block;
}
.footer-brand-bv {
font-size: var(--text-xs);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-muted);
display: block;
margin-block-start: 3px;
margin-block-end: var(--space-4);
}
.footer-wordmark {
display: block;
height: 28px;
width: auto;
margin-block: 6px var(--space-5);
opacity: 0.92;
}
[data-theme="dark"] .footer-wordmark--for-light { display: none; }
[data-theme="light"] .footer-wordmark--for-dark { display: none; }
.footer-tagline {
font-size: var(--text-base);
color: var(--color-muted-2);
line-height: var(--lh-relaxed);
max-width: 26ch;
}
.footer-col-title {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-muted);
margin-block-end: var(--space-5);
}
.footer-links { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.footer-links a {
font-size: var(--text-base);
color: var(--color-muted-2);
transition: color var(--transition-base);
}
.footer-links a:hover { color: var(--color-accent-h); }
.footer-bottom {
border-top: 1px solid var(--color-border);
padding-block-start: var(--space-6);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-8);
}
.footer-copy { font-size: var(--text-sm); color: var(--color-muted); }
.footer-bottom-links { display: flex; gap: var(--space-6); }
.footer-bottom-links a { font-size: var(--text-sm); color: var(--color-muted); transition: color var(--transition-base); }
.footer-bottom-links a:hover { color: var(--color-accent-h); }
.bg-alt { background: var(--color-bg-2); }
.bg-muted { background: var(--color-bg-3); border-top: 1px solid var(--color-border); }
.border-top { border-top: 1px solid var(--color-border); }
:target {
scroll-margin-block-start: 100px;
}
@media (pointer: coarse) {
.tag { min-height: 36px; display: inline-flex; align-items: center; }
.avail-badge { min-height: 36px; }
.nav-lang a { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
.btn { min-height: 48px; }
select.form-control { min-height: 48px; }
}
.stat-counter {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
font-variant-numeric: tabular-nums;
transition: color var(--transition-base);
}
body {
animation: page-fade-in 0.4s ease both;
}
@keyframes page-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 2px;
background: var(--color-accent);
z-index: calc(var(--z-nav) + 1);
transition: width 0.1s linear;
}
.case-quote {
border-left: 2px solid var(--color-accent);
padding: var(--space-5) var(--space-6);
margin: var(--space-6) 0;
font-style: italic;
color: var(--color-muted-2);
font-size: var(--text-md);
background: var(--color-bg-2);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
line-height: var(--lh-loose);
}
.case-quote footer {
margin-block-start: var(--space-3);
font-style: normal;
font-size: var(--text-sm);
color: var(--color-muted);
}
.core-service-card {
padding: var(--space-12);
border-left: 3px solid var(--color-accent);
background: var(--color-accent-glow);
box-shadow: var(--shadow-sm);
margin-block-end: var(--space-6);
}
.era-card {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-8);
margin-block-end: var(--space-8);
}
.timeline-era-heading {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--color-accent-h);
margin-block-start: var(--space-12);
margin-block-end: var(--space-6);
padding-block-end: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.timeline-era-heading:first-child {
margin-block-start: 0;
}
.about-intro {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
align-items: start;
}
@media (min-width: 769px) {
.about-intro {
grid-template-columns: 1fr auto;
}
.about-intro img {
width: 280px;
border-radius: var(--radius-md);
}
}
.check-item {
display: flex;
gap: var(--space-3);
align-items: flex-start;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
transition: background var(--transition-base);
}
.check-item:hover {
background: var(--color-accent-glow);
}
.check-item .text-accent {
font-size: var(--text-lg);
}
.section-bg-alt {
background: var(--color-bg-3);
border-top: 1px solid var(--color-border);
}
.section-bg-2 {
background: var(--color-bg-2);
}
.section-hero-pad {
padding-block-start: calc(var(--space-16) + 60px);
}
.faq-item {
border-bottom: 1px solid var(--color-border);
padding: var(--space-5) 0;
}
.faq-summary {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
font-size: var(--text-lg);
color: var(--color-heading);
cursor: pointer;
line-height: var(--lh-snug);
}
.faq-answer {
margin-block-start: var(--space-4);
color: var(--color-muted-2);
line-height: var(--lh-loose);
max-width: 60ch;
}
.case-card {
padding: var(--space-10);
margin-block-end: var(--space-8);
transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}
.case-card:hover {
background: var(--color-card-h);
border-color: var(--color-border-2);
}
.case-heading {
font-size: var(--text-md);
color: var(--color-heading);
font-weight: 600;
margin-block-end: var(--space-3);
}
.case-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-block-end: var(--space-6);
}
.case-list-item {
display: flex;
gap: var(--space-3);
align-items: flex-start;
}
.case-check {
color: var(--color-accent-h);
font-weight: 600;
flex-shrink: 0;
}
.case-tag-row {
display: flex;
gap: var(--space-3);
margin-block-end: var(--space-4);
flex-wrap: wrap;
}
.case-stack {
display: flex;
flex-direction: column;
gap: var(--space-8);
max-width: var(--max-text);
margin-inline: auto;
}
.case-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-5);
margin-block-end: var(--space-4);
}
.case-header > picture { flex-shrink: 0; }
.case-logo {
width: 56px;
height: 56px;
border-radius: var(--radius-md);
flex-shrink: 0;
}
.case-meta-strip {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
font-size: var(--text-sm);
color: var(--color-muted-2);
margin-block-end: var(--space-2);
}
.case-meta-strip > span:not(:last-child)::after {
content: "·";
margin-inline-start: var(--space-3);
opacity: 0.5;
}
.case-tech-strip {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
font-size: var(--text-sm);
color: var(--color-heading);
font-weight: 500;
margin-block-end: var(--space-6);
padding-block-start: var(--space-3);
border-top: 1px solid var(--color-border);
}
.case-tech-strip > span:not(:last-child)::after {
content: "·";
margin-inline-start: var(--space-3);
opacity: 0.4;
font-weight: 400;
color: var(--color-muted);
}
.case-lede {
color: var(--color-heading);
font-weight: 600;
font-size: var(--text-lg);
line-height: var(--lh-snug);
max-width: 55ch;
margin-block-end: var(--space-5);
}
.case-kpi {
font-size: var(--text-base);
color: var(--color-accent-h);
font-weight: 600;
max-width: 60ch;
margin-block-end: var(--space-8);
}
.case-role {
color: var(--color-muted-2);
max-width: 65ch;
margin-block-end: var(--space-6);
}
.case-quote-footer {
margin-block-start: var(--space-3);
display: flex;
align-items: center;
gap: var(--space-3);
font-style: normal;
font-size: var(--text-sm);
color: var(--color-muted);
flex-wrap: wrap;
}
.case-quote-footer > picture {
flex-shrink: 0;
display: block;
width: 36px;
height: 36px;
}
.case-quote-avatar {
width: 36px;
height: 36px;
border-radius: var(--radius-full);
flex-shrink: 0;
object-fit: cover;
object-position: center;
}
.case-micro-blocks {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
margin-block-start: var(--space-2);
margin-block-end: var(--space-6);
}
@media (min-width: 768px) {
.case-micro-blocks {
grid-template-columns: repeat(2, 1fr);
}
}
.case-micro-block {
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-2);
}
.case-micro-block-title {
font-weight: 600;
color: var(--color-heading);
margin: 0 0 var(--space-2) 0;
font-size: var(--text-sm);
}
.case-micro-block-desc {
font-size: var(--text-sm);
color: var(--color-muted-2);
margin: 0;
line-height: var(--lh-snug);
}
.case-synthesis {
max-width: 62ch;
margin-inline: auto;
color: var(--color-muted-2);
font-size: var(--text-lg);
line-height: var(--lh-loose);
}
.case-mid-cta {
text-align: center;
padding: var(--space-8) 0;
}
.case-mid-cta p {
color: var(--color-muted-2);
margin-block-end: var(--space-5);
max-width: 52ch;
margin-inline: auto;
}
.cta-banner {
padding: var(--space-6) var(--space-10);
border-left: 3px solid var(--color-accent);
background: var(--color-accent-glow);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-8);
flex-wrap: wrap;
}
.about-bullet {
display: flex;
gap: var(--space-3);
align-items: baseline;
}
.about-bullet-icon {
color: var(--color-accent-h);
font-weight: 700;
flex-shrink: 0;
width: 0.75em;
text-align: center;
}
.value-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.value-card {
background: var(--color-bg-2);
border-radius: var(--radius-md);
padding: var(--space-8);
transition: transform var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}
.value-card:hover {
background: var(--color-card-h);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.value-card-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-accent-glow);
border-radius: var(--radius-sm);
margin-block-end: var(--space-4);
color: var(--color-accent);
}
.value-card-icon svg {
width: 22px;
height: 22px;
}
.value-card h3 {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 600;
margin-block-end: var(--space-2);
color: var(--color-heading);
}
.value-card p {
font-size: var(--text-base);
color: var(--color-text);
line-height: 1.6;
}
.thread-container {
position: relative;
padding-inline-start: var(--space-10);
}
.thread-container::before {
content: '';
position: absolute;
left: 15px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--color-accent), var(--color-accent-h));
border-radius: var(--radius-sm);
}
.thread-node {
position: relative;
}
.thread-node::before {
content: '';
position: absolute;
left: calc(-1 * var(--space-10) + 9px);
top: 8px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color-accent);
border: 3px solid var(--color-bg);
z-index: 1;
}
.page-nav {
position: sticky;
top: 72px;
z-index: var(--z-page-nav);
background: color-mix(in srgb, var(--color-bg) 85%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--color-border);
padding: var(--space-3) 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.page-nav::-webkit-scrollbar { display: none; }
.page-nav-list {
display: flex;
gap: var(--space-2);
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
min-width: max-content;
padding: 0 var(--space-4);
}
.page-nav-pill {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-muted);
text-decoration: none;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
white-space: nowrap;
transition: color 0.2s ease, background 0.2s ease;
}
.page-nav-pill:hover {
color: var(--color-heading);
background: var(--color-bg-2);
}
.page-nav-pill.is-active {
color: var(--color-accent);
background: var(--color-accent-glow);
font-weight: 600;
}
.tl-logo {
width: 56px;
height: 56px;
border-radius: var(--radius-sm);
object-fit: contain;
flex-shrink: 0;
}
.tl-company-row {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: var(--space-2);
order: 1;
margin-block-end: var(--space-2);
}
.rates-card {
padding: var(--space-10);
border-left: 3px solid var(--color-accent);
background: var(--color-accent-glow);
}
.rates-item {
display: flex;
gap: var(--space-3);
align-items: flex-start;
}
.rates-item-icon {
color: var(--color-accent-h);
font-weight: 700;
flex-shrink: 0;
font-size: var(--text-lg);
}
.mobile-cta-bar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--z-sticky);
padding: var(--space-3) var(--space-6);
background: var(--color-bg-2);
border-top: 1px solid var(--color-border);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
text-align: center;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.mobile-cta-bar.is-visible {
transform: translateY(0);
}
.mobile-cta-bar.is-hidden {
transform: translateY(100%) !important;
}
.mobile-cta-bar .btn {
width: 100%;
justify-content: center;
}
.discover-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
.hero-reassure {
position: relative;
font-size: var(--text-sm);
color: var(--color-muted);
margin-block-start: var(--space-5);
max-width: 44ch;
padding-inline-start: var(--space-5);
line-height: var(--lh-relaxed);
font-style: italic;
opacity: 0;
animation: hero-reassure-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}
.hero-reassure::before {
content: '';
position: absolute;
left: 0;
top: 0.85em;
width: 14px;
height: 1px;
background: var(--color-accent);
opacity: 0.7;
}
@keyframes hero-reassure-in {
from { opacity: 0; transform: translateX(-8px); }
to   { opacity: 1; transform: translateX(0); }
}
[data-theme='light'] .hero-reassure::before { opacity: 0.9; }
.exp-card--accent {
border-left: 2px solid var(--color-accent);
}
.discover-card {
padding: var(--space-8);
text-decoration: none;
display: flex;
flex-direction: column;
gap: var(--space-3);
border-left: 3px solid var(--color-accent);
background: var(--color-card);
border-radius: var(--radius-md);
transition: transform var(--transition-base), background var(--transition-base);
}
.discover-card:hover {
background: var(--color-card-h);
}
.featured-case {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--space-16);
align-items: start;
padding-block: var(--space-4);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.featured-case-caption {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.featured-case-caption h3 {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-heading);
margin: 0;
}
.featured-case-heading {
display: flex;
align-items: center;
gap: var(--space-3);
}
.featured-case-heading > picture {
flex-shrink: 0;
display: block;
width: 48px;
height: 48px;
}
.featured-case-logo {
width: 48px;
height: 48px;
border-radius: var(--radius-sm);
object-fit: contain;
background: var(--color-card);
padding: var(--space-1);
}
.featured-case-meta {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: var(--text-xs);
color: var(--color-muted);
letter-spacing: 0.02em;
}
.featured-case-body {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.featured-case-kpi {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
color: var(--color-heading);
line-height: 1.2;
letter-spacing: -0.02em;
margin: 0;
}
.featured-case-kpi em {
font-style: italic;
color: var(--color-accent-soft);
font-weight: 700;
}
.featured-case-ctx {
color: var(--color-text-2);
line-height: var(--lh-loose);
max-width: 60ch;
margin: 0;
}
@media (max-width: 768px) {
.featured-case {
grid-template-columns: 1fr;
gap: var(--space-6);
}
}
.contact-methods {
display: flex;
gap: var(--space-6);
flex-wrap: wrap;
margin-block-end: var(--space-6);
}
.contact-link {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--color-muted-2);
font-size: var(--text-sm);
transition: color var(--transition-base);
text-decoration: none;
}
.contact-link:hover { color: var(--color-accent-h); }
.rates-head {
margin-block-end: var(--space-10);
}
.rate-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
margin-block-end: var(--space-10);
}
.rate-card {
position: relative;
padding: var(--space-8);
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition: transform var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}
.rate-card:hover {
background: var(--color-card-h);
border-color: var(--color-border-2);
}
.rate-card--primary {
border-color: var(--color-accent);
background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 6%, var(--color-card)) 0%, var(--color-card) 60%);
}
.rate-card--primary:hover {
border-color: var(--color-accent-h);
}
.rate-card-icon {
color: var(--color-accent);
margin-block-end: var(--space-2);
}
.rate-label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-accent-soft);  
text-transform: uppercase;
letter-spacing: var(--ls-wide);
margin: 0;
}
.rate-title {
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: 700;
line-height: 1.2;
color: var(--color-text);
margin: 0;
}
.rate-desc {
font-size: var(--text-base);
color: var(--color-muted-2);
line-height: 1.6;
margin: 0;
}
@media (max-width: 768px) {
.rate-grid { grid-template-columns: 1fr; gap: var(--space-4); }
.rate-card { padding: var(--space-6); }
}
.rate-grid-3col {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) {
.rate-grid-3col { grid-template-columns: 1fr; }
}
.rate-list {
list-style: none;
padding: 0;
margin: var(--space-3) 0 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.rate-list li {
position: relative;
padding-inline-start: var(--space-5);
font-size: var(--text-sm);
color: var(--color-muted-2);
line-height: 1.5;
}
.rate-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 14px;
height: 1px;
background: var(--color-accent);
}
.rate-fit {
margin-block-start: var(--space-4);
padding-block-start: var(--space-4);
border-block-start: 1px solid var(--color-border);
font-size: var(--text-sm);
color: var(--color-muted);
line-height: 1.5;
margin-block-end: 0;
}
.rate-fit-label {
font-weight: 600;
color: var(--color-text);
margin-inline-end: var(--space-1);
}
#hero .kicker            { animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
#hero h1                 { animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
#hero > .container > .body-lg { animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
#hero > .container > .btn     { animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; }
.kicker--block { display: block; }
.check-list {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.check-icon {
color: var(--color-accent);
flex-shrink: 0;
margin-block-start: 2px;
}
.week-label {
display: block;
font-size: var(--text-xl);
margin-block-end: var(--space-4);
color: var(--color-accent);
font-weight: 600;
}
.week-title {
font-family: var(--font-display);
font-size: var(--text-xl);
margin-block-end: var(--space-4);
font-weight: 700;
}
.deliverables-callout {
padding: var(--space-8) var(--space-10);
border-radius: var(--radius-md);
background: var(--color-card);
border: 1px solid var(--color-border);
}
.contact-avail-box .contact-avail-text {
display: flex;
align-items: center;
gap: var(--space-2);
margin-block-end: var(--space-2);
}
.contact-avail-box .contact-avail-text:last-child { margin-block-end: 0; }
#contact-services .contact-intro {
max-width: 38ch;
margin-block-end: var(--space-6);
}
#rates .container { max-width: var(--max-text); margin-inline: auto; }
.page-nav.is-scrolled {
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}
.about-hero {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-10);
align-items: center;
}
@media (min-width: 768px) {
.about-hero {
grid-template-columns: 1fr 340px;
gap: var(--space-16);
}
}
.about-hero-body {
min-width: 0;
}
.about-hero-photo {
width: 100%;
max-width: 340px;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: center 15%;
border-radius: var(--radius-md);
justify-self: center;
}
.section-center {
text-align: center;
}
.era-intro {
margin-block-end: var(--space-12);
max-width: var(--max-text);
}
#rode-draad .thread-container {
max-width: var(--max-text);
margin-inline: auto;
}
.era-title {
color: var(--color-accent-h);
}
.era-body {
color: var(--color-text-2);
max-width: 62ch;
margin-block-end: var(--space-5);
}
.era-body > p {
margin-block-end: var(--space-4);
line-height: var(--lh-relaxed);
}
.era-body > p:last-child {
margin-block-end: 0;
}
.era-anchor {
margin-block-start: var(--space-6);
padding-block-start: var(--space-4);
border-top: 1px solid var(--color-border);
font-size: var(--text-sm);
color: var(--color-muted);
}
.era-anchor a {
color: var(--color-accent-h);
font-weight: 500;
text-decoration: none;
transition: color var(--transition-base);
}
.era-anchor a:hover {
color: var(--color-accent);
}
.micro-quotes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-4);
margin-block-start: var(--space-10);
max-width: 960px;
margin-inline: auto;
}
.micro-quote {
padding: var(--space-5) var(--space-6);
border-left: 2px solid var(--color-border-2);
background: var(--color-bg-2);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-size: var(--text-sm);
color: var(--color-muted-2);
font-style: italic;
line-height: var(--lh-relaxed);
margin: 0;
}
.micro-quote p {
margin: 0;
}
.micro-quote-footer {
margin-block-start: var(--space-3);
font-style: normal;
color: var(--color-muted);
font-size: var(--text-xs);
}
.observation-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
max-width: var(--max-text);
margin-inline: auto;
}
@media (min-width: 768px) {
.observation-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.observation-card {
padding: var(--space-6);
border-top: 2px solid var(--color-border-2);
background: var(--color-bg-2);
transition: border-color var(--transition-base), background var(--transition-base);
}
.observation-card:hover {
border-top-color: var(--color-accent);
background: var(--color-card-h);
}
.observation-card-title {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 600;
color: var(--color-heading);
margin: 0 0 var(--space-2) 0;
line-height: var(--lh-snug);
}
.observation-card-body {
font-size: var(--text-base);
color: var(--color-muted-2);
line-height: var(--lh-relaxed);
margin: 0;
}
.erkenning-section {
margin-block-end: var(--space-12);
}
.erkenning-section:last-child {
margin-block-end: 0;
}
.erkenning-section-title {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--color-muted);
margin-block-end: var(--space-5);
padding-block-end: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.tl-item--highlight {
border-left: 2px solid var(--color-accent);
padding-inline-start: var(--space-6);
}
.tl-role-note {
color: var(--color-accent-h);
font-weight: 400;
font-style: italic;
font-size: 0.9em;
margin-inline-start: var(--space-1);
}
.footer-link-primary {
color: var(--color-heading);
font-weight: 500;
}
.motor-intro {
max-width: 56ch;
margin-block-end: var(--space-12);
}
.motor-blocks {
max-width: 62ch;
display: grid;
gap: var(--space-10);
}
.motor-block {
padding-inline-start: var(--space-6);
border-left: 2px solid var(--color-accent);
}
.motor-lede {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: 700;
color: var(--color-heading);
line-height: var(--lh-snug);
margin: 0 0 var(--space-3) 0;
}
.motor-body {
color: var(--color-muted-2);
line-height: var(--lh-relaxed);
margin: 0;
}
@media (max-width: 768px) {
.motor-block { padding-inline-start: var(--space-5); }
.motor-lede { font-size: var(--text-lg); }
}
.clients-footer {
text-align: center;
margin-block-start: var(--space-10);
padding-block-start: var(--space-8);
border-top: 1px solid var(--color-border);
}
.contact-intro {
max-width: 40ch;
}
.discover-card .kicker  { margin-block-end: 0; }
.discover-card h3       { margin: 0; }
.discover-card .btn-text,
.discover-card .link-cta { margin-block-start: auto; }
.link-cta,
.btn-text,
.home-era-cta,
.story-cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-accent-h);
text-decoration: none;
border-bottom: 1px solid var(--color-accent-glow);
padding-block-end: 2px;
transition: color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.link-cta:hover,
.link-cta:focus-visible,
.btn-text:hover,
.btn-text:focus-visible,
.home-era-cta:hover,
.home-era-cta:focus-visible,
.story-cta:hover,
.story-cta:focus-visible {
color: var(--color-accent);
border-bottom-color: var(--color-accent);
transform: translateY(-2px);
}
.link-cta .icon,
.btn-text .icon,
.home-era-cta .icon,
.story-cta .icon {
transition: transform var(--transition-base);
}
.link-cta:hover .icon,
.link-cta:focus-visible .icon,
.btn-text:hover .icon,
.btn-text:focus-visible .icon,
.home-era-cta:hover .icon,
.home-era-cta:focus-visible .icon,
.story-cta:hover .icon,
.story-cta:focus-visible .icon {
transform: translateX(3px);
}
.link-bridge,
.proof-case-link,
.featured-quote-caselink {
display: inline-block;
margin-block-start: var(--space-4);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-muted-2);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--transition-base), border-color var(--transition-base);
}
.link-bridge:hover,
.link-bridge:focus-visible,
.proof-case-link:hover,
.proof-case-link:focus-visible,
.featured-quote-caselink:hover,
.featured-quote-caselink:focus-visible {
color: var(--color-accent-h);
border-bottom-color: var(--color-accent);
}
.featured-quote-caselink { margin-block-start: 0; }
.proof-quote:has(+ .proof-translation) { margin-block-end: var(--space-2); }
.proof-translation {
margin: 0 0 var(--space-4);
font-size: var(--text-xs);
color: var(--color-muted-2);
font-style: italic;
opacity: 0.8;
}
.cta-banner p     { margin: 0; }
.cta-banner .btn  { flex-shrink: 0; }
.form-note { margin-block-start: var(--space-3); }
.svg-sprite-hidden {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.proof-grid-primary { margin-block-start: var(--space-8); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .proof-grid-primary { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .proof-grid-primary { grid-template-columns: 1fr; } }
.featured-quote {
margin: var(--space-10) auto var(--space-12);
max-width: 720px;
padding: var(--space-8) var(--space-4);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-6);
text-align: center;
}
.featured-quote-text {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-style: italic;
font-weight: 600;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.35;
color: var(--color-heading);
letter-spacing: -0.015em;
max-width: 42ch;
margin: 0 auto;
position: relative;
padding-block-start: var(--space-10);
}
.featured-quote-text::before {
content: '\201C\201C';
position: absolute;
top: calc(-1 * var(--space-3));
left: 50%;
transform: translateX(-50%);
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 4rem;
line-height: 1;
color: var(--color-accent);
opacity: 0.3;
font-style: normal;
}
.featured-quote-footer {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.featured-quote-attribution {
text-align: left;
}
.featured-quote-footer > picture {
flex-shrink: 0;
display: block;
width: 48px;
height: 48px;
}
.featured-quote-avatar {
width: 48px;
height: 48px;
border-radius: var(--radius-full);
flex-shrink: 0;
object-fit: cover;
object-position: center;
}
.featured-quote-attribution {
display: flex;
flex-direction: column;
}
.featured-quote-name {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
color: var(--color-heading);
margin: 0;
}
.featured-quote-role {
font-size: var(--text-sm);
color: var(--color-muted-2);
margin: 0;
}
.story-band {
padding: var(--space-20) var(--space-6);
text-align: center;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.story-band-inner {
max-width: 620px;
margin-inline: auto;
}
.story-title {
font-family: var(--font-heading);
font-size: var(--text-3xl);
font-weight: 600;
line-height: var(--lh-snug);
letter-spacing: var(--ls-tight);
color: var(--color-heading);
margin: 0 0 var(--space-5);
}
.story-text {
font-size: var(--text-lg);
line-height: var(--lh-relaxed);
color: var(--color-text);
margin: 0 0 var(--space-6);
}
.story-text em {
font-style: normal;
color: var(--color-accent-soft);
font-weight: 500;
}
@media (max-width: 640px) {
.story-band { padding: var(--space-16) var(--space-5); }
.story-title { font-size: var(--text-2xl); }
.story-text { font-size: var(--text-md); }
}
.home-era-band {
padding-block: var(--space-16);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.home-era-head {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-block-end: var(--space-10);
max-width: 52ch;
}
.home-era-kicker { margin-block-end: 0; }
.home-era-title {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
font-size: clamp(28px, 3vw, 42px);
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--color-heading);
margin: 0;
}
.home-era-title em {
color: var(--color-accent-soft);
font-style: italic;
}
.home-era-lede {
color: var(--color-text-2);
font-size: var(--text-md);
line-height: var(--lh-loose);
margin: 0;
}
.home-era-timeline {
position: relative;
height: 36px;
margin: 0 var(--space-4) var(--space-6);
}
.home-era-spine {
position: absolute;
left: 0; right: 0; top: 50%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--color-border-2) 10%, var(--color-border-2) 90%, transparent 100%);
}
.home-era-marker {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 14px; height: 14px;
border-radius: 50%;
background: var(--color-accent);
border: 3px solid var(--color-bg);
z-index: 1;
}
.home-era-marker.m1 { left: 16.67%; }
.home-era-marker.m2 { left: 50%; }
.home-era-marker.m3 { left: 83.33%; }
.home-era-marker.active {
box-shadow: 0 0 0 4px var(--color-accent-glow);
}
.home-era-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--color-border);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
margin-block-end: var(--space-6);
}
.home-era-col {
position: relative;
padding: var(--space-6) var(--space-5) var(--space-5);
background: var(--color-card);
}
.home-era-col.active {
background: linear-gradient(180deg, var(--color-accent-glow), var(--color-card) 70%);
}
.home-era-nu {
position: absolute;
top: var(--space-3);
right: var(--space-3);
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-accent-soft);
font-weight: 700;
padding: 3px 8px;
border: 1px solid var(--color-accent);
border-radius: var(--radius-sm);
background: var(--color-accent-glow);
}
.home-era-years {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
color: var(--color-accent-soft);
letter-spacing: 0.04em;
margin-block-end: var(--space-2);
}
.home-era-role {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
font-size: var(--text-lg);
color: var(--color-heading);
letter-spacing: -0.01em;
margin: 0 0 var(--space-2);
}
.home-era-desc {
font-size: var(--text-sm);
color: var(--color-text-2);
line-height: var(--lh-relaxed);
margin: 0 0 var(--space-3);
}
.home-era-chips {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
.home-era-footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
}
.home-era-counter {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: var(--text-sm);
color: var(--color-muted);
letter-spacing: 0.02em;
}
@media (max-width: 1024px) {
.home-era-timeline { display: none; }
.home-era-grid { grid-template-columns: 1fr; }
}
.article-body {
font-size: 1.125rem;
line-height: var(--lh-relaxed);
max-inline-size: 68ch;
}
.article-body p + p {
margin-block-start: var(--space-5);
}
.btn-primary:active,
.form-submit:active {
transform: scale(0.98);
}
.fw-bold { font-weight: 700; }
.not-found {
max-inline-size: 60ch;
margin-inline: auto;
text-align: left;
padding-block: var(--space-8);
}
.not-found-links {
list-style: none;
padding: 0;
margin-block: var(--space-8) var(--space-10);
display: flex;
flex-direction: column;
gap: var(--space-4);
align-items: flex-start;
}
.not-found-links li { margin: 0; }
.not-found-footer { margin-block-start: var(--space-8); }
.service-legal {
font-size: var(--text-sm);
color: var(--color-muted);
line-height: var(--lh-relaxed);
max-inline-size: 62ch;
margin-block-start: var(--space-4);
padding-block-start: var(--space-4);
border-block-start: 1px solid var(--color-border);
}
.cred-note {
font-size: var(--text-sm);
color: var(--color-muted);
line-height: var(--lh-relaxed);
margin-block: var(--space-3) var(--space-6);
max-inline-size: 68ch;
}
.story-footer-link {
margin-block: var(--space-8) 0;
font-size: var(--text-base);
color: var(--color-muted-2);
line-height: var(--lh-relaxed);
max-inline-size: 68ch;
}
.story-footer-link a {
color: var(--color-accent-soft);
text-decoration: none;
border-bottom: 1px solid var(--color-border-2);
padding-block-end: 2px;
transition: color var(--transition-base), border-color var(--transition-base);
}
.story-footer-link a:hover {
color: var(--color-accent-h);
border-bottom-color: var(--color-accent);
}
.hero-stat-num {
font-size: var(--text-5xl);
letter-spacing: -0.02em;
}
@keyframes avail-dot-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}
.avail-dot-green {
display: inline-block;
animation: avail-dot-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.avail-dot-green { animation: none; }
}
.marquee-track { animation-delay: 1s; }
#pain_points .exp-card.js-reveal {
transition-delay: var(--stagger-delay, 0ms);
}
.pain-contact-prompt {
margin-block-start: var(--space-8);
text-align: center;
}
.faq-intro-bridge {
font-size: var(--text-sm);
color: var(--color-muted);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
margin-block-end: var(--space-3);
}
.faq-top-chip {
display: inline-block;
margin-inline-start: var(--space-2);
padding: 2px var(--space-2);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-heading);
border: 1px solid rgba(198, 90, 46, 0.45);
background: rgba(198, 90, 46, 0.24);
border-radius: var(--radius-sm);
vertical-align: middle;
white-space: nowrap;
}
.faq-hint {
display: none;
font-size: var(--text-xs);
color: var(--color-muted);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
margin-block-end: var(--space-2);
}
.client-grid-logos { scroll-behavior: smooth; }
.page-nav {
position: sticky; 
position: -webkit-sticky;
}
.page-nav::before,
.page-nav::after {
content: '';
display: none;
position: absolute;
top: 0;
bottom: 0;
width: 32px;
pointer-events: none;
z-index: 2;
}
.page-nav::before { left: 0; }
.page-nav::after { right: 0; }
#sectors .exp-card { position: relative; }
.sector-recent-badge {
position: absolute;
top: var(--space-4);
right: var(--space-4);
padding: var(--space-1) var(--space-2);
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-accent-soft);
background: var(--color-accent-glow);
border: 1px solid rgba(198, 90, 46, 0.35);
border-radius: var(--radius-sm);
line-height: 1.2;
z-index: 1;
pointer-events: none;
}
#expertise .exp-icon svg { width: 36px; height: 36px; }
.kicker { color: var(--color-muted-2); }
.kicker::before { background: var(--color-muted-2); }
.hero-ghost { color: var(--color-border); }
.hero-name em,
.hero-subtitle,
.approach-body > p em,
.display-xl em,
.display-lg em,
.display-md em,
.display-sm em,
.discover-card em,
.cta-banner em,
h1 em, h2 em, h3 em, .faq-summary em,
.story-text em {
color: var(--color-heading);
font-style: italic;
}
.hero-subtitle {
color: var(--color-text-2);
font-weight: 700;
}
.hero-stat-num,
.hero-stat-num sup {
color: var(--color-heading);
}
.marquee-band {
background: var(--color-bg-2);
}
.nav-list a[aria-current="page"]::after {
transform: scaleX(1);
}
.nav-list a[aria-current="page"] {
font-weight: 700;
}
.btn-outline:focus-visible {
outline: none;
border-color: var(--color-accent);
color: var(--color-accent-h);
box-shadow: 0 0 0 3px var(--color-accent-glow);
}
.btn-primary:hover {
box-shadow: 0 8px 24px var(--color-accent-glow);
}
.btn-primary:focus-visible,
.nav-avail-btn:focus-visible,
.form-submit:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
box-shadow: 0 0 0 3px var(--color-accent-glow);
}
#clients-heading em {
color: var(--color-accent-soft);
font-style: italic;
}
[data-theme="light"] #clients-heading em {
color: var(--color-accent);
}
.about-hero h1 em {
color: var(--color-heading);
font-style: italic;
}
.story-title-accent {
color: var(--color-accent-soft);
font-style: italic;
}
[data-theme="light"] .story-title-accent {
color: var(--color-accent);
}
.timeline-era-heading {
color: var(--color-muted-2);
}
[data-theme="light"] .timeline-era-heading {
color: var(--color-muted);
}
.era-title {
color: var(--color-heading);
}
.case-kpi {
color: var(--color-heading);
font-size: var(--text-md);
font-weight: 700;
line-height: var(--lh-snug);
max-width: 52ch;
padding: var(--space-2) 0 var(--space-2) var(--space-4);
border-left: 2px solid var(--color-border-2);
margin-top: var(--space-6);
margin-bottom: var(--space-7);
}
[data-theme="light"] .case-kpi {
border-left-color: var(--color-border);
}
.rate-label {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: var(--ls-widest);
color: var(--color-text-3);
margin-bottom: var(--space-2);
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.rate-label::before {
content: '';
width: 16px;
height: 1px;
background: currentColor;
flex-shrink: 0;
opacity: 0.6;
}
.rate-card--primary .rate-card-icon {
color: var(--color-accent);
}
.rate-card:not(.rate-card--primary) .rate-card-icon {
color: var(--color-text-2);
}
.exp-icon {
opacity: 0.85;
}
.proof-quote::before {
opacity: 0.55;
}
.nav-avail-btn {
border-color: rgba(198, 90, 46, 0.32);
color: var(--color-text-3);
font-weight: 500;
}
.nav-avail-btn:hover,
.nav-avail-btn:focus-visible {
border-color: rgba(198, 90, 46, 0.85);
color: var(--color-accent-h);
font-weight: 600;
background: var(--color-accent-glow);
}
.nav-lang a[aria-current="page"] {
color: var(--color-accent-h);
border-color: rgba(198, 90, 46, 0.55);
}
.nav-lang a:hover {
color: var(--color-accent-h);
border-color: var(--color-accent);
}
.form-submit {
background: var(--color-accent-deep);
color: var(--color-accent-text);
}
.form-submit:hover {
background: var(--color-accent-h);
color: var(--color-accent-text);
box-shadow: 0 8px 24px var(--color-accent-glow);
}
.form-submit:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
box-shadow: 0 0 0 3px var(--color-accent-glow);
}
.form-control:focus,
.form-control:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-color: var(--color-accent);
box-shadow: 0 0 0 2px var(--color-accent-glow);
}
@media (forced-colors: active) {
.btn-primary:focus-visible,
.nav-avail-btn:focus-visible,
.form-submit:focus-visible,
.form-control:focus,
.form-control:focus-visible {
outline: 2px solid CanvasText;
outline-offset: 2px;
}
}
.exp-card--accent {
border-left-width: 3px;
}
.footer-links a {
color: var(--color-muted-2);
}
.footer-links a:hover {
color: var(--color-heading);
}
.nav-list a::after {
height: 2px;
}
::selection {
background: var(--color-accent-glow);
color: var(--color-heading);
}
::-moz-selection {
background: var(--color-accent-glow);
color: var(--color-heading);
}
.back-to-top {
background: var(--color-accent-deep);
color: var(--color-accent-text);
}
.back-to-top:hover {
background: var(--color-accent-h);
color: var(--color-accent-text);
}
.btn-primary .btn-arrow {
display: inline-block;
margin-left: var(--space-2);
transition: transform var(--transition-base);
}
.btn-primary:hover .btn-arrow,
.btn-primary:focus-visible .btn-arrow {
transform: translateX(3px);
}
.link-bridge,
.proof-case-link,
.featured-quote-caselink {
position: relative;
text-decoration: none;
padding-bottom: 2px;
border-bottom: 0;
}
.link-bridge::after,
.proof-case-link::after,
.featured-quote-caselink::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--color-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-base);
}
.link-bridge:hover::after,
.link-bridge:focus-visible::after,
.proof-case-link:hover::after,
.proof-case-link:focus-visible::after,
.featured-quote-caselink:hover::after,
.featured-quote-caselink:focus-visible::after {
transform: scaleX(1);
}
.mobile-cta-bar .btn-primary {
background: var(--color-accent-deep);
color: var(--color-accent-text);
}
[data-theme="light"] .btn-outline {
color: var(--color-text-2);
border-color: var(--color-border-2);
}
[data-theme="light"] .btn-outline:hover {
color: var(--color-accent-h);
border-color: var(--color-accent);
}
[data-theme="light"] ::selection {
background: rgba(198, 90, 46, 0.22);
color: var(--color-heading);
}
[data-theme="light"] ::-moz-selection {
background: rgba(198, 90, 46, 0.22);
color: var(--color-heading);
}
[data-theme="light"] .exp-card,
[data-theme="light"] .proof-card,
[data-theme="light"] .discover-card {
background: #fbf9f6;
border-color: rgba(31, 43, 61, 0.14);
}
[data-theme="light"] .hero-ghost {
color: rgba(31, 43, 61, 0.11);
}
[data-theme="light"] .hero-cta-trust,
[data-theme="light"] .hero-avail-ribbon {
color: var(--color-muted);
}
[data-theme="light"] .hero-name em {
text-decoration: underline;
text-decoration-color: var(--color-accent-glow);
text-decoration-thickness: 0.08em;
text-underline-offset: 0.15em;
}
[data-theme="light"] .hero-photo {
filter: saturate(1.06) contrast(1.02);
box-shadow: 0 0 0 1px rgba(31, 43, 61, 0.08);
}
.hero-cta-trust {
margin-top: var(--space-3);
margin-bottom: 0;
font-size: var(--text-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-muted-2);
font-family: var(--font-display);
font-weight: 500;
}
.hero-avail-ribbon {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-3);
margin-bottom: 0;
font-size: var(--text-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-muted-2);
font-family: var(--font-display);
font-weight: 500;
}
.hero-avail-ribbon::before {
content: '';
width: 6px;
height: 6px;
border-radius: var(--radius-full);
background: var(--color-success);
flex-shrink: 0;
animation: pulse-dot 2s ease infinite;
}
.hero-avail-ribbon strong {
color: var(--color-text-2);
font-weight: 700;
}
.client-cell {
flex-direction: column;
gap: var(--space-3);
}
.client-name {
font-family: var(--font-display);
font-size: var(--text-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
font-weight: 500;
color: var(--color-muted-2);
text-align: center;
line-height: var(--lh-tight);
}
.client-cell:hover .client-name {
color: var(--color-text-2);
}
.egg-toast {
position: fixed;
right: var(--space-6);
bottom: var(--space-6);
z-index: var(--z-modal);
display: flex;
align-items: flex-start;
gap: var(--space-4);
max-width: 420px;
padding: var(--space-4) var(--space-5);
background: linear-gradient(180deg,
color-mix(in srgb, var(--color-bg-2) 96%, var(--color-accent) 4%),
var(--color-bg-2)
);
border: 1px solid var(--color-accent);
border-radius: var(--radius-lg);
box-shadow:
var(--shadow-lg),
0 0 32px rgba(198, 90, 46, 0.15);
font-family: 'JetBrains Mono', monospace;
font-size: var(--text-sm);
line-height: var(--lh-snug);
color: var(--color-text);
opacity: 0;
transform: translateY(20px) scale(.96);
pointer-events: none;
transition: opacity .35s ease, transform .4s cubic-bezier(.22,1,.36,1);
overflow: hidden;
}
.egg-toast.is-on {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.egg-toast__icon {
flex: 0 0 auto;
font-size: var(--text-xl);
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.egg-toast__icon img.egg-toast-logo {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
display: block;
border: 1px solid rgba(198, 90, 46, 0.35);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.egg-toast__text {
flex: 1 1 auto;
color: var(--color-text);
padding-top: 2px;
}
.egg-toast__text strong {
color: var(--color-accent-soft);
font-weight: 700;
letter-spacing: 0.01em;
}
.egg-toast__close {
flex: 0 0 auto;
background: transparent;
border: 0;
color: var(--color-muted);
cursor: pointer;
font-size: var(--text-xl);
line-height: 1;
padding: 0;
margin: -2px -4px 0 0;
transition: color .15s;
}
.egg-toast__close:hover { color: var(--color-accent); }
.egg-toast__progress {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: rgba(198, 90, 46, 0.12);
overflow: hidden;
display: none;
}
.egg-toast.has-progress .egg-toast__progress { display: block; }
.egg-toast__progress-bar {
height: 100%;
width: 100%;
background: linear-gradient(90deg,
var(--color-accent-soft),
var(--color-accent),
var(--color-accent-soft)
);
background-size: 200% 100%;
transform-origin: left;
animation: egg-toast-progress-shimmer 1.5s linear infinite;
}
@keyframes egg-toast-progress-shimmer {
from { background-position: 0% 50%; }
to   { background-position: 200% 50%; }
}
@media (max-width: 640px) {
.egg-toast {
right: var(--space-3);
bottom: var(--space-3);
left: var(--space-3);
max-width: none;
}
}
.egg-overlay {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity .5s ease;
cursor: pointer;
}
.egg-overlay.is-on {
opacity: 1;
pointer-events: auto;
}
.egg-overlay__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 8, 14, 0.85);
}
.egg-overlay__inner {
position: relative;
z-index: 1;
text-align: center;
padding: var(--space-8);
max-width: min(90vw, 720px);
}
.egg-overlay--konami .egg-overlay__backdrop {
background:
repeating-linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0) 3px,
rgba(0, 0, 0, 0.18) 3px,
rgba(0, 0, 0, 0.18) 4px
),
radial-gradient(ellipse 80% 60% at center, rgba(198, 90, 46, 0.12), transparent 70%),
linear-gradient(180deg, #0a0f18 0%, #0f1724 100%);
}
.egg-konami-grid {
position: absolute;
left: -10%;
right: -10%;
bottom: 0;
height: 55%;
background-image:
linear-gradient(to right, rgba(198, 90, 46, 0.22) 1px, transparent 1px),
linear-gradient(to bottom, rgba(198, 90, 46, 0.22) 1px, transparent 1px);
background-size: 60px 60px;
background-position: 0 0;
transform: perspective(600px) rotateX(60deg);
transform-origin: bottom center;
pointer-events: none;
z-index: 1;
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
animation: egg-konami-grid-flow 3.2s linear infinite;
}
@keyframes egg-konami-grid-flow {
0%   { background-position: 0 0; }
100% { background-position: 0 60px; }
}
.egg-konami-horizon {
position: absolute;
left: 0;
right: 0;
bottom: 55%;
height: 1px;
background: rgba(198, 90, 46, 0.5);
box-shadow:
0 0 12px 2px rgba(198, 90, 46, 0.55),
0 0 32px 6px rgba(198, 90, 46, 0.25);
pointer-events: none;
z-index: 1;
}
.egg-overlay--konami .egg-overlay__inner {
z-index: 2;
}
.egg-overlay--konami .egg-konami-logo {
width: 160px;
height: 160px;
color: var(--color-heading);
filter: drop-shadow(0 0 32px rgba(198, 90, 46, 0.7));
animation: egg-konami-pulse 1.6s ease-in-out infinite;
}
@keyframes egg-konami-pulse {
0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 28px rgba(198, 90, 46, 0.65)); }
50%      { transform: scale(1.06); filter: drop-shadow(0 0 44px rgba(198, 90, 46, 0.95)); }
}
.egg-konami-arrows {
display: inline-flex;
gap: 14px;
margin-top: 32px;
padding: 12px 20px;
font-family: 'JetBrains Mono', monospace;
font-size: clamp(1.5rem, 2.6vw, 2rem);
font-weight: 700;
border: 1px solid rgba(198, 90, 46, 0.35);
background: rgba(10, 15, 24, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.egg-konami-arrow {
display: inline-block;
color: rgba(244, 237, 225, 0.25);
text-shadow: 0 0 0 transparent;
transform: scale(1);
animation: egg-konami-arrow-light 2.6s ease-out forwards;
}
.egg-konami-arrow:nth-child(1) { animation-delay: 0.30s; }
.egg-konami-arrow:nth-child(2) { animation-delay: 0.45s; }
.egg-konami-arrow:nth-child(3) { animation-delay: 0.60s; }
.egg-konami-arrow:nth-child(4) { animation-delay: 0.75s; }
.egg-konami-arrow:nth-child(5) { animation-delay: 0.90s; }
.egg-konami-arrow:nth-child(6) { animation-delay: 1.05s; }
.egg-konami-arrow:nth-child(7) { animation-delay: 1.20s; }
.egg-konami-arrow:nth-child(8) { animation-delay: 1.35s; }
@keyframes egg-konami-arrow-light {
0%   { color: rgba(244, 237, 225, 0.25); text-shadow: 0 0 0 transparent; transform: scale(1); }
18%  { color: #ffffff;                   text-shadow: 0 0 18px rgba(198, 90, 46, 0.95), 0 0 36px rgba(198, 90, 46, 0.55); transform: scale(1.25); }
100% { color: var(--color-accent-soft);  text-shadow: 0 0 10px rgba(198, 90, 46, 0.6); transform: scale(1); }
}
.egg-overlay--konami .egg-konami-line {
margin-top: var(--space-6);
font-family: 'JetBrains Mono', monospace;
font-size: clamp(1.5rem, 3.5vw, 2.25rem);
font-weight: 700;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: #f4ede1;
text-shadow:
-1px 0 rgba(255, 80, 80, 0.65),
1px 0 rgba(80, 200, 255, 0.65),
0 0 20px rgba(244, 237, 225, 0.25);
animation: egg-konami-glitch 3s steps(8) infinite 1.6s;
}
@keyframes egg-konami-glitch {
0%, 8%, 100% { text-shadow: -1px 0 rgba(255, 80, 80, 0.65),  1px 0 rgba(80, 200, 255, 0.65), 0 0 20px rgba(244, 237, 225, 0.25); transform: translateX(0); }
9%           { text-shadow: -3px 0 rgba(255, 80, 80, 0.85),  3px 0 rgba(80, 200, 255, 0.85), 0 0 20px rgba(244, 237, 225, 0.4);  transform: translateX(-1px); }
10%          { text-shadow:  2px 0 rgba(255, 80, 80, 0.85), -2px 0 rgba(80, 200, 255, 0.85), 0 0 20px rgba(244, 237, 225, 0.4);  transform: translateX(1px); }
11%, 50%     { text-shadow: -1px 0 rgba(255, 80, 80, 0.65),  1px 0 rgba(80, 200, 255, 0.65), 0 0 20px rgba(244, 237, 225, 0.25); transform: translateX(0); }
51%          { text-shadow: -3px 0 rgba(255, 80, 80, 0.95),  3px 0 rgba(80, 200, 255, 0.95), 0 0 20px rgba(244, 237, 225, 0.5);  transform: translateX(2px); }
52%          { text-shadow:  3px 0 rgba(255, 80, 80, 0.95), -3px 0 rgba(80, 200, 255, 0.95), 0 0 20px rgba(244, 237, 225, 0.5);  transform: translateX(-2px); }
53%, 99%     { text-shadow: -1px 0 rgba(255, 80, 80, 0.65),  1px 0 rgba(80, 200, 255, 0.65), 0 0 20px rgba(244, 237, 225, 0.25); transform: translateX(0); }
}
.egg-konami-stats {
display: inline-flex;
gap: 12px;
margin-top: var(--space-6);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-accent-soft);
}
.egg-konami-stats span {
padding: 5px 12px;
border: 1px solid rgba(198, 90, 46, 0.4);
background: rgba(198, 90, 46, 0.08);
}
.egg-overlay--konami .egg-konami-foot {
margin-top: var(--space-6);
font-family: 'JetBrains Mono', monospace;
font-size: var(--text-sm);
color: rgba(244, 237, 225, 0.75);
}
.egg-overlay--cine {
background: #050810;
}
.egg-overlay--cine .egg-overlay__backdrop {
background: #050810;
z-index: 1;
}
.egg-cine-frame {
position: absolute;
inset: -8px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
animation: egg-cine-camera 4.6s steps(22) infinite;
}
@keyframes egg-cine-camera {
0%, 100% { transform: translate(0, 0) rotate(0); }
4%   { transform: translate(0.6px, -0.5px) rotate(0.03deg); }
9%   { transform: translate(-0.7px, 0.4px) rotate(-0.04deg); }
14%  { transform: translate(0.5px, 0.7px) rotate(0.02deg); }
18%  { transform: translate(-0.4px, -0.6px) rotate(-0.03deg); }
23%  { transform: translate(0.8px, 0.3px) rotate(0.05deg); }
27%  { transform: translate(-0.6px, -0.5px) rotate(-0.02deg); }
32%  { transform: translate(0.4px, 0.8px) rotate(0.04deg); }
36%  { transform: translate(-0.7px, -0.3px) rotate(-0.05deg); }
41%  { transform: translate(0.5px, 0.6px) rotate(0.03deg); }
45%  { transform: translate(-0.3px, -0.7px) rotate(-0.02deg); }
50%  { transform: translate(0.7px, 0.4px) rotate(0.04deg); }
55%  { transform: translate(-0.6px, 0.5px) rotate(-0.03deg); }
59%  { transform: translate(0.4px, -0.4px) rotate(0.02deg); }
64%  { transform: translate(-0.5px, 0.6px) rotate(-0.04deg); }
68%  { transform: translate(0.6px, -0.5px) rotate(0.03deg); }
73%  { transform: translate(-0.4px, 0.4px) rotate(-0.02deg); }
77%  { transform: translate(0.5px, 0.5px) rotate(0.04deg); }
82%  { transform: translate(-0.6px, -0.4px) rotate(-0.03deg); }
86%  { transform: translate(0.3px, 0.7px) rotate(0.02deg); }
91%  { transform: translate(-0.5px, -0.5px) rotate(-0.03deg); }
95%  { transform: translate(0.4px, 0.4px) rotate(0.02deg); }
}
.egg-cine-noise {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.94  0 0 0 0 0.78  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
background-size: 240px 240px;
background-repeat: repeat;
mix-blend-mode: overlay;
opacity: 0.55;
animation: egg-cine-grain .25s steps(5) infinite;
}
@keyframes egg-cine-grain {
0%   { background-position: 0 0; }
20%  { background-position: -73px 41px; }
40%  { background-position: 28px -67px; }
60%  { background-position: -41px 19px; }
80%  { background-position: 53px -23px; }
100% { background-position: 0 0; }
}
.egg-cine-vignet {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 4;
background:
radial-gradient(ellipse 95% 75% at center,
transparent 35%,
rgba(0, 0, 0, 0.40) 75%,
rgba(0, 0, 0, 0.85) 100%
);
}
.egg-cine-scratch {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(to bottom,
transparent 0%,
rgba(255, 250, 240, 0.15) 8%,
rgba(255, 250, 240, 0.55) 30%,
rgba(255, 250, 240, 0.35) 60%,
rgba(255, 250, 240, 0.55) 80%,
transparent 100%);
z-index: 5;
pointer-events: none;
opacity: 0;
animation: egg-cine-scratch 7s steps(1) infinite 1.8s;
}
@keyframes egg-cine-scratch {
0%, 92%, 100% { opacity: 0; left: 23%; }
3%, 4%        { opacity: 0.7; left: 23%; }
35%, 36%      { opacity: 0.5; left: 67%; }
62%, 63%      { opacity: 0.6; left: 41%; }
83%, 84%      { opacity: 0.45; left: 88%; }
}
.egg-cine-bar {
position: absolute;
left: 0;
right: 0;
height: 13vh;
background: #000;
z-index: 6;
transform: scaleY(0);
animation: egg-cine-bar-grow .8s cubic-bezier(.22, 1, .36, 1) forwards;
}
.egg-cine-bar--top    { top: 0;    transform-origin: top; }
.egg-cine-bar--bottom { bottom: 0; transform-origin: bottom; }
@keyframes egg-cine-bar-grow {
to { transform: scaleY(1); }
}
.egg-overlay--cine .egg-overlay__inner {
z-index: 7;
position: relative;
color: #f4ede1;
filter: sepia(0.18) contrast(1.08) brightness(0.96);
animation: egg-cine-flicker 5.5s steps(2) infinite 1.4s;
}
@keyframes egg-cine-flicker {
0%, 100% { filter: sepia(0.18) contrast(1.08) brightness(0.96); }
12%      { filter: sepia(0.22) contrast(1.12) brightness(1.02); }
13%      { filter: sepia(0.18) contrast(1.08) brightness(0.85); }
47%      { filter: sepia(0.18) contrast(1.08) brightness(0.96); }
48%      { filter: sepia(0.16) contrast(1.04) brightness(0.82); }
49%      { filter: sepia(0.20) contrast(1.10) brightness(1.00); }
}
.egg-cine-visuals {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-8);
margin-bottom: var(--space-8);
flex-wrap: wrap;
opacity: 0;
animation: egg-cine-element 1.4s ease 0.7s forwards;
}
.egg-cine-stamp {
width: 150px;
height: 150px;
border-radius: 50%;
filter: sepia(0.35) saturate(1.15) contrast(1.05) drop-shadow(0 12px 32px rgba(0,0,0,.7));
}
.egg-cine-cup {
width: 88px;
height: 96px;
filter: drop-shadow(0 8px 20px rgba(0,0,0,.5));
}
.egg-cine-cup-svg {
width: 100%;
height: 100%;
overflow: visible;
}
.egg-cine-steam {
fill: none;
stroke: rgba(244, 237, 225, 0.55);
stroke-width: 2;
stroke-linecap: round;
opacity: 0;
transform-origin: bottom center;
animation: egg-cine-steam 2.4s ease-in-out infinite;
}
.egg-cine-steam.s2 { animation-delay: .4s; }
.egg-cine-steam.s3 { animation-delay: .8s; }
@keyframes egg-cine-steam {
0%   { opacity: 0; transform: translateY(0) scaleX(1); }
30%  { opacity: .7; }
100% { opacity: 0; transform: translateY(-22px) scaleX(0.6); }
}
.egg-cine-quote {
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: clamp(1.35rem, 3.6vw, 2.15rem);
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.005em;
color: #f4ede1;
margin: 0 auto;
max-width: 22ch;
text-shadow:
0 2px 16px rgba(0, 0, 0, 0.7),
0 0 32px rgba(198, 90, 46, 0.18);
opacity: 0;
animation: egg-cine-element 1.4s ease 1.4s forwards;
}
.egg-cine-attr {
margin-top: var(--space-6);
font-family: 'JetBrains Mono', monospace;
font-size: var(--text-xs);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: rgba(244, 237, 225, 0.55);
opacity: 0;
animation: egg-cine-element 1.2s ease 2.0s forwards;
}
.egg-cine-foot {
margin-top: var(--space-4);
font-family: 'JetBrains Mono', monospace;
font-size: var(--text-sm);
color: var(--color-accent-soft);
opacity: 0;
animation: egg-cine-element 1.2s ease 2.6s forwards;
}
@keyframes egg-cine-element {
from { opacity: 0; transform: translateY(10px); }
to   { opacity: 1; transform: translateY(0); }
}
.egg-bubble {
position: fixed;
z-index: var(--z-modal);
max-width: 360px;
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
background:
radial-gradient(circle at 18% 20%, rgba(198, 90, 46, 0.12), transparent 50%),
radial-gradient(circle at 82% 80%, rgba(198, 90, 46, 0.08), transparent 50%),
var(--color-bg-2);
border: 1px solid var(--color-accent);
border-radius: var(--radius-lg);
box-shadow:
var(--shadow-lg),
0 0 32px rgba(198, 90, 46, 0.18);
font-family: 'JetBrains Mono', monospace;
font-size: var(--text-sm);
line-height: var(--lh-snug);
color: var(--color-text);
opacity: 0;
animation: egg-bubble-in .4s cubic-bezier(.22,1,.36,1) forwards;
}
.egg-bubble.is-leaving {
animation: egg-bubble-out .35s ease forwards;
}
.egg-bubble::after {
content: '';
position: absolute;
inset: -2px;
border-radius: var(--radius-lg);
border: 1.5px solid var(--color-accent);
opacity: 0;
pointer-events: none;
animation: egg-bubble-burst 1s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes egg-bubble-burst {
0%   { opacity: 0.85; transform: scale(0.92); border-color: var(--color-accent); }
60%  { opacity: 0.4; }
100% { opacity: 0; transform: scale(1.5); border-color: transparent; }
}
.egg-bubble-word {
color: var(--color-accent-soft);
font-style: italic;
font-weight: 700;
letter-spacing: 0.02em;
text-shadow: 0 0 8px rgba(198, 90, 46, 0.35);
}
.egg-bubble-cta {
color: var(--color-text);
font-weight: 600;
}
.egg-bubble-link {
color: var(--color-accent-soft);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
font-weight: 700;
white-space: nowrap;
transition: color .15s, text-shadow .15s;
}
.egg-bubble-link:hover {
color: var(--color-accent);
text-shadow: 0 0 12px rgba(198, 90, 46, 0.5);
}
.egg-bubble-sparkle {
position: absolute;
font-family: serif;
font-size: 14px;
color: var(--color-accent);
text-shadow: 0 0 10px rgba(198, 90, 46, 0.85), 0 0 20px rgba(198, 90, 46, 0.4);
pointer-events: none;
opacity: 0;
}
.egg-bubble-sparkle--1 {
top: -10px; right: 32px;
font-size: 16px;
animation: egg-bubble-float 3.4s ease-in-out infinite 0.5s;
}
.egg-bubble-sparkle--2 {
bottom: -8px; left: 30%;
font-size: 11px;
animation: egg-bubble-float 4.2s ease-in-out infinite 1.6s;
}
.egg-bubble-sparkle--3 {
top: 38%; right: -7px;
font-size: 9px;
animation: egg-bubble-float 3.8s ease-in-out infinite 0.2s;
}
@keyframes egg-bubble-float {
0%, 100% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0); }
20%      { opacity: 0.9; transform: translate(0, -2px) scale(1.0) rotate(72deg); }
50%      { opacity: 1;   transform: translate(-2px, -4px) scale(1.25) rotate(180deg); }
80%      { opacity: 0.7; transform: translate(2px, -2px) scale(0.95) rotate(288deg); }
}
.egg-bubble__icon {
flex: 0 0 auto;
font-size: var(--text-xl);
line-height: 1;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
filter: drop-shadow(0 0 8px rgba(198, 90, 46, 0.45));
}
.egg-bubble__icon::before,
.egg-bubble__icon::after {
content: '\2726'; 
position: absolute;
font-size: 8px;
color: var(--color-accent);
text-shadow: 0 0 6px rgba(198, 90, 46, 0.85);
opacity: 0;
animation: egg-bubble-sparkle 2.4s ease-in-out infinite;
}
.egg-bubble__icon::before { top: -4px; left: -8px; animation-delay: 0.3s; }
.egg-bubble__icon::after  { bottom: -2px; right: -6px; animation-delay: 1.2s; font-size: 6px; }
@keyframes egg-bubble-sparkle {
0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
40%      { opacity: 1; transform: scale(1.3) rotate(180deg); }
60%      { opacity: 1; transform: scale(1.0) rotate(360deg); }
}
.egg-bubble__text {
flex: 1 1 auto;
color: var(--color-text);
}
.egg-bubble__close {
flex: 0 0 auto;
background: transparent;
border: 0;
color: var(--color-muted);
cursor: pointer;
font-size: var(--text-xl);
line-height: 1;
padding: 0;
margin: -2px -4px 0 0;
transition: color .15s;
}
.egg-bubble__close:hover { color: var(--color-accent); }
.egg-bubble::before {
content: '';
position: absolute;
width: 12px;
height: 12px;
background: var(--color-bg-2);
border: 1px solid var(--color-accent);
transform: rotate(45deg);
left: var(--arrow-x, 24px);
margin-left: -6px;
}
.egg-bubble--up::before {
top: -7px;
border-bottom: 0;
border-left: 0;
}
.egg-bubble--down::before {
bottom: -7px;
border-top: 0;
border-right: 0;
}
@keyframes egg-bubble-in {
from { opacity: 0; transform: translateY(-6px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes egg-bubble-out {
from { opacity: 1; transform: translateY(0); }
to   { opacity: 0; transform: translateY(-6px); }
}
@media (max-width: 640px) {
.egg-bubble {
left: 16px !important;
right: 16px !important;
max-width: none;
}
.egg-bubble::before {
left: 32px !important;
margin-left: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.egg-overlay,
.egg-toast,
.egg-bubble { transition: opacity .2s ease; }
.egg-konami-logo { animation: none; }
.egg-cine-frame { animation: none; }
.egg-cine-bar { animation: none; transform: scaleY(1); }
.egg-cine-noise { animation: none; }
.egg-cine-scratch { animation: none; opacity: 0; }
.egg-cine-steam { animation: none; opacity: .5; }
.egg-overlay--cine .egg-overlay__inner,
.egg-overlay--cine .egg-cine-visuals,
.egg-overlay--cine .egg-cine-quote,
.egg-overlay--cine .egg-cine-attr,
.egg-overlay--cine .egg-cine-foot {
animation: none;
opacity: 1;
filter: sepia(0.18) contrast(1.08) brightness(0.96);
}
.egg-bubble { animation: none; opacity: 1; }
}
/*responsive.css*/
@media (max-width: 1280px) {
.nav-list { display: none; }
.nav-right > *:not(.nav-hamburger):not(.theme-btn) { display: none; }
.nav-hamburger { display: flex; }
.nav-avail-btn { display: none; }
}
@media (max-width: 1024px) {
.container { padding-inline: var(--space-8); }
.nav { padding-inline: var(--space-8); }
.exp-grid { grid-template-columns: repeat(2, 1fr); }
.value-grid { grid-template-columns: repeat(2, 1fr); }
.proof-grid { grid-template-columns: 1fr 1fr; }
.client-grid { grid-template-columns: repeat(3, 1fr); }
.cred-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
}
@media (min-width: 769px) and (max-width: 1024px) {
.container { padding-inline: var(--space-8); }
.nav { padding-inline: var(--space-8); }
.hero { grid-template-columns: 1fr; max-height: none; }
.hero-left {
order: 1;
padding: var(--space-20) var(--space-8) var(--space-10);
justify-content: flex-end;
}
.hero-right { order: 2; min-height: 55vw; max-height: 65vw; }
.hero-right::before {
background:
linear-gradient(to top, var(--color-bg) 0%, transparent 50%),
linear-gradient(to right, var(--color-bg) 0%, transparent 50%);
}
.hero-stats {
position: static !important;
order: 3;
flex-direction: row !important;
justify-content: space-around !important;
padding: var(--space-5) var(--space-8) !important;
background: var(--color-bg-2) !important;
border-top: 1px solid var(--color-border) !important;
gap: var(--space-8) !important;
text-align: center !important;
}
.approach-grid,
.section-header-split,
.contact-grid { grid-template-columns: 1fr; gap: var(--space-10); }
.approach-body { position: static; }
.exp-grid { grid-template-columns: repeat(2, 1fr); }
.proof-grid { grid-template-columns: 1fr 1fr; }
.client-grid { grid-template-columns: repeat(3, 1fr); }
.cred-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
}
@media (max-width: 768px) {
body::before { display: none; }
.hero { max-height: none; }
.discover-grid { grid-template-columns: 1fr; }
.value-grid { grid-template-columns: 1fr; }
.thread-container { padding-inline-start: var(--space-8); }
.thread-node::before { left: calc(-1 * var(--space-8) + 9px); }
.thread-container::before { left: 11px; }
.tl-item { grid-template-columns: 1fr; padding-inline-start: var(--space-4); }
.tl-item > * { grid-column: 1; }
.tl-item > .tl-company { padding-inline-start: 0; }
.page-nav-list { justify-content: flex-start; }
.nav { padding-inline: var(--space-6); }
.hero {
display: flex;
flex-direction: column;
min-height: auto;
padding-block-start: 64px;
}
.hero-left {
order: 1;
padding: var(--space-8) var(--space-6) var(--space-6);
justify-content: flex-start;
}
.hero-ghost { display: none; }
.hero-name {
font-size: clamp(var(--text-4xl), 11vw, var(--text-5xl));
margin-block-end: var(--space-2);
}
.hero-subtitle { font-size: clamp(var(--text-lg), 5vw, var(--text-xl)); }
.hero-statement { font-size: var(--text-base); max-width: 100%; }
.hero-badges { margin-block-end: var(--space-6); }
.hero-ctas { flex-direction: column; align-items: stretch; }
.hero-ctas .btn { width: 100%; justify-content: center; }
.hero-right {
order: 2;
position: relative;
min-height: 70vw;
max-height: 85vw;
}
.hero-right::before {
background:
linear-gradient(to bottom, var(--color-bg) 0%, transparent 20%),
linear-gradient(to top, var(--color-bg) 0%, transparent 30%);
}
[data-theme="light"] .hero-right::before {
background:
linear-gradient(to bottom, var(--color-bg) 0%, transparent 20%),
linear-gradient(to top, var(--color-bg) 0%, transparent 30%);
}
.hero-photo { object-position: center 10%; }
.hero-scroll { display: none; }
.hero-stats { display: none; }
.hero-stats-mobile {
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: var(--space-8);
}
.hero-stats-mobile .hero-stat-num { font-size: var(--text-2xl); }
.hero-stats-mobile .hero-stat-label { font-size: var(--text-xs); }
.container { padding-inline: var(--space-6); }
.section-pad { padding-block: var(--space-16); }
.section-pad-lg { padding-block: var(--space-20); }
.section-pad-sm { padding-block: var(--space-10); }
.proof-grid { grid-template-columns: 1fr; }
.client-grid { grid-template-columns: repeat(3, 1fr); }
.cred-grid { grid-template-columns: 1fr; }
.exp-grid { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.approach-grid,
.section-header-split,
.contact-grid { grid-template-columns: 1fr; gap: var(--space-8); }
[style*="grid-template-columns:1fr 1fr"],
[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
.approach-body { position: static; }
footer, .footer { padding: var(--space-10) var(--space-6); }
body:has(.hero) footer,
body:has(.hero) .footer { padding-bottom: calc(var(--space-10) + 64px); }
.footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
.footer-bottom { flex-direction: column; text-align: center; gap: var(--space-3); }
.mobile-cta-bar { display: block; }
.back-to-top { bottom: var(--space-6); right: var(--space-6); }
body:has(.hero) .back-to-top { bottom: calc(var(--space-6) + 60px); }
}
@media (max-width: 480px) {
.container { padding-inline: var(--space-5); }
.client-grid { grid-template-columns: 1fr 1fr; }
.cred-grid { grid-template-columns: 1fr; }
}
html, body { overflow-x: clip; }
@media (max-width: 400px) {
.nav { padding-inline: var(--space-4); }
.hero-left { padding: var(--space-8) var(--space-5) var(--space-6); }
.hero-name { font-size: var(--text-4xl); }
.avail-badge { font-size: 0.58rem; }
}
@media (max-width: 768px) {
.tl-item {
padding-block-end: var(--space-6);
margin-block-end: 0;
}
}
@media (max-width: 768px) {
.page-nav::before,
.page-nav::after {
display: block;
width: 16px;
z-index: 0;
}
.page-nav-pill.is-active,
.page-nav-pill[aria-current="page"] {
position: relative;
z-index: 1;
}
.page-nav::before {
background: linear-gradient(
to right,
color-mix(in srgb, var(--color-bg) 95%, transparent) 0%,
transparent 100%
);
}
.page-nav::after {
background: linear-gradient(
to left,
color-mix(in srgb, var(--color-bg) 95%, transparent) 0%,
transparent 100%
);
}
}
@media (min-width: 560px) and (max-width: 768px) {
#sectors .exp-grid { grid-template-columns: 1fr 1fr; }
#deliverables .exp-grid { grid-template-columns: 1fr 1fr; }
#deliverables .exp-card:last-child,
#sectors .exp-card:last-child { grid-column: auto; }
}
@media (max-width: 768px) {
.approach-item {
padding-block: var(--space-4);
gap: var(--space-4);
}
}
@media (max-width: 1024px) {
.hero-stat-num { font-size: var(--text-4xl); }
}
@media (min-width: 640px) and (max-width: 768px) {
#pain_points .exp-grid.exp-grid-2col {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.client-grid-logos {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 42%;
grid-template-columns: none;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-block-end: var(--space-2);
gap: 1px;
}
.client-grid-logos::-webkit-scrollbar { display: none; }
.client-grid-logos .client-cell {
scroll-snap-align: start;
min-height: 120px;
}
}
@media (max-width: 640px) {
.marquee-band {
padding-block: var(--space-4);
}
.marquee-logo {
padding-inline: var(--space-4);
}
.marquee-logo img {
width: 44px;
height: 44px;
}
}
@media (max-width: 768px) {
.faq-hint { display: block; }
}
@media (max-width: 768px) {
.form-row.form-row-primary {
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
}
@media (max-width: 374px) {
.form-row.form-row-primary {
grid-template-columns: 1fr;
gap: var(--space-4);
}
}