/* @font-face is now inline in each HTML page for instant rendering */
/* ===================================================================
EUROCAN.DIGITAL BRAND COLORS
===================================================================
Official Brand Palette:
- Primary Red: #FF0000
- Slate Gray: #475569
- Cool Gray: #f1f5f9
- White: #ffffff
Note: Gold (#d4a84b) is NOT a brand color but is retained for
EU flag star representations in SVG graphics.
The CSS variables below include legacy colors that may differ
from the official brand palette. Refer to this comment block
as the source of truth for brand colors.
=================================================================== */
/* Section background utilities — use on to enforce alternation.
Rule: No two adjacent sections may share the same background.
CTA sections are always .bg-white. Plan alternation backward from CTA. */
.bg-white { background: #ffffff !important; }
.bg-gray { background: #f1f5f9 !important; }
:root {
--color-midnight: #0a1628;
--color-navy: #0f1e3d;
--color-slate: #1e3a6e;
--color-steel: #5a7fb8;
--color-ice: #e8f0f7;
--color-white: #ffffff;
--color-maple: #c41e3a;
--color-maple-light: #e63950;
--color-gold: #d4a84b;
--font-display: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--font-body: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
font-size: 18px;
line-height: 1.7;
color: var(--color-midnight);
background: var(--color-white);
-webkit-font-smoothing: antialiased;
letter-spacing: 0.016em;
word-spacing: 0.045em;
overflow-x: hidden;
}
h1, h2, h3 { letter-spacing: 0.005em; }
/* Hero Animations */
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes subtlePulse {
0%, 100% { opacity: 0.03; }
50% { opacity: 0.08; }
}
@keyframes floatSlow {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.hero::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, var(--color-maple) 0%, transparent 70%);
opacity: 0.03;
animation: subtlePulse 8s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.hero.hero--light::after {
background: radial-gradient(circle at 30% 30%, var(--color-maple) 0%, transparent 50%),
radial-gradient(circle at 70% 70%, var(--color-gold) 0%, transparent 50%);
animation: subtlePulse 6s ease-in-out infinite;
}
/* ===================================================================
GLOBAL: Section description text — always full width
=================================================================== */
.section-intro,
.editorial-intro,
.partners-intro,
.problem-content,
.momentum-intro,
.corridor-intro,
.offer-intro,
.about-subhead,
.about-lede,
.credibility-line,
.credentials-glance,
.pull-quote,
.fit-description,
.partners-inline,
.partners-simple,
.timeline-note,
.callout-container,
.feed-desc,
.feed-list,
.next-steps-heading,
.next-steps-checklist,
.offer-card--wide .offer-description,
.gap-bullets,
.timeline-item-c p,
[class*="-desc"],
[class*="-intro"],
[class*="-content"] p,
[class*="-prose"],
[class*="-summary"],
[class*="-note"] {
max-width: 100% !important;
}
/* Navigation — Mirage-style glass pill */
.nav{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: transparent;
border: none;
padding: 1.25rem 0;
transition: padding 0.35s ease;
}
.nav.scrolled{
padding: 0.9rem 0;
}
.nav-container{
max-width: 1400px;
margin: 0 auto;
width: calc(100% - 2rem);
padding: 0.85rem 1.35rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.25rem;
border-radius: 9999px;
/* Default: transparent for dark hero sections (all pages start with dark hero) */
background: rgba(255, 255, 255, 0.16);
backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.20);
box-shadow: 0 16px 55px rgba(0, 0, 0, 0.22);
}
.nav.scrolled .nav-container{
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 18px 60px rgba(10, 22, 40, 0.20);
}
/* Nav container styling now handled by nav--light/nav--dark classes */
.nav-logo{
display: inline-flex;
align-items: center;
gap: 0.7rem;
position: relative;
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 650;
color: var(--color-midnight);
text-decoration: none;
letter-spacing: 0.01em;
transition: var(--transition-smooth);
white-space: nowrap;
line-height: 1;
}
.nav-logo:hover{ transform: translateY(-1px); }
.nav-logo-mark{
height: 34px;
width: 34px;
object-fit: contain;
display: block;
border-radius: 9999px;
transform: translateY(1px);
}
.nav-logo-wordmark{
height: clamp(24px, 2.0vw, 30px);
max-height: 30px; /* never exceed nav row */
width: auto;
display: block;
object-fit: contain;
transform: translateY(1px);
}
@media (max-width: 768px){
.nav-logo-mark{ height: 38px; width: 38px; }
.nav-logo-wordmark{ height: 32px; max-height: 36px; }
}
/* Logo swap based on nav theme - stack wordmarks using grid to prevent layout shift */
.nav-logo {
display: inline-grid;
grid-template-columns: auto auto;
align-items: center;
gap: 0.7rem;
}
.nav-logo-mark {
grid-column: 1;
grid-row: 1;
}
.nav-logo-wordmark {
grid-column: 2;
grid-row: 1;
}
/* Default: show white wordmark (all pages start with dark hero) */
.nav-logo-wordmark.nav-logo-light {
opacity: 1;
}
.nav-logo-wordmark.nav-logo-dark {
opacity: 0;
}
/* When scrolled past hero onto light sections, switch to dark wordmark */
.nav.nav--dark .nav-logo-wordmark.nav-logo-light { opacity: 0; }
.nav.nav--dark .nav-logo-wordmark.nav-logo-dark { opacity: 1; }
/* Brand wordmark (treat as ONE image so spacing never drifts) */
.nav-wordmark-wrap{
display: flex;
align-items: center;
line-height: 0;
}
.nav-wordmark{
/* Slightly larger so it visually matches nav items, but still responsive */
height: clamp(22px, 2.1vw, 30px);
width: auto;
display: block;
}
@media (max-width: 768px){
.nav-wordmark{ height: 28px; }
}
/* Old wordmark classes removed - now using nav-logo-dark/nav-logo-light */
.nav-logo .brand-dot{
display: inline-block;
width: 0.35em;
height: 0.35em;
background: #FF0000;
border-radius: 50%;
margin: 0 0.15em;
vertical-align: middle;
transform: translateY(-0.04em);
}
/* Global brand dot - red circle for EuroCan.Digital */
.brand-dot {
display: inline-block;
width: 0.35em;
height: 0.35em;
background: #FF0000;
border-radius: 50%;
margin: 0 0.12em;
vertical-align: middle;
transform: translateY(-0.04em);
}
/* Brand name must never line-break */
.brand-name {
white-space: nowrap;
}
.footer-logo .brand-dot{
display: inline-block;
width: 0.35em;
height: 0.35em;
background: #FF0000;
border-radius: 50%;
margin: 0 0.12em;
vertical-align: middle;
transform: translateY(-0.04em);
}
.nav-links{
display: flex;
gap: 3.5rem;
list-style: none;
align-items: center;
}
.nav-links a{
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
font-weight: 550;
letter-spacing: 0.016em;
word-spacing: 0.02em;
font-size: 1.1rem;
transition: var(--transition-smooth);
position: relative;
padding: 0.35rem 0.15rem;
}
/* Nav "cursor" indicator (hover + active) — red line */
.nav-links a::after{
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -12px;
height: 2px;
background: #FF0000;
border-radius: 999px;
transform: scaleX(0);
transform-origin: center;
opacity: 0;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-links a:hover{ color: var(--color-midnight); }
.nav-links a:hover::after{
transform: scaleX(1);
opacity: 1;
}
.nav-links a.active{ color: var(--color-midnight); }
.nav-links a.active::after{
transform: scaleX(1);
opacity: 1;
}
/* Home page link colors on glass */
/* Nav over dark sections - light text */
.nav.nav--light .nav-links a{ color: rgba(255, 255, 255, 0.9); }
.nav.nav--light .nav-links a:hover{ color: rgba(255, 255, 255, 1); }
.nav.nav--light .nav-logo{ color: rgba(255, 255, 255, 0.92); }
.nav.nav--light .nav-container{
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.20);
box-shadow: 0 16px 55px rgba(0, 0, 0, 0.22);
}
.nav.nav--light .mobile-menu-btn span{
background: rgba(255, 255, 255, 0.92);
}
.nav.nav--dark .mobile-menu-btn span{
background: rgba(10, 22, 40, 0.85);
}
/* Nav over light sections (default) - dark text */
.nav.nav--dark .nav-links a{ color: rgba(10, 22, 40, 0.78); }
.nav.nav--dark .nav-links a:hover{ color: var(--color-midnight); }
.nav.nav--dark .nav-logo{ color: var(--color-midnight); }
.nav.nav--dark .nav-container{
background: rgba(255, 255, 255, 0.92);
border-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 18px 60px rgba(10, 22, 40, 0.20);
}
/* Legacy home-page nav styles removed - now handled by nav--light/nav--dark */
/* “WORK WITH US” style CTA: white pill + red dot, invert on hover/click */
.nav-cta{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
background: var(--color-white);
color: var(--color-midnight);
padding: 0.85rem 1.35rem;
border-radius: 9999px;
text-decoration: none;
font-weight: 750;
font-size: 0.95rem;
letter-spacing: 0.04em;
text-transform: none;
box-shadow: 0 10px 28px rgba(10, 22, 40, 0.18);
transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
position: relative;
overflow: visible;
white-space: nowrap;
}
/* red dot inside the CTA */
.nav-cta::before{
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background: #FF0000;
flex: 0 0 auto;
}
/* subtle divider before the CTA (like Mirage) */
.nav-cta::after{
content: '';
position: absolute;
left: -14px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 22px;
background: rgba(10, 22, 40, 0.18);
opacity: 0.6;
}
.nav.nav--light .nav-cta::after{
background: rgba(255, 255, 255, 0.35);
opacity: 0.7;
}
.nav-cta:hover,
.nav-cta:focus-visible{
background: #FF0000;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(255, 0, 0, 0.3);
}
.nav-cta:hover::before,
.nav-cta:focus-visible::before{
background: #ffffff;
}
.nav-cta:active{
transform: translateY(0);
box-shadow: 0 10px 28px rgba(10, 22, 40, 0.18);
}
/* Don’t show the divider when the CTA is rendered inside the mobile menu list */
.nav-links .nav-cta-mobile .nav-cta::after{ display: none; }
@media (max-width: 768px){
.nav{ padding: 1rem 0; }
.nav-container{ width: calc(100% - 1rem); padding: 0.78rem 1.05rem; }
.nav-cta::after{ display:none; }
}
/* Mobile Menu Button */
.mobile-menu-btn {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
z-index: 1001;
}
.mobile-menu-btn span {
width: 25px;
height: 3px;
background: rgba(255, 255, 255, 0.92);
border-radius: 2px;
transition: var(--transition-smooth);
}
.mobile-menu-btn.active span:nth-child(1) {
transform: rotate(45deg) translate(7px, 7px);
}
.mobile-menu-btn.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-btn.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -7px);
}
/* Hero Section */
.hero.hero--image {
min-height: 100vh;
display: flex;
align-items: center;
padding: 8rem 2rem 6rem;
position: relative;
overflow: hidden;
}
.hero-container {
max-width: 1400px;
margin: 0 auto;
width: 100%;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.hero-content {
max-width: 800px;
position: relative;
z-index: 2;
}
.hero-container{
position: relative;
z-index: 3;
}
.hero-tagline {
font-family: var(--font-body);
font-size: 1.25rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-gold);
margin-bottom: 1.5rem;
}
.hero-tagline.prominent{
font-size: 1.4rem;
font-weight: 800;
}
.hero h1 {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 500;
line-height: 1.15;
color: var(--color-white);
margin-bottom: 1.5rem;
letter-spacing: 0.01em;
}
.hero-subtitle {
font-size: 1.35rem;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 2.5rem;
max-width: 600px;
}
.hero-subtitle-single {
max-width: 100%;
margin-bottom: 0.75rem;
white-space: nowrap;
}
.scoping-note{
margin-top: 1.25rem;
padding: 1rem 1.1rem;
border-radius: 14px;
background: rgba(232,240,247,0.92);
border: 1px solid rgba(10,22,40,0.08);
color: rgba(10,22,40,0.88);
font-weight: 600;
max-width: 760px;
}
/* How-it-works: compact top banner with slate gradient + red accents */
.how-it-works-page .hero {
min-height: auto;
padding: 7.5rem 2rem 4.75rem;
background:
radial-gradient(1200px 600px at 18% 8%, rgba(255, 0, 0, 0.15), transparent 55%),
radial-gradient(900px 520px at 82% 16%, rgba(255, 0, 0, 0.08), transparent 55%),
linear-gradient(180deg, #334155 0%, #475569 100%);
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.how-it-works-page .hero-tagline {
color: #FF0000;
}
.how-it-works-page .hero h1 {
color: #ffffff;
}
.how-it-works-page .hero-subtitle {
color: rgba(255, 255, 255, 0.9);
max-width: 760px;
}
/* How-it-works: make the process section feel like a designed band */
.how-it-works-page .process-timeline {
background: rgba(10, 22, 40, 0.03);
border-top: 1px solid rgba(10, 22, 40, 0.06);
border-bottom: 1px solid rgba(10, 22, 40, 0.06);
}
.how-it-works-page .timeline-content-front {
box-shadow: 0 10px 30px rgba(10, 22, 40, 0.08), 0 4px 14px rgba(10, 22, 40, 0.05);
}
/* How-it-works: CTA section styling */
.how-it-works-page .cta-section {
background: var(--color-white);
color: var(--color-midnight);
border-top: none;
}
.how-it-works-page .cta-section h2 {
color: var(--color-midnight);
}
/* Section Styles */
section {
padding: 6rem 2rem;
}
.section-container {
max-width: 1400px;
margin: 0 auto;
}
.section-label {
font-family: var(--font-body);
font-size: 1.2rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-maple);
margin-bottom: 1rem;
}
.section-title {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 600;
color: var(--color-midnight);
margin-bottom: 1.5rem;
letter-spacing: 0.01em;
}
.section-intro {
font-size: 1.2rem;
color: #475569;
max-width: 700px;
margin-bottom: 3rem;
}
/* Scroll Reveal Animation */
/* Scroll reveal animations - NO FADE, transform only */
.scroll-reveal{
transform: translateY(12px);
transition: transform 3200ms cubic-bezier(.2,.8,.2,1);
transition-delay: var(--d, 0s);
will-change: transform;
}
.scroll-reveal.rise{ transform: translateY(16px); }
.scroll-reveal.pan{ transform: translateX(-14px); }
.scroll-reveal.pan-up{ transform: translateY(60px); }
.scroll-reveal.slide-left{ transform: translateX(-40px); }
.scroll-reveal.slide-right{ transform: translateX(40px); }
/* Hero-only slide animation - NO fade, SLOW */
.hero-content .scroll-reveal.slide-right{
transform: translateX(80px);
transition: transform 3500ms cubic-bezier(.2,.8,.2,1);
}
.hero-content .scroll-reveal.slide-right.revealed{
transform: translateX(0);
}
.scroll-reveal.very-slow{ transition: transform 4200ms cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.scroll-reveal.tumble{ transform: translateY(-20px) rotate(-6deg) scale(0.98); }
.scroll-reveal.revealed{
transform: none;
}
@media (prefers-reduced-motion: reduce){
.scroll-reveal{
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* Hero Sectors Display */
.hero-sectors {
margin-top: 1.5rem;
}
.sector-line {
font-size: 1.15rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 0.5rem;
line-height: 1.6;
}
.sector-label-inline {
font-weight: 600;
color: var(--color-gold);
}
/* Tech Sectors Display */
.tech-sectors {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid rgba(10, 22, 40, 0.08);
}
.sector-tag {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-slate);
letter-spacing: 0.02em;
transition: var(--transition-smooth);
}
.sector-tag:hover {
color: var(--color-maple);
}
.sector-icon {
color: var(--color-maple);
font-size: 0.7rem;
opacity: 0.7;
}
.sector-tag:hover .sector-icon {
opacity: 1;
}
@media (max-width: 600px) {
.tech-sectors {
gap: 1rem;
}
.sector-tag {
font-size: 0.8rem;
}
}
/* Comparison Grid - Enhanced */
.comparison-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem;
max-width: 900px;
margin: 2.5rem auto 0;
}
.comparison-col {
padding: 2.5rem;
border-radius: 16px;
position: relative;
}
.comparison-col.before {
background: linear-gradient(135deg, #f8f9fa 0%, #eef2f7 100%);
border: 1px solid rgba(10, 22, 40, 0.08);
}
.comparison-col.after {
background: linear-gradient(135deg, rgba(196, 30, 58, 0.03) 0%, rgba(212, 168, 75, 0.05) 100%);
border: 2px solid var(--color-maple);
box-shadow: 0 8px 32px rgba(196, 30, 58, 0.1);
}
.comparison-col h4 {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid;
}
.comparison-col.before h4 {
color: var(--color-slate);
border-color: rgba(10, 22, 40, 0.1);
}
.comparison-col.after h4 {
color: var(--color-maple);
border-color: var(--color-maple);
}
.comparison-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.comparison-col li {
position: relative;
padding: 0.75rem 0 0.75rem 2rem;
font-size: 0.95rem;
line-height: 1.5;
border-bottom: 1px solid rgba(10, 22, 40, 0.05);
}
.comparison-col li:last-child {
border-bottom: none;
}
.comparison-col.before li::before {
content: '✗';
position: absolute;
left: 0;
color: var(--color-slate);
opacity: 0.4;
font-weight: 700;
}
.comparison-col.after li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--color-maple);
font-weight: 700;
}
.comparison-col.before li {
color: var(--color-slate);
}
.comparison-col.after li {
color: var(--color-midnight);
font-weight: 500;
}
@media (max-width: 700px) {
.comparison-grid {
grid-template-columns: 1fr;
max-width: 400px;
}
}
/* Problem Section */
.problem {
background: var(--color-white);
}
.problem-content {
max-width: none;
}
/* Center-align the Challenge section text and content block */
.problem .section-container {
text-align: center;
}
.problem .problem-content {
margin: 0 auto;
}
.problem-content p {
margin-bottom: 1.5rem;
color: #475569;
font-size: 1.2rem;
}
/* Journey Flow Section */
.journey-flow {
background: var(--color-navy);
color: var(--color-white);
position: relative;
overflow: hidden;
}
.journey-flow::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(196, 30, 58, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(212, 168, 75, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.flow-header {
text-align: center;
margin-bottom: 4rem;
position: relative;
z-index: 1;
}
.flow-header .section-label {
color: var(--color-gold);
}
.flow-header .section-title {
color: var(--color-white);
}
.flow-steps {
display: flex;
gap: 3rem;
align-items: flex-start;
justify-content: center;
position: relative;
z-index: 1;
}
.flow-step {
flex: 1;
text-align: center;
max-width: 300px;
position: relative;
padding: 2rem;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: var(--transition-smooth);
}
.flow-step:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.flow-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
color: var(--color-gold);
position: relative;
transition: var(--transition-smooth);
}
.flow-step:hover .flow-icon {
transform: scale(1.1) rotate(5deg);
}
.flow-icon svg {
width: 100%;
height: 100%;
}
.flow-step h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: 1rem;
}
.flow-step p {
color: rgba(255, 255, 255, 0.8);
font-size: 1.2rem;
}
/* Connecting arrows between flow steps */
.flow-step:not(:last-child)::after {
content: '';
position: absolute;
top: 50px;
right: -1.5rem;
width: 3rem;
height: 2px;
background: linear-gradient(90deg, var(--color-maple), var(--color-gold));
transform: translateX(50%);
}
.flow-step:not(:last-child)::before {
content: '→';
position: absolute;
top: 42px;
right: -1.5rem;
transform: translateX(50%);
color: var(--color-gold);
font-size: 1.2rem;
font-weight: bold;
z-index: 2;
}
@media (max-width: 768px) {
.flow-step:not(:last-child)::after,
.flow-step:not(:last-child)::before {
display: none;
}
}
/* Audience Section */
/* Card photo backgrounds (Who it's for) */
.audience-card{
box-shadow: inset 0 0 0 1px rgba(10,22,40,0.04);
position: relative;
overflow: hidden;
padding: 2rem;
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
text-align: center;
border: 2px solid transparent;
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.audience-card::before {
content: '';
position: absolute;
inset: 0;
/* Light wash overlay: images now more visible */
background-image:
linear-gradient(135deg, rgba(232, 240, 247, 0.65), rgba(255, 255, 255, 0.55)),
var(--card-bg, none);
background-size: cover;
background-position: center;
opacity: 1;
filter: saturate(0.9) contrast(1) brightness(1.08);
transition: all 0.35s ease;
}
.audience-card:hover::before {
background-image:
linear-gradient(135deg, rgba(232, 240, 247, 0.5), rgba(255, 255, 255, 0.4)),
var(--card-bg, none);
}
.audience-card > *{
position: relative;
z-index: 2;
}
.audience-card:hover {
transform: translateY(-4px);
border-color: var(--color-maple);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
.audience .section-container {
text-align: center;
}
.audience-icon {
margin: 0 auto 1.25rem auto;
}
.audience-content h3 {
text-align: center;
}
.audience-content p {
text-align: center;
}
.audience {
background: rgba(10, 22, 40, 0.03);
}
.audience-grid {
display: grid;
grid-template-columns: repeat(2, minmax(280px, 420px));
gap: 2rem;
margin: 3rem auto 0;
max-width: 980px;
justify-content: center;
}
.audience-icon {
width: 60px;
height: 60px;
background: rgba(10, 22, 40, 0.03);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-maple);
flex-shrink: 0;
transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.audience-card:hover .audience-icon {
background: var(--color-maple);
color: var(--color-white);
transform: rotate(5deg) scale(1.1);
}
.audience-icon svg {
width: 32px;
height: 32px;
transition: stroke 160ms ease, fill 160ms ease;
}
.audience-content h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-midnight);
margin-bottom: 0.75rem;
}
.audience-content p {
color: var(--color-slate);
font-size: 1.2rem;
line-height: 1.6;
}
/* CTA Section */
.cta-section {
background: var(--color-white);
color: var(--color-midnight);
text-align: center;
padding: 5rem 2rem;
position: relative;
overflow: hidden;
border-top: none;
border-bottom: none;
}
.cta-section::before{ content:none; }
/* Membership page CTA */
.membership-page .cta-section {
background: #ffffff;
}
.cta-section h2 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 500;
margin-bottom: 2rem;
position: relative;
z-index: 1;
}
.cta-button {
display: inline-block;
background: var(--color-maple);
color: var(--color-white);
padding: 1.25rem 3rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: var(--transition-smooth);
position: relative;
z-index: 1;
overflow: hidden;
}
.cta-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.cta-button:hover::before {
width: 300px;
height: 300px;
}
.cta-button:hover {
background: var(--color-maple-light);
transform: translateY(-3px);
box-shadow: 0 12px 24px rgba(196, 30, 58, 0.3);
}
/* Pulse animation for Canada/EU nodes */
.node-canada,
.node-europe {
animation: pulse 6s ease-in-out infinite;
transform-origin: center;
transform-box: fill-box;
}
.node-europe {
animation-delay: 1.5s;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.05); opacity: 1; }
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-links {
position: fixed;
top: 0;
right: -100%;
width: 70%;
height: 100vh;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(12px);
flex-direction: column;
padding: 6rem 2rem 2rem;
gap: 2rem;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
transition: right 0.9s ease;
z-index: 999;
}
.nav-links.active {
right: 0;
}
/* Override nav--light link colors when mobile menu is open (white background needs dark text) */
.nav.nav--light .nav-links.active a {
color: var(--color-midnight);
}
.nav.nav--light .nav-links.active a:hover {
color: #FF0000;
}
/* Keep CTA hover text white (overrides the generic link hover above) */
.nav .nav-links.active .nav-cta-mobile .nav-cta:hover {
color: #ffffff;
}
/* X button: always red, visible on white menu background regardless of nav theme */
.nav.nav--light .mobile-menu-btn.active span,
.nav.nav--dark .mobile-menu-btn.active span {
background: #FF0000;
}
.nav-links a::after {
bottom: -4px;
}
.nav-links .nav-cta-mobile a::after {
display: none;
}
.mobile-menu-btn {
display: flex;
}
.nav-cta {
display: none;
}
.flow-steps {
flex-direction: column;
align-items: center;
}
.audience-grid {
grid-template-columns: 1fr;
}
.audience-card {
flex-direction: column;
text-align: center;
}
.audience-icon {
margin: 0 auto;
}
.footer-main {
flex-direction: column;
}
.footer-links {
flex-direction: column;
gap: 2rem;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* CTA section */
.cta-section {
background: var(--color-white);
color: var(--color-midnight);
text-align: center;
padding: 5rem 2rem;
position: relative;
overflow: hidden;
border-top: none;
border-bottom: none;
}
.cta-section::before,
.cta-section::after{ content:none; }
/* HERO VIDEO BG START */
.hero.hero--image{
position: relative;
overflow: hidden;
}
.hero-bg-video{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.hero-bg-overlay{
position: absolute;
inset: 0;
/* Dark scrim for readability + dark bottom for carousel */
background:
radial-gradient(1200px 600px at 20% 25%, rgba(196,30,58,0.16), rgba(10,22,40,0.00) 55%),
linear-gradient(180deg, rgba(10,22,40,0.30) 0%, rgba(10,22,40,0.40) 60%, rgba(10,22,40,0.92) 100%);
z-index: 1;
}
.hero-container{
position: relative;
z-index: 2;
}
/* HERO VIDEO BG END */
/* (Timeline styling is page-specific; see how-it-works.html) */
.services-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.service-card{
background: var(--color-white);
border: 1px solid rgba(10,22,40,0.10);
border-radius: 18px;
padding: 1.75rem 1.75rem 1.6rem;
transition: transform 420ms ease, box-shadow 420ms ease, border-color 420ms ease;
}
.service-card:hover{
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(0,0,0,0.10);
border-color: rgba(196,30,58,0.35);
}
.service-card-header{
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.service-card h4{
margin: 0;
font-size: 1.2rem;
line-height: 1.25;
color: var(--color-midnight);
}
.service-card p{
margin: 0;
color: rgba(10,22,40,0.78);
line-height: 1.55;
font-size: 1.2rem;
}
.service-card-content{display:flex; flex-direction:column; gap:0.85rem;}
/* =========================
Services page fixes
========================= */
/* Service icon sizing + hover (uses currentColor for SVG strokes) */
.service-icon{
width: 56px;
height: 56px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(10,22,40,0.06);
color: var(--color-midnight);
flex: 0 0 auto;
}
.service-icon svg{
width: 28px;
height: 28px;
display: block;
}
.service-card:hover .service-icon{
background: var(--color-maple);
color: var(--color-white);
}
/* Section banding behind service cards */
.services-page .services-band{
background: transparent;
padding: 5rem 0;
}
/* Intro line above cards */
.services-page .section-intro{
margin-top: 0.75rem;
margin-bottom: 2.25rem;
font-size: 1.2rem;
color: #475569;
}
/* Balanced 2x2 grid for 4 cards on desktop */
.services-page .services-grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
}
@media (max-width: 900px){
.services-page .services-grid{
grid-template-columns: 1fr;
}
.services-page .services-band{
padding: 3.5rem 0;
}
}
/* =========================
Services: Outcome + Engagement Terms
========================= */
.services-page .outcome{
background: rgba(10, 22, 40, 0.04);
padding: 4.5rem 0;
}
.services-page .terms-box{
margin-top: 2rem;
padding: 1.5rem 1.5rem;
border-radius: 18px;
border: 1px solid rgba(10, 22, 40, 0.14);
background: rgba(255, 255, 255, 0.75);
box-shadow: 0 14px 40px rgba(10, 22, 40, 0.08);
}
.services-page .terms-box h3{
margin: 0 0 0.65rem 0;
font-size: 1.1rem;
font-weight: 700;
color: var(--color-midnight);
}
.services-page .terms-box p{
margin: 0;
color: var(--color-midnight);
opacity: 0.9;
line-height: 1.6;
}
@media (max-width: 768px){
.services-page .outcome{ padding: 3.5rem 0; }
.services-page .terms-box{ padding: 1.25rem 1.25rem; }
}
/* =========================
About page (about.html)
========================= */
/* Intro band (no video hero on About) */
.about-page .about-intro{
background: var(--color-white);
padding: 7.25rem 2rem 3.75rem; /* room for fixed nav */
text-align: center;
}
.about-page .about-intro .section-container{
max-width: 980px;
}
.about-page .about-headline{
font-family: var(--font-display);
font-size: clamp(2.1rem, 4vw, 3.1rem);
line-height: 1.1;
margin: 0.5rem auto 0.75rem;
color: var(--color-midnight);
}
.about-page .about-subhead{
font-size: 1.25rem;
color: rgba(10, 22, 40, 0.78);
margin: 0 auto 0.5rem;
max-width: 860px;
}
.about-page .about-lede{
font-size: 1.2rem;
color: rgba(10, 22, 40, 0.7);
line-height: 1.65;
margin: 0 auto 0;
max-width: 860px;
}
.page-divider{
background: linear-gradient(135deg, var(--color-midnight) 0%, var(--color-navy) 100%);
color: var(--color-white);
text-align: center;
padding: 6.5rem 2rem 3rem; /* room for fixed nav */
}
.page-divider h2{
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 600;
letter-spacing: 0.005em;
color: var(--color-gold);
}
.mission-vision{
background: var(--color-ice);
padding: 6rem 2rem;
}
.mission-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3rem;
margin-top: 2rem;
}
.mission-box{
padding: 2rem;
border-left: 4px solid var(--color-maple);
border: 1px solid rgba(196, 30, 58, 0.15);
background: var(--color-white);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(10, 22, 40, 0.06);
}
.mission-box:last-child{
border-left-color: var(--color-gold);
}
.mission-box h3{
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 500;
color: var(--color-midnight);
margin-bottom: 0.75rem;
}
.mission-box p{
color: rgba(10, 22, 40, 0.78);
font-size: 1.2rem;
}
.ecosystem-context{
background: linear-gradient(135deg, var(--color-midnight) 0%, var(--color-navy) 100%);
color: var(--color-white);
padding: 5rem 2rem;
}
.ecosystem-context .section-label{
color: var(--color-gold);
text-align: center;
}
.ecosystem-context .section-title{
color: var(--color-white);
text-align: center;
margin-bottom: 1rem;
}
.ecosystem-context .ecosystem-intro{
color: rgba(255,255,255,0.78);
text-align: center;
max-width: 760px;
margin: 0 auto;
font-size: 1.2rem;
}
.ecosystem-cards{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
max-width: 980px;
margin: 2.25rem auto 0;
}
.ecosystem-card{
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 14px;
padding: 1.4rem 1.35rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.12);
text-align: left;
}
.ecosystem-card h3{
margin: 0 0 0.5rem;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.2rem;
letter-spacing: 0.005em;
color: var(--color-white);
}
.ecosystem-card p{
margin: 0;
color: rgba(255,255,255,0.78);
line-height: 1.55;
}
.policy{
background: #faf9f7;
}
.policy-timeline{
display: flex;
gap: 2rem;
margin-top: 2rem;
max-width: 900px;
}
.policy-event{
flex: 1;
background: var(--color-white);
border: 1px solid rgba(10, 22, 40, 0.08);
border-radius: 12px;
padding: 1.5rem;
position: relative;
box-shadow: 0 6px 18px rgba(10, 22, 40, 0.05);
}
.policy-event::before{
content: '';
position: absolute;
top: 2rem;
right: -2rem;
width: 2rem;
height: 2px;
background: var(--color-maple);
}
.policy-event:last-child::before{
display: none;
}
.policy-date{
font-size: 1.3rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.005em;
color: var(--color-maple);
margin-bottom: 0.5rem;
}
.policy-event h4{
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 600;
color: var(--color-midnight);
margin-bottom: 0.5rem;
}
.policy-event p{
color: rgba(10, 22, 40, 0.72);
font-size: 1rem;
}
.success-note{
/* About page callout (re-uses existing class) */
margin-top: 2rem;
padding: 1.25rem 1.5rem;
border-radius: 14px;
background: rgba(10, 22, 40, 0.035);
border: 0;
box-shadow: inset 4px 0 0 rgba(212, 168, 75, 0.9), 0 10px 30px rgba(10, 22, 40, 0.06);
}
.success-note p{
margin: 0;
color: rgba(10, 22, 40, 0.9);
font-weight: 600;
font-size: 1.05rem;
}
.credibility{
background: rgba(10, 22, 40, 0.03);
padding: 4rem 2rem;
}
.credibility .section-label{
text-align: center;
margin-bottom: 1rem;
}
.credibility-line{
max-width: 980px;
margin: 0 auto;
text-align: center;
color: rgba(10, 22, 40, 0.82);
font-weight: 600;
}
/* About responsive */
@media (max-width: 1024px){
.policy-timeline{
flex-direction: column;
max-width: 720px;
}
.policy-event::before{display:none;}
.ecosystem-cards{
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 760px;
}
}
@media (max-width: 860px){
.mission-grid{grid-template-columns: 1fr; gap: 1.25rem;}
.page-divider{padding-top: 6rem;}
.about-page .about-intro{ padding: 6.75rem 1.5rem 3.25rem; }
.ecosystem-cards{grid-template-columns: 1fr;}
}
/* =========================
Shared helpers
========================= */
/* Audience card background helpers (keep HTML clean; update image names in Assets/img as needed) */
.audience-card--europe { --card-bg: url('../img/audience-europe.jpg'); }
.audience-card--canada { --card-bg: url('../img/audience-canada.jpg'); }
.audience-card--investors { --card-bg: url('../img/audience-investors.jpg'); }
.audience-card--institutions { --card-bg: url('../img/audience-institutions.jpg'); }
/* Institutions card - consistent with others */
.audience-card--institutions::before{
background-image:
linear-gradient(135deg, rgba(220, 230, 245, 0.68), rgba(255, 255, 255, 0.58)),
var(--card-bg, none);
filter: saturate(0.9) contrast(1) brightness(1.05);
}
/* =========================
How It Works page
========================= */
/* Hero background SVG */
.hero-bg-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
opacity: 0.25;
}
/* Process Timeline Section */
.process-timeline {
background: var(--color-white);
padding: 6rem 2rem;
}
.process-timeline .section-container {
max-width: 1000px;
}
.timeline {
position: relative;
margin-top: 4rem;
--progress: 0px; /* updated by JS */
}
.timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
width: 3px;
height: 100%;
background: rgba(10, 22, 40, 0.03);
transform: translateX(-50%);
border-radius: 2px;
z-index: 1;
}
.timeline::after {
content: '';
position: absolute;
left: 50%;
top: 0;
width: 3px;
height: var(--progress);
background: linear-gradient(
180deg,
var(--color-maple) 0%,
var(--color-gold) 100%
);
transform: translateX(-50%);
border-radius: 2px;
z-index: 2;
transition: height 820ms ease;
}
.timeline.progress-flash::after {
animation: progressFlash 4200ms ease;
}
@keyframes progressFlash {
0% { filter: brightness(1); }
45% { filter: brightness(1.25); }
100% { filter: brightness(1); }
}
.timeline-item {
display: flex;
align-items: center;
margin-bottom: 4rem;
position: relative;
z-index: 3;
}
.timeline-item:nth-child(even) {
flex-direction: row-reverse;
}
.timeline-marker {
flex: 0 0 120px;
display: flex;
justify-content: center;
position: relative;
z-index: 4;
}
.timeline-number {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--color-white);
border: 3px solid rgba(10, 22, 40, 0.03);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 700;
color: var(--color-midnight);
position: relative;
transition: var(--transition-smooth);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.timeline-number::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
background: linear-gradient(
45deg,
var(--color-maple),
var(--color-gold),
var(--color-maple)
);
opacity: 0;
z-index: -1;
transition: opacity 620ms ease;
}
/* Timeline flip card container */
.timeline-content {
flex: 1;
perspective: 1000px;
z-index: 3;
}
.timeline-content-inner {
display: grid;
transition: transform 0.6s ease;
transform-style: preserve-3d;
}
.timeline-content:hover .timeline-content-inner,
.timeline-content:focus-within .timeline-content-inner {
transform: rotateY(180deg);
}
.timeline-content-front,
.timeline-content-back {
grid-area: 1 / 1;
backface-visibility: hidden;
border-radius: 12px;
padding: 1.5rem;
display: flex;
flex-direction: column;
}
.timeline-content-front {
background: var(--color-white);
border: 2px solid var(--color-maple);
box-shadow: 0 4px 16px rgba(10, 22, 40, 0.1);
}
.timeline-content-back {
background: var(--color-navy);
border: 2px solid var(--color-navy);
transform: rotateY(180deg);
color: var(--color-white);
justify-content: center;
align-items: center;
text-align: center;
}
.timeline-content-front h3 {
font-size: 1.4rem;
font-weight: 600;
color: var(--color-midnight);
margin-bottom: 0.5rem;
}
.timeline-content-front p {
color: var(--color-slate);
line-height: 1.6;
font-size: 1rem;
margin: 0;
}
.timeline-content-back p {
color: var(--color-white);
font-size: 1.1rem;
font-weight: 600;
line-height: 1.7;
margin: 0;
}
.output-indicator {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
color: var(--color-maple);
font-weight: 600;
font-size: 0.9rem;
}
.output-indicator svg {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.timeline-content:hover .output-indicator svg {
transform: translateX(4px);
}
/* Active step */
.timeline-item.active .timeline-content {
border-color: rgba(196, 30, 58, 0.35);
box-shadow: 0 12px 40px rgba(10, 22, 40, 0.10);
transform: translateY(-2px);
}
.timeline-item.active .timeline-content::before {
opacity: 1;
}
.timeline-item.active .timeline-number {
border-color: var(--color-maple);
transform: scale(1.06);
box-shadow: 0 12px 40px rgba(196, 30, 58, 0.18);
}
.timeline-item.active .timeline-number::before {
opacity: 1;
animation: spin 12s linear infinite;
}
/* Brief flash when step changes (JS toggles .flash) */
.timeline-item.flash .timeline-number {
box-shadow: 0 14px 48px rgba(196, 30, 58, 0.26);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Qualification Section */
.qualification {
background: rgba(10, 22, 40, 0.03);
padding: 6rem 2rem;
}
.qualification .section-container {
max-width: 900px;
}
.qualification-box {
background: var(--color-white);
padding: 3rem;
border-radius: 12px;
border: 2px solid transparent;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
transition: var(--transition-smooth);
position: relative;
overflow: hidden;
}
.qualification-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(
90deg,
var(--color-maple) 0%,
var(--color-gold) 50%,
var(--color-maple) 100%
);
background-size: 200% 100%;
animation: shimmer 6s linear infinite;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.qualification-box:hover {
border-color: var(--color-maple);
box-shadow: 0 12px 40px rgba(196, 30, 58, 0.15);
transform: translateY(-4px);
}
.qualification-box h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-midnight);
margin-bottom: 1.5rem;
}
.qualification-list {
list-style: none;
padding: 0;
margin: 0 0 2rem 0;
}
.qualification-list li {
padding: 1rem 0 1rem 3rem;
position: relative;
color: var(--color-midnight);
font-size: 1.05rem;
line-height: 1.6;
border-bottom: 1px solid rgba(10, 22, 40, 0.03);
transition: var(--transition-smooth);
}
.qualification-list li:last-child {
border-bottom: none;
}
.qualification-list li::before {
content: '✓';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--color-maple) 0%, var(--color-maple-light) 100%);
color: var(--color-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.2rem;
transition: var(--transition-bounce);
}
.qualification-list li:hover {
padding-left: 3.5rem;
color: var(--color-maple);
}
.qualification-list li:hover::before {
transform: translateY(-50%) rotate(360deg) scale(1.2);
box-shadow: 0 4px 15px rgba(196, 30, 58, 0.4);
}
.qualification-note {
color: var(--color-slate);
font-style: italic;
font-size: 1rem;
padding: 1.5rem;
background: rgba(10, 22, 40, 0.03);
border-radius: 8px;
border-left: 4px solid var(--color-maple);
}
@media (max-width: 768px) {
.qualification-box {
padding: 2rem;
}
.qualification-list li {
padding: 0.75rem 0 0.75rem 2.5rem;
font-size: 0.95rem;
}
.qualification-list li::before {
width: 28px;
height: 28px;
font-size: 1rem;
}
}
/* How it works: responsive */
@media (max-width: 768px) {
.timeline::before,
.timeline::after {
left: 40px;
}
.timeline-item,
.timeline-item:nth-child(even) {
flex-direction: row;
margin-bottom: 3rem;
}
.timeline-marker {
flex: 0 0 80px;
justify-content: flex-start;
}
.timeline-number {
width: 60px;
height: 60px;
font-size: 1.2rem;
}
.timeline-content-front,
.timeline-content-back {
padding: 1.25rem;
}
.qualification-box {
padding: 2rem;
}
.qualification-title {
font-size: 1.6rem;
}
}
/* Membership: outcome-driven benefits list */
.benefits-list {
list-style: none;
padding: 0;
margin: 2.5rem auto 0;
max-width: 900px;
}
.benefits-list li {
position: relative;
padding: 0.9rem 0 0.9rem 2.25rem;
border-bottom: 1px solid rgba(10, 22, 40, 0.08);
color: var(--color-midnight);
line-height: 1.7;
}
.benefits-list li:last-child {
border-bottom: none;
}
.benefits-list li::before {
content: '';
position: absolute;
left: 0;
top: 1.15rem;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-maple);
}
/* FAQ accordion (no animation) */
.faq {
background: var(--color-white);
padding: 6rem 2rem;
}
.faq .section-container {
max-width: 900px;
}
.faq-item {
border-top: 1px solid rgba(10, 22, 40, 0.10);
}
.faq-item:last-child {
border-bottom: 1px solid rgba(10, 22, 40, 0.10);
}
.faq-question {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
padding: 1.25rem 0;
font-weight: 600;
color: var(--color-midnight);
list-style: none;
}
.faq-question::-webkit-details-marker {
display: none;
}
.faq-plus {
width: 18px;
height: 18px;
flex: 0 0 18px;
position: relative;
margin-top: 0.25rem;
color: var(--color-maple);
}
.faq-plus::before,
.faq-plus::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
background: currentColor;
transform: translate(-50%, -50%);
}
.faq-plus::before {
width: 18px;
height: 2px;
}
.faq-plus::after {
width: 2px;
height: 18px;
}
details[open] .faq-plus::after {
opacity: 0; /* + becomes - */
}
.faq-answer {
padding: 0 0 1.25rem 0;
color: var(--color-slate);
}
.faq-answer p {
margin: 0;
}
.faq-answer--flush {
padding: 0;
}
/* Make the Qualification section render like a standalone band when nested inside FAQ */
.faq-answer--flush .qualification {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* Disable scroll-reveal motion inside FAQ (always visible; no animation) */
.faq .scroll-reveal,
.faq .scroll-reveal.revealed {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.timeline::after,
.timeline-number,
.timeline-content,
.qualification-box,
.qualification-list li,
.qualification-list li::before {
transition: none;
animation: none;
}
.timeline.progress-flash::after {
animation: none;
}
.timeline-item.active .timeline-number::before {
animation: none;
}
.qualification-box::before {
animation: none;
}
}
/* Membership: 3 pillars benefits */
.pillars-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:18px;
margin-top:2.5rem;
}
.pillar-card{
background: var(--color-white);
border: 1px solid rgba(10, 22, 40, 0.10);
border-radius: 16px;
padding: 1.5rem;
position: relative;
overflow: hidden;
}
.pillar-card::before{
content: "";
position:absolute;
inset:0;
background: radial-gradient(650px 140px at 0% 0%, rgba(196, 30, 58, 0.12), transparent 60%);
pointer-events:none;
}
.pillar-top{
position: relative;
z-index: 1;
}
.pillar-chip{
display:inline-block;
/* Make ENGAGE / FIT & SCOPE / DECISION more prominent */
font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.15rem);
letter-spacing: 0.005em;
text-transform:uppercase;
padding:0.5rem 0.85rem;
border-radius:999px;
border:1px solid rgba(196, 30, 58, 0.35);
background: rgba(196, 30, 58, 0.10);
color: var(--color-maple);
font-weight:700;
}
.pillar-title{
margin-top:0.75rem;
font-weight:600;
color: var(--color-midnight);
line-height:1.35;
}
.pillar-list{
list-style:none;
padding:0;
margin:1.25rem 0 0;
position: relative;
z-index: 1;
}
.pillar-list li{
position:relative;
padding-left:1.6rem;
margin:0.65rem 0;
color: var(--color-slate);
line-height:1.55;
}
.pillar-list li::before{
content:'';
position:absolute;
left:0;
top:0.7rem;
width:8px;
height:8px;
border-radius:50%;
background: var(--color-maple);
}
.pillar-outcome{
margin-top:1.25rem;
padding-top:1rem;
border-top: 1px solid rgba(10, 22, 40, 0.08);
color: var(--color-midnight);
position: relative;
z-index: 1;
}
.pillar-outcome strong{
color: var(--color-midnight);
}
@media (max-width: 980px){
.pillars-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
.pillars-grid{ grid-template-columns:1fr; }
}
/* ==========================
Page-specific overrides (after global CTA resets)
========================== */
/* Membership: hero is a section (no video, not full-screen) */
.membership-page .hero{
min-height: auto;
padding: 7.5rem 2rem 4.75rem;
}
/* How-it-works: CTA section */
.how-it-works-page .cta-section{
background: var(--color-white);
color: var(--color-midnight);
border-top: none;
}
.how-it-works-page .cta-section h2{
color: var(--color-midnight);
}
.how-it-works-page .cta-section .cta-button{
color: #ffffff;
}
/* ===========================
ABOUT PAGE STYLES
=========================== */
.about-page .about-intro{
background: var(--color-white);
padding: 7.25rem 2rem 3.75rem; /* room for fixed nav */
text-align: center;
}
.about-page .about-intro .section-container{
max-width: 980px;
}
.about-page .about-headline{
font-family: var(--font-display);
font-size: clamp(2.1rem, 4vw, 3.1rem);
line-height: 1.1;
margin: 0.5rem auto 0.75rem;
color: var(--color-midnight);
}
.about-page .about-subhead{
font-size: 1.25rem;
color: rgba(10, 22, 40, 0.78);
margin: 0 auto 0.5rem;
max-width: 860px;
}
.about-page .about-lede{
font-size: 1.2rem;
color: rgba(10, 22, 40, 0.7);
line-height: 1.65;
margin: 0 auto 0;
max-width: 860px;
}
.page-divider{
background: linear-gradient(135deg, var(--color-midnight) 0%, var(--color-navy) 100%);
color: var(--color-white);
text-align: center;
padding: 6.5rem 2rem 3rem; /* room for fixed nav */
}
.page-divider h2{
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 600;
letter-spacing: 0.005em;
color: var(--color-gold);
}
/* .mv-ecosystem-band rules removed — dead code (no HTML uses this class) */
.mission-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3rem;
margin-top: 2rem;
}
.mission-box{
padding: 2rem;
border-left: 4px solid var(--color-maple);
background: linear-gradient(180deg, rgba(232,240,247,0.35) 0%, rgba(255,255,255,0.9) 55%);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(10, 22, 40, 0.06);
}
.mission-box:last-child{
border-left-color: var(--color-gold);
}
.mission-box h3{
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 500;
color: var(--color-midnight);
margin-bottom: 0.75rem;
}
.mission-box p{
color: rgba(10, 22, 40, 0.78);
font-size: 1.2rem;
}
.ecosystem-context{
background: linear-gradient(135deg, var(--color-midnight) 0%, var(--color-navy) 100%);
color: var(--color-white);
padding: 5rem 2rem;
}
.ecosystem-context .section-label{
color: var(--color-gold);
text-align: center;
}
.ecosystem-context .section-title{
color: var(--color-white);
text-align: center;
margin-bottom: 1rem;
}
.ecosystem-context .ecosystem-intro{
color: rgba(255,255,255,0.78);
text-align: center;
max-width: 760px;
margin: 0 auto;
font-size: 1.2rem;
}
/* About: Where we fit (scannable, no cards) */
.ecosystem-context .gap-bullets{
list-style: none;
max-width: 860px;
margin: 2rem auto 0;
padding: 0;
text-align: left;
}
.ecosystem-context .gap-bullets li{
position: relative;
padding-left: 1.35rem;
margin: 0 0 0.95rem;
color: rgba(255,255,255,0.80);
line-height: 1.65;
}
.ecosystem-context .gap-bullets li::before{
content: "";
position: absolute;
left: 0;
top: 0.68em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-gold);
}
.ecosystem-context .gap-bullets strong{
color: var(--color-white);
font-weight: 600;
}
.ecosystem-cards{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
max-width: 980px;
margin: 2.25rem auto 0;
}
.ecosystem-card{
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 14px;
padding: 1.4rem 1.35rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.12);
text-align: left;
}
.ecosystem-card h3{
margin: 0 0 0.5rem;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.2rem;
letter-spacing: 0.005em;
color: var(--color-white);
}
.ecosystem-card p{
margin: 0;
color: rgba(255,255,255,0.78);
line-height: 1.55;
}
.policy{
background: #faf9f7;
}
.policy-timeline{
display: flex;
gap: 2rem;
margin-top: 2rem;
max-width: 900px;
}
.policy-event{
flex: 1;
background: var(--color-white);
border: 1px solid rgba(10, 22, 40, 0.08);
border-radius: 12px;
padding: 1.5rem;
position: relative;
box-shadow: 0 6px 18px rgba(10, 22, 40, 0.05);
}
.policy-event::before{
content: '';
position: absolute;
top: 2rem;
right: -2rem;
width: 2rem;
height: 2px;
background: var(--color-maple);
}
.policy-event:last-child::before{
display: none;
}
.policy-date{
font-size: 1.3rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.005em;
color: var(--color-maple);
margin-bottom: 0.5rem;
}
.policy-event h4{
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 600;
color: var(--color-midnight);
margin-bottom: 0.5rem;
}
.policy-event p{
color: rgba(10, 22, 40, 0.72);
font-size: 1rem;
}
.success-note{
/* About page callout (re-uses existing class) */
margin-top: 2rem;
padding: 1.25rem 1.5rem;
border-radius: 14px;
background: rgba(10, 22, 40, 0.035);
border: 0;
box-shadow: inset 4px 0 0 rgba(212, 168, 75, 0.9), 0 10px 30px rgba(10, 22, 40, 0.06);
}
.success-note p{
margin: 0;
color: rgba(10, 22, 40, 0.9);
font-weight: 600;
font-size: 1.05rem;
}
.credibility{
background: var(--color-ice);
padding: 4rem 2rem;
}
.credibility .section-label{
text-align: center;
margin-bottom: 1rem;
}
.credibility-line{
max-width: 980px;
margin: 0 auto;
text-align: center;
color: rgba(10, 22, 40, 0.82);
font-weight: 600;
}
/* About responsive */
@media (max-width: 1024px){
.policy-timeline{
flex-direction: column;
max-width: 720px;
}
.policy-event::before{display:none;}
.ecosystem-cards{
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 760px;
}
}
@media (max-width: 860px){
.mission-grid{grid-template-columns: 1fr; gap: 1.25rem;}
.page-divider{padding-top: 6rem;}
.about-page .about-intro{ padding: 6.75rem 1.5rem 3.25rem; }
.ecosystem-cards{grid-template-columns: 1fr;}
}
/* Spotlight emphasis (used in About > Where we fit) */
.spotlight{
font-weight: 600;
padding: 0 0.12em;
border-radius: 0.25em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
background-image: linear-gradient(to top, rgba(212, 168, 75, 0.22) 0.55em, transparent 0.55em);
}
/* Stronger (still clean) emphasis line for About > Where we fit */
.wherefit-emphasis{
display: block;
margin-top: 0.85rem;
padding-left: 0.95rem;
border-left: 3px solid var(--maple-red, #c41e3a);
font-weight: 600;
}
/* About: center-align Policy tailwind section (timeline + callout) */
.about-page .policy .section-label,
.about-page .policy .section-title{
text-align: center;
}
.about-page .policy-timeline{
margin-left: auto;
margin-right: auto;
justify-content: center;
}
.about-page .policy-event{
text-align: center;
}
.about-page .policy-event::before{
top: 50%;
transform: translateY(-50%);
}
.about-page .success-note{
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.about-page .success-note p{
text-align: center;
}
/* Secondary CTA link (used under primary buttons) */
.cta-secondary-link{
display: inline-block;
margin-top: 0.9rem;
font-weight: 600;
text-decoration: none;
color: var(--color-maple);
}
.cta-secondary-link:hover{
text-decoration: underline;
}
/* Timeline output line (How It Works) */
/* How-it-works add-on clarity */
.timeline-note{
max-width: 860px;
margin: 0 auto 3rem;
padding: 1rem 1.2rem;
text-align: center;
background: rgba(196, 30, 58, 0.10);
border: 1px dashed rgba(196, 30, 58, 0.35);
border-radius: 16px;
color: rgba(10, 22, 40, 0.88);
font-weight: 650;
}
.addon-badge{
display: inline-block;
margin-left: 0.6rem;
padding: 0.2rem 0.55rem;
font-size: 0.72rem;
letter-spacing: 0.10em;
text-transform: uppercase;
border-radius: 999px;
background: rgba(196, 30, 58, 0.12);
border: 1px solid rgba(196, 30, 58, 0.25);
color: var(--color-maple);
vertical-align: middle;
}
.timeline-item.timeline-addon .timeline-content-front {
border: 2px dashed var(--color-maple);
}
.timeline-item.timeline-addon .timeline-number{
background: linear-gradient(135deg, var(--color-maple) 0%, var(--color-maple-light) 100%);
border: 3px dotted var(--color-maple);
}
.timeline-output{
margin-top: 0.85rem;
font-size: 0.98rem;
color: rgba(10, 22, 40, 0.90);
background: rgba(196, 30, 58, 0.14);
border-left: 4px solid var(--color-maple);
padding: 0.65rem 0.9rem;
border-radius: 10px;
}
.timeline-output strong{ color: var(--color-maple); }
/* Policy links (About) */
.policy-link{
font-weight: 600;
text-decoration: none;
color: var(--color-maple);
display: inline-block;
margin-top: 0.75rem;
}
.policy-link:hover{
text-decoration: underline;
}
/* Partners intent (About) — separate section to avoid crowding the Ecosystem block */
.partners-intent-section{
background: rgba(10, 22, 40, 0.03);
padding: 4.5rem 2rem;
}
.partners-intent-card{
max-width: 980px;
margin: 0 auto;
background: var(--color-white);
border-radius: 16px;
padding: 2.5rem;
box-shadow: inset 0 0 0 1px rgba(10, 22, 40, 0.08);
}
.partners-intent-card h3{
margin: 0 0 0.9rem 0;
font-size: 1.25rem;
color: var(--color-midnight);
}
.partners-intent-card .intent-list{
margin: 0;
padding-left: 1.2rem;
color: rgba(10, 22, 40, 0.85);
}
.partners-intent-card .intent-list li{ margin: 0.45rem 0; }
/* “Designed to work alongside” list (About) */
.ecosystem-partners-intent{
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(10, 22, 40, 0.12);
}
.ecosystem-partners-intent h3{
margin: 0 0 0.75rem 0;
font-size: 1.1rem;
color: var(--color-midnight);
}
.intent-list{
margin: 0;
padding-left: 1.2rem;
color: rgba(10, 22, 40, 0.85);
}
.intent-list li{ margin: 0.45rem 0; }
/* Mobile menu CTA item (keeps Request Membership visible on mobile) */
.nav-links .nav-cta-mobile{ display: none; }
@media (max-width: 768px){
.nav-links .nav-cta-mobile{ display: block; text-align: center; }
.nav-links .nav-cta-mobile .nav-cta{ display: inline-flex; justify-content: center; width: auto; padding: 1rem 2.5rem; }
}
/* About Page - Clean minimal partners section */
.partners-inline{
max-width: 820px;
margin: 3rem auto 0;
padding-top: 2.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.partners-label{
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-gold);
font-weight: 600;
margin-bottom: 1rem;
text-align: center;
}
.partners-text{
color: rgba(255, 255, 255, 0.75);
font-size: 1.05rem;
line-height: 1.8;
text-align: center;
margin: 0;
}
/* About: Where we fit - LIGHT section with proper contrast */
.where-we-fit-clean{
background: var(--color-white);
padding: 6rem 2rem;
}
.where-we-fit-clean .section-label{
text-align: center;
}
.where-we-fit-clean .section-title{
text-align: center;
margin-bottom: 2rem;
}
.fit-description{
max-width: 820px;
margin: 0 auto 3rem;
text-align: center;
font-size: 1.2rem;
line-height: 1.75;
color: var(--color-slate);
}
/* Partners - Simple list on light background */
.partners-simple{
max-width: 820px;
margin: 0 auto;
padding-top: 2.5rem;
border-top: 1px solid rgba(10, 22, 40, 0.12);
}
.partners-simple .partners-label{
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-maple);
font-weight: 600;
margin-bottom: 1rem;
text-align: center;
}
.partners-simple .partners-text{
color: var(--color-slate);
font-size: 1.05rem;
line-height: 1.8;
text-align: center;
margin: 0;
}
/* Policy timeline - Fixed alignment for lines and Read more */
.policy-event {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
}
.policy-content {
flex-grow: 1;
}
.policy-footer {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 2px solid rgba(196, 30, 58, 0.2);
}
.policy-link {
display: inline-block;
}
/* Policy card titles - Make larger */
.policy-event h4 {
font-size: 1.15rem;
font-weight: 600;
}
/* === HERO DEFAULT (Ice Blue) — used unless page specifies otherwise === */
.hero{
min-height: 65vh;
display: flex;
align-items: center;
padding: 7rem 2rem 4rem;
position: relative;
overflow: hidden;
background: linear-gradient(135deg,
#d6e8ff 0%,
#eef6ff 55%,
#dfefff 100%);
}
.hero::before{
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 22% 18%, rgba(90, 160, 245, 0.14) 0%, transparent 58%),
radial-gradient(circle at 78% 78%, rgba(196, 30, 58, 0.06) 0%, transparent 60%);
pointer-events: none;
z-index: 1;
}
.hero .hero-container,
.hero .hero-content{
position: relative;
z-index: 2;
}
.hero:not(.hero--image) .hero-tagline{ color: var(--color-maple); }
.hero:not(.hero--image) h1{ color: var(--color-midnight); }
.hero:not(.hero--image) .hero-subtitle{ color: var(--color-slate); }
/* Video hero keeps video overlay */
.hero.hero--image{
min-height: 100vh;
padding: 8rem 2rem 6rem;
}
/* Do not layer the default wash over the video hero */
.hero.hero--image::before{ content: none; }
.hero.hero--image h1{ color: #fff; }
.hero.hero--image .hero-subtitle{ color: rgba(255,255,255,0.86); }
/* About page: "Where we fit" text spacing so it doesn't look tight */
.about-page .fit-description{
max-width: 980px;
margin: 0.85rem auto 0;
font-size: 1.25rem;
line-height: 1.75;
}
/* Video hero: ensure supporting lines stay readable */
.hero.hero--image
/* Video hero: keep the proof line readable without altering the gold tagline */
.hero.hero--image .hero-proof{
color: rgba(255,255,255,0.92);
}
/* About page: slightly stronger ice-blue hero (no gold) + less vertical height */
.about-page .hero{
min-height: 55vh;
padding: 6rem 2rem 3.25rem;
background: linear-gradient(135deg, #cfe3ff 0%, #eef6ff 58%, #d8ecff 100%);
}
.about-page .hero::before{
background:
radial-gradient(circle at 22% 18%, rgba(90, 160, 245, 0.18) 0%, transparent 58%),
radial-gradient(circle at 78% 78%, rgba(196, 30, 58, 0.07) 0%, transparent 60%);
}
/* About page: reduce top whitespace before Mission/Vision so it doesn't sit too far down */
.about-page .mission-vision{
padding: 3.75rem 2rem 5rem;
}
.nowrap{ white-space: nowrap; }
/* ===========================
DESIGN REFINEMENTS
Subtle improvements for polish
=========================== */
/* Enhanced heading typography */
h1 {
letter-spacing: -0.02em;
font-weight: 600;
}
h2 {
letter-spacing: -0.015em;
}
/* Refined body text readability */
p {
line-height: 1.75;
}
/* Nav CTA button - add depth */
.nav-cta {
box-shadow: 0 2px 8px rgba(10, 22, 40, 0.15);
}
.nav-cta:hover {
box-shadow: 0 6px 16px rgba(15, 30, 61, 0.25);
}
/* Softer, more modern card shadows */
.audience-card,
.tier-card,
.service-step-card,
.mission-box,
.policy-event,
.timeline-content-front {
box-shadow: 0 4px 20px rgba(10, 22, 40, 0.04),
0 1px 3px rgba(10, 22, 40, 0.06);
}
.audience-card:hover,
.tier-card:hover,
.service-step-card:hover {
box-shadow: 0 12px 32px rgba(10, 22, 40, 0.08),
0 4px 8px rgba(10, 22, 40, 0.04);
}
/* CTA button refinement */
.cta-button {
box-shadow: 0 4px 14px rgba(196, 30, 58, 0.25);
letter-spacing: 0.02em;
}
.cta-button:hover {
box-shadow: 0 8px 24px rgba(196, 30, 58, 0.35);
}
/* Smoother link underline animation */
.nav-links a::after {
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Footer link hover refinement */
.footer-links a {
transition: color 0.3s ease, padding-left 0.3s ease;
}
/* Improved focus states for accessibility */
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--color-maple);
outline-offset: 3px;
}
/* Subtle section separator */
.problem,
.audience,
.services-explanation,
.tiers,
.faq {
position: relative;
}
.problem::before,
.audience::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--color-maple), var(--color-gold));
border-radius: 2px;
opacity: 0.6;
}
/* Hero subtitle refinement */
.hero-subtitle {
font-weight: 700;
opacity: 0.92;
}
/* Mission/Vision box hover enhancement */
.mission-box {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mission-box:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(10, 22, 40, 0.1);
}
/* FAQ question hover state */
.faq-question:hover {
color: var(--color-maple);
}
/* Flow step icon subtle pulse on hover */
.flow-step:hover .flow-icon {
animation: subtlePulse 1.5s ease-in-out infinite;
}
@keyframes subtlePulse {
0%, 100% { transform: scale(1.1) rotate(5deg); }
50% { transform: scale(1.15) rotate(5deg); }
}
/* Timeline number hover glow */
.timeline-number:hover {
box-shadow: 0 8px 30px rgba(196, 30, 58, 0.25);
}
/* Audience icon transition refinement */
.audience-icon {
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Policy card date styling */
.policy-date {
font-size: 0.8rem;
letter-spacing: 0.08em;
}
/* ===========================
VISUAL CALLOUTS
=========================== */
/* Key insight / highlight box */
.callout-box {
background: linear-gradient(135deg, rgba(196, 30, 58, 0.06), rgba(212, 168, 75, 0.04));
border-left: 4px solid var(--color-maple);
padding: 1.5rem 1.75rem;
margin: 2rem 0;
border-radius: 0 12px 12px 0;
}
.callout-box p {
margin: 0;
font-size: 1.1rem;
font-weight: 500;
color: var(--color-midnight);
line-height: 1.7;
}
.callout-box .callout-label {
display: block;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-maple);
margin-bottom: 0.5rem;
}
/* Pull quote style */
.pull-quote {
text-align: center;
padding: 2.5rem 2rem;
margin: 3rem auto;
max-width: 700px;
position: relative;
}
.pull-quote p {
font-size: 1.25rem;
font-weight: 500;
color: var(--color-midnight);
line-height: 1.5;
font-style: italic;
}
.pull-quote::before {
content: '"';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
font-size: 4rem;
color: var(--color-maple);
opacity: 0.3;
font-family: Georgia, serif;
line-height: 1;
}
/* Credibility bar */
.credibility-bar {
display: flex;
justify-content: center;
gap: 3rem;
padding: 2rem;
background: rgba(10, 22, 40, 0.03);
border-top: 1px solid rgba(10, 22, 40, 0.06);
border-bottom: 1px solid rgba(10, 22, 40, 0.06);
margin: 3rem 0;
flex-wrap: wrap;
}
.credibility-item {
text-align: center;
}
.credibility-item .number {
display: block;
font-size: 2rem;
font-weight: 700;
color: var(--color-maple);
line-height: 1.2;
}
.credibility-item .label {
font-size: 0.85rem;
color: var(--color-slate);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Comparison table */
.comparison-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.comparison-col {
padding: 1.5rem;
border-radius: 12px;
}
.comparison-col.before {
background: rgba(10, 22, 40, 0.04);
}
.comparison-col.after {
background: linear-gradient(135deg, rgba(196, 30, 58, 0.08), rgba(212, 168, 75, 0.06));
border: 1px solid rgba(196, 30, 58, 0.15);
}
.comparison-col h4 {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1rem;
color: var(--color-slate);
}
.comparison-col.after h4 {
color: var(--color-maple);
}
.comparison-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.comparison-col li {
padding: 0.5rem 0;
color: var(--color-midnight);
border-bottom: 1px solid rgba(10, 22, 40, 0.06);
}
.comparison-col li:last-child {
border-bottom: none;
}
@media (max-width: 600px) {
.comparison-grid {
grid-template-columns: 1fr;
}
.credibility-bar {
gap: 2rem;
}
}
/* === Desktop & Mobile Enhancements: Visual Narrative + CRO + Timeline === */
/* GLOBAL: Prevent mid-word breaks in hero text only.
Section titles are allowed to wrap naturally across lines. */
.hero h1, .hero-subtitle, .hero-tagline-bottom,
.hero-title--letters .word,
.hero-title--letters .letter {
overflow-wrap: normal;
word-break: keep-all;
hyphens: none;
white-space: nowrap;
}
@media (max-width: 480px) {
.hero h1 {
font-size: clamp(1.8rem, 8vw, 2.5rem);
}
}
/* Hero CTAs */
.hero-cta {
display: flex;
gap: 1rem;
margin-top: 1.75rem;
flex-wrap: wrap;
align-items: center;
}
.cta-button.cta-button--ghost {
background: transparent;
border: 2px solid rgba(10, 22, 40, 0.28);
color: var(--color-midnight);
padding: 1.15rem 2.25rem;
}
.cta-button.cta-button--ghost:hover {
background: rgba(10, 22, 40, 0.06);
transform: translateY(-2px);
}
.home-page .cta-button.cta-button--ghost {
border-color: rgba(255, 255, 255, 0.40);
color: var(--color-white);
}
.home-page .cta-button.cta-button--ghost:hover {
background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 600px) {
.hero-cta {
flex-direction: column;
align-items: stretch;
}
.hero-cta .cta-button {
width: 100%;
text-align: center;
}
}
/* Home hero title animation (Option 1: staggered word reveal) */
.hero-title--animate {
display: block;
margin: 0;
}
.hero-title--animate .word {
display: inline-block;
opacity: 0;
transform: translateY(18px);
filter: blur(8px);
will-change: transform, opacity, filter;
}
.hero-title--animate.is-in .word {
animation: heroWordIn 1400ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
animation-delay: calc(var(--i) * 220ms);
}
@keyframes heroWordIn {
from {
opacity: 0;
transform: translateY(18px);
filter: blur(8px);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-title--animate .word,
.hero-title--animate.is-in .word {
opacity: 1;
transform: none;
filter: none;
animation: none !important;
}
}
/* Home hero: Verticals & Industries logo marquee (Framer-style) */
.hero-verticals {
margin-top: 2.5rem;
display: flex;
align-items: center;
gap: 2rem;
}
.hero-verticals-label {
flex: 0 0 auto;
font-size: 0.9rem;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.2;
color: rgba(255, 255, 255, 0.78);
}
.hero-marquee {
position: relative;
overflow: hidden;
flex: 1 1 auto;
}
.hero-marquee::before,
.hero-marquee::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 64px;
pointer-events: none;
z-index: 1;
}
.hero-marquee::before {
left: 0;
background: linear-gradient(90deg, rgba(10, 22, 40, 0.92) 0%, rgba(10, 22, 40, 0) 100%);
}
.hero-marquee::after {
right: 0;
background: linear-gradient(270deg, rgba(10, 22, 40, 0.92) 0%, rgba(10, 22, 40, 0) 100%);
}
.hero-marquee-inner {
display: flex;
width: max-content;
align-items: center;
animation: heroMarquee 22s linear infinite;
}
.hero-marquee-group {
display: flex;
align-items: center;
gap: 40px;
padding-right: 40px;
}
.hero-marquee img {
height: 36px;
width: auto;
display: block;
filter: grayscale(100%) brightness(1.18) contrast(0.92);
opacity: 0.78;
}
.hero-marquee:hover .hero-marquee-inner {
animation-play-state: paused;
}
@keyframes heroMarquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (max-width: 800px) {
.hero-verticals {
flex-direction: column;
align-items: flex-start;
gap: 0.9rem;
}
.hero-marquee::before,
.hero-marquee::after {
width: 40px;
}
.hero-marquee img {
height: 32px;
}
}
/* Visual Narrative: subtle hero imagery per page (keeps text readable) */
.about-page .hero,
.services-page .hero,
.insights-page .hero,
.page-membership .hero,
.how-page .hero {
position: relative;
overflow: hidden;
}
.about-page .hero::after,
.services-page .hero::after,
.insights-page .hero::after,
.page-membership .hero::after,
.how-page .hero::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.12;
background-size: cover;
background-position: center;
filter: saturate(0.85) contrast(1.05);
transform: scale(1.03);
z-index: 0;
}
.about-page .hero::after { background-image: url("../img/audience-institutions.jpg"); }
.services-page .hero::after { background-image: url("../img/audience-investors.jpg"); }
.insights-page .hero::after { background-image: url("../img/audience-europe.jpg"); }
.page-membership .hero::after { background-image: url("../img/audience-canada.jpg"); }
.how-page .hero::after { background-image: url("../img/audience-europe.jpg"); }
.about-page .hero::before,
.services-page .hero::before,
.insights-page .hero::before,
.page-membership .hero::before,
.how-page .hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 22, 40, 0.06) 0%, rgba(255, 255, 255, 0.92) 70%);
z-index: 0;
}
.about-page .hero .hero-container,
.services-page .hero .hero-container,
.insights-page .hero .hero-container,
.page-membership .hero .hero-container,
.how-page .hero .hero-container {
position: relative;
z-index: 1;
}
/* Insights: Policy Updates → interactive timeline (details/summary) */
.policy-timeline {
max-width: 980px;
margin: 2.5rem auto 0;
text-align: left;
position: relative;
padding-left: 2.25rem;
}
.policy-timeline::before {
content: "";
position: absolute;
left: 14px;
top: 0.5rem;
bottom: 0.5rem;
width: 2px;
background: rgba(10, 22, 40, 0.12);
border-radius: 2px;
}
.policy-timeline .policy-event {
background: var(--color-white);
border: 1px solid rgba(10, 22, 40, 0.12);
border-radius: 14px;
padding: 1.15rem 1.25rem;
margin-bottom: 1.1rem;
box-shadow: 0 18px 40px rgba(10, 22, 40, 0.08);
position: relative;
}
.policy-timeline .policy-event::before {
content: "";
position: absolute;
left: -26px;
top: 1.4rem;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color-maple);
box-shadow: 0 10px 24px rgba(196, 30, 58, 0.25);
}
.policy-timeline summary {
cursor: pointer;
display: grid;
grid-template-columns: 140px 1fr;
gap: 1rem;
align-items: baseline;
list-style: none;
}
.policy-timeline summary::-webkit-details-marker { display: none; }
.policy-timeline .policy-date {
font-weight: 800;
color: var(--color-maple);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.78rem;
}
.policy-timeline .policy-title {
font-weight: 750;
color: var(--color-midnight);
line-height: 1.3;
}
.policy-timeline .policy-link {
display: inline-block;
margin-top: 0.85rem;
text-decoration: none;
font-weight: 700;
color: var(--color-maple);
}
@media (max-width: 720px) {
.policy-timeline summary {
grid-template-columns: 1fr;
gap: 0.35rem;
}
}
/* Index: By the Numbers */
.numbers-section {
padding: 5rem 0;
background: var(--color-white);
}
.numbers-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.6rem;
max-width: 980px;
margin: 2.6rem auto 0;
}
.number-card {
border: 1px solid rgba(10, 22, 40, 0.12);
border-radius: 16px;
padding: 2.2rem;
background: linear-gradient(180deg, rgba(240, 248, 255, 0.80), rgba(255, 255, 255, 1));
box-shadow: 0 18px 40px rgba(10, 22, 40, 0.08);
}
.number-value {
font-size: clamp(2.4rem, 4vw, 3.2rem);
font-weight: 850;
color: var(--color-midnight);
line-height: 1;
}
.number-label {
margin-top: 0.8rem;
font-weight: 750;
color: var(--color-midnight);
}
.number-note {
margin-top: 0.6rem;
color: rgba(10, 22, 40, 0.75);
font-size: 1.02rem;
line-height: 1.45;
}
@media (max-width: 820px) {
.numbers-grid {
grid-template-columns: 1fr;
}
}
/* About: With vs Without → clean side-by-side comparison */
.comparison-sbs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem 2rem;
margin-top: 2.25rem;
align-items: start;
}
.comparison-sbs-col {
background: var(--color-white);
border-radius: 14px;
padding: 1.6rem 1.6rem 1.25rem;
border: 1px solid rgba(10, 22, 40, 0.12);
box-shadow: 0 18px 40px rgba(10, 22, 40, 0.08);
}
.comparison-sbs-col--without {
border-left: 6px solid rgba(196, 30, 58, 0.75);
}
.comparison-sbs-col--with {
border-left: 6px solid rgba(10,22,40,0.42);
}
.comparison-sbs-kicker {
margin: 0;
font-weight: 850;
color: var(--color-midnight);
letter-spacing: -0.01em;
}
.comparison-sbs-sub {
margin: 0.5rem 0 0;
color: rgba(10, 22, 40, 0.74);
}
.comparison-sbs-rows {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.9rem 2rem;
margin-top: 0.5rem;
}
.comparison-sbs-row {
display: contents;
}
.comparison-sbs-cell {
border-radius: 12px;
padding: 1.1rem 1.2rem;
border: 1px solid rgba(10, 22, 40, 0.10);
background: rgba(240, 248, 255, 0.75);
color: var(--color-midnight);
font-weight: 650;
line-height: 1.4;
}
.comparison-sbs-cell.negative {
border-left: 4px solid rgba(196, 30, 58, 0.75);
}
.comparison-sbs-cell.positive {
border-left: 4px solid rgba(10,22,40,0.42);
}
@media (max-width: 900px) {
.comparison-sbs {
grid-template-columns: 1fr;
}
.comparison-sbs-rows {
grid-template-columns: 1fr;
}
.comparison-sbs-rows .comparison-sbs-cell.positive {
margin-top: -0.35rem;
}
}
/* Mobile CRO: sticky "Request Membership" CTA - Centered pill style */
.mobile-sticky-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
z-index: 9999;
display: none;
pointer-events: none;
}
.mobile-sticky-cta__inner {
display: flex;
justify-content: center;
}
.mobile-sticky-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
text-decoration: none;
background: #FF0000;
color: #ffffff;
padding: 0.9rem 1.5rem;
border-radius: 9999px;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.03em;
box-shadow: 0 8px 24px rgba(255, 0, 0, 0.35);
pointer-events: auto;
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.mobile-sticky-cta__btn::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #ffffff;
flex-shrink: 0;
}
.mobile-sticky-cta__btn:hover {
background: #ffffff;
color: #FF0000;
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(255, 0, 0, 0.3);
}
.mobile-sticky-cta__btn:hover::before {
background: #FF0000;
}
.mobile-sticky-cta.is-hidden {
display: none !important;
}
@media (max-width: 820px) {
.mobile-sticky-cta { display: block; }
body.has-mobile-sticky-cta { padding-bottom: 80px; }
}
/* ===========================
Mirage-style navigation overrides
(Ensure these win over generic "Design refinements" rules below)
=========================== */
.nav .nav-links a::after{
transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav .nav-cta{
box-shadow: 0 10px 28px rgba(10, 22, 40, 0.18);
}
.nav .nav-cta:hover,
.nav .nav-cta:focus-visible{
box-shadow: 0 14px 36px rgba(10, 22, 40, 0.26);
}
/* ==========================
Home hero background image (Framer-like slow zoom)
Background only (no carousel/logos)
========================== */
.home-page .hero.hero--image{
min-height: 100vh;
padding: 8rem 2rem 6rem;
position: relative;
overflow: hidden;
isolation: isolate; /* predictable stacking */
}
/* Remove default ice-blue hero wash/pulse on the animated photo hero */
.home-page .hero.hero--image::before,
.home-page .hero.hero--image::after{
content: none;
}
/* Background media layer */
.home-page .hero.hero--image{
position: relative;
overflow: hidden;
isolation: isolate;
}
.home-page .hero.hero--image .hero-bg-media{
position: absolute;
inset: -10%;
z-index: 0;
overflow: hidden;
}
.home-page .hero.hero--image .hero-bg-media img{
width: 100%;
height: 100%;
object-fit: cover;
transform-origin: center;
will-change: transform;
animation: heroKenBurns 6.5s ease-in-out infinite alternate;
}
@keyframes heroKenBurns{
from { transform: scale(1.2); }
to { transform: scale(1); }
}
/* Ensure overlay and content sit above image */
.home-page .hero.hero--image .hero-bg-overlay{ z-index: 1; }
.home-page .hero.hero--image .hero-container{ z-index: 2; }
/* Subtle overlay motion */
.home-page .hero.hero--image .hero-bg-overlay{
background-size: 140% 140%;
animation: heroOverlayShift 12s ease-in-out infinite;
}
@keyframes heroOverlayShift{
0% { background-position: 0% 0%; }
50% { background-position: 60% 40%; }
100% { background-position: 0% 0%; }
}
@media (prefers-reduced-motion: reduce){
.home-page .hero.hero--image .hero-bg-media img{ animation: none !important; }
.home-page .hero.hero--image .hero-bg-overlay{ animation: none !important; }
}
/* Home hero verticals marquee */
.home-page .hero.hero--image{
min-height: 110vh;
}
.hero-verticals{
margin-top: 36px;
display: flex;
align-items: center;
gap: 32px;
max-width: 1100px;
}
.hero-verticals-label{
display: flex;
flex-direction: column;
gap: 4px;
min-width: 240px;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.72);
}
.logo-marquee{
position: relative;
overflow: hidden;
height: 56px;
flex: 1;
-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.logo-track{
height: 100%;
display: flex;
align-items: center;
gap: 38px;
width: max-content;
animation: logoMarquee 30s linear infinite;
}
.logo-track img{
height: 36px;
width: auto;
display: block;
object-fit: contain;
filter: grayscale(1) brightness(1.35) contrast(0.9);
opacity: 0.62;
}
@keyframes logoMarquee{
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (max-width: 980px){
.hero-verticals{
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.hero-verticals-label{
min-width: unset;
font-size: 0.85rem;
}
.logo-marquee{
width: 100%;
}
}
/* Hero title (sequential reveal, elegant fade + slight rise) */
.hero h1.hero-title--clip{
line-height: 1.5;
margin: 0;
max-width: 28ch;
}
/* Keep descenders safe (g/y/p/q/j) without clipping artifacts */
.hero h1.hero-title--clip .rw {
padding-bottom: 0.18em;
}
/* Dead carousel rules removed — no HTML uses .carousel-box/.carousel-track/.carousel-label */
.home-page .hero-content {
max-width: 1400px;
width: 100%;
}
/* Hero Logo Carousel (Home) */
#home.hero {
position: relative;
/* reserve space so the carousel doesn't collide with hero content */
padding-bottom: clamp(200px, 22vh, 280px);
}
#home .hero-logo-strip {
position: absolute;
left: 0;
right: 0;
bottom: 10px;
max-width: 1400px;
width: calc(100% - 2rem);
margin: 0 auto;
padding: 0 1.35rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
z-index: 5;
box-sizing: border-box;
}
#home .hero-logo-label {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
color: rgba(255, 255, 255, 0.92);
min-width: 180px;
margin: 0;
padding: 0;
position: relative;
top: -12px;
}
#home .hero-logo-label__title {
font-size: 15px;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.85;
}
#home .hero-logo-label__text {
font-size: 26px;
line-height: 1.1;
font-weight: 700;
}
#home .hero-logo-marquee {
flex: 1 1 auto;
background: none;
border: none;
padding: 0 10px;
overflow: hidden;
height: 185px;
display: flex;
align-items: center;
position: relative;
}
#home .hero-logo-marquee::before,
#home .hero-logo-marquee::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 60px;
z-index: 2;
pointer-events: none;
}
#home .hero-logo-marquee::before {
left: 0;
background: linear-gradient(to right, rgba(5, 15, 30, 0.1) 0%, rgba(5, 15, 30, 0) 100%);
}
#home .hero-logo-marquee::after {
right: 0;
background: linear-gradient(to left, rgba(5, 15, 30, 0.5) 0%, rgba(5, 15, 30, 0) 100%);
}
#home .hero-logo-track {
display: flex;
align-items: center;
flex-wrap: nowrap;
width: max-content;
gap: 110px; /* ~3cm on most screens */
animation: eurocanHeroMarquee 28s linear infinite;
will-change: transform;
position: relative;
z-index: 1;
}
#home .hero-logo-track img {
height: 180px;
width: auto;
display: block;
flex: 0 0 auto;
object-fit: contain;
opacity: 0.92;
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}
@keyframes eurocanHeroMarquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
#home .hero-logo-track { animation: none; }
}
@media (max-width: 860px) {
#home .hero-logo-strip {
flex-direction: column;
align-items: stretch;
}
#home .hero-logo-label {
min-width: auto;
align-items: center;
}
#home .hero-logo-marquee {
width: 100%;
}
#home .hero-logo-track img {
height: 120px;
}
#home .hero-logo-track {
gap: 100px;
}
}
/* === Framer-match cleanup (homepage hero) === */
.home-page .hero.hero--image{
background: transparent;
}
/* Hero background: 4s zoom-out then cinematic Ken Burns drift (continuous) */
@keyframes heroIntroZoomOut{
from { transform: scale(1.20) translate3d(0,0,0); }
to { transform: scale(1.00) translate3d(0,0,0); }
}
@keyframes heroCinematicDrift{
0% { transform: scale(1.02) translate3d(0%, 0%, 0); }
50% { transform: scale(1.06) translate3d(-2%, -1%, 0); }
100% { transform: scale(1.02) translate3d(0%, 0%, 0); }
}
/* Apply to the hero background image */
.home-page .hero.hero--image .hero-bg-image{
animation: heroIntroZoomOut 4s cubic-bezier(0.44,0,0.56,1) forwards,
heroCinematicDrift 26s ease-in-out 4s infinite;
transform-origin: 50% 40%;
will-change: transform;
}
/* Hero headline: Framer-like spring drop-in per line (fast, professional) */
@keyframes heroSpringDropIn{
0% { opacity: 0; transform: translate3d(0,-80px,0); filter: blur(6px); }
60% { opacity: 1; transform: translate3d(0,0px,0); filter: blur(0px); }
100% { opacity: 1; transform: translate3d(0,0px,0); filter: blur(0px); }
}
.home-page .hero .hero-title--clip{
line-height: 1.03;
}
.home-page .hero .hero-title--clip .rw-wrap{
display: block;
overflow: hidden; /* Framer-like clipped reveal */
}
/* Hero image loads immediately via preload - no placeholder needed */
/* === Framer-style per-letter reveal for homepage hero headline === */
.home-page .hero .hero-title.hero-title--clip .rw-wrap{
overflow:hidden;
}
.home-page .hero .hero-title.hero-title--clip .rw{
display:inline-block;
white-space:nowrap;
}
.home-page .hero .hero-title.hero-title--clip .char{
display:inline-block;
opacity:0.001;
filter:blur(10px);
transform:translateX(0px) translateY(10px) scale(1);
will-change:transform, opacity, filter;
}
@media (prefers-reduced-motion: reduce){
.home-page .hero .hero-title.hero-title--clip .char{
opacity:1;
filter:none;
transform:none;
}
}
/* ===== Framer-matching hero headline + background stability (patch) ===== */
.home-page .hero.hero--image .hero-bg-image{
display:block;
width:100%;
height:100%;
object-fit:cover;
/* No opacity hiding: image should paint as soon as possible */
}
.home-page .hero.hero--image h1{
color: var(--color-white);
}
/* Prevent descenders (like 'g') from being clipped by overflow-hidden wrappers */
.home-page .hero .hero-title.hero-title--clip{
line-height: 1.18;
}
.home-page .hero .rw-wrap{
display:block;
overflow:hidden;
padding-bottom: 0.18em;
}
.home-page .hero .rw{
display:block;
padding-bottom: 0; /* handled by rw-wrap */
}
/* =========================
Shared Icon Box Component
Base styling for icon containers used across pages
========================= */
.icon-box {
width: 72px;
height: 72px;
background: #ffffff;
border: 3px solid #d1d5db;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.icon-box svg {
width: 52px;
height: 52px;
stroke: #FF0000;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.3s ease, fill 0.3s ease;
}
/* Hover state - parent must have hover trigger */
.icon-box-hover:hover .icon-box {
background: #FF0000;
transform: rotate(5deg) scale(1.1);
}
.icon-box-hover:hover .icon-box svg {
stroke: #ffffff;
}
/* Variant: EU flag background */
.icon-box--europe {
background: #003399;
}
.icon-box--europe svg {
stroke: none;
fill: #FFCC00;
}
.icon-box-hover:hover .icon-box--europe svg {
fill: #ffffff;
}
/* Variant: Canada white background with filled leaf */
.icon-box--canada {
background: #ffffff;
}
.icon-box--canada svg {
stroke: none;
fill: #FF0000;
}
.icon-box-hover:hover .icon-box--canada svg {
fill: #ffffff;
}
/* ===== INDEX PAGE STYLES ===== */
/* Index page hero height override */
.home-page .hero {
min-height: 100vh;
}
/* Make all hero text bold */
.home-page .hero .hero-tagline,
.home-page .hero h1,
.home-page .hero .hero-subtitle {
font-weight: 700;
}
/* How it works link in hero */
.how-it-works-link {
display: inline-block;
margin-top: 1.5rem;
font-size: 1.1rem;
color: var(--color-gold);
text-decoration: none;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.how-it-works-link:hover {
text-decoration: underline;
color: #e6bc5f;
}
/* --- Audience cards: icon sizing + flag fidelity + border hover --- */
:root{
--eu-flag-blue:#003399;
--eu-flag-yellow:#FFCC00;
--canada-flag-red:#D52B1E;
--audience-icon-size:52px; /* ~30% larger than previous iteration */
}
/* Hero background - image loads immediately via preload + CSS */
.home-page .hero.hero--image {
background: url(../img/hero-bg.jpg) center/cover no-repeat;
}
/* Letter-by-letter hero animation */
.hero-title--letters {
display: block;
line-height: 1.4;
}
.hero-title--letters .word {
display: block;
overflow: hidden;
padding-bottom: 0.15em;
}
.hero-title--letters .letter {
display: inline-block;
opacity: 0;
transform: translateY(10px) translateZ(0);
animation: letterReveal 0.5s ease-out forwards;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: transform, opacity;
}
/* Hide sticky CTA on the request page itself (redundant) */
.request-page .sticky-cta { display: none; }
/* Sticky Request Membership Button - matches nav-cta style */
.sticky-cta {
position: fixed;
bottom: 2rem;
right: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
background: #FF0000;
color: #ffffff;
padding: 0.85rem 1.35rem;
border-radius: 9999px;
text-decoration: none;
font-weight: 750;
font-size: 0.95rem;
letter-spacing: 0.04em;
z-index: 1000;
box-shadow: 0 10px 28px rgba(255, 0, 0, 0.25);
transition: opacity 0.3s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.sticky-cta::before {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background: #ffffff;
flex: 0 0 auto;
}
.sticky-cta:hover {
background: #ffffff;
color: #FF0000;
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(255, 0, 0, 0.25);
}
.sticky-cta:hover::before {
background: #FF0000;
}
.sticky-cta.hidden {
opacity: 0;
pointer-events: none;
transform: translateY(20px);
}
/* Mobile responsive */
@media (max-width: 768px) {
.sticky-cta {
bottom: 1.25rem;
right: 1.25rem;
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
white-space: nowrap;
}
}
@media (max-width: 480px) {
.sticky-cta {
bottom: 1rem;
right: 1rem;
padding: 0.7rem 1.25rem;
font-size: 0.82rem;
gap: 0.5rem;
white-space: nowrap;
}
.sticky-cta::before {
width: 8px;
height: 8px;
}
}
@keyframes letterReveal {
0% {
opacity: 0;
transform: translateY(10px) translateZ(0);
}
100% {
opacity: 1;
transform: translateY(0) translateZ(0);
}
}
/* Global: subtitle word spans that flow inline on desktop, break to separate lines on mobile.
Use class="word word--flow" on any subtitle .word span that should merge with the previous
span on desktop but stand alone on mobile. */
.hero-subtitle.hero-title--letters .word.word--flow {
display: inline;
overflow: visible;
padding-bottom: 0;
}
@media (max-width: 768px) {
.hero-subtitle.hero-title--letters .word.word--flow {
display: block;
overflow: hidden;
padding-bottom: 0.4em;
}
}
/* Hero tagline - same style as "Verticals & Industries" */
.hero-tagline-bottom {
font-size: 22px;
line-height: 1.1;
font-weight: 700;
color: rgba(255, 255, 255, 0.92);
margin-top: 1.5rem;
margin-bottom: 0;
}
@media (max-width: 480px) {
.hero-tagline-bottom {
font-size: 16px;
}
}
@media (max-width: 375px) {
.hero-tagline-bottom {
font-size: 14px;
}
}
/* ===== ABOUT PAGE STYLES ===== */
/* Hero Section - Dark slate gradient */
.about-hero {
padding: 12rem 2rem 6rem;
min-height: 55vh;
background: linear-gradient(165deg, #475569 0%, #3d4d61 50%, #334155 100%);
position: relative;
overflow: hidden;
text-align: left;
}
.about-hero::before {
content: '';
position: absolute;
top: -20%;
left: -10%;
width: 60%;
height: 80%;
background: radial-gradient(ellipse, rgba(255, 0, 0, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.about-hero .section-container {
position: relative;
z-index: 1;
}
.about-hero h1 {
color: #ffffff;
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
}
.about-hero h1 .brand-dot {
width: 0.22em;
height: 0.22em;
background: #FF0000;
border-radius: 50%;
margin: 0 0.08em;
vertical-align: middle;
transform: translateY(-0.15em);
}
.about-hero .hero-subtitle {
font-size: 22px;
font-weight: 700;
color: rgba(255, 255, 255, 0.92);
max-width: 700px;
margin: 0;
line-height: 1.6;
}
/* Letter-by-letter hero animation (about-hero scoped) */
.about-hero .hero-title--letters {
display: block;
line-height: 1.3;
}
.about-hero .hero-title--letters .word {
display: block;
overflow: hidden;
padding-bottom: 0.4em;
}
.about-hero .hero-title--letters .letter {
display: inline-block;
opacity: 0;
transform: translateY(10px);
animation: letterReveal 0.5s ease-out forwards;
}
/* Who We Are Section - prose */
.who-section {
padding: 5rem 2rem;
background: #f1f5f9;
}
/* Membership page: who-section must be white (follows dark hero, precedes gray process) */
.membership-page .who-section {
background: #ffffff;
}
.who-section .section-container {
text-align: left;
}
.who-prose {
margin: 0;
font-size: 1.2rem;
line-height: 1.9;
color: #475569;
}
.who-prose p {
margin-bottom: 1.5rem;
}
.who-prose p:last-child {
margin-bottom: 0;
}
/* At a Glance - Credentials */
.credentials-glance {
max-width: 800px;
margin: 3rem 0 0;
padding-top: 2.5rem;
border-top: 1px solid rgba(10, 22, 40, 0.08);
}
.credentials-label {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #FF0000;
margin-bottom: 1.25rem;
}
/* Sectors Carousel - adapted from index hero */
.sectors-carousel {
margin: 1.5rem 0;
overflow: hidden;
position: relative;
border-radius: 12px;
background: transparent;
width: 100%;
}
.sectors-carousel .hero-logo-marquee {
background: transparent;
border: none;
padding: 0;
overflow: hidden;
height: 200px;
display: flex;
align-items: center;
position: relative;
}
.sectors-carousel .hero-logo-marquee::before,
.sectors-carousel .hero-logo-marquee::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 60px;
z-index: 2;
pointer-events: none;
}
.sectors-carousel .hero-logo-marquee::before {
left: 0;
background: linear-gradient(to right, #f1f5f9 0%, transparent 100%);
}
.sectors-carousel .hero-logo-marquee::after {
right: 0;
background: linear-gradient(to left, #f1f5f9 0%, transparent 100%);
}
.sectors-carousel .hero-logo-track {
display: flex;
align-items: center;
flex-wrap: nowrap;
width: max-content;
gap: 80px;
animation: carouselScroll 25s linear infinite;
will-change: transform;
}
.sectors-carousel .hero-logo-track img {
height: 180px;
width: auto;
display: block;
flex: 0 0 auto;
object-fit: contain;
}
@keyframes carouselScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.sectors-carousel .hero-logo-track { animation: none; }
}
.credentials-summary-wrap {
margin-top: 1.5rem;
}
.credentials-summary {
font-size: 1.2rem;
color: #475569;
line-height: 1.6;
}
.credentials-summary strong {
color: #475569;
font-weight: 700;
}
/* Our Principles Section */
.principles-section {
padding: 5rem 2rem;
background: #ffffff;
}
.principles-section .section-container {
text-align: left;
}
.principles-list {
max-width: 100%;
margin: 3rem 0 0;
}
.principle-item {
display: flex;
align-items: flex-start;
gap: 1.5rem;
padding: 1.5rem 0;
border-bottom: 1px solid rgba(10, 22, 40, 0.08);
text-align: left;
}
.principle-item:last-child {
border-bottom: none;
}
.principle-icon {
flex-shrink: 0;
width: 72px;
height: 72px;
background: #ffffff;
border: 3px solid #d1d5db;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.principle-icon svg {
width: 52px;
height: 52px;
stroke: #FF0000;
stroke-width: 2;
fill: none;
transition: stroke 0.3s ease;
}
.principle-item:hover .principle-icon {
background: #FF0000;
transform: rotate(5deg) scale(1.1);
}
.principle-item:hover .principle-icon svg {
stroke: #ffffff;
}
.principle-content h3 {
font-size: 1.2rem;
font-weight: 700;
color: #0a1628;
margin-bottom: 0.5rem;
}
.principle-content p {
font-size: 1.2rem;
color: #475569;
line-height: 1.6;
margin: 0;
}
/* Works Alongside Section */
.partners-section {
padding: 5rem 2rem;
background: #f1f5f9;
position: relative;
overflow: hidden;
}
.about-page .partners-section::before {
content: '';
position: absolute;
inset: 0;
background-image: url("../img/map%20background.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.about-page .partners-section .section-container {
position: relative;
z-index: 1;
}
.partners-section .section-container {
text-align: left;
}
.partners-section .section-intro {
max-width: none;
}
/* Ecosystem partners inline block */
.ecosystem-partners-inline {
margin-top: 3rem;
}
.ecosystem-partners-title {
font-size: 1.4rem;
font-weight: 700;
color: #475569;
margin-bottom: 0.75rem;
text-align: left;
}
.ecosystem-partners-desc {
font-size: 1.2rem;
color: #475569;
line-height: 1.8;
margin-bottom: 1rem;
text-align: left;
}
.ecosystem-services-list {
font-size: 1.2rem;
font-weight: 600;
color: #475569;
line-height: 1.8;
text-align: left;
}
.service-dot {
display: inline-block;
width: 10px;
height: 10px;
background: #FF0000;
border-radius: 50%;
margin: 0 0.5rem;
vertical-align: middle;
}
.partner-tags {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 1rem;
margin: 2.5rem 0 0;
}
.partner-tag {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
background: linear-gradient(145deg, #ffffff, #e2e8f0);
border: 1px solid rgba(71, 85, 105, 0.12);
border-radius: 9999px;
font-size: 1.2rem;
font-weight: 500;
color: #0a1628;
box-shadow: 3px 3px 8px rgba(10, 22, 40, 0.1), -2px -2px 6px rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
}
.partner-tag:hover {
transform: translateY(-3px);
box-shadow: 5px 5px 14px rgba(10, 22, 40, 0.14), -3px -3px 8px rgba(255, 255, 255, 0.9);
}
.partner-tag::before {
content: '';
width: 8px;
height: 8px;
background: #FF0000;
border-radius: 50%;
}
/* Responsive */
@media (max-width: 600px) {
.about-hero {
padding: 10rem 1.5rem 4rem;
}
}
/* ===== MEMBERSHIP PAGE STYLES ===== */
/* Hero Section - unique class, no shared CSS conflicts */
.membership-hero {
padding: 16rem 2rem 12rem;
min-height: 70vh;
background: linear-gradient(165deg, #475569 0%, #3d4d61 50%, #334155 100%);
position: relative;
overflow: hidden;
}
.membership-hero::before {
content: '';
position: absolute;
top: -20%;
left: -10%;
width: 60%;
height: 80%;
background: radial-gradient(ellipse, rgba(255, 0, 0, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.membership-hero .section-container {
max-width: 1400px;
margin: 0 auto;
padding: 0;
position: relative;
z-index: 1;
}
.membership-hero h1 {
color: #ffffff;
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 700;
line-height: 1.2;
margin: 0 0 1.5rem 0;
max-width: 800px;
}
/* Letter-by-letter hero animation (membership-hero scoped) */
.membership-hero .hero-title--letters {
display: block;
line-height: 1.3;
}
.membership-hero .hero-title--letters .word {
display: block;
overflow: hidden;
padding-bottom: 0.4em;
}
.membership-hero .hero-title--letters .letter {
display: inline-block;
opacity: 0;
transform: translateY(10px);
animation: letterReveal 0.5s ease-out forwards;
}
.membership-hero .hero-subtitle {
font-size: 22px;
font-weight: 700;
line-height: 1.6;
color: rgba(255, 255, 255, 0.92);
margin-top: 1.5rem;
margin-bottom: 0;
max-width: 700px;
}
.membership-hero .hero-subtitle .word {
padding-bottom: 0.6em;
}
/* Section Intro Text */
.section-intro {
font-size: 1.2rem;
line-height: 1.8;
color: #475569;
max-width: 100%;
margin-bottom: 3rem;
}
/* WHO THIS IS FOR */
.who-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-top: 3rem;
max-width: 800px;
}
.who-card {
padding: 2.5rem 2rem;
border-radius: 16px;
border: 1px solid rgba(71, 85, 105, 0.15);
background: #ffffff;
position: relative;
transform-style: preserve-3d;
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
box-shadow:
0 4px 8px rgba(54, 69, 79, 0.15),
0 12px 30px rgba(54, 69, 79, 0.2);
}
.who-card:hover {
transform: translateY(-8px) rotateX(2deg);
border-color: rgba(255, 0, 0, 0.25);
box-shadow:
0 8px 16px rgba(255, 0, 0, 0.2),
0 20px 45px rgba(255, 0, 0, 0.25);
}
.who-icons-row {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
/* Who icons - uses shared .icon-box from style.css */
.who-icon {
margin-bottom: 1.5rem;
margin-left: auto;
margin-right: auto;
}
.who-icons-row .who-icon {
margin: 0;
}
.who-card h3 {
font-size: 1.35rem;
font-weight: 700;
color: #475569;
margin-bottom: 0.75rem;
text-align: center;
}
.who-card p {
font-size: 1.2rem;
line-height: 1.6;
color: #475569;
text-align: center;
}
/* THE PROCESS - Vertical Timeline (Option C) */
.process-section {
background: #f1f5f9;
padding: 5rem 2rem;
}
.process-section .section-container {
max-width: 1400px;
margin: 0 auto;
}
.process-section .timeline-c {
max-width: 900px;
}
.timeline-c {
position: relative;
padding-left: 4rem;
margin-top: 3rem;
}
.timeline-c::before {
content: '';
position: absolute;
left: calc(1rem + 9px);
top: 8px;
bottom: 8px;
width: 2px;
background: linear-gradient(to bottom, #FF0000, rgba(71,85,105,0.2));
}
.timeline-item-c {
position: relative;
padding: 0 0 3.5rem;
}
.timeline-item-c:last-child {
padding-bottom: 0;
}
/* Circle marker */
.timeline-item-c::before {
content: '';
position: absolute;
left: -3rem;
top: 6px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #FF0000;
border: 3px solid #ffffff;
box-shadow: 0 0 0 2px #FF0000;
z-index: 1;
}
.timeline-item-c .tl-number {
font-size: 0.8rem;
font-weight: 800;
color: #FF0000;
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: 0.35rem;
}
.timeline-item-c h3 {
font-size: 1.35rem;
font-weight: 700;
color: #475569;
margin-bottom: 0.5rem;
}
.timeline-item-c h3 a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.timeline-item-c h3 a::after {
content: ' →';
opacity: 0;
transition: opacity 0.2s ease;
}
.timeline-item-c h3 a:hover {
color: #FF0000;
}
.timeline-item-c h3 a:hover::after {
opacity: 1;
}
.timeline-item-c p {
font-size: 1.2rem;
color: #475569;
opacity: 0.75;
line-height: 1.65;
max-width: 600px;
}
.addon-badge-c {
display: inline-block;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
background: rgba(255,0,0,0.08);
color: #FF0000;
padding: 0.25rem 0.6rem;
border-radius: 999px;
margin-left: 0.5rem;
vertical-align: middle;
}
/* WHAT YOU GET - Bento Grid */
.benefits-section {
background: #ffffff;
}
.bento-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 1.5rem;
margin-top: 3rem;
}
/* Hero Card - spans 2 rows with animated rotating border line */
.bento-hero {
grid-row: span 2;
position: relative;
height: auto;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Rotating border - red line that circles around */
.bento-hero::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(
from 0deg,
transparent 0deg,
transparent 60deg,
#FF0000 120deg,
transparent 180deg,
transparent 360deg
);
animation: rotateBorderHero 4s linear infinite;
z-index: 0;
}
@keyframes rotateBorderHero {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Inner content container */
.bento-hero-inner {
position: absolute;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
background:
linear-gradient(145deg, rgba(71, 85, 105, 0.8) 0%, rgba(61, 77, 97, 0.8) 40%, rgba(74, 48, 64, 0.8) 75%, rgba(92, 42, 58, 0.8) 100%),
url('../img/deal-roombackground.jpg');
background-size: cover;
background-position: center;
border-radius: 17px;
z-index: 1;
display: flex;
flex-direction: column;
padding: 2.5rem;
}
.bento-hero:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}
/* Bento hero icon - white with same gradient overlay as photo */
.bento-hero-icon {
margin-bottom: 1.5rem;
background: #ffffff;
border-color: #d1d5db;
position: relative;
overflow: hidden;
}
.bento-hero-icon::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(145deg, rgba(71, 85, 105, 0.8) 0%, rgba(61, 77, 97, 0.8) 40%, rgba(74, 48, 64, 0.8) 75%, rgba(92, 42, 58, 0.8) 100%);
border-radius: 9px;
pointer-events: none;
}
.bento-hero-icon svg {
stroke: #ffffff;
position: relative;
z-index: 1;
}
.bento-hero h3 {
font-size: 2rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 1rem;
}
.bento-hero p {
font-size: 1.2rem;
line-height: 1.7;
color: #ffffff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
flex-grow: 1;
}
.bento-hero-badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #ffffff;
border: 2px solid #ffffff;
background: transparent;
border-radius: 9999px;
padding: 0.6rem 1.25rem;
margin-top: 1.5rem;
width: fit-content;
}
/* Compact Bento Cards */
.bento-card {
background: #ffffff;
border-radius: 20px;
padding: 1.75rem;
border: 1px solid rgba(71, 85, 105, 0.15);
box-shadow: 0 4px 8px rgba(54, 69, 79, 0.15), 0 12px 30px rgba(54, 69, 79, 0.2);
transform-style: preserve-3d;
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.bento-card:hover {
transform: translateY(-8px) rotateX(2deg);
border-color: rgba(255, 0, 0, 0.25);
box-shadow:
0 8px 16px rgba(255, 0, 0, 0.2),
0 20px 45px rgba(255, 0, 0, 0.25);
}
/* Bento card icons - uses shared .icon-box from style.css */
.bento-card-icon {
margin-bottom: 1rem;
}
.bento-card h3 {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-midnight, #0a1628);
margin-bottom: 0.5rem;
}
.bento-card p {
font-size: 1.2rem;
line-height: 1.6;
color: #475569;
}
/* QUALIFICATIONS SECTION */
.qualifications-section {
background: #f1f5f9;
}
.qualifications-box {
background: #ffffff;
border-radius: 16px;
padding: 2.5rem;
margin-top: 2rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
}
.qualifications-box h3 {
font-size: 1.35rem;
font-weight: 700;
color: var(--color-midnight, #0a1628);
margin-bottom: 1.5rem;
}
.checklist {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.checklist li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 1.2rem;
line-height: 1.6;
color: #475569;
}
.checklist-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
color: #FF0000;
margin-top: 0.1rem;
}
.qualifications-note {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
font-size: 1.2rem;
color: #475569;
font-style: italic;
}
/* FAQ SECTION - Categorized Accordion */
.faq-section {
background: #f1f5f9;
}
.faq-search {
max-width: 900px;
margin: 0 auto 2rem;
}
.faq-search input {
width: 100%;
padding: 1rem 1.5rem;
font-size: 1.2rem;
border: 2px solid var(--color-ice, #e8f0f7);
border-radius: 8px;
background: var(--color-ice, #e8f0f7);
color: var(--color-midnight, #0a1628);
transition: border-color 0.2s ease, background 0.2s ease;
}
.faq-search input:focus {
outline: none;
border-color: #FF0000;
background: #ffffff;
}
.faq-search input::placeholder {
color: var(--color-slate, #64748b);
}
.faq-categories {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 900px;
margin: 0 auto;
}
.faq-category {
border: 2px solid var(--color-ice, #e8f0f7);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.2s ease;
}
.faq-category:hover {
border-color: #FF0000;
}
.faq-category.active {
border-color: #FF0000;
}
.faq-category-header {
width: 100%;
padding: 1.25rem 1.5rem;
background: var(--color-ice, #e8f0f7);
border: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
font-size: 1.2rem;
font-weight: 700;
color: var(--color-midnight, #0a1628);
transition: background 0.2s ease;
}
.faq-category-header:hover {
background: #dce8f3;
}
.faq-category-header svg {
width: 20px;
height: 20px;
color: #FF0000;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.faq-category.active .faq-category-header svg {
transform: rotate(180deg);
}
.faq-category-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.faq-category.active .faq-category-content {
max-height: 2000px;
}
.faq-category-items {
padding: 0.5rem 1.5rem 1.5rem;
background: #ffffff;
}
.faq-category-items .faq-item {
border: none;
border-bottom: 1px solid var(--color-ice, #e8f0f7);
border-radius: 0;
}
.faq-category-items .faq-item:last-child {
border-bottom: none;
}
.faq-category-items .faq-question {
padding: 1rem 0;
font-size: 1.2rem;
font-weight: 600;
color: var(--color-midnight, #0a1628);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
}
.faq-category-items .faq-question::-webkit-details-marker {
display: none;
}
.faq-category-items .faq-question:hover {
color: #FF0000;
}
.faq-category-items .faq-answer {
padding-bottom: 1rem;
}
.faq-category-items .faq-answer p {
font-size: 1.2rem;
line-height: 1.7;
color: var(--color-slate, #64748b);
margin: 0;
}
.faq-item.faq-search-hidden {
display: none;
}
.faq-category.faq-search-hidden {
display: none;
}
.faq-no-results {
text-align: center;
padding: 2rem;
color: var(--color-slate, #64748b);
display: none;
max-width: 900px;
margin: 0 auto;
}
.faq-no-results.visible {
display: block;
}
/* MEMBERSHIP RESPONSIVE */
@media (max-width: 968px) {
.who-grid {
grid-template-columns: 1fr;
}
.bento-grid {
grid-template-columns: 1fr;
}
.bento-hero {
grid-row: auto;
min-height: 400px;
}
}
@media (max-width: 768px) {
.membership-hero {
padding: 10rem 1.5rem 4rem;
}
.membership-hero h1 {
font-size: 2rem;
}
.timeline-c {
padding-left: 3rem;
}
.timeline-item-c::before {
left: -2.1rem;
}
.bento-grid {
grid-template-columns: 1fr;
}
.bento-hero {
min-height: 450px;
}
.bento-hero-inner {
padding: 1.5rem;
}
.checklist {
grid-template-columns: 1fr;
}
.section-title-new {
font-size: 2rem;
}
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.membership-hero h1,
.membership-hero .hero-subtitle {
animation: none;
opacity: 1;
transform: none;
}
.bento-card:hover .bento-card-icon,
.bento-hero:hover .bento-hero-icon,
.who-section .audience-card:hover .audience-icon {
transform: none;
}
}
/* ===== DEAL-ROOM/SERVICES PAGE STYLES ===== */
/* Left-align all sections */
.services-page .section-align-left {
text-align: left;
}
.services-page .section-align-left .section-label-new {
justify-content: flex-start;
}
.services-page .section-align-left .section-title-new {
margin-left: 0;
margin-right: auto;
}
/* Hero Section */
.dealroom-hero {
padding: 12rem 2rem 6rem;
min-height: 55vh;
background: linear-gradient(165deg, #475569 0%, #3d4d61 50%, #334155 100%);
position: relative;
overflow: hidden;
}
.dealroom-hero::before {
content: '';
position: absolute;
top: -20%;
left: -10%;
width: 60%;
height: 80%;
background: radial-gradient(ellipse, rgba(255, 0, 0, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.dealroom-hero .section-container {
position: relative;
z-index: 1;
}
.dealroom-hero h1 {
color: #ffffff;
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
max-width: 750px;
}
.dealroom-hero .hero-subtitle {
font-size: 1.2rem;
color: rgba(255,255,255,0.8);
max-width: 620px;
line-height: 1.7;
}
/* Letter-by-letter hero animation (dealroom-hero scoped) */
.dealroom-hero .hero-title--letters {
display: block;
line-height: 1.3;
}
.dealroom-hero .hero-title--letters .word {
display: block;
overflow: hidden;
padding-bottom: 0.4em;
}
.dealroom-hero .hero-title--letters .letter {
display: inline-block;
opacity: 0;
transform: translateY(10px);
animation: letterReveal 0.5s ease-out forwards;
}
/* Section 2: Deal Intelligence */
.intelligence-section {
padding: 5rem 2rem;
background: #f1f5f9;
}
.intelligence-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 2.5rem;
}
/* Match bento box stat card styles */
.intelligence-section .stat-card {
height: 280px;
}
.stat-source {
font-size: 0.75rem;
color: rgba(0, 0, 0, 0.6);
font-style: italic;
margin-top: 0.75rem;
text-align: left;
}
/* Section 3: Making Deals Happen - Comparison */
.comparison-section {
padding: 5rem 2rem;
background: #f1f5f9;
}
.comparison-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.5rem;
margin-top: 3rem;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
/* 3D Card styling with red glow on hover */
.comparison-card {
border-radius: 20px;
padding: 0;
background: #ffffff;
border: 1px solid rgba(71, 85, 105, 0.15);
text-align: center;
position: relative;
transform-style: preserve-3d;
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
min-width: 0;
flex: 1 1 0%;
box-shadow:
0 4px 8px rgba(54, 69, 79, 0.15),
0 12px 30px rgba(54, 69, 79, 0.2);
overflow: hidden;
}
.comparison-card:hover {
transform: translateY(-8px) rotateX(2deg);
border-color: rgba(255, 0, 0, 0.25);
box-shadow:
0 8px 16px rgba(255, 0, 0, 0.2),
0 20px 45px rgba(255, 0, 0, 0.25);
}
/* Left card - light grey background */
.comparison-card--without {
background: #e2e8f0;
}
/* Header area with different background */
.comparison-header {
padding: 2.5rem 2.5rem 1.5rem;
border-radius: 19px 19px 0 0;
}
.comparison-card--without .comparison-header {
background: #cbd5e1;
}
.comparison-card--with .comparison-header {
background: #ffffff;
border-bottom: 1px solid rgba(71, 85, 105, 0.12);
}
/* Body area */
.comparison-body {
padding: 1.5rem 2.5rem 2.5rem;
}
/* Top icon - uses global icon-box style */
.comparison-icon.icon-box {
margin: 0 auto 1.5rem;
}
.comparison-icon.icon-box img {
width: 52px;
height: 52px;
object-fit: contain;
}
/* Left card icon - match card background, darker border */
.comparison-card--without .comparison-icon.icon-box {
background: #e2e8f0;
border: 2px solid #94a3b8;
}
.comparison-card--without .comparison-icon.icon-box svg {
stroke: #475569;
}
.comparison-card--without:hover .comparison-icon.icon-box {
background: #FF0000;
border-color: #FF0000;
transform: rotate(5deg) scale(1.1);
}
.comparison-card--without:hover .comparison-icon.icon-box svg {
stroke: #ffffff;
}
/* Right card icon - logo swap on hover */
.comparison-card--with .comparison-icon.icon-box {
position: relative;
}
.comparison-card--with .comparison-icon .logo-default {
transition: opacity 0.3s ease;
}
.comparison-card--with .comparison-icon .logo-hover {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.comparison-card--with:hover .comparison-icon .logo-default {
opacity: 0;
}
.comparison-card--with:hover .comparison-icon .logo-hover {
opacity: 1;
}
.comparison-card--with .comparison-icon .logo-hover {
width: 52px;
height: 52px;
object-fit: contain;
}
.comparison-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: #0a1628;
margin-bottom: 0.5rem;
}
.comparison-card .comparison-sub {
font-size: 1.2rem;
color: #475569;
margin-bottom: 0;
}
/* Badge */
.comparison-badge {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
padding: 0.5rem 1rem;
border-radius: 999px;
margin-bottom: 1.5rem;
}
.comparison-card--without .comparison-badge {
background: #f1f5f9;
color: #475569;
}
.comparison-card--with .comparison-badge {
background: rgba(255, 0, 0, 0.08);
color: #FF0000;
}
/* Steps list - centered */
.comparison-steps {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.comparison-steps li {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
font-size: 1.2rem;
line-height: 1.5;
color: #475569;
padding: 0.875rem 0;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.comparison-steps li:last-child {
border-bottom: none;
}
.comparison-card--without .comparison-steps li {
border-bottom-color: rgba(0,0,0,0.08);
}
.step-icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.comparison-card--without .step-icon {
background: #f1f5f9;
}
.comparison-card--without .step-icon svg {
width: 12px;
height: 12px;
stroke: #475569;
}
.comparison-card--with .step-icon {
background: rgba(255, 0, 0, 0.08);
}
.comparison-card--with .step-icon svg {
width: 12px;
height: 12px;
stroke: #FF0000;
}
/* Section 4: Execution Support - Slate Grey Background */
.editorial-section {
padding: 5rem 2rem;
background: linear-gradient(165deg, #475569 0%, #3d4d61 50%, #334155 100%);
}
.editorial-section .section-label-new {
color: #FF0000;
}
.editorial-section .section-logo-icon {
opacity: 1;
filter: none;
}
.editorial-section .section-title-new {
color: #ffffff;
}
.editorial-intro {
font-size: 1.2rem;
color: rgba(255,255,255,0.9);
max-width: 100%;
margin-bottom: 2.5rem;
line-height: 1.7;
}
.editorial-list {
max-width: 100%;
}
.editorial-row {
display: grid;
grid-template-columns: 100px 220px 1fr;
gap: 1.5rem;
padding: 2rem 0;
border-top: 1px solid rgba(255,255,255,0.1);
align-items: center;
}
.editorial-row:last-child {
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.editorial-num {
font-size: 3.2rem;
font-weight: 800;
color: #FF0000;
line-height: 1;
}
.editorial-name {
font-size: 1.2rem;
font-weight: 700;
line-height: 1.3;
color: #ffffff;
}
.editorial-right {
font-size: 1.2rem;
color: rgba(255,255,255,0.95);
line-height: 1.75;
}
/* Section 5: Ecosystem Partners - with world map */
.services-page .partners-section {
padding: 5rem 2rem;
background: #f1f5f9;
position: relative;
overflow: hidden;
min-height: 400px;
}
/* World map decorative background */
.services-page .partners-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: url("../img/map%20background.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 0.7;
pointer-events: none;
z-index: 0;
}
.services-page .partners-section .section-container {
position: relative;
z-index: 1;
}
.partners-intro {
font-size: 1.2rem;
color: #475569;
max-width: 100%;
line-height: 1.8;
margin-top: 1.5rem;
margin-bottom: 2.5rem;
}
/* Partner capsules */
.partners-capsules {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
.partner-capsule {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: #ffffff;
border: 1px solid rgba(71, 85, 105, 0.15);
border-radius: 9999px;
padding: 0.875rem 1.5rem;
font-size: 1.2rem;
font-weight: 600;
color: #0a1628;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: all 0.3s ease;
}
.partner-capsule:hover {
border-color: rgba(255, 0, 0, 0.3);
box-shadow: 0 4px 16px rgba(255, 0, 0, 0.15);
transform: translateY(-2px);
}
.partner-capsule svg {
width: 20px;
height: 20px;
stroke: #FF0000;
flex-shrink: 0;
}
/* Services Responsive */
@media (max-width: 968px) {
.intelligence-stats {
grid-template-columns: 1fr;
}
.comparison-grid {
grid-template-columns: 1fr;
max-width: 550px;
}
.editorial-row {
grid-template-columns: 80px 1fr;
gap: 1rem;
}
.editorial-row .editorial-right {
grid-column: 1 / -1;
}
.partners-capsules {
justify-content: center;
}
}
@media (max-width: 600px) {
.dealroom-hero {
padding: 10rem 1.5rem 4rem;
}
.comparison-header {
padding: 2rem 1.5rem 1.25rem;
}
.comparison-body {
padding: 1.25rem 1.5rem 2rem;
}
.editorial-row {
grid-template-columns: 1fr;
text-align: center;
}
.editorial-row .editorial-right {
text-align: left;
}
.partners-capsules {
flex-direction: column;
align-items: stretch;
}
.partner-capsule {
justify-content: center;
}
}
/* ===== WHY NOW PAGE STYLES ===== */
/* Hero Section - Dark slate gradient */
.whynow-hero {
padding: 12rem 2rem 6rem;
min-height: 55vh;
background: linear-gradient(165deg, #475569 0%, #3d4d61 50%, #334155 100%);
position: relative;
overflow: hidden;
}
.whynow-hero::before {
content: '';
position: absolute;
top: -20%;
right: -10%;
width: 60%;
height: 80%;
background: radial-gradient(ellipse, rgba(255, 0, 0, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.whynow-hero .section-container {
position: relative;
z-index: 1;
}
.whynow-hero h1 {
color: #ffffff;
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
max-width: 750px;
}
.whynow-hero .hero-subtitle {
font-size: 22px;
font-weight: 700;
color: rgba(255, 255, 255, 0.92);
max-width: 700px;
line-height: 1.6;
}
/* Letter-by-letter hero animation (whynow-hero scoped) */
.whynow-hero .hero-title--letters {
display: block;
line-height: 1.3;
}
.whynow-hero .hero-title--letters .word {
display: block;
overflow: hidden;
padding-bottom: 0.6em;
}
.whynow-hero .hero-title--letters .letter {
display: inline-block;
opacity: 0;
transform: translateY(10px);
animation: letterReveal 0.5s ease-out forwards;
}
/* BY THE NUMBERS - Editorial Rows (Light) */
.numbers-section {
padding: 5rem 2rem;
background: #f1f5f9;
}
.numbers-section .section-label-new {
color: #FF0000;
}
.numbers-section .section-title-new {
color: #0a1628;
}
.whynow-page .editorial-list {
max-width: 100%;
margin-top: 2.5rem;
}
/* More spacing: 140px number column, 2.5rem gap */
.whynow-page .editorial-row {
display: grid;
grid-template-columns: 140px 220px 1fr;
gap: 2.5rem;
padding: 2rem 0;
border-top: 1px solid rgba(71, 85, 105, 0.15);
align-items: center;
}
.whynow-page .editorial-row:last-child {
border-bottom: 1px solid rgba(71, 85, 105, 0.15);
}
.whynow-page .editorial-num {
font-size: 3.2rem;
font-weight: 800;
color: #FF0000;
line-height: 1;
}
.whynow-page .editorial-name {
font-size: 1.2rem;
font-weight: 700;
line-height: 1.3;
color: #0a1628;
}
.whynow-page .editorial-right {
font-size: 1.2rem;
color: #475569;
line-height: 1.75;
}
/* MOMENTUM BUILDING - Summit Photo with Dark Overlay */
.whynow-page .momentum-section {
padding: 5rem 2rem;
position: relative;
overflow: hidden;
}
.whynow-page .momentum-section::before {
content: '';
position: absolute;
inset: 0;
background: url('../img/g7-alliance.jpg') center top/cover no-repeat;
transform: scaleX(-1);
z-index: 0;
}
.whynow-page .momentum-section::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(71,85,105,0.9) 0%, rgba(71,85,105,0.93) 60%, rgba(71,85,105,0.96) 100%);
z-index: 0;
}
.whynow-page .momentum-section .section-container {
position: relative;
z-index: 1;
}
.whynow-page .momentum-section .section-label-new {
color: #FF0000;
}
.whynow-page .momentum-section .section-title-new {
color: #ffffff;
}
.feed-list {
display: flex;
flex-direction: column;
max-width: 800px;
margin-top: 2.5rem;
}
.feed-item {
padding: 2rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.feed-item:first-child {
padding-top: 0;
}
.feed-item:last-child {
border-bottom: none;
}
.feed-date {
font-size: 1.2rem;
font-weight: 700;
color: #FF0000;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
.feed-title {
font-size: 1.3rem;
font-weight: 700;
color: #ffffff;
line-height: 1.3;
margin-bottom: 0.5rem;
}
.feed-desc {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.6;
max-width: 650px;
}
.feed-link {
font-weight: 600;
color: #FF0000;
text-decoration: none;
white-space: nowrap;
transition: opacity 0.2s ease;
}
.feed-link:hover {
opacity: 0.75;
}
/* STRATEGIC CONTEXT - Callout with Left Border (Light Grey) */
.context-section {
padding: 5rem 2rem;
background: #f1f5f9;
}
.context-section .section-label-new {
color: #FF0000;
}
.context-section .section-title-new {
color: #0a1628;
}
.callout-container {
margin-top: 2rem;
padding-left: 2rem;
border-left: 4px solid #FF0000;
max-width: 850px;
}
.callout-text {
font-size: clamp(1.3rem, 2.5vw, 1.75rem);
font-weight: 500;
color: #0a1628;
line-height: 1.5;
margin-bottom: 0;
}
.callout-text strong {
font-weight: 700;
}
.callout-points {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(71, 85, 105, 0.15);
}
.callout-point {
position: relative;
}
.callout-point::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 3px;
background: #FF0000;
}
.callout-point h4 {
font-size: 1.2rem;
font-weight: 700;
color: #0a1628;
margin-top: 1rem;
margin-bottom: 0.5rem;
}
.callout-point p {
font-size: 1.2rem;
color: #475569;
line-height: 1.6;
}
/* WHAT THIS MEANS - Dark Slate with 2-Column Layout */
.implications-section {
padding: 4rem 2rem;
background: linear-gradient(165deg, #475569 0%, #3d4d61 50%, #334155 100%);
position: relative;
overflow: hidden;
}
.implications-section .section-container {
position: relative;
z-index: 1;
}
.implications-section .section-label-new {
color: #FF0000;
}
.implications-section .section-title-new {
color: #ffffff;
margin-bottom: 2rem;
}
/* 2-Column Grid for Implications */
.implications-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem 2.5rem;
}
.implication {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 1.2rem;
line-height: 1.6;
color: rgba(255,255,255,0.85);
}
.implication-arrow {
color: #FF0000;
font-size: 1.1rem;
font-weight: 700;
flex-shrink: 0;
}
.implication strong {
color: #ffffff;
}
/* Why Now CTA override */
.whynow-page .cta-section {
background: #ffffff;
}
/* Why Now Responsive */
@media (max-width: 968px) {
.whynow-page .editorial-row {
grid-template-columns: 100px 1fr;
gap: 1.5rem;
}
.whynow-page .editorial-row .editorial-right {
grid-column: 1 / -1;
}
.callout-points {
grid-template-columns: 1fr;
gap: 2rem;
}
.implications-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (max-width: 600px) {
.whynow-hero {
padding: 10rem 1.5rem 4rem;
}
.whynow-page .editorial-row {
grid-template-columns: 1fr;
}
.whynow-page .editorial-num {
font-size: 2.5rem;
}
.feed-title {
font-size: 1.15rem;
}
.callout-container {
padding-left: 1.5rem;
}
}
/* ===== REQUEST PAGE STYLES ===== */
/* Hero Section */
.request-hero {
padding: 12rem 2rem 5rem;
min-height: 45vh;
background: linear-gradient(165deg, #475569 0%, #3d4d61 50%, #334155 100%);
position: relative;
overflow: hidden;
text-align: center;
}
.request-hero::before {
content: '';
position: absolute;
top: -20%;
left: -10%;
width: 60%;
height: 80%;
background: radial-gradient(ellipse, rgba(255, 0, 0, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.request-hero .section-container {
position: relative;
z-index: 1;
}
.request-hero h1 {
color: #ffffff;
font-size: clamp(2.2rem, 4vw, 3rem);
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
}
.request-hero .hero-subtitle {
font-size: 1.2rem;
color: rgba(255,255,255,0.8);
max-width: 550px;
margin: 0 auto;
line-height: 1.7;
}
/* Letter-by-letter hero animation (request-hero scoped) */
.request-hero .hero-title--letters {
display: block;
line-height: 1.3;
}
.request-hero .hero-title--letters .word {
display: block;
overflow: hidden;
padding-bottom: 0.4em;
}
.request-hero .hero-title--letters .letter {
display: inline-block;
opacity: 0;
transform: translateY(10px);
animation: letterReveal 0.5s ease-out forwards;
}
/* Form Section */
.form-section {
padding: 4rem 2rem 5rem;
background: #f1f5f9;
}
.form-container {
max-width: 600px;
margin: 0 auto;
background: #ffffff;
border-radius: 16px;
padding: 3rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
font-weight: 600;
font-size: 1rem;
color: #0a1628;
margin-bottom: 0.5rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.875rem 1rem;
font-size: 1.2rem;
font-family: inherit;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #ffffff;
color: #0a1628;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #c41e3a;
box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
}
.form-group textarea {
min-height: 120px;
resize: vertical;
}
.form-group select {
cursor: pointer;
appearance: none;
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='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
}
.form-submit {
width: 100%;
padding: 1rem 2rem;
font-size: 1.2rem;
font-weight: 750;
font-family: inherit;
color: #ffffff;
background: #FF0000;
border: none;
border-radius: 9999px;
cursor: pointer;
transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
margin-top: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
box-shadow: 0 10px 28px rgba(255, 0, 0, 0.25);
letter-spacing: 0.04em;
}
.form-submit::before {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background: #ffffff;
flex: 0 0 auto;
}
.form-submit:hover {
background: #ffffff;
color: #FF0000;
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(255, 0, 0, 0.25);
}
.form-submit:hover::before {
background: #FF0000;
}
.form-note {
text-align: center;
margin-top: 1.5rem;
font-size: 1rem;
color: #64748b;
}
/* Request Page Responsive */
@media (max-width: 600px) {
.request-hero {
padding: 10rem 1.5rem 4rem;
}
.form-container {
padding: 2rem 1.5rem;
}
}