/* ============================================================
QUANTA ADVISORY — MAIN STYLESHEET
Premium boutique advisory brand
Version 1.0
============================================================ */
/* === GOOGLE FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; }
/* === CSS VARIABLES === */
:root {
/* Foundation — dark */
--ink: #0D1117;
--deep: #141923;
--graphite: #1B2235;
--rim: #252E45;
--rim-light: #2F3A55;
/* Accent */
--signal: #3D6FF0;
--signal-soft: #5E8BF5;
--signal-dim: rgba(61, 111, 240, 0.15);
--signal-faint: rgba(61, 111, 240, 0.07);
/* Logo bars */
--bar-1: #8AB4FF;
--bar-2: #4B7BF5;
--bar-3: #1F45B0;
/* Foundation — light */
--parchment: #F3F0EB;
--cloud: #EAE7E1;
--border-light: #D5D0C8;
/* Text — on dark */
--text-dark: #EBE8E2;
--text-muted-dark: #676D85;
--text-dim-dark: #3E4560;
/* Text — on light */
--text-light: #14172B;
--text-muted-light: #5A6070;
/* Spacing */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: 1.25rem;
--sp-6: 1.5rem;
--sp-8: 2rem;
--sp-10: 2.5rem;
--sp-12: 3rem;
--sp-16: 4rem;
--sp-20: 5rem;
--sp-24: 6rem;
--sp-32: 8rem;
--sp-40: 10rem;
/* Container */
--max-w: 1280px;
--gutter: clamp(1.5rem, 5vw, 4rem);
/* Radius */
--r-sm: 4px;
--r-md: 8px;
--r-lg: 16px;
--r-xl: 24px;
/* Fonts */
--font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
/* Easing */
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
/* Duration */
--dur-fast: 180ms;
--dur-base: 320ms;
--dur-slow: 500ms;
--dur-reveal: 750ms;
}
/* === BASE TYPOGRAPHY === */
body {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.65;
color: var(--text-dark);
background: var(--ink);
overflow-x: hidden;
}
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
line-height: 1.15;
letter-spacing: -0.025em;
font-weight: 400;
}
h1 { font-size: clamp(2.5rem, 5.5vw, 5rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.04em; }
h2 { font-size: clamp(2rem, 3.5vw, 3.25rem); font-weight: 300; }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 400; }
h4 { font-size: 1.125rem; font-weight: 500; }
h5 { font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; }
p { line-height: 1.7; }
.label {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-muted-dark);
}
.label-light {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-muted-light);
}
/* === LAYOUT === */
.container {
width: 100%;
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter);
}
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 2rem;
}
/* === LOGO === */
.logo {
display: inline-flex;
align-items: flex-end;
gap: 5px;
text-decoration: none;
}
.logo-text {
font-family: var(--font-display);
font-weight: 300;
font-size: 1.85rem;
letter-spacing: -0.04em;
color: var(--text-dark);
line-height: 1;
transition: color var(--dur-base) var(--ease-out);
}
.logo-bars {
display: flex;
align-items: flex-end;
gap: 3px;
margin-bottom: 4px;
}
.logo-bar {
display: block;
width: 4.5px;
border-radius: 2px 2px 1px 1px;
}
.lb1 { height: 10px; background: var(--bar-1); opacity: 0.85; }
.lb2 { height: 15px; background: var(--bar-2); }
.lb3 { height: 22px; background: var(--bar-3); }
.logo:hover .logo-text { color: #ffffff; }
/* Light context logo */
.logo--light .logo-text { color: var(--text-light); }
.logo--light:hover .logo-text { color: var(--signal); }
/* === BUTTONS === */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.01em;
border-radius: var(--r-sm);
padding: 0.75rem 1.625rem;
transition:
background var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out),
transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
cursor: pointer;
position: relative;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
/* === SIGNAL COMMAND BUTTON — restrained, architectural primary CTA ===
Inspired by Bloomberg-terminal command surfaces, not glossy SaaS gradients.
· Flat dark navy body (no glossy gradient)
· Sharp 3px corners (architectural, not pill-shaped)
· Single decisive 3px periwinkle "signal mark" on the left edge — the
brand mark of the button, echoing Quanta's section-bar motif
· Custom SVG arrow + subtle uppercase tracking for analytical typography
· ::before = horizontal "signal line" that extends from the left mark on hover
· ::after = soft outer halo that fades in on hover (not always-on gloss)
*/
.btn-primary {
position: relative;
isolation: isolate;
/* Analytical typography — not shouty, just precise */
color: #E8ECF8;
font-weight: 500;
font-size: 0.8125rem;
letter-spacing: 0.09em;
text-transform: uppercase;
text-shadow: none;
/* Flat navy surface with a barely-perceptible top-to-bottom shading
for surface read (not a gloss gradient) */
background-color: #131D3F;
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg, #16224A 0%, #0F1832 100%);
background-repeat: no-repeat;
background-position: right 1.25rem center, 0 0;
background-size: 14px 10px, 100% 100%;
/* Hairline border + sharp corners */
border: 1px solid rgba(91, 124, 250, 0.28);
border-radius: 3px;
padding: 0.875rem 3rem 0.875rem 1.875rem;
/* The signature: a 3px periwinkle bar on the LEFT — Quanta's "signal mark".
Plus a faint top inner highlight + grounded floor shadow.
No gloss, no halo here — both arrive on hover. */
box-shadow:
inset 3px 0 0 #5B7CFA,
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 1px 0 rgba(0, 0, 20, 0.45),
0 6px 16px rgba(0, 0, 20, 0.35);
transition:
background-color var(--dur-base) var(--ease-out),
background-position 0.55s cubic-bezier(0.23, 1, 0.32, 1),
border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
[dir="rtl"] .btn-primary {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg, #16224A 0%, #0F1832 100%);
background-position: left 1.25rem center, 0 0;
padding: 0.875rem 1.875rem 0.875rem 3rem;
box-shadow:
inset -3px 0 0 #5B7CFA,
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 1px 0 rgba(0, 0, 20, 0.45),
0 6px 16px rgba(0, 0, 20, 0.35);
}
/* Signal line — extends rightward from the left signal mark on hover */
.btn-primary::before {
content: "";
position: absolute;
left: 3px;
top: 50%;
width: 0;
height: 1px;
background: linear-gradient(90deg,
rgba(139, 161, 255, 0.95) 0%,
rgba(91, 124, 250, 0.5) 60%,
transparent 100%);
transform: translateY(-50%);
pointer-events: none;
transition: width 0.55s cubic-bezier(0.23, 1, 0.32, 1);
}
[dir="rtl"] .btn-primary::before {
left: auto;
right: 3px;
background: linear-gradient(270deg,
rgba(139, 161, 255, 0.95) 0%,
rgba(91, 124, 250, 0.5) 60%,
transparent 100%);
}
/* Outer halo — a soft blue aura that fades in on hover (not always on) */
.btn-primary::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
box-shadow:
0 0 0 1px rgba(139, 161, 255, 0.4),
0 0 24px 2px rgba(91, 124, 250, 0.32),
0 0 60px rgba(91, 124, 250, 0.18);
opacity: 0;
z-index: -1;
pointer-events: none;
transition: opacity 0.4s var(--ease-out);
}
/* Hover — surface lightens, signal mark brightens, signal line extends, halo fades in */
.btn-primary:hover {
color: #FFFFFF;
background-color: #1A2657;
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg, #1E2C66 0%, #131F44 100%);
background-position: right 0.875rem center, 0 0;
border-color: rgba(139, 161, 255, 0.55);
box-shadow:
inset 3px 0 0 #8BA1FF,
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 1px 0 rgba(0, 0, 20, 0.5),
0 10px 24px rgba(0, 0, 20, 0.4);
transform: translateY(-1px);
}
[dir="rtl"] .btn-primary:hover {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg, #1E2C66 0%, #131F44 100%);
background-position: left 0.875rem center, 0 0;
box-shadow:
inset -3px 0 0 #8BA1FF,
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 1px 0 rgba(0, 0, 20, 0.5),
0 10px 24px rgba(0, 0, 20, 0.4);
}
.btn-primary:hover::before { width: calc(45% - 8px); }
.btn-primary:hover::after { opacity: 1; }
/* Active — surface presses in, signal mark dims, signal line retracts */
.btn-primary:active {
transform: translateY(0);
background-color: #101A3B;
box-shadow:
inset 3px 0 0 #5B7CFA,
inset 0 2px 4px rgba(0, 0, 20, 0.45),
0 1px 0 rgba(0, 0, 20, 0.4);
}
[dir="rtl"] .btn-primary:active {
box-shadow:
inset -3px 0 0 #5B7CFA,
inset 0 2px 4px rgba(0, 0, 20, 0.45),
0 1px 0 rgba(0, 0, 20, 0.4);
}
.btn-primary:active::before { width: 0; }
.btn-primary:active::after { opacity: 0.4; }
/* Focus — accessible ring at the outer halo level */
.btn-primary:focus-visible {
outline: none;
border-color: rgba(168, 198, 255, 0.7);
}
.btn-primary:focus-visible::after {
opacity: 1;
box-shadow:
0 0 0 2px rgba(91, 124, 250, 0.55),
0 0 0 4px rgba(91, 124, 250, 0.22),
0 0 28px rgba(91, 124, 250, 0.32);
}
/* Reduced motion — keep the visual states, drop motion */
@media (prefers-reduced-motion: reduce) {
.btn-primary,
.btn-primary::before,
.btn-primary::after {
transition: none !important;
}
.btn-primary:hover { transform: none; }
}
.btn-ghost {
background: transparent;
color: var(--text-dark);
border: 1.5px solid var(--rim-light);
}
.btn-ghost:hover {
border-color: rgba(235, 232, 226, 0.4);
background: rgba(235, 232, 226, 0.05);
transform: translateY(-1px);
}
.btn-ghost-light {
background: transparent;
color: var(--text-light);
border: 1.5px solid var(--border-light);
}
.btn-ghost-light:hover {
border-color: var(--text-muted-light);
background: rgba(20, 23, 43, 0.04);
}
.btn-text {
background: transparent;
color: var(--signal);
border: none;
padding: 0;
font-size: 0.875rem;
font-weight: 500;
}
.btn-text::after {
content: ' →';
transition: transform var(--dur-fast) var(--ease-out);
display: inline-block;
}
.btn-text:hover::after { transform: translateX(4px); }
.btn-text:active { transform: none; }
[dir="rtl"] .btn-text::after {
content: ' \2190';
}
[dir="rtl"] .btn-text:hover::after {
transform: translateX(-4px);
}
.btn-text-light {
background: transparent;
color: var(--text-light);
border: none;
padding: 0;
font-size: 0.875rem;
font-weight: 500;
}
.btn-text-light::after {
content: ' →';
transition: transform var(--dur-fast) var(--ease-out);
display: inline-block;
}
.btn-text-light:hover { color: var(--signal); }
.btn-text-light:hover::after { transform: translateX(4px); }
.btn-text-light:active { transform: none; }
[dir="rtl"] .btn-text-light::after {
content: ' \2190';
}
[dir="rtl"] .btn-text-light:hover::after {
transform: translateX(-4px);
}
.btn-lg {
padding: 0.875rem 2rem;
font-size: 0.9375rem;
}
/* === LANGUAGE SWITCHER === */
.lang-switcher {
display: flex;
align-items: center;
padding-left: 1rem;
margin-left: 0.5rem;
border-left: 1px solid var(--rim-light);
}
.lang-globe {
position: relative;
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.28rem 0.6rem;
border: 1px solid var(--rim-light);
border-radius: 4px;
text-decoration: none;
background: transparent;
overflow: hidden;
isolation: isolate;
line-height: 1;
transition:
background 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
border-color 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.lang-globe:hover {
background: linear-gradient(135deg, var(--bar-3) 0%, var(--signal) 55%, var(--signal-soft) 100%);
border-color: transparent;
box-shadow: 0 2px 14px rgba(61, 111, 240, 0.40), inset 0 1px 0 rgba(255,255,255,0.12);
}
.lang-globe svg {
position: relative;
z-index: 2;
width: 12px;
height: 12px;
opacity: 0.5;
flex-shrink: 0;
color: var(--text-dark);
transition: opacity 280ms ease, color 280ms ease;
}
.lang-globe:hover svg {
opacity: 1;
color: #ffffff;
}
.lang-globe-code {
position: relative;
z-index: 2;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--text-dark);
transition: color 280ms ease;
}
.lang-globe:hover .lang-globe-code {
color: #ffffff;
}
/* === NAVIGATION === */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: background var(--dur-slow) var(--ease-in-out),
backdrop-filter var(--dur-slow) var(--ease-in-out),
border-color var(--dur-slow) var(--ease-in-out);
border-bottom: 1px solid transparent;
}
.site-header.scrolled {
background: rgba(13, 17, 23, 0.88);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom-color: var(--rim);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 68px;
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter);
}
.nav-links {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-link {
font-size: 0.875rem;
font-weight: 400;
color: var(--text-muted-dark);
transition: color var(--dur-fast) var(--ease-out);
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 0;
height: 1px;
background: var(--signal);
transition: width var(--dur-base) var(--ease-out);
}
.nav-link:hover { color: var(--text-dark); }
.nav-link:hover::after { width: 100%; }
.nav-link.active {
color: var(--signal-soft);
text-shadow: 0 0 18px rgba(61, 111, 240, 0.28);
}
.nav-link.active::after { width: 100%; }
.nav-cta {
display: flex;
align-items: center;
gap: 1rem;
}
/* Mobile nav toggle */
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
padding: 4px;
cursor: pointer;
}
.nav-toggle span {
display: block;
width: 22px;
height: 1.5px;
background: var(--text-dark);
border-radius: 2px;
transition: transform var(--dur-base) var(--ease-in-out),
opacity var(--dur-base) var(--ease-in-out);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* Mobile nav overlay */
.nav-overlay {
position: fixed;
inset: 0;
background: var(--deep);
z-index: 999;
display: flex;
flex-direction: column;
padding: 100px var(--gutter) var(--sp-16);
opacity: 0;
pointer-events: none;
transform: translateY(-12px);
transition: opacity var(--dur-slow) var(--ease-out),
transform var(--dur-slow) var(--ease-out);
}
.nav-overlay.open {
opacity: 1;
pointer-events: all;
transform: translateY(0);
}
.nav-overlay-links {
display: flex;
flex-direction: column;
gap: 0;
}
.nav-overlay-link {
font-family: var(--font-display);
font-size: clamp(2rem, 7vw, 3rem);
font-weight: 300;
color: var(--text-dark);
padding: 0.75rem 0;
border-bottom: 1px solid var(--rim);
transition:
color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
padding-inline var(--dur-fast) var(--ease-out);
letter-spacing: -0.025em;
position: relative;
isolation: isolate;
}
.nav-overlay-link:hover { color: var(--signal-soft); }
.nav-overlay.open .nav-overlay-link.active,
.nav-overlay.open .nav-overlay-link[aria-current="page"] {
color: transparent;
font-weight: 400;
padding-inline: 0;
border-bottom-color: var(--rim);
background: linear-gradient(92deg, #8ab4ff 0%, #5e8bf5 42%, #3d6ff0 74%, #b8ccff 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
box-shadow: none;
text-shadow: 0 0 20px rgba(138, 180, 255, 0.36);
}
[dir="rtl"] .nav-overlay.open .nav-overlay-link.active,
[dir="rtl"] .nav-overlay.open .nav-overlay-link[aria-current="page"] {
background: linear-gradient(270deg, #8ab4ff 0%, #5e8bf5 42%, #3d6ff0 74%, #b8ccff 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
box-shadow: none;
}
.nav-overlay-cta {
margin-top: auto;
padding-top: var(--sp-8);
}
/* === DECORATIVE ELEMENTS === */
.section-bar {
display: flex;
align-items: flex-end;
gap: 3px;
margin-bottom: var(--sp-6);
}
.section-bar span {
display: block;
width: 4px;
border-radius: 2px 2px 1px 1px;
}
.section-bar .sb1 { height: 10px; background: var(--bar-1); opacity: 0.8; }
.section-bar .sb2 { height: 16px; background: var(--bar-2); }
.section-bar .sb3 { height: 22px; background: var(--bar-3); }
.section-bar--sm span { width: 3px; }
.section-bar--sm .sb1 { height: 7px; }
.section-bar--sm .sb2 { height: 11px; }
.section-bar--sm .sb3 { height: 15px; }
/* === SECTION BACKGROUNDS === */
.bg-ink { background: var(--ink); }
.bg-deep { background: var(--deep); }
.bg-graphite { background: var(--graphite); }
.bg-parchment { background: var(--parchment); }
.bg-cloud { background: var(--cloud); }
/* === DIVIDERS === */
.divider {
border: none;
border-top: 1px solid var(--rim);
margin: 0;
}
.divider-light {
border: none;
border-top: 1px solid var(--border-light);
margin: 0;
}
/* === REVEAL ANIMATIONS === */
[data-reveal] {
opacity: 0;
transform: translateY(28px);
will-change: opacity, transform;
transition:
opacity var(--dur-reveal) var(--ease-out),
transform var(--dur-reveal) var(--ease-out);
}
[data-reveal].revealed {
opacity: 1;
transform: translateY(0);
will-change: auto;
}
/* Reduce animation duration on mobile for snappier feel */
@media (max-width: 768px) {
[data-reveal] {
/* Use faster, smoother easing on mobile */
transition:
opacity 550ms cubic-bezier(0.33, 0.66, 0.66, 1),
transform 550ms cubic-bezier(0.33, 0.66, 0.66, 1);
}
}
/* Ultra-smooth animations on very small phones */
@media (max-width: 480px) {
[data-reveal] {
transition:
opacity 500ms cubic-bezier(0.33, 0.66, 0.66, 1),
transform 500ms cubic-bezier(0.33, 0.66, 0.66, 1);
}
}
/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
[data-reveal] {
opacity: 1;
transform: translateY(0);
transition: none;
}
}
/* === CARD GRIDS — smooth lift-in on scroll === */
.initiative-cards [data-reveal],
.service-cards [data-reveal],
.insights-card-grid [data-reveal] {
transform: translateY(36px) scale(0.97);
transition:
opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.initiative-cards [data-reveal].revealed,
.service-cards [data-reveal].revealed,
.insights-card-grid [data-reveal].revealed {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Stagger per-card — diagonal cascade */
.initiative-cards [data-reveal]:nth-child(1),
.service-cards [data-reveal]:nth-child(1),
.insights-card-grid [data-reveal]:nth-child(1) { transition-delay: 0ms; }
.initiative-cards [data-reveal]:nth-child(2),
.service-cards [data-reveal]:nth-child(2),
.insights-card-grid [data-reveal]:nth-child(2) { transition-delay: 110ms; }
.initiative-cards [data-reveal]:nth-child(3),
.service-cards [data-reveal]:nth-child(3),
.insights-card-grid [data-reveal]:nth-child(3) { transition-delay: 220ms; }
.initiative-cards [data-reveal]:nth-child(4),
.service-cards [data-reveal]:nth-child(4),
.insights-card-grid [data-reveal]:nth-child(4) { transition-delay: 80ms; }
.initiative-cards [data-reveal]:nth-child(5),
.service-cards [data-reveal]:nth-child(5),
.insights-card-grid [data-reveal]:nth-child(5) { transition-delay: 190ms; }
.initiative-cards [data-reveal]:nth-child(6),
.service-cards [data-reveal]:nth-child(6),
.insights-card-grid [data-reveal]:nth-child(6) { transition-delay: 300ms; }
.initiative-cards [data-reveal]:nth-child(7),
.service-cards [data-reveal]:nth-child(7),
.insights-card-grid [data-reveal]:nth-child(7) { transition-delay: 160ms; }
/* Mobile: no scale (cheaper on GPU), slightly faster */
@media (max-width: 768px) {
.initiative-cards [data-reveal],
.service-cards [data-reveal],
.insights-card-grid [data-reveal] {
transform: translateY(22px);
transition:
opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.initiative-cards [data-reveal].revealed,
.service-cards [data-reveal].revealed,
.insights-card-grid [data-reveal].revealed {
transform: translateY(0);
}
.initiative-cards [data-reveal]:nth-child(1),
.service-cards [data-reveal]:nth-child(1),
.insights-card-grid [data-reveal]:nth-child(1) { transition-delay: 0ms; }
.initiative-cards [data-reveal]:nth-child(2),
.service-cards [data-reveal]:nth-child(2),
.insights-card-grid [data-reveal]:nth-child(2) { transition-delay: 70ms; }
.initiative-cards [data-reveal]:nth-child(3),
.service-cards [data-reveal]:nth-child(3),
.insights-card-grid [data-reveal]:nth-child(3) { transition-delay: 140ms; }
.initiative-cards [data-reveal]:nth-child(4),
.service-cards [data-reveal]:nth-child(4),
.insights-card-grid [data-reveal]:nth-child(4) { transition-delay: 40ms; }
.initiative-cards [data-reveal]:nth-child(5),
.service-cards [data-reveal]:nth-child(5),
.insights-card-grid [data-reveal]:nth-child(5) { transition-delay: 110ms; }
.initiative-cards [data-reveal]:nth-child(6),
.service-cards [data-reveal]:nth-child(6),
.insights-card-grid [data-reveal]:nth-child(6) { transition-delay: 180ms; }
}
/* === SERVICE DETAIL — slide in from right === */
.service-group-right [data-reveal] {
transform: translateX(40px);
transition:
opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.service-group-right [data-reveal].revealed {
opacity: 1;
transform: translateX(0);
}
.service-group-right [data-reveal][data-delay="1"] { transition-delay: 120ms; }
.service-group-right [data-reveal][data-delay="2"] { transition-delay: 240ms; }
.service-group-right [data-reveal][data-delay="3"] { transition-delay: 360ms; }
@media (max-width: 768px) {
.service-group-right [data-reveal] {
transform: translateX(24px);
transition:
opacity 500ms cubic-bezier(0.33, 0.66, 0.66, 1),
transform 500ms cubic-bezier(0.33, 0.66, 0.66, 1);
}
.service-group-right [data-reveal][data-delay="1"] { transition-delay: 60ms; }
.service-group-right [data-reveal][data-delay="2"] { transition-delay: 120ms; }
}
[data-reveal][data-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-delay="3"] { transition-delay: 240ms; }
[data-reveal][data-delay="4"] { transition-delay: 320ms; }
[data-reveal][data-delay="5"] { transition-delay: 400ms; }
[data-reveal][data-delay="6"] { transition-delay: 480ms; }
[data-reveal][data-delay="7"] { transition-delay: 560ms; }
[data-reveal][data-delay="8"] { transition-delay: 640ms; }
/* Reduce delays on mobile for snappier animations */
@media (max-width: 768px) {
[data-reveal][data-delay="1"] { transition-delay: 40ms; }
[data-reveal][data-delay="2"] { transition-delay: 80ms; }
[data-reveal][data-delay="3"] { transition-delay: 120ms; }
[data-reveal][data-delay="4"] { transition-delay: 160ms; }
[data-reveal][data-delay="5"] { transition-delay: 200ms; }
[data-reveal][data-delay="6"] { transition-delay: 240ms; }
[data-reveal][data-delay="7"] { transition-delay: 280ms; }
[data-reveal][data-delay="8"] { transition-delay: 320ms; }
}
[data-reveal="fade"] {
transform: none;
}
/* === HERO SECTION === */
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
overflow: hidden;
padding-top: 68px;
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-bg-base {
position: absolute;
inset: 0;
background: var(--ink);
}
.hero-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(61, 111, 240, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(61, 111, 240, 0.035) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, black 50%, transparent 100%);
}
.hero-glow {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 55% at 65% 25%, rgba(61, 111, 240, 0.07) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 20% 80%, rgba(31, 69, 176, 0.05) 0%, transparent 60%);
}
.hero-content {
position: relative;
z-index: 1;
width: 100%;
}
.hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
min-height: calc(100svh - 68px);
padding: var(--sp-24) 0 var(--sp-32);
}
.hero-left {
max-width: 640px;
}
.hero-eyebrow {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: var(--sp-8);
}
.hero-eyebrow-line {
width: 32px;
height: 1px;
background: var(--signal);
}
.hero-eyebrow-text {
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--signal-soft);
}
.hero-heading {
font-size: clamp(2.75rem, 5.5vw, 5.25rem);
font-weight: 300;
letter-spacing: -0.04em;
line-height: 1.08;
color: var(--text-dark);
margin-bottom: var(--sp-6);
}
.hero-heading em {
font-style: normal;
color: var(--signal-soft);
}
.hero-subheadline {
font-size: clamp(1rem, 1.5vw, 1.125rem);
color: var(--text-muted-dark);
line-height: 1.7;
max-width: 480px;
margin: 0;
font-weight: 300;
}
.hero-subline-wrap {
display: flex;
align-items: center;
gap: clamp(1rem, 2.4vw, 1.6rem);
max-width: 620px;
margin-bottom: var(--sp-10);
}
.hero-actions {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.hero-scroll-hint {
position: absolute;
bottom: var(--sp-8);
left: 50%;
transform: translateX(-50%);
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(180deg, var(--rim-light), transparent);
animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
0%, 100% { opacity: 0.3; transform: scaleY(1); transform-origin: top; }
50% { opacity: 0.8; }
}
@keyframes mobileCardSlideUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes mobileCardLift {
0% {
transform: scale(1) translateY(0);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
50% {
transform: scale(1.02) translateY(-8px);
box-shadow: 0 12px 32px rgba(61, 111, 240, 0.15);
}
100% {
transform: scale(1.02) translateY(-8px);
box-shadow: 0 12px 32px rgba(61, 111, 240, 0.15);
background: var(--graphite);
}
}
/* Hero visual — abstract bar composition */
.hero-right {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.hero-visual-wrap {
position: relative;
width: 100%;
max-width: 480px;
height: 440px;
background: transparent;
border: none;
outline: none;
/* Light side fade only — no fade on stats area at bottom */
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.bar-composition {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: flex-end;
gap: 8px;
height: 100%;
padding: 0 1rem;
background: transparent;
border: none;
}
.bar-col {
flex: 1;
height: var(--h, 50%);
background: linear-gradient(180deg,
rgba(61, 111, 240, 0.5) 0%,
rgba(31, 69, 176, 0.15) 100%);
border-radius: 3px 3px 0 0;
border-top: 1px solid rgba(61, 111, 240, 0.4);
position: relative;
overflow: hidden;
}
.bar-col::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(255,255,255,0.04) 0%,
transparent 40%);
}
.bar-col.accent {
background: linear-gradient(180deg,
rgba(94, 139, 245, 0.7) 0%,
rgba(61, 111, 240, 0.25) 100%);
border-top-color: rgba(138, 180, 255, 0.6);
}
.hero-stats {
position: absolute;
bottom: var(--sp-8);
left: 0;
right: 0;
z-index: 2;
display: flex;
gap: 2rem;
padding: 0 1rem;
}
.hero-stat {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.hero-stat-value {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 400;
color: #ffffff;
letter-spacing: -0.04em;
line-height: 1;
}
.hero-stat-label {
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255,255,255,0.55);
}
.hero-visual-bars-side {
max-width: 560px;
-webkit-mask-image: none;
mask-image: none;
}
.hero-visual-bars-side .bar-composition {
right: 36%;
padding: 0 0.75rem 0 1rem;
mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 100%);
}
.hero-stats-side {
top: 50%;
bottom: auto;
left: auto;
right: 0;
width: 34%;
flex-direction: column;
justify-content: center;
gap: clamp(0.85rem, 2vw, 1.25rem);
padding: 0.8rem 0.25rem 0.8rem 1.15rem;
transform: translateY(-50%);
background:
linear-gradient(90deg, rgba(126, 174, 255, 0.13), rgba(126, 174, 255, 0.035) 34%, transparent 82%),
radial-gradient(circle at 0% 50%, rgba(126, 174, 255, 0.12), transparent 58%);
box-shadow: none;
}
.hero-stats-side .hero-stat {
position: relative;
gap: 0.32rem;
padding: 0.58rem 0 0.58rem 0.85rem;
border: 0;
background: radial-gradient(ellipse at 0% 50%, rgba(126, 174, 255, 0.1), transparent 72%);
}
.hero-stats-side .hero-stat::before {
content: "";
position: absolute;
top: 50%;
left: -1.15rem;
width: 1.75rem;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(126, 174, 255, 0.68), transparent);
}
.hero-stats-side .hero-stat::after {
content: "";
position: absolute;
top: 50%;
left: -0.19rem;
width: 0.38rem;
aspect-ratio: 1;
border-radius: 50%;
background: rgba(138, 180, 255, 0.88);
box-shadow: 0 0 18px rgba(126, 174, 255, 0.42);
transform: translate(-50%, -50%);
}
.hero-stats-side .hero-stat-value {
font-size: clamp(1.55rem, 3.1vw, 2.2rem);
text-shadow: 0 0 22px rgba(126, 174, 255, 0.2);
}
.hero-stats-side .hero-stat-label {
line-height: 1.25;
color: rgba(242, 238, 231, 0.58);
}
.hero-visual-bars-side .bar-composition {
right: 0;
padding-right: 1rem;
}
.hero-stats-embedded {
position: absolute;
inset: 0;
z-index: 3;
display: block;
padding: 0;
pointer-events: none;
}
.hero-stat-callout {
position: absolute;
display: flex;
flex-direction: column;
gap: 0.22rem;
min-width: clamp(8.2rem, 16vw, 11rem);
padding: 0.35rem 0 0.35rem 0.72rem;
background:
linear-gradient(90deg, rgba(8, 12, 20, 0.62), rgba(8, 12, 20, 0.18) 52%, transparent),
radial-gradient(ellipse at 0% 50%, rgba(126, 174, 255, 0.12), transparent 70%);
transform: translate(-50%, -50%);
}
.hero-stat-callout::before {
content: "";
position: absolute;
top: 50%;
right: 100%;
width: clamp(2.2rem, 5vw, 4.2rem);
height: 1px;
background: linear-gradient(90deg, transparent, rgba(126, 174, 255, 0.68));
}
.hero-stat-callout::after {
content: "";
position: absolute;
top: 50%;
left: -0.1rem;
width: 0.34rem;
aspect-ratio: 1;
border-radius: 50%;
background: rgba(138, 180, 255, 0.92);
box-shadow: 0 0 18px rgba(126, 174, 255, 0.46);
transform: translate(-50%, -50%);
}
.callout-disciplines {
left: 31%;
top: 69%;
}
.callout-coverage {
left: 58%;
top: 42%;
}
.callout-tools {
left: 78%;
top: 56%;
}
.hero-stat-callout .hero-stat-value {
font-size: clamp(1.45rem, 3vw, 2rem);
text-shadow: 0 0 24px rgba(8, 12, 20, 0.65);
}
.hero-stat-callout .hero-stat-label {
font-size: 0.66rem;
line-height: 1.25;
color: rgba(242, 238, 231, 0.58);
text-shadow: 0 0 18px rgba(8, 12, 20, 0.8);
}
.hero-visual-bars-side {
max-width: 520px;
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 6%, black 97%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 6%, black 97%, transparent 100%);
}
.hero-visual-bars-side .bar-composition {
right: 0;
height: 100%;
padding: 0 1rem;
mask-image: none;
}
.hero-stats-band {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
padding: clamp(1.15rem, 2.4vw, 1.6rem) clamp(1rem, 2.4vw, 1.35rem) clamp(1.05rem, 2vw, 1.35rem);
background:
linear-gradient(180deg, transparent 0%, rgba(8, 12, 20, 0.54) 34%, rgba(8, 12, 20, 0.82) 100%),
radial-gradient(ellipse at 50% 100%, rgba(126, 174, 255, 0.14), transparent 70%);
pointer-events: none;
}
.hero-stats-band::before {
content: "";
position: absolute;
left: clamp(1rem, 2.4vw, 1.35rem);
right: clamp(1rem, 2.4vw, 1.35rem);
top: 0.65rem;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(126, 174, 255, 0.34), transparent);
}
.hero-stats-band .hero-stat {
position: relative;
min-width: 0;
padding: 0;
}
.hero-stats-band .hero-stat:not(:first-child) {
padding-inline-start: clamp(0.8rem, 2vw, 1.4rem);
}
.hero-stats-band .hero-stat:not(:first-child)::before {
content: "";
position: absolute;
top: 0.2rem;
bottom: 0.15rem;
inset-inline-start: 0;
width: 1px;
background: linear-gradient(180deg, transparent, rgba(126, 174, 255, 0.22), transparent);
}
.hero-stats-band .hero-stat-value {
font-size: clamp(1.55rem, 3.4vw, 2.15rem);
text-shadow: 0 0 24px rgba(8, 12, 20, 0.78);
}
.hero-stats-band .hero-stat-label {
max-width: 9.5rem;
color: rgba(242, 238, 231, 0.58);
text-shadow: 0 0 18px rgba(8, 12, 20, 0.82);
}
/* Hero visual — strategic signal field */
.signal-field {
position: absolute;
inset: clamp(0.75rem, 2vw, 1.4rem);
overflow: hidden;
border: 1px solid rgba(126, 174, 255, 0.18);
border-radius: 8px;
background:
radial-gradient(circle at 28% 24%, rgba(126, 174, 255, 0.14), transparent 28%),
radial-gradient(circle at 76% 62%, rgba(61, 111, 240, 0.18), transparent 34%),
linear-gradient(145deg, rgba(9, 15, 28, 0.82), rgba(17, 29, 55, 0.62));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
inset 0 0 42px rgba(61, 111, 240, 0.08),
0 24px 70px rgba(0, 0, 0, 0.24);
transition:
border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
background var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
}
.signal-grid {
position: absolute;
inset: 0;
opacity: 0.42;
background-image:
linear-gradient(rgba(126, 174, 255, 0.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(126, 174, 255, 0.08) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(circle at 52% 48%, #000 42%, transparent 78%);
}
.signal-orbit {
position: absolute;
border: 1px solid rgba(126, 174, 255, 0.14);
border-radius: 999px;
transform: rotate(-10deg);
transition: border-color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.signal-orbit-1 {
inset: 18% 9% 26% 8%;
}
.signal-orbit-2 {
inset: 30% 20% 17% 19%;
opacity: 0.7;
transform: rotate(15deg);
}
.signal-path {
position: absolute;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(126, 174, 255, 0.45), transparent);
transform-origin: left center;
transition: background var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.signal-path-1 {
left: 18%;
top: 42%;
width: 42%;
transform: rotate(-17deg);
}
.signal-path-2 {
left: 42%;
top: 51%;
width: 36%;
transform: rotate(19deg);
}
.signal-path-3 {
left: 24%;
top: 67%;
width: 48%;
transform: rotate(2deg);
opacity: 0.55;
}
.signal-node {
position: absolute;
width: clamp(2.7rem, 5vw, 3.55rem);
aspect-ratio: 1;
border-radius: 50%;
transform: translate(-50%, -50%);
transition: transform var(--dur-base) var(--ease-out);
}
.signal-node-disciplines { left: 18%; top: 42%; }
.signal-node-coverage { left: 51%; top: 31%; }
.signal-node-tools { left: 76%; top: 62%; }
.signal-node-dot,
.signal-node-pulse {
position: absolute;
inset: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.signal-node-dot {
width: 0.72rem;
aspect-ratio: 1;
background: #8ab4ff;
box-shadow:
0 0 0 7px rgba(126, 174, 255, 0.08),
0 0 24px rgba(126, 174, 255, 0.5);
transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.signal-node-pulse {
width: 100%;
aspect-ratio: 1;
border: 1px solid rgba(126, 174, 255, 0.28);
animation: signalNodePulse 3.6s ease-in-out infinite;
}
.signal-node-coverage .signal-node-pulse { animation-delay: -1.2s; }
.signal-node-tools .signal-node-pulse { animation-delay: -2.3s; }
.signal-flow {
position: absolute;
width: 9rem;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(242, 238, 231, 0.65), transparent);
filter: blur(0.2px);
opacity: 0.48;
animation: signalFlowTravel 4.8s linear infinite;
}
.signal-flow-1 {
left: 10%;
top: 43%;
transform: rotate(-17deg);
}
.signal-flow-2 {
left: 39%;
top: 52%;
transform: rotate(19deg);
animation-delay: -2.2s;
}
.signal-stats {
left: clamp(1rem, 3vw, 1.6rem);
right: clamp(1rem, 3vw, 1.6rem);
bottom: clamp(1rem, 3vw, 1.6rem);
justify-content: space-between;
gap: clamp(0.75rem, 2vw, 1.4rem);
padding: 0;
}
.signal-stat {
min-width: 0;
padding-inline-start: 0.85rem;
border-inline-start: 1px solid rgba(126, 174, 255, 0.22);
transition: border-color var(--dur-base) var(--ease-out);
}
.hero-visual-wrap:hover .signal-field {
border-color: rgba(114, 255, 184, 0.38);
background:
radial-gradient(circle at 28% 24%, rgba(114, 255, 184, 0.13), transparent 28%),
radial-gradient(circle at 76% 62%, rgba(61, 111, 240, 0.16), transparent 34%),
linear-gradient(145deg, rgba(9, 15, 28, 0.86), rgba(14, 40, 42, 0.62));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 0 42px rgba(114, 255, 184, 0.08),
0 24px 70px rgba(0, 0, 0, 0.24),
0 0 36px rgba(114, 255, 184, 0.12);
}
.hero-visual-wrap:hover .signal-path {
background: linear-gradient(90deg, transparent, rgba(114, 255, 184, 0.62), transparent);
}
.hero-visual-wrap:hover .signal-orbit {
border-color: rgba(114, 255, 184, 0.22);
}
.hero-visual-wrap:hover .signal-node {
transform: translate(-50%, -50%) scale(1.04);
}
.hero-visual-wrap:hover .signal-node-dot {
background: #72ffb8;
box-shadow:
0 0 0 7px rgba(114, 255, 184, 0.1),
0 0 26px rgba(114, 255, 184, 0.48);
}
.hero-visual-wrap:hover .signal-stat {
border-color: rgba(114, 255, 184, 0.32);
}
@keyframes signalNodePulse {
0%, 100% { opacity: 0.18; transform: translate(-50%, -50%) scale(0.72); }
50% { opacity: 0.42; transform: translate(-50%, -50%) scale(1); }
}
@keyframes signalFlowTravel {
0% { opacity: 0; clip-path: inset(0 100% 0 0); }
22% { opacity: 0.5; clip-path: inset(0 35% 0 0); }
58% { opacity: 0.42; clip-path: inset(0 0 0 45%); }
100% { opacity: 0; clip-path: inset(0 0 0 100%); }
}
@media (prefers-reduced-motion: reduce) {
.signal-node-pulse,
.signal-flow {
animation: none;
}
}
/* Hero visual — integrated decision constellation */
.hero-visual-constellation {
max-width: 560px;
height: 500px;
overflow: visible;
-webkit-mask-image: none;
mask-image: none;
}
.decision-constellation {
position: absolute;
inset: -7% -5% -3%;
overflow: visible;
background:
radial-gradient(circle at 50% 45%, rgba(126, 174, 255, 0.16), transparent 18%),
radial-gradient(circle at 76% 27%, rgba(61, 111, 240, 0.13), transparent 24%),
radial-gradient(circle at 18% 68%, rgba(126, 174, 255, 0.1), transparent 26%);
transition: filter var(--dur-base) var(--ease-out);
}
.constellation-radar {
position: absolute;
left: 50%;
top: 45%;
width: min(76vw, 31rem);
aspect-ratio: 1;
border-radius: 50%;
transform: translate(-50%, -50%);
background:
repeating-radial-gradient(circle, rgba(126, 174, 255, 0.12) 0 1px, transparent 1px 54px),
conic-gradient(from 220deg, transparent 0deg, rgba(126, 174, 255, 0.2) 36deg, transparent 88deg, transparent 360deg);
opacity: 0.55;
-webkit-mask-image: radial-gradient(circle, transparent 0 17%, #000 18% 62%, transparent 75%);
mask-image: radial-gradient(circle, transparent 0 17%, #000 18% 62%, transparent 75%);
animation: constellationRadarDrift 18s linear infinite;
}
.constellation-ribbon,
.constellation-ray {
position: absolute;
left: 50%;
top: 45%;
height: 1px;
transform-origin: left center;
background: linear-gradient(90deg, transparent, rgba(126, 174, 255, 0.74), transparent);
box-shadow: 0 0 18px rgba(61, 111, 240, 0.28);
transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.constellation-ribbon {
width: clamp(15rem, 33vw, 26rem);
opacity: 0.74;
}
.constellation-ribbon-1 { transform: rotate(-22deg) translateX(-44%); }
.constellation-ribbon-2 { transform: rotate(18deg) translateX(-36%); opacity: 0.58; }
.constellation-ribbon-3 { transform: rotate(62deg) translateX(-28%); opacity: 0.42; }
.constellation-ray {
width: clamp(7rem, 15vw, 11rem);
opacity: 0.48;
}
.constellation-ray-1 { transform: rotate(-72deg) translateX(18%); }
.constellation-ray-2 { transform: rotate(135deg) translateX(12%); }
.constellation-ray-3 { transform: rotate(4deg) translateX(16%); }
.constellation-core {
position: absolute;
left: 50%;
top: 45%;
width: clamp(5rem, 11vw, 7.5rem);
aspect-ratio: 1;
transform: translate(-50%, -50%);
}
.constellation-core-ring,
.constellation-core-dot {
position: absolute;
inset: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.constellation-core-ring {
width: 100%;
aspect-ratio: 1;
border: 1px solid rgba(126, 174, 255, 0.36);
box-shadow: inset 0 0 28px rgba(61, 111, 240, 0.12), 0 0 38px rgba(61, 111, 240, 0.18);
animation: constellationCoreBreathe 4.6s ease-in-out infinite;
transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.constellation-core-dot {
width: 0.9rem;
aspect-ratio: 1;
background: #8ab4ff;
box-shadow: 0 0 24px rgba(126, 174, 255, 0.62);
transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.constellation-point,
.constellation-packet {
position: absolute;
border-radius: 50%;
background: rgba(242, 238, 231, 0.72);
box-shadow: 0 0 18px rgba(126, 174, 255, 0.42);
transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.constellation-point {
width: 0.42rem;
aspect-ratio: 1;
}
.constellation-point-a { left: 23%; top: 34%; }
.constellation-point-b { left: 76%; top: 27%; }
.constellation-point-c { left: 20%; top: 73%; }
.constellation-point-d { left: 82%; top: 64%; }
.constellation-packet {
width: 0.5rem;
aspect-ratio: 1;
background: #8ab4ff;
animation: constellationPacketTravel 5.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.constellation-packet-1 { left: 25%; top: 36%; }
.constellation-packet-2 { left: 70%; top: 61%; animation-delay: -2.8s; }
.constellation-stats {
position: absolute;
inset: auto 0 7%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(0.8rem, 2vw, 1.2rem);
padding: 0;
}
.constellation-stat {
position: relative;
min-width: 0;
padding-block: 0.3rem;
padding-inline-start: 0;
text-shadow: 0 0 24px rgba(8, 12, 20, 0.6);
}
.constellation-stat::before {
content: "";
display: block;
width: 2.4rem;
height: 1px;
margin-bottom: 0.85rem;
background: linear-gradient(90deg, rgba(126, 174, 255, 0.85), transparent);
transition: background var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out);
}
.hero-visual-constellation:hover .decision-constellation {
filter: saturate(1.1);
}
.hero-visual-constellation:hover .constellation-radar {
opacity: 0.68;
}
.hero-visual-constellation:hover .constellation-ribbon,
.hero-visual-constellation:hover .constellation-ray {
background: linear-gradient(90deg, transparent, rgba(114, 255, 184, 0.78), transparent);
box-shadow: 0 0 22px rgba(114, 255, 184, 0.2);
}
.hero-visual-constellation:hover .constellation-core-ring {
border-color: rgba(114, 255, 184, 0.44);
box-shadow: inset 0 0 30px rgba(114, 255, 184, 0.1), 0 0 42px rgba(114, 255, 184, 0.18);
}
.hero-visual-constellation:hover .constellation-core-dot,
.hero-visual-constellation:hover .constellation-packet,
.hero-visual-constellation:hover .constellation-point {
background: #72ffb8;
box-shadow: 0 0 22px rgba(114, 255, 184, 0.46);
}
.hero-visual-constellation:hover .constellation-stat::before {
width: 3.2rem;
background: linear-gradient(90deg, rgba(114, 255, 184, 0.9), transparent);
}
@keyframes constellationRadarDrift {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes constellationCoreBreathe {
0%, 100% { transform: translate(-50%, -50%) scale(0.88); opacity: 0.58; }
50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}
@keyframes constellationPacketTravel {
0% { opacity: 0; transform: translate(0, 0) scale(0.7); }
18% { opacity: 1; }
52% { opacity: 0.9; transform: translate(8.8rem, 3.2rem) scale(1); }
100% { opacity: 0; transform: translate(15rem, -2.8rem) scale(0.72); }
}
@media (prefers-reduced-motion: reduce) {
.constellation-radar,
.constellation-core-ring,
.constellation-packet {
animation: none;
}
}
/* Mobile/desktop visibility helpers */
.mobile-only-md { display: none; }
.desktop-only-md { display: grid; }
/* Hero heading desktop/mobile swap */
.hero-heading-desktop { display: inline; }
.hero-heading-mobile { display: none; }
/* ============================================================
FROM COMPLEXITY TO CLARITY — interactive transformation
============================================================ */
.clarity-flow {
position: relative;
background: var(--ink);
padding: var(--sp-32) 0;
overflow: hidden;
}
.clarity-bg {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(61, 111, 240, 0.07), transparent 70%),
radial-gradient(ellipse 80% 50% at 50% 100%, rgba(61, 111, 240, 0.04), transparent 70%);
}
.clarity-bg::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(61, 111, 240, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(61, 111, 240, 0.04) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%);
opacity: 0.55;
}
/* Header */
.clarity-flow-header {
text-align: center;
max-width: 720px;
margin: 0 auto var(--sp-16);
position: relative;
z-index: 1;
}
.clarity-flow-header .section-bar { display: flex; justify-content: center; }
.clarity-flow-heading {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 300;
letter-spacing: -0.035em;
line-height: 1.1;
color: var(--text-dark);
margin-bottom: 1.25rem;
}
.clarity-flow-sub {
font-size: 1.0625rem;
color: var(--text-muted-dark);
line-height: 1.7;
font-weight: 300;
max-width: 640px;
margin: 0 auto;
}
/* Module — desktop 3-column grid */
.clarity-module {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(140px, 200px) minmax(0, 1.15fr);
gap: 0;
align-items: stretch;
background: linear-gradient(180deg, rgba(20, 25, 35, 0.6), rgba(13, 17, 23, 0.4));
border: 1px solid var(--rim);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.clarity-col {
padding: 1.75rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
position: relative;
}
.clarity-col--inputs { border-right: 1px solid var(--rim); }
.clarity-col--engine {
background: linear-gradient(180deg, rgba(61, 111, 240, 0.04), rgba(13, 17, 23, 0));
border-right: 1px solid var(--rim);
align-items: center;
justify-content: center;
}
.clarity-col--output { background: linear-gradient(180deg, rgba(20, 25, 35, 0.4), rgba(13, 17, 23, 0.6)); }
/* Column header */
.clarity-col-header {
display: flex;
align-items: flex-start;
gap: 0.875rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.clarity-col-num {
font-family: var(--font-display);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--signal);
padding: 0.375rem 0.5rem;
border: 1px solid rgba(61, 111, 240, 0.3);
border-radius: var(--r-sm);
background: rgba(61, 111, 240, 0.08);
flex-shrink: 0;
line-height: 1;
}
.clarity-col-label {
display: block;
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-muted-dark);
margin-bottom: 0.25rem;
}
.clarity-col-title {
display: block;
font-family: var(--font-display);
font-size: 1rem;
font-weight: 500;
color: var(--text-dark);
letter-spacing: -0.01em;
line-height: 1.3;
}
/* Inputs list */
.clarity-inputs {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.clarity-input {
display: flex;
align-items: center;
gap: 0.875rem;
width: 100%;
padding: 0.75rem 0.875rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--r-md);
color: var(--text-dark);
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 400;
letter-spacing: -0.005em;
text-align: left;
cursor: pointer;
position: relative;
overflow: hidden;
transition:
background 280ms ease,
border-color 280ms ease,
transform 280ms var(--ease-spring),
color 200ms ease;
}
.clarity-input::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: var(--signal);
transform: scaleY(0);
transform-origin: center;
transition: transform 320ms var(--ease-spring);
}
.clarity-input-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--r-sm);
background: rgba(61, 111, 240, 0.06);
color: var(--signal-soft);
flex-shrink: 0;
transition: background 280ms ease, color 280ms ease;
}
.clarity-input-icon svg { width: 16px; height: 16px; }
.clarity-input-text { flex: 1; min-width: 0; }
.clarity-input-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
color: var(--text-dim-dark);
opacity: 0;
transform: translateX(-4px);
transition: opacity 280ms ease, transform 280ms var(--ease-spring), color 200ms ease;
}
.clarity-input-arrow svg { width: 12px; height: 12px; }
@media (hover: hover) {
.clarity-input:hover {
background: rgba(61, 111, 240, 0.06);
border-color: rgba(61, 111, 240, 0.18);
transform: translateX(2px);
}
.clarity-input:hover .clarity-input-arrow { opacity: 0.6; transform: translateX(0); color: var(--signal-soft); }
}
.clarity-input.is-active {
background: linear-gradient(90deg, rgba(61, 111, 240, 0.1), rgba(61, 111, 240, 0.02));
border-color: rgba(61, 111, 240, 0.4);
color: #fff;
}
.clarity-input.is-active::before { transform: scaleY(1); }
.clarity-input.is-active .clarity-input-icon { background: rgba(61, 111, 240, 0.18); color: var(--signal-soft); }
.clarity-input.is-active .clarity-input-arrow { opacity: 1; transform: translateX(0); color: var(--signal); }
.clarity-hint {
font-size: 0.75rem;
color: var(--text-dim-dark);
letter-spacing: 0.02em;
font-weight: 400;
margin-top: 0.25rem;
}
/* Engine — center column */
.clarity-engine {
position: relative;
width: 100%;
height: 100%;
min-height: 360px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 1.5rem 0;
gap: 1.5rem;
}
.clarity-engine-track {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1px;
height: 70%;
background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.08) 15%, rgba(255, 255, 255, 0.08) 85%, transparent 100%);
z-index: 0;
}
.clarity-engine-track-fill {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background: linear-gradient(180deg, var(--signal) 0%, var(--signal-soft) 100%);
box-shadow: 0 0 18px rgba(61, 111, 240, 0.5);
transition: height 1100ms cubic-bezier(0.4, 0, 0.2, 1);
}
.clarity-module.is-running .clarity-engine-track-fill { height: 100%; }
.clarity-engine-steps {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
position: relative;
z-index: 1;
}
.clarity-engine-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
padding: 0.625rem 0.875rem;
background: var(--graphite);
border: 1px solid var(--rim);
border-radius: var(--r-md);
min-width: 110px;
text-align: center;
position: relative;
transition:
border-color 350ms ease,
background 350ms ease,
transform 350ms var(--ease-spring),
box-shadow 350ms ease;
}
.clarity-engine-step-dot {
position: absolute;
top: -4px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--rim);
border: 1px solid rgba(61, 111, 240, 0.2);
transition: background 300ms ease, box-shadow 300ms ease, transform 300ms var(--ease-spring);
}
.clarity-engine-step-num {
font-family: var(--font-display);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.16em;
color: var(--text-dim-dark);
transition: color 300ms ease;
}
.clarity-engine-step-label {
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 500;
color: var(--text-muted-dark);
letter-spacing: -0.005em;
transition: color 300ms ease;
}
.clarity-engine-step.is-active {
background: linear-gradient(180deg, rgba(61, 111, 240, 0.18), rgba(61, 111, 240, 0.06));
border-color: rgba(61, 111, 240, 0.5);
transform: scale(1.04);
box-shadow: 0 8px 28px rgba(61, 111, 240, 0.18);
}
.clarity-engine-step.is-active .clarity-engine-step-dot {
background: var(--signal);
box-shadow: 0 0 0 4px rgba(61, 111, 240, 0.18), 0 0 14px rgba(61, 111, 240, 0.6);
transform: translateX(-50%) scale(1.15);
}
.clarity-engine-step.is-active .clarity-engine-step-num { color: var(--signal); }
.clarity-engine-step.is-active .clarity-engine-step-label { color: #fff; }
.clarity-engine-status {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.75rem;
background: rgba(61, 111, 240, 0.08);
border: 1px solid rgba(61, 111, 240, 0.2);
border-radius: 100px;
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--signal-soft);
position: relative;
z-index: 1;
}
.clarity-engine-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--signal);
animation: clarityPulse 2s ease-in-out infinite;
}
@keyframes clarityPulse {
0%, 100% { opacity: 0.4; box-shadow: 0 0 0 0 rgba(61, 111, 240, 0.4); }
50% { opacity: 1; box-shadow: 0 0 0 6px rgba(61, 111, 240, 0); }
}
@media (prefers-reduced-motion: reduce) {
.clarity-engine-status-dot { animation: none; }
.clarity-engine-track-fill { transition: none; }
.clarity-engine-step { transition: none; }
}
/* Output stack */
.clarity-output-stack {
position: relative;
flex: 1;
min-height: 320px;
}
.clarity-output-card {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
gap: 1rem;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity 400ms ease, transform 400ms var(--ease-spring);
}
.clarity-output-card.is-active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.clarity-output-status {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.75rem;
background: rgba(34, 197, 94, 0.08);
border: 1px solid rgba(34, 197, 94, 0.2);
border-radius: 100px;
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #4ade80;
align-self: flex-start;
}
.clarity-output-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}
.clarity-output-title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.4vw, 2rem);
font-weight: 400;
color: var(--text-dark);
letter-spacing: -0.025em;
line-height: 1.2;
margin: 0;
}
.clarity-output-desc {
font-size: 0.9375rem;
color: var(--text-muted-dark);
line-height: 1.65;
font-weight: 300;
margin: 0;
}
.clarity-output-meta {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 0.625rem;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.clarity-output-meta-row {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.clarity-output-meta-label {
font-size: 0.625rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-dim-dark);
}
.clarity-output-meta-value {
font-size: 0.875rem;
color: var(--text-muted-dark);
font-weight: 400;
letter-spacing: -0.005em;
}
.clarity-output-meta-value--strong {
color: var(--text-dark);
font-family: var(--font-display);
font-weight: 500;
}
/* Tablet — stack to 2 rows */
@media (max-width: 1024px) {
.clarity-module {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto;
}
.clarity-col--inputs { grid-column: 1; grid-row: 1; }
.clarity-col--output { grid-column: 2; grid-row: 1; border-left: 1px solid var(--rim); }
.clarity-col--engine {
grid-column: 1 / -1;
grid-row: 2;
border-top: 1px solid var(--rim);
border-right: none;
padding: 1.25rem 1.5rem;
min-height: auto;
}
.clarity-engine { min-height: auto; flex-direction: row; padding: 0; }
.clarity-engine-track { width: 70%; height: 1px; top: 50%; left: 50%; }
.clarity-engine-track-fill { width: 0; height: 100%; transition: width 1100ms cubic-bezier(0.4, 0, 0.2, 1); }
.clarity-module.is-running .clarity-engine-track-fill { width: 100%; height: 100%; }
.clarity-engine-steps { flex-direction: row; gap: 0.75rem; }
.clarity-engine-step-dot { top: 50%; left: -4px; transform: translateY(-50%); }
.clarity-engine-step.is-active .clarity-engine-step-dot { transform: translateY(-50%) scale(1.15); }
}
/* Mobile — vertical stack: inputs → engine → output */
@media (max-width: 768px) {
.clarity-flow { padding: var(--sp-20) 0; }
.clarity-flow-header { margin-bottom: var(--sp-12); text-align: left; padding: 0 0.25rem; }
.clarity-flow-header .section-bar { justify-content: flex-start; }
.clarity-flow-heading { font-size: clamp(1.875rem, 8vw, 2.5rem); }
.clarity-flow-sub { font-size: 0.9375rem; line-height: 1.6; margin: 0; }
.clarity-module {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
border-radius: var(--r-lg);
}
.clarity-col--inputs { grid-column: 1; grid-row: 1; border-right: none; border-bottom: 1px solid var(--rim); }
.clarity-col--engine { grid-column: 1; grid-row: 2; border-left: none; border-top: none; }
.clarity-col--output {
grid-column: 1;
grid-row: 3;
border-left: none;
border-top: 1px solid var(--rim);
}
.clarity-col { padding: 1.25rem 1rem; gap: 1rem; }
.clarity-col-header { padding-bottom: 0.75rem; }
.clarity-input { padding: 0.625rem 0.75rem; font-size: 0.8125rem; }
.clarity-input-icon { width: 28px; height: 28px; }
.clarity-input-icon svg { width: 14px; height: 14px; }
.clarity-engine { min-height: auto; padding: 0.5rem 0; }
.clarity-engine-step { min-width: 0; padding: 0.5rem 0.625rem; flex: 1; }
.clarity-engine-step-label { font-size: 0.75rem; }
.clarity-engine-steps { gap: 0.5rem; width: 100%; }
.clarity-output-stack { min-height: 260px; }
.clarity-output-title { font-size: 1.375rem; }
.clarity-output-desc { font-size: 0.875rem; }
/* Tap feedback */
.clarity-input:active { transform: scale(0.98); }
}
/* Footer meta line — under tagline */
.footer-meta {
font-size: 0.8125rem;
color: var(--text-dim-dark);
letter-spacing: 0.02em;
margin-top: 0.5rem;
font-weight: 400;
}
@media (max-width: 768px) {
.mobile-only-md { display: block; }
.desktop-only-md { display: none !important; }
.hero-heading-desktop { display: none; }
.hero-heading-mobile { display: inline; }
.hero-inner {
grid-template-columns: 1fr;
gap: 2.5rem;
min-height: auto;
padding: var(--sp-16) 0 var(--sp-20);
}
.hero-right {
display: flex !important;
min-height: 320px;
width: 100%;
padding: 0;
}
/* Bar chart — generous padding for clarity on mobile */
.hero-visual-wrap {
display: block !important;
width: calc(100% - 1rem);
max-width: none;
height: 320px;
min-height: 320px;
margin-inline: auto;
padding: 0;
overflow: hidden;
/* Remove edge fade entirely so stats and chart are fully visible */
-webkit-mask-image: none;
mask-image: none;
}
.bar-composition {
display: flex !important;
height: calc(100% - 94px);
padding: 0 1.05rem 0 0.55rem;
gap: 4px;
opacity: 1;
visibility: visible;
}
/* Stats positioned with breathing room below the chart */
.hero-stats {
position: absolute;
bottom: 1rem;
left: 0;
right: 0;
padding: 0 1.25rem;
gap: 0.75rem;
display: flex;
justify-content: space-between;
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 1rem;
}
.hero-stat {
flex: 1 1 0;
min-width: 0;
padding: 0 0.25rem;
}
.hero-stat-value {
font-size: 1.625rem;
margin-bottom: 0.375rem;
}
.hero-stat-label {
font-size: 0.625rem;
letter-spacing: 0.08em;
line-height: 1.35;
white-space: normal;
}
.hero-visual-bars-side .bar-composition {
height: calc(100% - 94px);
right: 0;
padding: 0 1.05rem 0 0.55rem;
}
.hero-stats-side {
top: 50%;
bottom: auto;
left: auto;
right: 0;
width: 38%;
flex-direction: column;
justify-content: center;
gap: 0.7rem;
padding: 0.55rem 0.25rem 0.55rem 0.75rem;
transform: translateY(-50%);
border-top: 0;
}
.hero-stats-side .hero-stat {
flex: 0 0 auto;
padding: 0.48rem 0 0.48rem 0.58rem;
}
.hero-stats-side .hero-stat::before {
left: -0.75rem;
width: 0.75rem;
}
.hero-stats-side .hero-stat::after {
left: -0.13rem;
width: 0.26rem;
}
.hero-visual-bars-side .bar-composition {
right: 0;
padding-right: 1.05rem;
}
.hero-stats-embedded {
inset: 0;
border-top: 0;
}
.hero-stat-callout {
min-width: clamp(6.9rem, 30vw, 9rem);
padding: 0.28rem 0 0.28rem 0.52rem;
}
.hero-stat-callout::before {
width: clamp(1.2rem, 5vw, 2rem);
}
.hero-stat-callout::after {
width: 0.26rem;
}
.callout-disciplines {
left: 29%;
top: 73%;
}
.callout-coverage {
left: 58%;
top: 45%;
}
.callout-tools {
left: 78%;
top: 61%;
}
.hero-stat-callout .hero-stat-value {
font-size: 1.35rem;
margin-bottom: 0;
}
.hero-stat-callout .hero-stat-label {
font-size: 0.56rem;
letter-spacing: 0.07em;
}
.hero-stats-band {
display: grid;
left: 0;
right: 0;
bottom: 0;
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: 0.82rem 0.62rem 0.74rem;
border-top: 0;
background:
linear-gradient(180deg, transparent 0%, rgba(8, 12, 20, 0.62) 28%, rgba(8, 12, 20, 0.9) 100%),
radial-gradient(ellipse at 50% 100%, rgba(126, 174, 255, 0.16), transparent 70%);
}
.hero-stats-band .hero-stat {
padding: 0;
}
.hero-stats-band .hero-stat:not(:first-child) {
padding-inline-start: 0.65rem;
}
.hero-stats-band .hero-stat-value {
font-size: 1.18rem;
margin-bottom: 0.24rem;
}
.hero-stats-band .hero-stat-label {
font-size: 0.48rem;
letter-spacing: 0.045em;
line-height: 1.16;
}
.signal-field {
inset: 0.75rem;
}
.signal-stats {
bottom: 0.9rem;
left: 0.9rem;
right: 0.9rem;
padding: 0;
border-top: 0;
}
.signal-stat {
padding-inline-start: 0.6rem;
}
.signal-node-disciplines { left: 20%; top: 39%; }
.signal-node-coverage { left: 51%; top: 28%; }
.signal-node-tools { left: 76%; top: 55%; }
.signal-orbit-1 { inset: 16% 6% 31% 5%; }
.signal-orbit-2 { inset: 29% 16% 26% 17%; }
.hero-visual-constellation {
height: 430px;
padding: 0;
}
.decision-constellation {
inset: -4% -3% 0;
}
.constellation-radar {
width: min(94vw, 24rem);
}
.constellation-ribbon {
width: clamp(12rem, 58vw, 20rem);
}
.constellation-stats {
bottom: 2%;
gap: 0.7rem;
}
.constellation-stat::before {
width: 1.8rem;
margin-bottom: 0.65rem;
}
.hero-heading {
font-size: clamp(2.25rem, 9vw, 3rem);
line-height: 1.15;
}
.hero-subline-wrap {
align-items: flex-start;
gap: 0.85rem;
max-width: 100%;
}
/* More breathing room across sections on mobile */
section { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
.container { padding-left: 1.25rem; padding-right: 1.25rem; }
/* === Mobile: What this means — visual cards === */
.mobile-what-means {
padding: 0;
}
.mobile-what-means-label {
display: block;
margin-bottom: 1rem;
font-size: 0.7rem;
letter-spacing: 0.14em;
}
.mobile-what-means-heading {
font-size: 1.625rem;
font-weight: 300;
color: var(--text-light);
letter-spacing: -0.025em;
line-height: 1.2;
margin-bottom: 1.75rem;
}
.mobile-what-means-cards {
display: flex;
flex-direction: column;
gap: 0.875rem;
margin-bottom: 1.75rem;
}
.mobile-mini-card {
background: #fff;
border: 1px solid var(--border-light);
border-radius: var(--r-md);
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.625rem;
position: relative;
overflow: hidden;
transition: transform 300ms var(--ease-spring), box-shadow 300ms ease;
}
.mobile-mini-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--signal);
}
.mobile-mini-card-icon {
width: 36px;
height: 36px;
border-radius: var(--r-sm);
background: var(--signal-faint);
display: flex;
align-items: center;
justify-content: center;
color: var(--signal);
}
.mobile-mini-card-title {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 500;
color: var(--text-light);
letter-spacing: -0.01em;
}
.mobile-mini-card-desc {
font-size: 0.875rem;
color: var(--text-muted-light);
line-height: 1.55;
font-weight: 300;
}
.mobile-what-means-cta {
display: inline-block;
margin-top: 0.5rem;
}
/* === Mobile: How Special Projects work — vertical timeline === */
.mobile-how-works {
padding: 0;
}
.mobile-how-works-label {
display: block;
margin-bottom: 1rem;
font-size: 0.7rem;
letter-spacing: 0.14em;
}
.mobile-how-works-heading {
font-size: 1.75rem;
font-weight: 300;
color: var(--text-dark);
letter-spacing: -0.025em;
line-height: 1.2;
margin-bottom: 0.875rem;
}
.mobile-how-works-intro {
font-size: 0.9375rem;
color: var(--text-muted-dark);
line-height: 1.6;
font-weight: 300;
margin-bottom: 2rem;
}
.mobile-timeline {
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
.mobile-timeline::before {
content: '';
position: absolute;
left: 19px;
top: 12px;
bottom: 12px;
width: 1px;
background: linear-gradient(180deg, var(--signal) 0%, var(--rim) 100%);
opacity: 0.4;
}
.mobile-timeline-item {
display: flex;
gap: 1rem;
padding-bottom: 1.5rem;
position: relative;
}
.mobile-timeline-item:last-child { padding-bottom: 0; }
.mobile-timeline-num {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--graphite);
border: 1px solid var(--signal);
color: var(--signal-soft);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.05em;
z-index: 1;
}
.mobile-timeline-content {
flex: 1;
padding-top: 0.375rem;
}
.mobile-timeline-title {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 500;
color: var(--text-dark);
letter-spacing: -0.01em;
margin-bottom: 0.375rem;
}
.mobile-timeline-desc {
font-size: 0.875rem;
color: var(--text-muted-dark);
line-height: 1.55;
font-weight: 300;
}
}
/* === PILLARS STRIP === */
.pillars {
border-top: 1px solid var(--rim);
border-bottom: 1px solid var(--rim);
background: var(--deep);
overflow: hidden;
}
.pillars-inner {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.pillar-item {
padding: var(--sp-6) var(--sp-6);
border-right: 1px solid var(--rim);
display: flex;
flex-direction: column;
gap: var(--sp-3);
transition: background var(--dur-base) var(--ease-out);
cursor: default;
}
.pillar-item:last-child { border-right: none; }
.pillar-item:hover { background: var(--graphite); }
.pillar-num {
font-size: 0.65rem;
font-weight: 600;
color: var(--signal);
letter-spacing: 0.08em;
font-family: var(--font-body);
}
.pillar-name {
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 400;
color: var(--text-dark);
letter-spacing: -0.01em;
line-height: 1.25;
}
/* === ABOUT PREVIEW === */
.about-preview {
padding: var(--sp-32) 0;
background: var(--parchment);
}
.about-preview-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(3rem, 6vw, 8rem);
align-items: center;
}
.about-preview-left {
position: relative;
}
.about-preview-number {
font-family: var(--font-display);
font-size: clamp(6rem, 14vw, 12rem);
font-weight: 300;
color: var(--border-light);
line-height: 0.9;
letter-spacing: -0.06em;
margin-bottom: var(--sp-6);
user-select: none;
}
.about-label-row {
display: flex;
align-items: center;
gap: 0.6rem;
}
.about-logo-bars {
display: flex;
align-items: flex-end;
gap: 2px;
}
.about-logo-bar {
display: block;
width: 3px;
border-radius: 1px 1px 0 0;
background: var(--signal);
}
.ab1 { height: 6px; }
.ab2 { height: 10px; }
.ab3 { height: 14px; }
.about-preview-right {
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
.about-preview-heading {
font-size: clamp(1.75rem, 3vw, 2.5rem);
color: var(--text-light);
font-weight: 300;
letter-spacing: -0.03em;
}
.about-preview-body {
font-size: 1.0625rem;
color: var(--text-muted-light);
line-height: 1.75;
font-weight: 300;
}
/* === DESIGN YOUR ENGAGEMENT === */
/* === ENGAGEMENT FLOW === */
.engagement-flow {
padding: var(--sp-32) 0;
background:
radial-gradient(circle at 18% 12%, rgba(61, 111, 240, 0.12), transparent 34%),
linear-gradient(180deg, #0d1117 0%, #111722 48%, #0d1117 100%);
position: relative;
overflow: hidden;
}
.engagement-bg {
position: absolute;
inset: 0;
background:
linear-gradient(rgba(138, 180, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(138, 180, 255, 0.03) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: radial-gradient(circle at 50% 36%, black 0%, transparent 72%);
opacity: 0.75;
pointer-events: none;
}
/* Header */
.engagement-header {
margin-bottom: 3rem;
text-align: center;
position: relative;
z-index: 1;
}
.engagement-header .section-bar {
display: flex;
justify-content: center;
}
.label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted-dark, #8A91A4);
}
.engagement-main-heading {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 300;
color: var(--text-dark, #EBE8E2);
font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
line-height: 1.1;
margin: 1.5rem 0 1rem;
letter-spacing: -0.02em;
}
.engagement-subheading {
font-size: 1.0625rem;
color: var(--text-muted-dark, #8A91A4);
line-height: 1.75;
font-weight: 300;
max-width: 700px;
margin: 0 auto;
}
/* Two-Step Stacked Configurator */
.engagement-configurator {
display: grid;
grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1.18fr);
gap: 0;
margin: 3.5rem 0;
position: relative;
z-index: 100;
border: 1px solid rgba(138, 180, 255, 0.16);
border-radius: 0.75rem;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 28%),
linear-gradient(135deg, rgba(20, 25, 35, 0.88), rgba(13, 17, 23, 0.76));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 0 0 1px rgba(61, 111, 240, 0.04),
0 26px 70px rgba(0, 0, 0, 0.32),
0 0 56px rgba(61, 111, 240, 0.08);
overflow: visible;
}
.engagement-configurator::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 1.25rem;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(138, 180, 255, 0.58), transparent);
opacity: 0.75;
pointer-events: none;
}
.engagement-configurator::after {
content: "";
position: absolute;
inset-block-start: -1px;
inset-inline-start: 2.5rem;
width: 8.5rem;
height: 1px;
background: linear-gradient(90deg, rgba(61, 111, 240, 0), rgba(94, 139, 245, 0.9), rgba(61, 111, 240, 0));
filter: blur(0.5px);
pointer-events: none;
}
.engagement-col {
display: flex;
flex-direction: column;
padding: clamp(1.5rem, 2.6vw, 2.25rem);
}
.engagement-col--services {
border-inline-end: 1px solid rgba(138, 180, 255, 0.12);
}
.engagement-col--support {
background:
radial-gradient(circle at 84% 8%, rgba(61, 111, 240, 0.12), transparent 32%);
}
.engagement-step {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.engagement-step-num {
display: block;
font-size: 0.95rem;
font-weight: 300;
color: #8ab4ff;
font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
line-height: 1;
letter-spacing: 0;
}
.engagement-step-label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(235, 232, 226, 0.74);
margin-bottom: 0.25rem;
}
/* Service Selector Dropdown */
.service-selector-wrapper {
position: relative;
}
.service-selector-native {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.service-selector-button {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.2rem;
border: 1px solid rgba(138, 180, 255, 0.18);
border-radius: 0.55rem;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008)),
linear-gradient(135deg, rgba(20, 25, 35, 0.92) 0%, rgba(13, 17, 23, 0.78) 100%);
color: var(--text-dark, #EBE8E2);
font-size: 1.0625rem;
font-weight: 500;
cursor: pointer;
transition:
transform 220ms var(--ease-out),
border-color 220ms var(--ease-out),
box-shadow 220ms var(--ease-out),
background 220ms var(--ease-out);
font-family: inherit;
text-align: start;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
[dir="rtl"] .service-selector-button {
text-align: end;
}
.service-selector-button:hover {
border-color: rgba(138, 180, 255, 0.42);
background:
radial-gradient(circle at 18% 0%, rgba(94, 139, 245, 0.13), transparent 36%),
linear-gradient(135deg, rgba(27, 34, 53, 0.96) 0%, rgba(13, 17, 23, 0.82) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 12px 30px rgba(0, 0, 0, 0.22),
0 0 24px rgba(61, 111, 240, 0.16);
transform: translateY(-2px);
}
.service-selector-button:focus-visible {
outline: none;
border-color: var(--signal, #3D6FF0);
box-shadow: 0 0 0 3px rgba(61, 111, 240, 0.2);
}
.service-selector-text {
display: block;
flex: 1;
text-align: start;
}
[dir="rtl"] .service-selector-text {
text-align: end;
}
.service-selector-chevron {
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
color: var(--text-muted-dark, #8A91A4);
flex-shrink: 0;
transition: transform 300ms var(--ease-out);
}
.service-selector-chevron svg {
width: 1rem;
height: 1rem;
}
.service-selector-button[aria-expanded="true"] .service-selector-chevron {
transform: scaleY(-1);
}
/* Dropdown Menu */
.service-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 0.5rem;
background: linear-gradient(135deg, rgba(13, 17, 23, 1) 0%, rgba(8, 11, 16, 0.98) 100%);
border: 1px solid rgba(61, 111, 240, 0.3);
border-radius: 0.55rem;
max-height: 60vh;
overflow-y: auto;
z-index: 1000;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(61, 111, 240, 0.15);
animation: dropdownFadeIn 200ms var(--ease-out);
}
[dir="rtl"] .service-dropdown-menu {
left: auto;
right: 0;
}
.service-menu-item {
width: 100%;
padding: 1rem 1.5rem;
border: none;
background: transparent;
color: var(--text-dark, #EBE8E2);
font-size: 1rem;
font-weight: 400;
cursor: pointer;
text-align: start;
transition: all 200ms var(--ease-out);
font-family: inherit;
display: block;
}
[dir="rtl"] .service-menu-item {
text-align: end;
}
.service-menu-item:hover {
background: rgba(61, 111, 240, 0.1);
color: var(--signal, #3D6FF0);
}
.service-menu-item[aria-selected="true"] {
background: rgba(61, 111, 240, 0.15);
color: var(--signal, #3D6FF0);
font-weight: 500;
}
.service-menu-item:focus-visible {
outline: none;
background: rgba(61, 111, 240, 0.12);
color: var(--signal, #3D6FF0);
}
/* Support Type Cards */
.support-types {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.8rem;
}
.support-type-card {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1.25rem 1.1rem;
border: 1px solid rgba(138, 180, 255, 0.15);
border-radius: 0.55rem;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
linear-gradient(135deg, rgba(20, 25, 35, 0.72) 0%, rgba(13, 17, 23, 0.58) 100%);
color: var(--text-dark, #EBE8E2);
cursor: pointer;
transition:
transform 220ms var(--ease-out),
border-color 220ms var(--ease-out),
box-shadow 220ms var(--ease-out),
background 220ms var(--ease-out);
font-family: inherit;
text-align: center;
position: relative;
overflow: hidden;
min-height: 10.75rem;
}
.support-type-card::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(110deg, transparent 18%, rgba(138, 180, 255, 0.13) 48%, transparent 78%),
radial-gradient(circle at 50% 0%, rgba(61, 111, 240, 0.12), transparent 48%);
opacity: 0;
transform: translateX(-120%) skewX(-12deg);
transition:
opacity 220ms var(--ease-out),
transform 620ms var(--ease-out);
pointer-events: none;
}
.support-type-card:hover {
border-color: rgba(138, 180, 255, 0.38);
background:
radial-gradient(circle at 50% 0%, rgba(94, 139, 245, 0.14), transparent 44%),
linear-gradient(135deg, rgba(27, 34, 53, 0.86) 0%, rgba(13, 17, 23, 0.68) 100%);
box-shadow:
0 14px 30px rgba(0, 0, 0, 0.26),
0 0 26px rgba(61, 111, 240, 0.14);
transform: translateY(-3px);
}
.support-type-card:hover::before {
opacity: 1;
transform: translateX(120%) skewX(-12deg);
}
.support-type-card:focus-visible {
outline: none;
border-color: var(--signal, #3D6FF0);
box-shadow: 0 0 0 3px rgba(61, 111, 240, 0.2);
}
.support-type-card.active {
border-color: rgba(138, 180, 255, 0.56);
background:
radial-gradient(circle at 50% 0%, rgba(94, 139, 245, 0.18), transparent 45%),
linear-gradient(135deg, rgba(61, 111, 240, 0.16) 0%, rgba(20, 25, 35, 0.72) 100%);
box-shadow:
0 0 30px rgba(61, 111, 240, 0.2),
inset 0 0 0 1px rgba(138, 180, 255, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.support-type-card.active::before {
opacity: 1;
}
.support-type-icon {
width: 2.35rem;
height: 2.35rem;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted-dark, #8A91A4);
transition:
color 220ms var(--ease-out),
transform 220ms var(--ease-out),
filter 220ms var(--ease-out);
}
.support-type-card.active .support-type-icon {
color: #8ab4ff;
filter: drop-shadow(0 0 14px rgba(61, 111, 240, 0.45));
}
.support-type-card:hover .support-type-icon {
transform: translateY(-2px);
}
.support-type-icon svg {
width: 100%;
height: 100%;
}
.support-type-title {
font-size: 1.0625rem;
font-weight: 600;
color: var(--text-dark, #EBE8E2);
font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
letter-spacing: -0.01em;
line-height: 1.2;
}
.support-type-desc {
font-size: 0.8125rem;
color: var(--text-muted-dark, #8A91A4);
line-height: 1.5;
font-weight: 300;
}
/* Output Panel */
.engagement-output {
margin-top: 2rem;
padding: clamp(1.75rem, 3vw, 2.4rem);
border: 1px solid rgba(138, 180, 255, 0.16);
border-radius: 0.75rem;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 34%),
linear-gradient(135deg, rgba(20, 25, 35, 0.72) 0%, rgba(13, 17, 23, 0.62) 100%);
position: relative;
z-index: 1;
animation: fadeInUp 400ms var(--ease-out);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.07),
0 18px 54px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
.engagement-output::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 1.25rem;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(138, 180, 255, 0.38), transparent);
pointer-events: none;
}
.engagement-output-block {
margin-bottom: 2rem;
}
.engagement-output-block:last-child {
margin-bottom: 0;
}
.engagement-output-block-label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted-dark, #8A91A4);
margin-bottom: 0.625rem;
}
.engagement-output-block-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-dark, #EBE8E2);
font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
margin-bottom: 0.75rem;
letter-spacing: -0.01em;
line-height: 1.3;
}
.engagement-output-block-desc {
font-size: 1rem;
color: var(--text-muted-dark, #8A91A4);
line-height: 1.6;
font-weight: 300;
margin-bottom: 1rem;
}
.engagement-output-list {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 0;
margin: 0;
list-style: none;
}
.engagement-output-list li {
display: flex;
gap: 0.75rem;
font-size: 0.95rem;
color: var(--text-muted-dark, #8A91A4);
line-height: 1.5;
}
[dir="rtl"] .engagement-output-list li {
direction: rtl;
text-align: right;
}
[dir="rtl"] .engagement-output,
[dir="rtl"] .engagement-output-block,
[dir="rtl"] .engagement-output-block-label,
[dir="rtl"] .engagement-output-block-title,
[dir="rtl"] .engagement-output-block-desc {
text-align: right;
}
.engagement-output-list li::before {
content: "–";
color: var(--signal, #3D6FF0);
font-weight: 600;
flex-shrink: 0;
}
/* Animations */
@keyframes dropdownFadeIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* === RESPONSIVE === */
@media (max-width: 1200px) {
.support-types {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1024px) {
.engagement-configurator {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.engagement-col--services {
border-inline-end: none;
border-bottom: 1px solid rgba(138, 180, 255, 0.12);
}
.engagement-subheading {
font-size: 1rem;
}
}
@media (max-width: 768px) {
.engagement-flow {
padding: var(--sp-24) 0;
}
.engagement-header {
margin-bottom: 2.5rem;
}
.engagement-main-heading {
font-size: clamp(1.5rem, 4vw, 2rem);
}
.engagement-subheading {
font-size: 0.9375rem;
}
.engagement-configurator {
gap: 0;
margin: 3rem 0;
}
.engagement-step-num {
font-size: 2rem;
}
.support-types {
grid-template-columns: repeat(2, 1fr);
gap: 0.875rem;
}
.support-type-card {
padding: 1.25rem 1rem;
min-height: 10rem;
}
.support-type-title {
font-size: 1rem;
}
.engagement-output {
margin-top: 2.5rem;
padding: 2rem;
}
.engagement-output-block {
margin-bottom: 1.75rem;
}
.engagement-output-block-title {
font-size: 1.125rem;
margin-bottom: 0.625rem;
}
.engagement-output-block-desc {
font-size: 0.95rem;
margin-bottom: 0.875rem;
}
.engagement-output-list {
gap: 0.5rem;
}
.engagement-output-list li {
font-size: 0.9rem;
}
}
@media (max-width: 640px) {
.engagement-header {
margin-bottom: 2rem;
}
.engagement-main-heading {
margin: 1rem 0 0.75rem;
}
.engagement-configurator {
gap: 0;
margin: 2.5rem 0;
}
.support-types {
grid-template-columns: repeat(2, 1fr);
}
.support-type-card {
padding: 1.25rem;
gap: 0.625rem;
min-height: auto;
}
.support-type-icon {
width: 2.25rem;
height: 2.25rem;
}
.service-selector-button {
padding: 1rem 1.25rem;
font-size: 1rem;
}
.engagement-output {
padding: 1.5rem;
margin-top: 2rem;
}
.engagement-output-block {
margin-bottom: 1.5rem;
}
.engagement-output-block-title {
font-size: 1rem;
}
.engagement-output-block-desc {
font-size: 0.9rem;
}
.engagement-output-block-label {
font-size: 0.7rem;
}
}
/* === SERVICES PREVIEW === */
.services-preview {
padding: var(--sp-32) 0;
background: var(--ink);
}
.services-preview-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: var(--sp-16);
gap: 2rem;
}
.services-preview-heading {
font-size: clamp(1.875rem, 3vw, 3rem);
color: var(--text-dark);
font-weight: 300;
letter-spacing: -0.03em;
max-width: 460px;
}
.service-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5px;
background: var(--rim);
border: 1px solid var(--rim);
border-radius: var(--r-md);
overflow: hidden;
}
.service-card {
background: var(--deep);
padding: var(--sp-8);
display: flex;
flex-direction: column;
gap: var(--sp-4);
transition:
background 250ms var(--ease-out),
box-shadow 250ms var(--ease-out);
position: relative;
overflow: hidden;
contain: layout style;
}
.service-card:hover {
background: var(--graphite);
}
.service-card-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--r-sm);
background: var(--signal-faint);
border: 1px solid var(--signal-dim);
flex-shrink: 0;
margin-bottom: var(--sp-2);
}
.service-card-icon svg {
width: 16px;
height: 16px;
color: var(--signal-soft);
}
.service-card-title {
font-family: var(--font-display);
font-size: 1.0625rem;
font-weight: 500;
color: var(--text-dark);
letter-spacing: -0.015em;
}
.service-card-desc {
font-size: 0.875rem;
color: var(--text-muted-dark);
line-height: 1.65;
font-weight: 300;
flex: 1;
}
.service-card-link {
font-size: 0.8rem;
font-weight: 500;
color: var(--signal-soft);
display: flex;
align-items: center;
gap: 0.35rem;
margin-top: var(--sp-2);
transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.service-card:hover .service-card-link {
gap: 0.6rem;
color: var(--bar-1);
}
/* === WHY QUANTA === */
.why-section {
padding: var(--sp-32) 0;
background: var(--deep);
}
.why-header {
text-align: center;
max-width: 560px;
margin: 0 auto var(--sp-16);
}
.why-heading {
font-size: clamp(1.875rem, 3vw, 3rem);
color: var(--text-dark);
font-weight: 300;
letter-spacing: -0.03em;
margin-top: var(--sp-4);
}
.why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5px;
background: var(--rim);
border: 1px solid var(--rim);
border-radius: var(--r-md);
overflow: hidden;
}
.why-item {
background: var(--graphite);
padding: var(--sp-8) var(--sp-8);
display: flex;
flex-direction: column;
gap: var(--sp-4);
transition: background var(--dur-base) var(--ease-out);
}
.why-item:hover { background: #202840; }
.why-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--r-sm);
background: var(--signal-faint);
border: 1px solid var(--signal-dim);
margin-bottom: var(--sp-2);
}
.why-icon svg {
width: 18px;
height: 18px;
color: var(--signal-soft);
}
.why-title {
font-family: var(--font-display);
font-size: 1.0625rem;
font-weight: 500;
color: var(--text-dark);
letter-spacing: -0.015em;
}
.why-desc {
font-size: 0.875rem;
color: var(--text-muted-dark);
line-height: 1.65;
font-weight: 300;
}
/* === SPECIAL PROJECTS PREVIEW === */
.special-preview {
padding: var(--sp-32) 0;
background: var(--ink);
position: relative;
overflow: hidden;
}
.special-preview::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 60% at 80% 50%, rgba(31, 69, 176, 0.12) 0%, transparent 60%),
linear-gradient(rgba(61, 111, 240, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(61, 111, 240, 0.025) 1px, transparent 1px);
background-size: auto, 60px 60px, 60px 60px;
}
.special-preview-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(3rem, 6vw, 8rem);
align-items: center;
}
.special-preview-right {
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
.special-preview-heading {
font-size: clamp(1.875rem, 3vw, 3rem);
color: var(--text-dark);
font-weight: 300;
letter-spacing: -0.03em;
}
.special-preview-body {
font-size: 1.0625rem;
color: var(--text-muted-dark);
line-height: 1.75;
font-weight: 300;
}
.special-capabilities {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--rim);
border-radius: var(--r-md);
overflow: hidden;
}
.special-cap-item {
padding: var(--sp-5) var(--sp-6);
border-bottom: 1px solid var(--rim);
display: flex;
align-items: center;
gap: var(--sp-4);
transition: background var(--dur-fast) var(--ease-out);
}
.special-cap-item:last-child { border-bottom: none; }
.special-cap-item:hover { background: var(--graphite); }
.special-cap-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--signal);
flex-shrink: 0;
}
.special-cap-text {
font-size: 0.9375rem;
color: var(--text-muted-dark);
font-weight: 300;
}
/* === CTA BANNER === */
.cta-banner {
padding: var(--sp-24) 0;
background: linear-gradient(135deg, rgba(20, 30, 60, 0.92) 0%, rgba(13, 17, 23, 0.95) 100%),
url('../images/bahrain-skyline.jpg') center top / cover no-repeat;
border-top: 1px solid var(--rim);
position: relative;
overflow: hidden;
}
.cta-banner::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 50% 120% at 50% 100%, rgba(61, 111, 240, 0.08) 0%, transparent 65%);
pointer-events: none;
}
.cta-banner-inner {
position: relative;
z-index: 1;
text-align: center;
max-width: 640px;
margin: 0 auto;
}
.cta-banner-eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: var(--sp-6);
}
.cta-banner-eyebrow-line {
width: 24px;
height: 1px;
background: var(--signal);
}
.cta-banner-heading {
font-size: clamp(2rem, 4vw, 3.5rem);
color: var(--text-dark);
font-weight: 300;
letter-spacing: -0.035em;
margin-bottom: var(--sp-4);
}
.cta-banner-sub {
font-size: 1.0625rem;
color: var(--text-muted-dark);
margin-bottom: var(--sp-10);
font-weight: 300;
}
.cta-banner-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
/* === FOOTER === */
.site-footer {
background: var(--ink);
border-top: 1px solid var(--rim);
padding: var(--sp-16) 0 var(--sp-8);
}
.footer-inner {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 3rem;
padding-bottom: var(--sp-12);
border-bottom: 1px solid var(--rim);
margin-bottom: var(--sp-8);
}
.footer-brand {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.footer-tagline {
font-size: 0.875rem;
color: var(--text-muted-dark);
line-height: 1.6;
max-width: 240px;
font-weight: 300;
}
.footer-col-title {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-dim-dark);
margin-bottom: var(--sp-5);
}
.footer-links {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.footer-link {
font-size: 0.875rem;
color: var(--text-muted-dark);
transition: color var(--dur-fast) var(--ease-out);
font-weight: 300;
}
.footer-link:hover { color: var(--text-dark); }
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.footer-copyright {
font-size: 0.8rem;
color: var(--text-dim-dark);
font-weight: 300;
}
.footer-legal {
display: flex;
gap: 1.5rem;
}
.footer-legal-link {
font-size: 0.8rem;
color: var(--text-dim-dark);
transition: color var(--dur-fast) var(--ease-out);
}
.footer-legal-link:hover { color: var(--text-muted-dark); }
/* ===========================
ABOUT PAGE
=========================== */
.page-hero {
padding: calc(68px + var(--sp-24)) 0 var(--sp-24);
background: var(--ink);
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(61, 111, 240, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(61, 111, 240, 0.03) 1px, transparent 1px);
background-size: 80px 80px;
}
.page-hero-inner {
position: relative;
z-index: 1;
max-width: 760px;
}
.page-hero-heading {
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 300;
color: var(--text-dark);
letter-spacing: -0.04em;
margin-bottom: var(--sp-6);
}
.page-hero-sub {
font-size: clamp(1rem, 1.5vw, 1.1875rem);
color: var(--text-muted-dark);
line-height: 1.75;
font-weight: 300;
max-width: 580px;
}
/* Contact Hero — Two Column Layout */
/* Contact hero decision field */
/* Contact Hero - Two Column Layout */
.contact-hero {
min-height: min(760px, 92vh);
display: flex;
align-items: center;
}
.contact-hero .container {
position: relative;
z-index: 1;
}
.contact-hero-inner {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.78fr);
align-items: center;
gap: clamp(2.5rem, 6vw, 7rem);
}
.contact-hero-content {
position: relative;
z-index: 2;
max-width: 680px;
}
.contact-hero-chart {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
padding-block-start: clamp(1rem, 3vw, 3rem);
}
.contact-hero-chart::before {
content: "";
position: absolute;
inset: 9% 4%;
background: radial-gradient(circle at 50% 45%, rgba(61, 111, 240, 0.2), transparent 58%);
filter: blur(22px);
opacity: 0.85;
pointer-events: none;
}
html[dir="rtl"] .contact-hero-content {
grid-column: 2;
text-align: right;
}
html[dir="rtl"] .contact-hero-chart {
grid-column: 1;
grid-row: 1;
}
.decision-field {
position: relative;
width: min(100%, 520px);
aspect-ratio: 1.28 / 1;
margin-inline: auto;
overflow: hidden;
border-radius: var(--r-md);
isolation: isolate;
background:
radial-gradient(ellipse 58% 48% at 68% 32%, rgba(61, 111, 240, 0.24), transparent 62%),
linear-gradient(145deg, rgba(8, 12, 20, 0.18), rgba(20, 30, 50, 0.08));
transform: perspective(900px) rotateX(58deg) rotateZ(-14deg);
transform-origin: 50% 58%;
transform-style: preserve-3d;
animation:
decisionFieldIn 900ms var(--ease-out) backwards,
decisionFieldOrbit 18s ease-in-out 950ms infinite;
}
.decision-field-grid {
position: absolute;
inset: 12%;
border: 1px solid rgba(138, 180, 255, 0.12);
background-image:
linear-gradient(rgba(138, 180, 255, 0.10) 1px, transparent 1px),
linear-gradient(90deg, rgba(138, 180, 255, 0.10) 1px, transparent 1px);
background-size: 42px 42px;
transform: translateZ(-28px);
opacity: 0.46;
}
.decision-field-plane {
position: absolute;
inset: 20% 12% 18%;
border: 1px solid rgba(138, 180, 255, 0.22);
background: linear-gradient(135deg, rgba(13, 17, 27, 0.82), rgba(25, 38, 68, 0.26));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 24px 70px rgba(0, 0, 0, 0.28);
}
.plane-back {
inset: 14% 20% 30% 6%;
opacity: 0.38;
transform: translateZ(-44px) translateY(-18px);
}
.plane-front {
transform: translateZ(22px);
}
.decision-path {
position: absolute;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(138, 180, 255, 0.72), transparent);
transform-origin: left center;
opacity: 0.72;
animation: decisionPathPulse 3.8s ease-in-out infinite;
}
.path-1 { width: 48%; left: 14%; top: 33%; transform: rotate(16deg); }
.path-2 { width: 54%; left: 20%; top: 57%; transform: rotate(-10deg); animation-delay: 0.6s; }
.path-3 { width: 38%; left: 42%; top: 44%; transform: rotate(28deg); animation-delay: 1.2s; }
.decision-node {
position: absolute;
width: clamp(8px, 1.6vw, 13px);
height: clamp(8px, 1.6vw, 13px);
border: 1px solid rgba(138, 180, 255, 0.72);
background: rgba(13, 17, 27, 0.88);
box-shadow: 0 0 18px rgba(61, 111, 240, 0.28);
transform: translate(-50%, -50%);
animation: decisionNodeResolve 4.2s ease-in-out infinite;
}
.node-1 { left: 18%; top: 35%; }
.node-2 { left: 42%; top: 42%; animation-delay: 0.3s; }
.node-3 { left: 72%; top: 50%; animation-delay: 0.6s; }
.node-4 { left: 30%; top: 63%; animation-delay: 0.9s; }
.node-5 { left: 84%; top: 28%; animation-delay: 1.2s; }
.decision-output {
position: absolute;
right: 8%;
bottom: 14%;
width: 5px;
border-radius: 3px 3px 1px 1px;
transform-origin: bottom;
background: var(--bar-2);
box-shadow: 0 0 18px rgba(61, 111, 240, 0.24);
animation: decisionOutputLift 3.6s var(--ease-out) infinite;
}
.output-1 { height: 22%; right: 24%; background: var(--bar-1); animation-delay: 0.1s; }
.output-2 { height: 34%; right: 18%; background: var(--bar-2); animation-delay: 0.25s; }
.output-3 { height: 48%; right: 12%; background: var(--bar-3); animation-delay: 0.4s; }
.output-4 { height: 28%; right: 6%; background: var(--signal-soft); animation-delay: 0.55s; }
.decision-field-axis {
position: absolute;
background: linear-gradient(90deg, transparent, rgba(235, 232, 226, 0.24), transparent);
opacity: 0.58;
}
.axis-x { left: 10%; right: 10%; bottom: 18%; height: 1px; transform: translateZ(35px); }
.axis-y { top: 16%; bottom: 14%; left: 16%; width: 1px; transform: translateZ(35px); }
.decision-field-scan {
position: absolute;
inset: 14% 10%;
background: linear-gradient(90deg, transparent, rgba(126, 174, 255, 0.16), transparent);
width: 28%;
transform: translateX(-120%) translateZ(50px);
animation: decisionScan 5.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes decisionFieldIn {
from { opacity: 0; transform: perspective(900px) rotateX(58deg) rotateZ(-14deg) translateY(18px); filter: blur(8px); }
to { opacity: 1; transform: perspective(900px) rotateX(58deg) rotateZ(-14deg) translateY(0); filter: blur(0); }
}
@keyframes decisionFieldOrbit {
0%, 100% {
transform: perspective(900px) rotateX(58deg) rotateY(0deg) rotateZ(-14deg) translateY(0);
}
25% {
transform: perspective(900px) rotateX(56deg) rotateY(7deg) rotateZ(-11deg) translateY(-3px);
}
50% {
transform: perspective(900px) rotateX(60deg) rotateY(0deg) rotateZ(-8deg) translateY(0);
}
75% {
transform: perspective(900px) rotateX(56deg) rotateY(-7deg) rotateZ(-17deg) translateY(3px);
}
}
@keyframes decisionPathPulse {
0%, 100% { opacity: 0.42; }
50% { opacity: 0.86; }
}
@keyframes decisionNodeResolve {
0%, 100% { opacity: 0.58; transform: translate(-50%, -50%) scale(0.92); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes decisionOutputLift {
0%, 100% { transform: scaleY(0.76); opacity: 0.72; }
50% { transform: scaleY(1); opacity: 1; }
}
@keyframes decisionScan {
0% { transform: translateX(-135%) translateZ(50px); opacity: 0; }
18% { opacity: 1; }
68% { opacity: 0.85; }
100% { transform: translateX(420%) translateZ(50px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.decision-field,
.decision-path,
.decision-node,
.decision-output,
.decision-field-scan {
animation: none !important;
}
}
@media (max-width: 768px) {
.contact-hero {
min-height: auto;
align-items: flex-start;
}
.contact-hero-inner {
grid-template-columns: 1fr;
gap: var(--sp-10);
}
html[dir="rtl"] .contact-hero-inner {
grid-template-columns: 1fr;
}
html[dir="rtl"] .contact-hero-content,
.contact-hero-content,
.contact-hero-chart,
html[dir="rtl"] .contact-hero-chart {
grid-column: auto;
grid-row: auto;
}
.contact-hero-chart {
padding-block-start: 0;
}
.decision-field {
width: min(94%, 390px);
transform: perspective(760px) rotateX(52deg) rotateZ(-12deg) translateY(-8px);
animation:
decisionFieldInMobile 900ms var(--ease-out) backwards,
decisionFieldOrbitMobile 18s ease-in-out 950ms infinite;
}
}
@media (max-width: 640px) {
.decision-field {
width: min(98%, 350px);
transform: perspective(700px) rotateX(48deg) rotateZ(-10deg) translateY(-10px);
}
}
@keyframes decisionFieldInMobile {
from { opacity: 0; transform: perspective(760px) rotateX(52deg) rotateZ(-12deg) translateY(10px); filter: blur(8px); }
to { opacity: 1; transform: perspective(760px) rotateX(52deg) rotateZ(-12deg) translateY(-8px); filter: blur(0); }
}
@keyframes decisionFieldOrbitMobile {
0%, 100% {
transform: perspective(760px) rotateX(52deg) rotateY(0deg) rotateZ(-12deg) translateY(-8px);
}
50% {
transform: perspective(760px) rotateX(50deg) rotateY(6deg) rotateZ(-8deg) translateY(-10px);
}
}
/* Quant dictionary definition */
.quant-definition {
position: relative;
overflow: hidden;
padding: var(--sp-24) 0 var(--sp-32);
background:
radial-gradient(circle at 82% 48%, rgba(61, 111, 240, 0.28), transparent 31%),
radial-gradient(circle at 18% 20%, rgba(138, 180, 255, 0.08), transparent 28%),
linear-gradient(145deg, #060a12 0%, var(--ink) 46%, #111b32 100%);
}
.quant-definition::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(138, 180, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(138, 180, 255, 0.025) 1px, transparent 1px);
background-size: 96px 96px;
mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
pointer-events: none;
}
.quant-definition-header {
position: relative;
z-index: 1;
max-width: 720px;
margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.quant-definition-heading {
color: var(--text-dark);
font-size: clamp(2.35rem, 4.6vw, 4.7rem);
font-weight: 300;
letter-spacing: -0.04em;
margin-bottom: var(--sp-4);
}
.quant-definition-sub {
max-width: 560px;
color: rgba(235, 232, 226, 0.62);
font-family: var(--font-display);
font-size: clamp(1.05rem, 1.7vw, 1.35rem);
font-weight: 300;
line-height: 1.45;
letter-spacing: -0.015em;
}
.dictionary-entry {
position: relative;
z-index: 1;
width: min(100%, 900px);
margin: 0 auto;
border: 1px solid rgba(138, 180, 255, 0.24);
border-radius: var(--r-md);
background:
linear-gradient(145deg, rgba(6, 10, 18, 0.88) 0%, rgba(20, 25, 35, 0.76) 54%, rgba(18, 30, 55, 0.7) 100%);
box-shadow:
0 34px 90px rgba(0, 0, 0, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.035);
backdrop-filter: blur(18px);
transition:
border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
overflow: hidden;
--quant-symbol-opacity: 0.22;
--quant-symbol-color: rgba(184, 200, 228, 0.84);
--quant-symbol-duration: 1120ms;
--quant-symbol-drift: 10px;
}
.dictionary-entry::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
background: radial-gradient(circle at 82% 10%, rgba(126, 174, 255, 0.2), transparent 36%);
opacity: 0;
transition: opacity var(--dur-base) var(--ease-out);
pointer-events: none;
}
.dictionary-entry:hover {
border-color: rgba(138, 180, 255, 0.42);
box-shadow:
0 36px 96px rgba(0, 0, 0, 0.38),
0 0 38px rgba(61, 111, 240, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.dictionary-entry:hover::before { opacity: 1; }
.dictionary-entry--interactive {
cursor: pointer;
}
.dictionary-entry--interactive.is-expanded {
border-color: rgba(138, 180, 255, 0.44);
box-shadow:
0 36px 96px rgba(0, 0, 0, 0.38),
0 0 42px rgba(61, 111, 240, 0.13),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.dictionary-symbol-layer {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
opacity: 0;
transition: opacity 520ms var(--ease-out);
}
.dictionary-entry--interactive.is-expanded .dictionary-symbol-layer {
opacity: 1;
}
.dictionary-symbol {
position: absolute;
inset-inline-start: var(--symbol-x);
inset-block-start: var(--symbol-y);
color: var(--quant-symbol-color);
font-family: var(--font-display);
font-size: var(--symbol-size);
font-style: italic;
font-weight: 300;
line-height: 1;
letter-spacing: 0;
opacity: 0;
transform:
translate3d(var(--symbol-from-x), var(--symbol-from-y), 0)
rotate(var(--symbol-from-rotation))
scale(0.86);
filter: blur(7px);
text-shadow: 0 0 18px rgba(126, 174, 255, 0.16);
transition:
opacity var(--quant-symbol-duration) var(--ease-out),
transform var(--quant-symbol-duration) var(--ease-out),
filter var(--quant-symbol-duration) var(--ease-out);
transition-delay: var(--symbol-delay);
will-change: opacity, transform, filter;
}
.dictionary-entry--interactive.is-expanded .dictionary-symbol {
opacity: var(--quant-symbol-opacity);
filter: blur(0);
transform:
translate3d(0, 0, 0)
rotate(var(--symbol-rotation))
scale(1);
animation:
dictionarySymbolResolve 900ms var(--ease-out) var(--symbol-delay) both,
dictionarySymbolDrift 7.5s ease-in-out calc(var(--symbol-delay) + 780ms) infinite alternate;
}
.dictionary-symbol::after {
content: '';
position: absolute;
inset: -0.25em;
background: linear-gradient(105deg, transparent 20%, rgba(126, 174, 255, 0.4) 48%, transparent 72%);
opacity: 0;
transform: translateX(-130%) skewX(-12deg);
pointer-events: none;
}
.dictionary-entry--interactive.is-expanded .dictionary-symbol::after {
animation: dictionarySymbolSweep 820ms var(--ease-out) var(--symbol-delay) both;
}
.dictionary-entry-inner {
position: relative;
z-index: 1;
padding: clamp(2rem, 4.8vw, 4rem);
}
.dictionary-word {
color: var(--text-dark);
font-family: var(--font-display);
font-size: clamp(4.25rem, 9vw, 7rem);
font-style: italic;
font-weight: 300;
line-height: 0.95;
letter-spacing: -0.045em;
margin-bottom: var(--sp-5);
filter: blur(14px);
transition:
opacity 900ms var(--ease-out),
transform 900ms var(--ease-out),
filter 900ms var(--ease-out);
}
.dictionary-word.revealed { filter: blur(0); }
.dictionary-pronunciation {
color: rgba(235, 232, 226, 0.88);
font-family: var(--font-display);
font-size: clamp(1.35rem, 2.4vw, 2rem);
font-style: italic;
line-height: 1.2;
letter-spacing: -0.02em;
margin-bottom: var(--sp-3);
}
.dictionary-part {
display: flex;
flex-direction: column;
gap: 0.05rem;
color: rgba(235, 232, 226, 0.78);
font-family: var(--font-display);
font-size: clamp(1.1rem, 1.8vw, 1.45rem);
font-style: italic;
line-height: 1.35;
padding-bottom: var(--sp-6);
border-bottom: 1px solid rgba(138, 180, 255, 0.16);
}
.dictionary-entry--interactive .dictionary-part {
padding-block-end: var(--sp-5);
border-block-end: none;
}
.dictionary-reveal-toggle {
display: inline-flex;
align-items: center;
gap: 0.65rem;
inline-size: fit-content;
margin-block-start: var(--sp-3);
padding: 0.7rem 0;
color: rgba(235, 232, 226, 0.72);
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
transition:
color var(--dur-base) var(--ease-out),
opacity var(--dur-base) var(--ease-out);
}
.dictionary-reveal-toggle:hover,
.dictionary-reveal-toggle:focus-visible {
color: var(--text-dark);
}
.dictionary-reveal-toggle:focus-visible {
outline: 1px solid rgba(138, 180, 255, 0.58);
outline-offset: 0.35rem;
border-radius: var(--r-sm);
}
.dictionary-reveal-icon {
position: relative;
inline-size: 0.82rem;
block-size: 0.82rem;
flex: 0 0 auto;
}
.dictionary-reveal-icon::before,
.dictionary-reveal-icon::after {
content: '';
position: absolute;
inset-block-start: 50%;
inset-inline-start: 0;
inline-size: 100%;
block-size: 1px;
background: var(--bar-1);
transform: translateY(-50%);
transition:
transform var(--dur-base) var(--ease-out),
opacity var(--dur-base) var(--ease-out);
}
.dictionary-reveal-icon::after {
transform: translateY(-50%) rotate(90deg);
}
.dictionary-entry--interactive.is-expanded .dictionary-reveal-icon::after {
opacity: 0;
transform: translateY(-50%) rotate(90deg) scaleX(0);
}
.dictionary-reveal-content {
block-size: 0;
overflow: hidden;
transition: block-size 620ms var(--ease-out);
}
.dictionary-definitions {
display: flex;
flex-direction: column;
gap: var(--sp-8);
padding: var(--sp-8) 0;
border-top: 1px solid rgba(138, 180, 255, 0);
border-bottom: 1px solid rgba(138, 180, 255, 0.16);
transition: border-color 420ms var(--ease-out);
}
.dictionary-entry--interactive.is-expanded .dictionary-definitions {
border-top-color: rgba(138, 180, 255, 0.16);
}
.dictionary-definition {
display: grid;
grid-template-columns: 2.25rem 1fr;
gap: var(--sp-6);
color: var(--text-dark);
}
.dictionary-number {
color: rgba(235, 232, 226, 0.9);
font-family: var(--font-display);
font-size: clamp(1.25rem, 1.9vw, 1.55rem);
font-style: italic;
line-height: 1.5;
}
.dictionary-definition p {
max-width: 720px;
color: rgba(235, 232, 226, 0.92);
font-family: var(--font-display);
font-size: clamp(1.2rem, 2vw, 1.65rem);
line-height: 1.48;
letter-spacing: -0.02em;
}
.dictionary-definition blockquote {
margin-top: var(--sp-2);
color: rgba(235, 232, 226, 0.54);
font-family: var(--font-display);
font-size: clamp(1rem, 1.55vw, 1.25rem);
font-style: italic;
line-height: 1.5;
}
.dictionary-see-also {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem 1.05rem;
color: rgba(235, 232, 226, 0.82);
font-family: var(--font-display);
font-size: clamp(1rem, 1.5vw, 1.25rem);
font-style: italic;
line-height: 1.4;
padding-top: var(--sp-6);
}
.dictionary-see-also span {
color: var(--bar-1);
}
.dictionary-see-also span:not(:last-child)::after {
content: '·';
color: rgba(235, 232, 226, 0.45);
margin-inline-start: 1.05rem;
}
.dictionary-see-also {
flex-wrap: nowrap;
gap: 0.8rem;
min-inline-size: 0;
}
.dictionary-see-also-label {
flex: 0 0 auto;
color: rgba(235, 232, 226, 0.86);
}
.dictionary-see-also-ticker {
position: relative;
display: inline-flex;
align-items: center;
flex: 1 1 auto;
min-inline-size: 0;
max-inline-size: 34rem;
block-size: 1.55em;
overflow: hidden;
color: var(--bar-1);
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.dictionary-see-also-ticker::after,
.dictionary-see-also-ticker span::after {
content: none !important;
}
.dictionary-see-also-group {
position: absolute;
inset-inline-start: var(--ticker-x, 0);
inset-block-start: 50%;
display: inline-flex;
align-items: center;
gap: 0.72rem;
max-inline-size: 100%;
white-space: nowrap;
opacity: 0;
transform: translateY(-50%) translateX(var(--ticker-enter-x, 42%));
filter: blur(5px);
transition:
opacity 520ms var(--ease-out),
transform 520ms var(--ease-out),
filter 520ms var(--ease-out);
}
.dictionary-see-also-group.is-active {
opacity: 1;
transform: translateY(-50%) translateX(0);
filter: blur(0);
}
.dictionary-see-also-group.is-exiting {
opacity: 0;
transform: translateY(-50%) translateX(var(--ticker-exit-x, -42%));
filter: blur(5px);
}
.dictionary-see-also-word {
display: inline-block;
overflow: hidden;
max-inline-size: clamp(7rem, 15vw, 11rem);
text-overflow: ellipsis;
}
.dictionary-see-also-dot {
color: rgba(235, 232, 226, 0.45);
}
.dictionary-see-also-track {
display: inline-flex;
align-items: center;
gap: 0;
min-inline-size: max-content;
white-space: nowrap;
will-change: transform;
transform: translateX(-50%);
animation: dictionarySeeAlsoMarquee 24s linear infinite;
animation-play-state: paused;
}
.dictionary-see-also-track.is-running {
animation-play-state: running;
}
.dictionary-see-also-loop {
display: inline-flex;
align-items: center;
gap: 0.72rem;
flex: 0 0 auto;
padding-inline-end: 0.72rem;
}
.dictionary-see-also-item {
display: inline-flex;
align-items: center;
gap: 0.72rem;
flex: 0 0 auto;
}
.dictionary-see-also-word {
max-inline-size: none;
overflow: visible;
text-overflow: clip;
}
.sr-only {
position: absolute !important;
inline-size: 1px !important;
block-size: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
@keyframes dictionarySeeAlsoMarquee {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0);
}
}
.dictionary-entry--interactive .dictionary-reveal-line {
opacity: 0;
filter: blur(8px);
transform: translateY(12px);
transition:
opacity 520ms var(--ease-out),
transform 520ms var(--ease-out),
filter 520ms var(--ease-out);
transition-delay: 0ms;
}
.dictionary-entry--interactive.is-expanded .dictionary-reveal-line {
opacity: 1;
filter: blur(0);
transform: translateY(0);
transition-delay: calc(90ms + (var(--reveal-step, 1) * 95ms));
}
@keyframes dictionarySymbolDrift {
from {
translate: 0 0;
}
to {
translate: calc(var(--symbol-float-x) * 1px) calc(var(--symbol-float-y) * 1px);
}
}
@keyframes dictionarySymbolResolve {
0% {
opacity: 0;
letter-spacing: 0.14em;
text-shadow: 0 0 0 rgba(126, 174, 255, 0);
}
42% {
opacity: calc(var(--quant-symbol-opacity) * 1.35);
letter-spacing: 0.02em;
text-shadow: 0 0 24px rgba(126, 174, 255, 0.28);
}
100% {
opacity: var(--quant-symbol-opacity);
letter-spacing: 0;
text-shadow: 0 0 18px rgba(126, 174, 255, 0.16);
}
}
@keyframes dictionarySymbolSweep {
0% {
opacity: 0;
transform: translateX(-130%) skewX(-12deg);
}
35% {
opacity: 0.42;
}
100% {
opacity: 0;
transform: translateX(130%) skewX(-12deg);
}
}
/* About philosophy section */
.philosophy {
padding: var(--sp-32) 0;
background: var(--parchment);
}
.philosophy-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(3rem, 6vw, 8rem);
align-items: start;
}
.philosophy-left {
position: sticky;
top: calc(68px + 2rem);
}
.philosophy-heading {
font-size: clamp(1.75rem, 2.5vw, 2.5rem);
font-weight: 300;
color: var(--text-light);
letter-spacing: -0.03em;
margin-bottom: var(--sp-6);
}
.philosophy-right {
display: flex;
flex-direction: column;
gap: var(--sp-12);
}
.philosophy-block {
display: flex;
flex-direction: column;
gap: var(--sp-3);
padding-bottom: var(--sp-12);
border-bottom: 1px solid var(--border-light);
}
.philosophy-block:last-child {
border-bottom: none;
padding-bottom: 0;
}
.philosophy-block-title {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 500;
color: var(--text-light);
letter-spacing: -0.02em;
}
.philosophy-block-body {
font-size: 1rem;
color: var(--text-muted-light);
line-height: 1.75;
font-weight: 300;
}
/* Approach section */
.approach {
padding: var(--sp-32) 0;
background: var(--deep);
}
.approach-heading {
font-size: clamp(1.875rem, 3vw, 3rem);
font-weight: 300;
color: var(--text-dark);
letter-spacing: -0.03em;
margin-bottom: var(--sp-16);
max-width: 480px;
}
.approach-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid var(--rim);
border-radius: var(--r-md);
overflow: hidden;
}
.approach-step {
padding: var(--sp-8);
border-right: 1px solid var(--rim);
position: relative;
transition: background var(--dur-base) var(--ease-out);
}
.approach-step:last-child { border-right: none; }
.approach-step:hover { background: var(--graphite); }
.approach-step-num {
font-family: var(--font-display);
font-size: 3rem;
font-weight: 300;
color: var(--text-dim-dark);
line-height: 1;
letter-spacing: -0.04em;
margin-bottom: var(--sp-6);
}
.approach-step-title {
font-size: 1rem;
font-weight: 500;
color: var(--text-dark);
margin-bottom: var(--sp-3);
letter-spacing: -0.01em;
}
.approach-step-body {
font-size: 0.875rem;
color: var(--text-muted-dark);
line-height: 1.65;
font-weight: 300;
}
/* ===========================
SERVICES PAGE
=========================== */
.services-intro {
padding: var(--sp-32) 0;
background: var(--parchment);
}
.services-intro-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(3rem, 6vw, 8rem);
align-items: center;
}
.services-intro-heading {
font-size: clamp(1.875rem, 3vw, 3rem);
font-weight: 300;
color: var(--text-light);
letter-spacing: -0.03em;
}
.services-intro-body {
font-size: 1.0625rem;
color: var(--text-muted-light);
line-height: 1.75;
font-weight: 300;
}
/* Services list */
.services-list {
padding: var(--sp-32) 0;
background: var(--ink);
}
.service-group {
padding: var(--sp-16) 0;
border-bottom: 1px solid var(--rim);
}
.service-group:first-child { border-top: 1px solid var(--rim); }
.service-group-inner {
display: grid;
grid-template-columns: 1fr 2fr;
gap: clamp(3rem, 5vw, 6rem);
align-items: start;
}
.service-group-left {
position: sticky;
top: calc(68px + 2rem);
}
.service-group-num {
font-size: 0.7rem;
font-weight: 600;
color: var(--signal);
letter-spacing: 0.1em;
font-family: var(--font-body);
margin-bottom: var(--sp-3);
}
.service-group-title {
font-family: var(--font-display);
font-size: 1.375rem;
font-weight: 400;
color: var(--text-dark);
letter-spacing: -0.02em;
margin-bottom: var(--sp-4);
}
.service-group-for {
font-size: 0.8rem;
color: var(--text-muted-dark);
font-weight: 300;
line-height: 1.6;
}
.service-group-right {
display: flex;
flex-direction: column;
gap: var(--sp-8);
}
.service-detail {
padding-bottom: var(--sp-8);
border-bottom: 1px solid var(--rim);
}
.service-detail:last-child { border-bottom: none; padding-bottom: 0; }
.service-detail-title {
font-size: 1rem;
font-weight: 500;
color: var(--text-dark);
letter-spacing: -0.01em;
margin-bottom: var(--sp-3);
}
.service-detail-body {
font-size: 0.9375rem;
color: var(--text-muted-dark);
line-height: 1.7;
font-weight: 300;
}
.service-value-tag {
display: inline-block;
margin-top: var(--sp-3);
padding: 4px 10px;
border: 1px solid var(--rim-light);
border-radius: 100px;
font-size: 0.75rem;
color: var(--text-muted-dark);
font-weight: 400;
}
/* ===========================
SPECIAL PROJECTS PAGE
=========================== */
.special-hero {
padding: calc(68px + var(--sp-24)) 0 var(--sp-24);
background: var(--ink);
position: relative;
overflow: hidden;
}
.special-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at 80% 50%, rgba(31, 69, 176, 0.14) 0%, transparent 60%),
linear-gradient(rgba(61, 111, 240, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(61, 111, 240, 0.035) 1px, transparent 1px);
background-size: auto, 70px 70px, 70px 70px;
}
.special-initiatives {
padding: var(--sp-32) 0;
background: var(--deep);
}
.initiative-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5px;
background: var(--rim);
border: 1px solid var(--rim);
border-radius: var(--r-md);
overflow: hidden;
margin-top: var(--sp-16);
}
.initiative-card {
background: var(--graphite);
padding: var(--sp-8);
display: flex;
flex-direction: column;
gap: var(--sp-4);
position: relative;
overflow: hidden;
transition:
background 250ms var(--ease-out),
box-shadow 250ms var(--ease-out);
contain: layout style;
}
.initiative-card:hover { background: #202840; }
.initiative-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--r-md);
background: var(--signal-faint);
border: 1px solid var(--signal-dim);
margin-bottom: var(--sp-2);
}
.initiative-icon svg {
width: 20px;
height: 20px;
color: var(--signal-soft);
}
.initiative-title {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 500;
color: var(--text-dark);
letter-spacing: -0.02em;
}
.initiative-desc {
font-size: 0.9rem;
color: var(--text-muted-dark);
line-height: 1.7;
font-weight: 300;
flex: 1;
}
/* ===========================
WORK PAGE
=========================== */
.work-list {
padding: var(--sp-32) 0;
background: var(--ink);
}
.case-study {
padding: var(--sp-16) 0;
border-bottom: 1px solid var(--rim);
display: grid;
grid-template-columns: 1fr 2fr;
gap: clamp(3rem, 5vw, 6rem);
align-items: start;
}
.case-study:first-child { border-top: 1px solid var(--rim); }
.case-study-meta {
position: sticky;
top: calc(68px + 2rem);
}
.case-study-num {
font-size: 0.7rem;
font-weight: 600;
color: var(--signal);
letter-spacing: 0.1em;
margin-bottom: var(--sp-3);
}
.case-study-tag {
display: inline-block;
padding: 4px 10px;
border: 1px solid var(--rim-light);
border-radius: 100px;
font-size: 0.75rem;
color: var(--text-muted-dark);
font-weight: 400;
margin-bottom: var(--sp-4);
}
.case-study-client {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 400;
color: var(--text-dark);
letter-spacing: -0.02em;
}
.case-study-body {
display: flex;
flex-direction: column;
gap: var(--sp-8);
}
.case-study-heading {
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 300;
color: var(--text-dark);
letter-spacing: -0.03em;
margin-bottom: var(--sp-4);
}
.case-block {
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-8);
background: var(--cloud);
border-radius: var(--r-sm);
}
.case-block-label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--signal);
padding-bottom: var(--sp-2);
}
.case-block-text {
font-size: 0.9375rem;
color: var(--text-muted-dark);
line-height: 1.7;
font-weight: 300;
padding-bottom: var(--sp-1);
}
.case-outcome {
background: var(--graphite);
border: 1px solid var(--rim);
border-radius: var(--r-md);
padding: var(--sp-6);
}
.case-outcome-label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--signal);
margin-bottom: var(--sp-3);
}
.case-outcome-text {
font-size: 0.9375rem;
color: var(--text-muted-dark);
line-height: 1.7;
font-weight: 300;
}
/* ===========================
INSIGHTS PAGE
=========================== */
.insights-placeholder {
padding: var(--sp-32) 0;
background: var(--parchment);
}
/* Responsive two-column layout (used on insights and other pages) */
.layout-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(3rem, 6vw, 8rem);
align-items: start;
margin-bottom: var(--sp-24);
}
@media (max-width: 1024px) {
.layout-two-col {
grid-template-columns: 1fr;
gap: clamp(2rem, 4vw, 3rem);
}
}
/* Ensure RTL works naturally with CSS Grid */
[dir="rtl"] .layout-two-col {
direction: rtl;
text-align: right;
}
[dir="rtl"] .layout-two-col div {
text-align: right;
}
.insights-empty {
text-align: center;
max-width: 480px;
margin: 0 auto;
padding: var(--sp-24) 0;
}
.insights-empty-heading {
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 300;
color: var(--text-light);
letter-spacing: -0.03em;
margin-bottom: var(--sp-4);
}
.insights-empty-body {
font-size: 1rem;
color: var(--text-muted-light);
line-height: 1.7;
}
/* ===========================
CONTACT PAGE
=========================== */
.contact-section {
padding: var(--sp-32) 0;
background: var(--parchment);
}
.contact-inner {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: clamp(3rem, 6vw, 8rem);
align-items: start;
}
.contact-left {
position: sticky;
top: calc(68px + 2rem);
}
.contact-heading {
font-size: clamp(1.875rem, 3vw, 3rem);
font-weight: 300;
color: var(--text-light);
letter-spacing: -0.03em;
margin-bottom: var(--sp-5);
}
.contact-body {
font-size: 1rem;
color: var(--text-muted-light);
line-height: 1.75;
font-weight: 300;
margin-bottom: var(--sp-8);
}
.contact-detail {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.contact-detail-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.contact-detail-label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-muted-light);
}
.contact-detail-value {
font-size: 0.9375rem;
color: var(--text-light);
}
/* Form */
.contact-form {
display: flex;
flex-direction: column;
gap: var(--sp-5);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-4);
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.form-label {
font-size: 0.8rem;
font-weight: 500;
color: var(--text-muted-light);
letter-spacing: 0.02em;
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: 0.75rem 1rem;
background: #ffffff;
border: 1.5px solid var(--border-light);
border-radius: var(--r-sm);
font-family: var(--font-body);
font-size: 0.9375rem;
color: var(--text-light);
font-weight: 300;
transition:
border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
outline: none;
appearance: none;
-webkit-appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
border-color: var(--signal);
box-shadow: 0 0 0 3px rgba(61, 111, 240, 0.1);
}
.form-input::placeholder,
.form-textarea::placeholder {
color: #B8B4AC;
}
.form-textarea {
resize: vertical;
min-height: 140px;
}
.form-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235A6070' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
cursor: pointer;
}
.form-submit {
align-self: flex-start;
margin-top: var(--sp-2);
}
/* Form input error state */
.form-input-error,
.form-input-error:focus {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
/* Error message text */
.form-error {
font-size: 0.8rem;
color: #ef4444;
font-weight: 400;
line-height: 1.4;
animation: slideDown 200ms var(--ease-out);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Thank you modal */
.thank-you-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(13, 17, 23, 0.8);
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 300ms var(--ease-out);
padding: var(--sp-6);
}
.thank-you-modal.show {
opacity: 1;
}
.thank-you-modal-content {
background: linear-gradient(180deg, #16224A 0%, #0F1832 100%);
border: 1px solid rgba(61, 111, 240, 0.2);
border-radius: var(--r-lg);
padding: var(--sp-12) var(--sp-10);
max-width: 420px;
width: 100%;
text-align: center;
position: relative;
transform: scale(0.9) translateY(20px);
animation: modalSlideUp 400ms var(--ease-out) forwards;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}
@keyframes modalSlideUp {
to {
transform: scale(1) translateY(0);
}
}
.thank-you-modal-icon {
width: 56px;
height: 56px;
margin: 0 auto var(--sp-6);
background: rgba(61, 111, 240, 0.1);
border: 2px solid var(--signal);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--signal);
animation: checkmarkPulse 500ms var(--ease-out) 100ms backwards;
}
.thank-you-modal-icon svg {
width: 28px;
height: 28px;
stroke-width: 2.5;
}
@keyframes checkmarkPulse {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.15);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.thank-you-modal-title {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: var(--sp-3);
letter-spacing: -0.015em;
}
.thank-you-modal-text {
font-size: 0.95rem;
color: var(--text-muted-dark);
line-height: 1.6;
margin-bottom: var(--sp-6);
font-weight: 300;
}
.thank-you-modal-close {
position: absolute;
top: var(--sp-4);
right: var(--sp-4);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted-dark);
transition: color var(--dur-fast) var(--ease-out);
cursor: pointer;
border: none;
background: none;
}
.thank-you-modal-close:hover {
color: var(--signal);
}
.thank-you-modal-close svg {
width: 18px;
height: 18px;
stroke-width: 2;
}
/* RTL support */
[dir="rtl"] .thank-you-modal-close {
right: auto;
left: var(--sp-4);
}
/* Arabic text - disable letter-spacing for proper rendering */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] .label,
[dir="rtl"] .hero-heading,
[dir="rtl"] .page-hero-heading,
[dir="rtl"] .engagement-main-heading,
[dir="rtl"] .engagement-step-label,
[dir="rtl"] .cta-banner-heading {
letter-spacing: 0 !important;
}
/* Arabic body text - reduce letter spacing */
[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] .label-light,
[dir="rtl"] .hero-eyebrow-text,
[dir="rtl"] .contact-heading,
[dir="rtl"] .form-label {
letter-spacing: 0 !important;
}
/* Arabic bar chart - ensure proper RTL layout */
[dir="rtl"] .bar-composition {
direction: ltr;
/* Keep left-to-right order for visual consistency */
}
[dir="rtl"] .bar-col {
direction: ltr;
}
/* Mobile responsive */
@media (max-width: 768px) {
.thank-you-modal-content {
padding: var(--sp-10) var(--sp-6);
border-radius: var(--r-md);
}
.thank-you-modal-title {
font-size: 1.25rem;
}
.thank-you-modal-text {
font-size: 0.9rem;
}
}
/* ===========================
RESPONSIVE
=========================== */
@media (max-width: 1024px) {
.hero-inner {
grid-template-columns: 1fr;
gap: 3rem;
}
/* .hero-right kept visible — bar chart shown on tablet/mobile */
.pillars-inner {
grid-template-columns: repeat(3, 1fr);
}
.pillar-item:nth-child(3) { border-right: none; }
.service-cards { grid-template-columns: repeat(2, 1fr); }
.why-grid { grid-template-columns: repeat(2, 1fr); }
.footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
.approach-steps { grid-template-columns: repeat(2, 1fr); }
.approach-step:nth-child(2) { border-right: none; }
.initiative-cards { grid-template-columns: repeat(2, 1fr); }
.engagement-output-panel {
grid-template-columns: 1fr;
padding: 2rem;
gap: 2rem;
}
}
@media (max-width: 768px) {
:root { --gutter: 1.25rem; }
.nav-links,
.nav-cta .btn { display: none; }
.nav-toggle { display: flex; }
h1 { font-size: clamp(2.25rem, 8vw, 2.75rem); }
h2 { font-size: clamp(1.75rem, 6vw, 2rem); }
.pillars-inner {
grid-template-columns: repeat(2, 1fr);
overflow-x: auto;
}
.pillar-item:nth-child(2) { border-right: none; }
.pillar-item:nth-child(3) { border-right: 1px solid var(--rim); }
.pillar-item:nth-child(4) { border-right: none; }
.pillar-item:nth-child(5) { border-right: 1px solid var(--rim); }
.about-preview-inner,
.special-preview-inner,
.services-intro-inner,
.philosophy-inner,
.contact-inner { grid-template-columns: 1fr; }
.quant-definition {
padding: var(--sp-20) 0 var(--sp-24);
}
.quant-definition-header {
margin-bottom: var(--sp-10);
}
.dictionary-entry-inner {
padding: clamp(1.5rem, 7vw, 2.25rem);
}
.dictionary-definition {
grid-template-columns: 1.75rem 1fr;
gap: var(--sp-4);
}
.dictionary-definitions {
gap: var(--sp-6);
}
.dictionary-see-also {
gap: 0.45rem 0.75rem;
}
.dictionary-see-also-ticker {
max-inline-size: 100%;
block-size: 1.5em;
}
.dictionary-see-also-group {
gap: 0.55rem;
}
.dictionary-see-also-word {
max-inline-size: none;
}
.dictionary-see-also-loop,
.dictionary-see-also-item {
gap: 0.55rem;
}
.dictionary-see-also-loop {
padding-inline-end: 0.55rem;
}
.dictionary-symbol:nth-child(n + 13) {
display: none;
}
.dictionary-entry {
--quant-symbol-opacity: 0.15;
}
.philosophy-left { position: static; }
.contact-left { position: static; }
.case-study { grid-template-columns: 1fr; }
.case-study-meta { position: static; }
.service-group-inner { grid-template-columns: 1fr; }
.service-group-left { position: static; }
.service-cards,
.initiative-cards { grid-template-columns: repeat(2, 1fr); }
.service-card,
.initiative-card {
padding: var(--sp-5) var(--sp-5);
}
.service-card-title,
.initiative-title {
font-size: 0.9rem;
}
.service-card-desc,
.initiative-desc {
font-size: 0.8125rem;
line-height: 1.55;
}
.service-card-icon {
width: 32px;
height: 32px;
}
.initiative-icon {
width: 36px;
height: 36px;
}
.why-grid { grid-template-columns: 1fr; }
.approach-steps { grid-template-columns: 1fr; }
.approach-step { border-right: none; border-bottom: 1px solid var(--rim); }
.approach-step:last-child { border-bottom: none; }
.form-row { grid-template-columns: 1fr; }
.footer-inner { grid-template-columns: 1fr; }
.hero-inner { padding: var(--sp-16) 0 var(--sp-12); min-height: auto; }
.services-preview-header {
flex-direction: column;
align-items: flex-start;
}
.about-preview-number { font-size: clamp(4rem, 20vw, 8rem); }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.engagement-flow-heading {
font-size: 2rem;
}
.engagement-module {
gap: 2rem;
}
.engagement-selector-display {
padding: 1.25rem;
gap: 1rem;
}
.engagement-selector-icon {
width: 2rem;
height: 2rem;
}
.engagement-selector-main {
font-size: 1rem;
}
.engagement-selector-sub {
font-size: 0.8125rem;
}
.engagement-depth-labels {
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
}
.engagement-depth-label-item {
padding: 1rem 0.25rem 0;
}
.engagement-depth-label-title {
font-size: 0.8125rem;
}
.engagement-depth-label-desc {
font-size: 0.7rem;
}
.engagement-output-panel {
padding: 1.5rem;
gap: 1.5rem;
}
.engagement-output-block-title {
font-size: 1.125rem;
}
.engagement-output-list li {
font-size: 0.9375rem;
}
}
@media (max-width: 480px) {
.hero-actions { flex-direction: column; align-items: flex-start; }
.btn { width: 100%; justify-content: center; }
.btn-text, .btn-text-light { width: auto; justify-content: flex-start; }
.cta-banner-actions { flex-direction: column; }
.pillars-inner { grid-template-columns: 1fr 1fr; }
.hero-inner {
gap: var(--sp-8);
padding: var(--sp-12) 0 var(--sp-14);
}
.hero-right {
display: flex !important;
min-height: 300px;
width: 100%;
padding: 0;
}
.hero-visual-wrap,
.hero-visual-bars-side {
display: block;
width: calc(100% - 0.75rem);
max-width: none;
height: 300px;
min-height: 300px;
margin-inline: auto;
padding: 0;
overflow: hidden;
-webkit-mask-image: none;
mask-image: none;
}
.hero-visual-bars-side .bar-composition,
.bar-composition {
display: flex;
left: 0;
right: 0;
bottom: 0;
height: calc(100% - 86px);
padding: 0 1.05rem 0 0.55rem;
gap: 4px;
opacity: 1;
visibility: visible;
}
.bar-col {
min-width: 0;
opacity: 1;
visibility: visible;
}
.hero-stats-band {
display: grid;
bottom: 0;
padding: 0.78rem 0.55rem 0.72rem;
background:
linear-gradient(180deg, transparent 0%, rgba(8, 12, 20, 0.62) 28%, rgba(8, 12, 20, 0.9) 100%),
radial-gradient(ellipse at 50% 100%, rgba(126, 174, 255, 0.16), transparent 70%);
}
.hero-stats-band::before {
left: 0.55rem;
right: 0.55rem;
top: 0.42rem;
}
.hero-stats-band .hero-stat:not(:first-child) {
padding-inline-start: 0.45rem;
}
.hero-stats-band .hero-stat-value {
font-size: 1.12rem;
margin-bottom: 0.24rem;
}
.hero-stats-band .hero-stat-label {
font-size: 0.46rem;
letter-spacing: 0.045em;
line-height: 1.16;
}
.dictionary-definition { grid-template-columns: 1fr; gap: var(--sp-2); }
.dictionary-part { padding-bottom: var(--sp-5); }
.dictionary-definitions { padding: var(--sp-6) 0; }
}
@media (prefers-reduced-motion: reduce) {
.dictionary-word {
filter: none !important;
}
.dictionary-reveal-content,
.dictionary-reveal-line,
.dictionary-see-also-group,
.dictionary-symbol-layer,
.dictionary-symbol,
.dictionary-reveal-icon::before,
.dictionary-reveal-icon::after {
transition: none !important;
}
.dictionary-entry--interactive .dictionary-reveal-line {
filter: none !important;
transform: none !important;
}
.dictionary-see-also-group {
filter: none !important;
transform: translateY(-50%) translateX(0) !important;
}
.dictionary-see-also-group:not(.is-active) {
display: none !important;
}
.dictionary-see-also-track {
animation: none !important;
transform: none !important;
}
.dictionary-see-also-loop:nth-child(2) {
display: none !important;
}
.dictionary-entry--interactive.is-expanded .dictionary-symbol {
animation: none !important;
filter: none !important;
transform: none !important;
transition-delay: 0ms !important;
}
.dictionary-entry--interactive.is-expanded .dictionary-symbol::after {
animation: none !important;
}
.service-selector-button,
.support-type-card,
.support-type-card::before,
.support-type-icon {
transition: none !important;
animation: none !important;
}
.service-selector-button:hover,
.support-type-card:hover,
.support-type-card:hover .support-type-icon {
transform: none !important;
}
.support-type-card::before {
display: none !important;
}
}