/* ========================================================================== Licensium — "Trust Architecture" design system Deep Navy base, Slate Blue structure, Champagne Gold CTA triggers. Glassmorphism 2.0, quiet cubic-bezier motion, unified design tokens. ========================================================================== */ :root { color-scheme: light; /* Measured by the navigation runtime after fonts and Bootstrap settle. Keeping the mega menu anchored to the real bar height prevents a hard reload or late font swap from changing its vertical position. */ --app-navbar-height: 74px; /* Navy scale */ --navy-950: #060f1d; --navy-900: #0a192f; --navy-800: #0f2a4a; --navy-700: #163a5f; /* Slate Blue (architecture) */ --slate-600: #35507a; --slate-500: #4a6fa5; --slate-400: #7592bf; --slate-100: #eaf0f8; /* Champagne Gold (CTA triggers) */ --gold-600: #a9803f; --gold-500: #c5a059; --gold-400: #d9bd82; --gold-100: #f8f1e2; /* Ink / paper (light section content) */ --ink-900: #0c1b2e; --ink-700: #2c3e54; --ink-500: #5c6d82; --paper: #ffffff; --paper-tint: #f4f7fb; --line-soft: rgba(10, 25, 47, 0.10); /* Elevation */ --shadow-elevate: 0 24px 60px -26px rgba(10, 25, 47, 0.28); --shadow-deep: 0 34px 80px -28px rgba(6, 15, 29, 0.55); /* Tokens: unified radius / motion */ --radius: 12px; --radius-lg: 20px; --ease-calm: cubic-bezier(0.4, 0, 0.2, 1); font-family: "Inter", system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink-900); overflow-x: hidden; } h1, h2, h3, h4, h5, .brand-name, .btn-brand, .btn-outline-brand, .footer-heading, .admin-brand, .eyebrow { font-family: "Montserrat Variable", "Montserrat", system-ui, sans-serif; } h1, h2, h3, h4 { font-weight: 800; color: var(--navy-900); letter-spacing: -0.02em; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } :focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; border-radius: 4px; } /* ---------- Quiet motion ---------- */ .reveal { /* Content is visible by default so a static host, blocked observer, or partially loaded module can never leave the whole site blank. The optional animation is enabled by after the app has rendered successfully. */ opacity: 1; transform: none; transition: opacity 0.75s var(--ease-calm), transform 0.75s var(--ease-calm); will-change: opacity, transform; } html.reveal-enabled .reveal:not(.is-visible) { opacity: 0; transform: translateY(26px); } .reveal.is-visible { opacity: 1; transform: none; } /* ---------- Buttons (unified system) ---------- */ .btn { border-radius: var(--radius); min-height: 44px; } .btn-brand, .btn-outline-brand { font-weight: 700; padding: 0.85rem 1.7rem; transition: transform 0.35s var(--ease-calm), box-shadow 0.35s var(--ease-calm), filter 0.35s var(--ease-calm), background-color 0.35s var(--ease-calm), color 0.35s var(--ease-calm); } .btn-brand { background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); border: none; color: var(--navy-900); box-shadow: 0 16px 34px -14px rgba(197, 160, 89, 0.55); } .btn-brand:hover, .btn-brand:focus { color: var(--navy-900); transform: translateY(-3px); box-shadow: 0 22px 44px -14px rgba(197, 160, 89, 0.65); filter: brightness(1.04); } .btn-outline-brand { border: 1.5px solid var(--slate-500); color: var(--navy-800); background: transparent; } .btn-outline-brand:hover, .btn-outline-brand:focus { background: var(--slate-500); color: #fff; transform: translateY(-3px); } /* On dark navy backgrounds (hero / page-hero), the default navy-on-transparent outline button is invisible. Force a white/gold variant there instead. */ .hero-section .btn-outline-brand, .page-hero .btn-outline-brand, .cta-banner .btn-outline-brand, .compliance-section .btn-outline-brand { color: #fff; border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.04); } .hero-section .btn-outline-brand:hover, .hero-section .btn-outline-brand:focus, .page-hero .btn-outline-brand:hover, .page-hero .btn-outline-brand:focus, .cta-banner .btn-outline-brand:hover, .cta-banner .btn-outline-brand:focus, .compliance-section .btn-outline-brand:hover, .compliance-section .btn-outline-brand:focus { background: #fff; color: var(--navy-900); border-color: #fff; } .btn-light { font-family: "Montserrat Variable", sans-serif; font-weight: 700; } /* ---------- Forms (unified tokens) ---------- */ .form-label { font-weight: 700; color: var(--navy-800); font-size: 0.85rem; margin-bottom: 0.4rem; } .form-control, .form-select { border-radius: var(--radius) !important; border: 1.5px solid var(--line-soft); padding: 0.7rem 1rem; min-height: 44px; transition: border-color 0.3s var(--ease-calm), box-shadow 0.3s var(--ease-calm); } .form-control:focus, .form-select:focus { border-color: var(--slate-500); box-shadow: 0 0 0 4px rgba(74, 111, 165, 0.15); } /* ---------- Glassmorphism 2.0 utility ---------- */ .glass-card { position: relative; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius-lg); padding: 28px; height: 100%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 70px -30px rgba(6, 15, 29, 0.6); transition: transform 0.45s var(--ease-calm), box-shadow 0.45s var(--ease-calm); } .glass-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(74, 111, 165, 0.95), transparent 65%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .glass-card:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 40px 90px -30px rgba(6, 15, 29, 0.7); } /* ---------- Sticky glass navigation ---------- */ .app-navbar { background: rgba(6, 15, 29, 0.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: background 0.4s var(--ease-calm), padding 0.4s var(--ease-calm), box-shadow 0.4s var(--ease-calm); } .app-navbar.is-scrolled { padding: 10px 0; background: rgba(6, 15, 29, 0.88); box-shadow: var(--shadow-deep); } .brand-logo-wrap { background: transparent; border: 0; border-radius: 0; padding: 0; display: inline-flex; align-items: center; } .brand-logo { height: 38px; width: auto; object-fit: contain; transition: height 0.3s var(--ease-calm); display: block; border: 0; border-radius: 0; box-shadow: none; } .app-navbar.is-scrolled .brand-logo { height: 32px; } .app-navbar .nav-link { color: rgba(234, 241, 248, 0.82); font-weight: 700; font-family: "Montserrat Variable", sans-serif; font-size: 0.92rem; padding: 8px 14px !important; position: relative; } .app-navbar .nav-link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--gold-500); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-calm); } .app-navbar .nav-link:hover, .app-navbar .nav-link.active { color: #fff; } .app-navbar .nav-link:hover::after, .app-navbar .nav-link.active::after { transform: scaleX(1); } .navbar-toggler { border: none; color: rgba(234, 241, 248, 0.85); padding: 8px 12px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.3s var(--ease-calm); } .navbar-toggler:focus { box-shadow: none; outline: none; } .navbar-toggler:hover { background: rgba(255, 255, 255, 0.12); color: var(--gold-400); border-color: rgba(197, 160, 89, 0.3); } .nav-authority-badge { display: inline-flex; align-items: center; gap: 8px; padding: 0.35rem 0.9rem; border: 1px solid rgba(197, 160, 89, 0.4); border-radius: 999px; background: rgba(197, 160, 89, 0.08); color: var(--gold-400); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.4s var(--ease-calm), transform 0.4s var(--ease-calm); } .app-navbar.is-scrolled .nav-authority-badge { opacity: 1; transform: none; } /* ---------- Hero ---------- */ .hero-section { position: relative; padding: 180px 0 110px; background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 62%, var(--navy-700) 100%); overflow: hidden; color: #eaf1f8; } .hero-section::after { content: ""; position: absolute; top: -10%; left: 4%; width: 640px; height: 640px; background: radial-gradient(circle, rgba(79, 70, 229, 0.20), transparent 65%); pointer-events: none; z-index: 0; } .hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .hero-bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; } .hero-bg-canvas canvas { pointer-events: none !important; } /* Radial gradient keeps overlaid headline/CTA text highly legible against the drifting particle network, while fading out toward the edges so the animation still reads clearly against the Midnight Blue section base. */ .hero-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse 65% 60% at 30% 42%, rgba(10, 25, 47, 0.82) 0%, rgba(10, 25, 47, 0.48) 45%, rgba(10, 25, 47, 0.12) 72%, transparent 100%), linear-gradient(180deg, rgba(10, 25, 47, 0.10) 0%, rgba(10, 25, 47, 0.55) 68%, var(--navy-900) 100%); } .hero-overlay--center { background: radial-gradient(ellipse 62% 58% at 50% 40%, rgba(10, 25, 47, 0.78) 0%, rgba(10, 25, 47, 0.46) 45%, rgba(10, 25, 47, 0.12) 72%, transparent 100%), linear-gradient(180deg, rgba(10, 25, 47, 0.10) 0%, rgba(10, 25, 47, 0.55) 68%, var(--navy-900) 100%); } @media (prefers-reduced-motion: reduce) { .hero-bg-canvas canvas { display: none !important; } } .hero-section .container { position: relative; z-index: 1; } .eyebrow { display: inline-block; color: var(--slate-600); font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; font-size: 0.76rem; margin-bottom: 14px; } .hero-section .eyebrow, .page-hero .eyebrow, .cta-banner .eyebrow, .compliance-section .eyebrow { color: var(--gold-400); } .hero-title { font-size: clamp(2.3rem, 5vw, 3.7rem); line-height: 1.08; margin-bottom: 20px; color: #fff; position: relative; } .hero-subtitle { font-size: 1.12rem; color: rgba(234, 241, 248, 0.82); max-width: 640px; margin-bottom: 30px; } .hero-card { position: relative; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius-lg); padding: 34px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--shadow-deep); text-align: center; } .hero-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--slate-500), transparent 60%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .hero-card-icon { font-size: 2.7rem; color: var(--gold-400); margin-bottom: 16px; } .hero-card-title { font-weight: 800; font-size: 1.12rem; margin-bottom: 10px; color: #fff; font-family: "Montserrat Variable", sans-serif; } .hero-card-text { color: rgba(234, 241, 248, 0.72); margin: 0; } .stats-strip { position: relative; margin-top: 60px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius-lg); padding: 28px 34px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow-deep); } .stat-item { display: flex; flex-direction: column; align-items: flex-start; } .stat-value { font-size: 1.9rem; font-weight: 800; color: #fff; font-family: "Montserrat Variable", sans-serif; } .stat-label { color: rgba(234, 241, 248, 0.65); font-size: 0.9rem; } .stats-strip .stat-item:nth-child(3n+2) .stat-value { color: var(--gold-400); } .stats-strip .stat-item:nth-child(3n+3) .stat-value { color: var(--slate-100); } /* ---------- Page hero (interior pages) ---------- */ .page-hero { position: relative; padding: 150px 0 74px; background: linear-gradient(160deg, var(--navy-900), var(--navy-800)); color: #fff; overflow: hidden; } .page-hero::after { content: ""; position: absolute; top: -20%; right: 0; width: 560px; height: 560px; background: radial-gradient(circle, rgba(74, 111, 165, 0.35), transparent 65%); pointer-events: none; } .page-hero .container { position: relative; z-index: 1; } .page-hero h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3rem); } .page-hero-subtitle { color: rgba(234, 241, 248, 0.8); max-width: 720px; margin: 0 auto; font-size: 1.05rem; } .about-team-photo { margin-top: 34px; border-radius: var(--radius-lg); max-height: 420px; object-fit: cover; width: 100%; box-shadow: var(--shadow-deep); } .breadcrumb-nav { color: rgba(234, 241, 248, 0.6); font-size: 0.85rem; } .breadcrumb-nav a { color: rgba(234, 241, 248, 0.9); font-weight: 600; } .breadcrumb-nav a:hover { color: var(--gold-400); } .section .breadcrumb-nav { color: var(--ink-500); } .section .breadcrumb-nav a { color: var(--slate-600); } /* ---------- Sections ---------- */ .section { padding: 96px 0; } .section-tint { background: var(--paper-tint); } .section-header { max-width: 760px; margin: 0 auto 48px; text-align: center; } .section-header h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); } .section-subtitle { color: var(--ink-500); font-size: 1.05rem; } .about-body { color: var(--ink-500); font-size: 1.05rem; line-height: 1.75; } .check-list { list-style: none; padding: 0; margin: 20px 0; } .check-list li { display: flex; gap: 12px; margin-bottom: 14px; color: var(--ink-700); line-height: 1.55; } .check-list li i { color: var(--slate-500); margin-top: 3px; flex: none; } /* ---------- About visual ---------- */ .about-visual { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-elevate); } .about-visual-photo { width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block; } .about-visual-badge { position: absolute; left: 20px; bottom: 20px; background: rgba(10, 25, 47, 0.72); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius); padding: 14px 18px; display: flex; gap: 12px; align-items: center; color: #fff; } .about-visual-badge i { color: var(--gold-400); font-size: 1.4rem; } .about-visual-badge strong { display: block; font-family: "Montserrat Variable", sans-serif; font-size: 1.3rem; } .about-visual-badge span { font-size: 0.78rem; color: rgba(255, 255, 255, 0.7); } .stat-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-elevate); } .stat-card-row { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line-soft); } .stat-card-row:last-child { border-bottom: none; } .stat-card .stat-value { color: var(--navy-800); font-size: 1.5rem; } .stat-card .stat-label { color: var(--ink-500); font-size: 0.85rem; } /* ---------- Mission / why cards ---------- */ .mission-card, .why-card { background: linear-gradient(180deg, #fff, var(--paper-tint)); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 32px; height: 100%; box-shadow: var(--shadow-elevate); transition: transform 0.4s var(--ease-calm), box-shadow 0.4s var(--ease-calm); } .mission-card:hover, .why-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-deep); } .mission-card, .why-card { text-align: center; } .why-icon { width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, var(--slate-500), var(--navy-800)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem; margin: 0 auto 18px; border: 1.5px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 24px rgba(74, 111, 165, 0.25); transition: transform 0.4s var(--ease-calm); } .why-card:hover .why-icon { transform: scale(1.1) rotate(5deg); } .mission-card h3, .why-card h3 { margin-bottom: 10px; } .mission-card p, .why-card p { color: var(--ink-500); line-height: 1.7; } /* ---------- Regulatory / service cards ---------- */ .regulatory-card { display: block; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 26px 22px; text-align: center; height: 100%; box-shadow: var(--shadow-elevate); transition: transform 0.4s var(--ease-calm), box-shadow 0.4s var(--ease-calm), border-color 0.4s var(--ease-calm); } .regulatory-card:hover { transform: translateY(-6px); border-color: var(--slate-400); box-shadow: var(--shadow-deep); } .regulatory-card .service-icon { margin: 0 auto 16px; } .regulatory-card h3 { font-size: 1rem; margin: 0 0 10px; } .regulatory-card-link { font-size: 0.82rem; } .regulatory-card:hover .regulatory-card-link { color: var(--gold-600); } .service-icon { width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, var(--slate-500), var(--navy-800)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 18px; border: 1.5px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 24px rgba(74, 111, 165, 0.2); transition: transform 0.4s var(--ease-calm); } .service-card:hover .service-icon, .regulatory-card:hover .service-icon { transform: scale(1.1) rotate(5deg); } .service-icon-lg { width: 72px; height: 72px; font-size: 1.8rem; border-radius: 18px; } .jurisdiction-card-flag-wrap { min-height: 44px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .jurisdiction-card-flag { width: 46px; height: 34px; object-fit: cover; display: block; border-radius: 5px; border: 1px solid rgba(10, 25, 47, 0.14); box-shadow: 0 5px 14px -7px rgba(10, 25, 47, 0.55); background: var(--slate-100); transition: transform .35s var(--ease-calm), box-shadow .35s var(--ease-calm); } .jurisdiction-card-flag--eu, .jurisdiction-card-flag--symbol { display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 800 .72rem/1 "Montserrat Variable", sans-serif; letter-spacing: .05em; } .jurisdiction-card-flag--eu { background: #17488f; color: #ffd34e; position: relative; } .jurisdiction-card-flag--eu::after { content: "✦ ✦ ✦"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .48rem; letter-spacing: .13em; } .jurisdiction-card-flag--symbol { background: linear-gradient(135deg, var(--slate-500), var(--navy-800)); font-size: 1.2rem; letter-spacing: 0; } .service-card:hover .jurisdiction-card-flag { transform: translateY(-3px) scale(1.08); box-shadow: 0 10px 20px -8px rgba(10, 25, 47, 0.6); } .service-card { display: block; height: 100%; text-decoration: none; color: inherit; text-align: center; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow-elevate); transition: transform 0.45s var(--ease-calm), box-shadow 0.45s var(--ease-calm), border-color 0.45s var(--ease-calm); } .service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-deep); border-color: var(--slate-400); } .service-card .service-icon { margin: 0 auto 18px; } .service-card h3 { margin: 0 0 10px; font-size: 1.15rem; } .service-card p { color: var(--ink-500); line-height: 1.6; margin-bottom: 14px; } .service-link { color: var(--slate-600); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; } .service-card:hover .service-link { color: var(--gold-600); } .tag-pill { display: inline-block; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--slate-100); color: var(--slate-600); font-size: 0.72rem; font-weight: 700; } /* ---------- Process ---------- */ .process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; } .process-step { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 30px 26px; box-shadow: var(--shadow-elevate); transition: transform 0.4s var(--ease-calm), box-shadow 0.4s var(--ease-calm); } .process-step:hover { transform: translateY(-6px); box-shadow: var(--shadow-deep); } .process-index { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); color: var(--navy-900); display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: "Montserrat Variable", sans-serif; margin-bottom: 16px; } .process-step p { color: var(--ink-500); } .process-card-panel { background: linear-gradient(180deg, var(--navy-900), var(--navy-800)); border-radius: var(--radius-lg); padding: 32px; color: #fff; box-shadow: var(--shadow-deep); } .process-card-panel h2 { color: #fff; } .process-card-panel h3 { color: #fff; } .mini-step { display: flex; gap: 16px; margin-bottom: 20px; } .mini-step:last-child { margin-bottom: 0; } .mini-step-index { flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(197, 160, 89, 0.18); border: 1px solid rgba(197, 160, 89, 0.4); color: var(--gold-400); display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: "Montserrat Variable", sans-serif; font-size: 0.9rem; } .mini-step h3 { color: #fff; font-size: 1rem; margin: 0 0 4px; } .mini-step p { color: rgba(255, 255, 255, 0.7); margin: 0; font-size: 0.92rem; } /* The .check-list component defaults to dark ink text for use on white cards. Override it to light text/gold icons when reused inside the dark navy panel. */ .process-card-panel .check-list li { color: rgba(255, 255, 255, 0.85); } .process-card-panel .check-list li i { color: var(--gold-400); } /* Bootstrap's .text-muted is designed for light backgrounds and becomes too dark when the overview CTA is placed inside the navy services panel. */ .process-card-panel .text-muted { color: rgba(255, 255, 255, 0.86) !important; } /* ---------- Jurisdictions / partners ---------- */ .jurisdiction-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 26px; height: 100%; box-shadow: var(--shadow-elevate); text-align: center; transition: transform 0.4s var(--ease-calm), border-color 0.4s var(--ease-calm); } .jurisdiction-card:hover { transform: translateY(-5px); border-color: var(--slate-400); } .jurisdiction-flag { border-radius: 6px; margin: 0 auto 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .jurisdiction-card h4 { margin-bottom: 6px; font-size: 1.05rem; } .jurisdiction-card p { color: var(--ink-500); font-size: 0.92rem; } /* ---------- Blog ---------- */ .blog-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; display: block; text-decoration: none; color: inherit; border: 1px solid var(--line-soft); box-shadow: var(--shadow-elevate); height: 100%; transition: transform 0.4s var(--ease-calm); } .blog-card:hover { transform: translateY(-6px); } .blog-cover { height: 190px; background-size: cover; background-position: center; } .blog-body { padding: 22px; } .blog-date { color: var(--slate-500); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .blog-body h3 { margin: 8px 0; font-size: 1.1rem; } .blog-body p { color: var(--ink-500); font-size: 0.92rem; } .blog-article-header h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); } .blog-meta { color: var(--ink-500); font-size: 0.9rem; } .blog-cover-lg { height: 360px; background-size: cover; background-position: center; border-radius: var(--radius-lg); margin: 24px 0; box-shadow: var(--shadow-elevate); } .blog-article-body { color: var(--ink-700); line-height: 1.85; font-size: 1.05rem; } .blog-article-body h2 { margin-top: 36px; } .blog-article-body h3 { color: var(--navy-800); margin-top: 26px; } /* ---------- Editorial author profile ---------- */ .blog-author-card { max-width: 820px; margin: 48px auto 0; padding: 26px 30px; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 22px; align-items: center; border: 1px solid rgba(74, 111, 165, 0.18); border-left: 4px solid var(--gold-500); border-radius: var(--radius-lg); background: linear-gradient(135deg, #fff, var(--paper-tint)); box-shadow: var(--shadow-elevate); } .blog-author-portrait-wrap { width: 92px; height: 92px; padding: 3px; border-radius: 50%; background: conic-gradient(from 210deg, var(--gold-400), var(--slate-500), var(--navy-800), var(--gold-400)); box-shadow: 0 12px 24px -14px rgba(10, 25, 47, 0.72), 0 0 0 5px rgba(197, 160, 89, 0.08); } .blog-author-portrait { width: 100%; height: 100%; object-fit: cover; border: 3px solid #fff; border-radius: 50%; background: var(--slate-100); } .blog-author-kicker { margin: 0 0 6px; color: var(--gold-600); font: 800 .68rem/1.2 "Montserrat Variable", sans-serif; letter-spacing: .11em; text-transform: uppercase; } .blog-author-copy h2 { margin: 0; font-size: 1.24rem; } .blog-author-role { margin: 5px 0 8px; color: var(--slate-600); font-size: .86rem; font-weight: 800; } .blog-author-bio { max-width: 650px; margin: 0 0 14px; color: var(--ink-500); font-size: .9rem; line-height: 1.65; } .blog-author-link { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; border-radius: 999px; background: var(--navy-900); color: #fff; font: 700 .8rem/1 "Montserrat Variable", sans-serif; transition: transform .3s var(--ease-calm), background .3s var(--ease-calm), color .3s var(--ease-calm); } .blog-author-link i:first-child { color: var(--gold-400); font-size: 1rem; } .blog-author-link i:last-child { color: rgba(255,255,255,.58); font-size: .7rem; } .blog-author-link:hover, .blog-author-link:focus-visible { color: var(--navy-900); background: var(--gold-400); transform: translateY(-2px); } .blog-author-link:hover i:first-child, .blog-author-link:focus-visible i:first-child { color: var(--navy-900); } .blog-author-link:hover i:last-child, .blog-author-link:focus-visible i:last-child { color: var(--navy-700); } /* ---------- FAQ ---------- */ .faq-list { max-width: 840px; } .faq-item { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 14px; box-shadow: var(--shadow-elevate); } .faq-question { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; font-weight: 700; color: var(--navy-900); list-style: none; } .faq-question::-webkit-details-marker { display: none; } .faq-chevron { transition: transform 0.35s var(--ease-calm); color: var(--slate-500); flex: none; } .faq-item[open] .faq-chevron { transform: rotate(180deg); } .faq-answer { color: var(--ink-500); margin-top: 14px; line-height: 1.7; } /* ---------- CTA banner ---------- */ .cta-banner { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--navy-900), var(--navy-800)); padding: 90px 0; color: #fff; } .cta-banner::after { content: ""; position: absolute; bottom: -20%; left: 50%; transform: translateX(-50%); width: 700px; height: 500px; background: radial-gradient(circle, rgba(197, 160, 89, 0.2), transparent 65%); pointer-events: none; } .cta-banner .container { position: relative; z-index: 1; } .cta-banner h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.6rem); } .cta-banner p { color: rgba(255, 255, 255, 0.78); max-width: 600px; margin: 16px auto 30px; } .cta-banner .btn-light { background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); color: var(--navy-900); border: none; box-shadow: 0 18px 42px -16px rgba(197, 160, 89, 0.55); transition: transform 0.35s var(--ease-calm), filter 0.35s var(--ease-calm); } .cta-banner .btn-light:hover { transform: translateY(-3px); filter: brightness(1.04); color: var(--navy-900); } /* ---------- Contact / offices ---------- */ .office-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-elevate); text-align: center; } .office-flag { width: 44px; height: 44px; border-radius: 12px; background: var(--slate-100); color: var(--slate-600); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .office-address { color: var(--ink-500); font-size: 0.9rem; } .office-line { color: var(--ink-700); font-size: 0.9rem; margin: 4px 0; } .office-line a { color: var(--slate-600); font-weight: 600; } .contact-info-list { list-style: none; padding: 0; } .contact-info-list li { display: flex; gap: 12px; margin-bottom: 16px; color: var(--ink-700); } .contact-info-list li i { color: var(--slate-500); margin-top: 3px; } .contact-info-list a { color: var(--slate-600); font-weight: 600; } .contact-form-card { position: relative; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 40px 36px 36px; box-shadow: var(--shadow-elevate); overflow: hidden; } .contact-form-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--gold-400), var(--slate-500)); } .contact-form-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; } .contact-form-icon { flex: none; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--slate-500), var(--navy-800)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; } .contact-form-card h2 { margin: 0; font-size: 1.3rem; } .contact-form-subtitle { color: var(--ink-500); font-size: 0.92rem; margin: 6px 0 28px; } .input-icon-group { position: relative; } .input-icon-group > i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--slate-400); font-size: 0.95rem; pointer-events: none; transition: color 0.3s var(--ease-calm); } .input-icon-group--top > i { top: 18px; transform: none; } .input-icon-group > .form-control, .input-icon-group > .form-select { padding-left: 42px; } .input-icon-group:focus-within > i { color: var(--slate-600); } .form-note { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-500); font-size: 0.82rem; margin-top: 20px; line-height: 1.5; } .form-note i { color: var(--slate-500); margin-top: 2px; } .form-submit-btn { width: 100%; } @media (min-width: 768px) { .form-submit-btn { width: auto; } } .social-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--slate-100); color: var(--slate-600); display: flex; align-items: center; justify-content: center; transition: background 0.3s var(--ease-calm), color 0.3s var(--ease-calm); } .social-icon:hover { background: var(--navy-900); color: var(--gold-400); } /* ---------- Compliance & Transparency (Trust Architecture) ---------- */ .compliance-section { position: relative; overflow: hidden; color: #fff; background: linear-gradient(160deg, var(--navy-900), var(--navy-800)); } .compliance-section::after { content: ""; position: absolute; bottom: -15%; right: -5%; width: 620px; height: 620px; background: radial-gradient(circle, rgba(74, 111, 165, 0.32), transparent 65%); pointer-events: none; } .compliance-section .container { position: relative; z-index: 1; } .compliance-section .section-header h2 { color: #fff; } .compliance-section .section-subtitle { color: rgba(255, 255, 255, 0.7); } .compliance-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(197, 160, 89, 0.14); border: 1px solid rgba(197, 160, 89, 0.35); color: var(--gold-400); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .compliance-icon svg { width: 24px; height: 24px; } .compliance-card { text-align: center; } .compliance-card h3 { color: #fff; font-size: 1.05rem; } .compliance-card p { color: rgba(255, 255, 255, 0.68); font-size: 0.92rem; line-height: 1.6; margin: 0; } /* CSS-based animated data representation ("interactive data") */ .data-viz-panel { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-lg); padding: 28px; height: 100%; } .data-viz-panel h3 { color: #fff; font-size: 1rem; margin-bottom: 4px; } .data-viz-panel p { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; margin-bottom: 20px; } .data-viz { display: flex; align-items: flex-end; gap: 10px; height: 130px; } .data-bar { flex: 1; background: linear-gradient(180deg, var(--gold-400), var(--slate-500)); border-radius: 6px 6px 2px 2px; height: 6%; transition: height 1.1s var(--ease-calm); } .reveal.is-visible .data-bar { height: var(--h); } .data-bar:nth-child(1) { transition-delay: 0.05s; } .data-bar:nth-child(2) { transition-delay: 0.15s; } .data-bar:nth-child(3) { transition-delay: 0.25s; } .data-bar:nth-child(4) { transition-delay: 0.35s; } .data-bar:nth-child(5) { transition-delay: 0.45s; } .data-viz-labels { display: flex; justify-content: space-between; margin-top: 10px; color: rgba(255, 255, 255, 0.45); font-size: 0.68rem; } /* ---------- Footer ---------- */ .site-footer { background: linear-gradient(180deg, var(--navy-900), var(--navy-950)); color: rgba(234, 241, 248, 0.75); } .footer-tagline { color: rgba(234, 241, 248, 0.6); font-size: 0.92rem; line-height: 1.6; } .footer-heading { color: #fff; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; } .footer-links { list-style: none; padding: 0; } .footer-links li { margin-bottom: 10px; } .footer-links a { color: rgba(234, 241, 248, 0.65); transition: color 0.3s var(--ease-calm); } .footer-links a:hover { color: var(--gold-400); } .footer-divider { border-color: rgba(255, 255, 255, 0.1); margin: 36px 0 24px; } .footer-copy { color: rgba(234, 241, 248, 0.5); font-size: 0.85rem; } .admin-link { color: rgba(234, 241, 248, 0.5); font-size: 0.85rem; } .admin-link:hover { color: var(--gold-400); } .footer-archive-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0.45rem 0.9rem; border: 1px solid rgba(197, 160, 89, 0.38); border-radius: 999px; background: rgba(197, 160, 89, 0.08); color: var(--gold-400); font: 700 0.8rem/1 "Montserrat Variable", "Montserrat", sans-serif; cursor: pointer; transition: background 0.3s var(--ease-calm), color 0.3s var(--ease-calm), border-color 0.3s var(--ease-calm), transform 0.3s var(--ease-calm); } .footer-archive-btn:hover, .footer-archive-btn:focus-visible { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-950); transform: translateY(-2px); } .footer-archive-btn:disabled { opacity: 0.65; cursor: wait; transform: none; } /* ---------- Toast ---------- */ .toast-stack { position: fixed; bottom: 24px; right: 24px; left: 24px; z-index: 2000; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; } .app-toast { background: var(--navy-900); color: #fff; padding: 14px 18px; border-radius: var(--radius); display: flex; gap: 10px; align-items: center; box-shadow: var(--shadow-deep); border: 1px solid rgba(255, 255, 255, 0.1); opacity: 0; transform: translateY(10px); transition: opacity 0.3s var(--ease-calm), transform 0.3s var(--ease-calm); max-width: min(360px, 90vw); } .app-toast.show { opacity: 1; transform: none; } .app-toast-success i { color: #3ecf8e; } .app-toast-error i { color: #ff7a7a; } .app-toast-info i { color: var(--slate-100); } /* ---------- Admin ---------- */ .admin-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--navy-900), var(--navy-800)); padding: 40px 20px; } .admin-login-card { max-width: 420px; width: 100%; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-lg); padding: 44px 36px; text-align: center; color: #fff; box-shadow: var(--shadow-deep); } .admin-login-icon { font-size: 2.6rem; color: var(--gold-400); margin-bottom: 14px; } .admin-login-card h1 { color: #fff; } .admin-login-card p { color: rgba(255, 255, 255, 0.65); } .admin-login-card .form-control { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: #fff; } .admin-login-card .form-label { color: rgba(255, 255, 255, 0.8); } .admin-login-card .back-link { color: rgba(255, 255, 255, 0.55); } .admin-login-card .back-link:hover { color: var(--gold-400); } .admin-shell { background: var(--paper-tint); min-height: 100vh; } .admin-sidebar { background: linear-gradient(180deg, var(--navy-900), var(--navy-950)); min-height: 100vh; padding: 28px 18px; } .admin-brand { color: #fff; font-weight: 800; font-size: 1.1rem; margin-bottom: 26px; display: flex; gap: 8px; align-items: center; } .admin-nav { display: flex; flex-direction: column; gap: 6px; } .admin-nav-btn { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: transparent; border: none; color: rgba(255, 255, 255, 0.65); text-align: left; font-weight: 600; text-decoration: none; width: 100%; transition: background 0.3s var(--ease-calm), color 0.3s var(--ease-calm); } .admin-nav-btn:hover { background: rgba(255, 255, 255, 0.07); color: #fff; } .admin-nav-btn.active { background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); color: var(--navy-900); } .logout-btn { margin-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 20px; } .admin-main { padding: 36px 40px; } .admin-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-elevate); margin-bottom: 20px; } .admin-card h2 { font-size: 1.15rem; } /* ---------- Custom Requirement Blocks ---------- */ .requirement-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 36px 28px; box-shadow: var(--shadow-elevate); margin-bottom: 20px; transition: transform 0.4s var(--ease-calm), box-shadow 0.4s var(--ease-calm); } .requirement-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-deep); } .requirement-icon-box { font-size: 2.1rem; color: var(--gold-500); background: rgba(197, 160, 89, 0.08); width: 68px; height: 68px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid rgba(197, 160, 89, 0.25); margin-bottom: 16px; transition: transform 0.4s var(--ease-calm), background-color 0.4s var(--ease-calm); } .requirement-card:hover .requirement-icon-box { transform: scale(1.1); background: rgba(197, 160, 89, 0.15); } .requirement-title { font-size: 1.25rem; font-weight: 800; color: var(--navy-900); line-height: 1.35; } .admin-stat-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 24px; text-align: center; box-shadow: var(--shadow-elevate); } .admin-stat-card i { font-size: 1.6rem; color: var(--slate-500); margin-bottom: 10px; } .admin-stat-value { display: block; font-weight: 800; font-size: 1.8rem; color: var(--navy-900); font-family: "Montserrat Variable", sans-serif; } .admin-stat-label { color: var(--ink-500); font-size: 0.85rem; } .admin-table { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; } .admin-table thead { background: var(--paper-tint); } .admin-table th { color: var(--navy-800); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; font-family: "Montserrat Variable", sans-serif; } .badge-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; } .badge-dot-on { background: #3ecf8e; } .badge-dot-off { background: #c7cdd6; } .upload-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 2px dashed var(--slate-400); border-radius: var(--radius-lg); padding: 44px; cursor: pointer; color: var(--slate-600); transition: background 0.3s; } .upload-drop:hover { background: var(--slate-100); } .upload-drop i { font-size: 2rem; } .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; } .media-item { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); background: #fff; } .media-item img { width: 100%; height: 120px; object-fit: cover; } .media-item-meta { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; font-size: 0.75rem; color: var(--ink-500); } .code-preview { background: var(--navy-900); color: #c9d6e6; padding: 18px; border-radius: var(--radius); font-size: 0.78rem; max-height: 220px; overflow: auto; } .code-editor { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; line-height: 1.55; min-height: 180px; } .lead-message { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- CASP pillar page ---------- */ .casp-quickfacts { position: relative; z-index: 2; margin-top: -60px; display: flex; flex-wrap: wrap; gap: 18px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 26px 30px; box-shadow: var(--shadow-elevate); } .casp-quickfact { flex: 1 1 160px; text-align: center; padding: 10px; } .casp-quickfact i { font-size: 1.5rem; color: var(--slate-500); margin-bottom: 8px; display: block; } .casp-quickfact-value { display: block; font-weight: 800; font-size: 1.3rem; color: var(--navy-900); font-family: "Montserrat Variable", sans-serif; } .casp-quickfact-label { color: var(--ink-500); font-size: 0.78rem; } .casp-toc { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; background: var(--paper-tint); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px 22px; margin-top: 24px; } .casp-toc-label { font-weight: 700; color: var(--navy-900); font-size: 0.85rem; font-family: "Montserrat Variable", sans-serif; } .casp-toc-links { display: flex; flex-wrap: wrap; gap: 14px; } .casp-toc-links a { color: var(--slate-600); font-size: 0.85rem; font-weight: 600; } .casp-toc-links a:hover { color: var(--gold-600); } .casp-steps { display: flex; flex-direction: column; gap: 20px; } .casp-step { position: relative; overflow: hidden; display: flex; gap: 20px; align-items: flex-start; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 24px 28px; box-shadow: var(--shadow-elevate); transition: transform 0.4s var(--ease-calm), box-shadow 0.4s var(--ease-calm), border-color 0.4s var(--ease-calm); } .casp-step::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--gold-400), var(--slate-500)); } .casp-step:hover { transform: translateY(-5px); box-shadow: var(--shadow-deep); border-color: var(--slate-400); } .casp-step-icon { flex: none; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--slate-500), var(--navy-800)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 10px 24px -10px rgba(15, 42, 74, 0.55); } .casp-step-body p { color: var(--ink-500); margin: 0; } .chart-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-elevate); height: 320px; } .chart-card canvas { max-height: 280px; } .chart-card--tall { height: 420px; } .chart-legend { display: flex; align-items: center; gap: 8px; color: var(--ink-500); font-size: 0.82rem; margin-top: 12px; } .chart-legend-swatch { display: inline-block; width: 22px; height: 10px; border-radius: 4px; flex: none; } .chart-legend-swatch--gold { background: linear-gradient(90deg, rgba(197, 160, 89, 0.55), var(--gold-500)); } .chart-legend-swatch--slate { background: linear-gradient(90deg, rgba(74, 111, 165, 0.55), var(--slate-500)); } /* ---------- Scrollable data tables (mobile swipe) ---------- */ .table-scroll-container { position: relative; width: 100%; } .table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } .table-scroll-wrap table { margin-bottom: 0; } .table-link { color: var(--slate-600); font-weight: 600; } .table-link:hover { color: var(--gold-600); text-decoration: underline; } /* Premium CASP Table styling to prevent "disheveled" layout on mobile */ .premium-casp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.88rem; background-color: #ffffff; } .premium-casp-table th { background-color: var(--navy-900) !important; color: #ffffff !important; font-weight: 700; padding: 14px 18px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2.5px solid var(--gold-500); } .premium-casp-table td { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); color: var(--ink-700); } .premium-casp-table tr:hover td { background-color: rgba(74, 111, 165, 0.03); } /* Specific column sizes for responsive snugness */ .col-jurisdiction { min-width: 170px; } .col-budget-label { min-width: 250px; white-space: normal !important; } .text-wrap-note { white-space: normal !important; max-width: 310px; font-size: 0.76rem; line-height: 1.4; margin-top: 4px; } .flag-icon { font-size: 1.15rem; vertical-align: middle; } .comparison-flag { display: inline-block; width: 28px; height: 21px; object-fit: cover; vertical-align: middle; border-radius: 3px; border: 1px solid rgba(10, 25, 47, 0.14); box-shadow: 0 3px 9px -5px rgba(10, 25, 47, 0.55); background: var(--slate-100); } .comparison-flag--region, .comparison-flag--eu { display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 800 .58rem/1 "Montserrat Variable", sans-serif; letter-spacing: .04em; } .comparison-flag--region { background: linear-gradient(135deg, var(--slate-500), var(--navy-800)); } .comparison-flag--eu { background: #17488f; color: #ffd34e; } /* Cross-platform jurisdiction flags. Do not use Unicode flag emoji here: Windows, Android and Linux may render them as text or omit them entirely. Fixed image dimensions keep the guide cards aligned on every device. */ .jurisdiction-guide-flag { display: inline-block; width: 28px; height: 21px; max-width: none; object-fit: cover; vertical-align: -0.22em; border-radius: 3px; border: 1px solid rgba(10, 25, 47, 0.14); box-shadow: 0 3px 9px -5px rgba(10, 25, 47, 0.55); margin-right: 0.5rem; background: var(--slate-100); } .jurisdiction-guide-flag--region { display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--slate-500), var(--navy-800)); font: 800 0.58rem/1 "Montserrat Variable", sans-serif; letter-spacing: 0.04em; } /* Custom Row Highlight (replaces generic green table-success) */ .table-row-highlight { border-left: 4px solid var(--gold-500) !important; } .table-row-highlight td { background-color: rgba(197, 160, 89, 0.08) !important; color: var(--navy-900) !important; font-weight: 600; } .tag-pill--annual { background: rgba(74, 111, 165, 0.12) !important; color: var(--slate-600) !important; } .tag-pill--oneoff { background: rgba(197, 160, 89, 0.12) !important; color: var(--gold-600) !important; } .text-gold { color: var(--gold-500) !important; } .table-scroll-hint { display: none; align-items: center; gap: 8px; color: var(--ink-500); font-size: 0.8rem; margin-top: 10px; } .table-scroll-hint i { color: var(--slate-500); } @media (max-width: 768px) { .table-scroll-hint { display: flex; } .table-scroll-container::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 34px; background: linear-gradient(90deg, transparent, rgba(10, 25, 47, 0.10)); pointer-events: none; z-index: 10; } .chart-card { height: 300px; padding: 16px; } .chart-card--tall { height: 380px; } } .casp-carousel { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-deep); } .casp-carousel-img { height: 440px; object-fit: cover; } .casp-carousel-caption { background: linear-gradient(0deg, rgba(10, 25, 47, 0.85), transparent); border-radius: 0; bottom: 0; padding: 26px; } .casp-carousel-caption p { font-weight: 600; margin: 0; } /* ---------- Responsive ---------- */ @media (max-width: 991px) { .admin-sidebar { min-height: auto; position: relative; } .admin-main { padding: 28px 20px; } } @media (max-width: 768px) { .hero-section { padding: 150px 0 70px; } .page-hero { padding: 130px 0 56px; } .section { padding: 64px 0; } .casp-quickfacts { margin-top: 24px; } .casp-carousel-img { height: 280px; } .toast-stack { left: 12px; right: 12px; bottom: 12px; align-items: stretch; } .app-toast { max-width: none; } } @media (prefers-reduced-motion: reduce) { .reveal, .glass-card, .service-card, .process-step, .mission-card, .why-card, .jurisdiction-card, .data-bar { transition-duration: 0.01ms !important; } } /* ---------- Off-Canvas Mobile Menu ---------- */ .app-offcanvas { background: linear-gradient(145deg, var(--navy-950) 0%, var(--navy-900) 100%) !important; border-left: 1px solid rgba(255, 255, 255, 0.08) !important; width: 320px !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .app-offcanvas .offcanvas-header { border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 20px; } .app-offcanvas .offcanvas-body { padding: 24px; } .btn-close-custom { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: rgba(234, 241, 248, 0.75); cursor: pointer; transition: all 0.3s var(--ease-calm); } .btn-close-custom:hover, .btn-close-custom:focus { background: var(--gold-500); color: var(--navy-950); border-color: var(--gold-500); transform: rotate(90deg); outline: none; } .offcanvas-section-title { color: var(--gold-400); font-family: "Montserrat Variable", sans-serif; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; opacity: 0.85; } .nav-link-mobile { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); color: rgba(234, 241, 248, 0.85); font-family: "Montserrat Variable", sans-serif; font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: all 0.35s var(--ease-calm); } .nav-link-mobile i { color: var(--slate-500); transition: transform 0.3s var(--ease-calm), color 0.3s var(--ease-calm); } .nav-link-mobile:hover, .nav-link-mobile.active { background: rgba(197, 160, 89, 0.08); border-color: rgba(197, 160, 89, 0.25); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 24px -10px rgba(197, 160, 89, 0.25); } .nav-link-mobile:hover i, .nav-link-mobile.active i { color: var(--gold-400); transform: translateX(4px); } .offcanvas-footer-text { font-size: 0.74rem; color: rgba(234, 241, 248, 0.45); font-weight: 600; } .offcanvas-social-link { width: 36px; height: 36px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); color: rgba(234, 241, 248, 0.6); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; transition: all 0.3s var(--ease-calm); } .offcanvas-social-link:hover { background: var(--gold-500); color: var(--navy-950); transform: translateY(-2px); } /* ---------- Desktop "Services" grouped dropdown ---------- */ .app-navbar .nav-item.dropdown { position: relative; } .app-navbar .dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; } .app-navbar .dropdown-toggle::after { display: none; } .app-navbar .dropdown-caret { font-size: 0.62rem; color: rgba(234, 241, 248, 0.45); transition: transform 0.3s var(--ease-calm), color 0.3s var(--ease-calm); } .app-navbar .dropdown-toggle[aria-expanded="true"] .dropdown-caret, .app-navbar .dropdown-toggle.active .dropdown-caret { transform: rotate(180deg); color: var(--gold-400); } .app-dropdown-menu { background: linear-gradient(160deg, var(--navy-950), var(--navy-900)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); padding: 10px; min-width: 320px; max-height: 70vh; overflow-y: auto; box-shadow: var(--shadow-deep); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); margin-top: 12px !important; } .app-dropdown-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); color: rgba(234, 241, 248, 0.85); font-family: "Montserrat Variable", sans-serif; font-weight: 600; font-size: 0.86rem; transition: background 0.25s var(--ease-calm), color 0.25s var(--ease-calm); } .app-dropdown-item:hover, .app-dropdown-item:focus, .app-dropdown-item.active { background: rgba(197, 160, 89, 0.1); color: #fff; } .app-dropdown-icon { flex: none; width: 34px; height: 34px; border-radius: 9px; background: rgba(74, 111, 165, 0.2); color: var(--slate-400); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; transition: background 0.25s var(--ease-calm), color 0.25s var(--ease-calm); } .app-dropdown-item:hover .app-dropdown-icon, .app-dropdown-item.active .app-dropdown-icon { background: rgba(197, 160, 89, 0.18); color: var(--gold-400); } .app-dropdown-divider { border-color: rgba(255, 255, 255, 0.08); margin: 8px 4px; } .app-dropdown-item--all { color: var(--gold-400); } .app-dropdown-item--all .app-dropdown-icon { background: rgba(197, 160, 89, 0.14); color: var(--gold-400); } /* ---------- Mobile "Services" accordion submenu (inside off-canvas) ---------- */ button.nav-link-mobile { width: 100%; appearance: none; -webkit-appearance: none; cursor: pointer; font-family: "Montserrat Variable", sans-serif; } .submenu-caret { font-size: 0.72rem; transition: transform 0.3s var(--ease-calm), color 0.3s var(--ease-calm); } .nav-link-mobile:not(.collapsed) .submenu-caret { transform: rotate(180deg); color: var(--gold-400); } .nav-link-mobile.active { color: #fff; } .nav-submenu-list { list-style: none; margin: 8px 2px 4px; padding: 6px 0 6px 14px; border-left: 2px solid rgba(197, 160, 89, 0.22); display: flex; flex-direction: column; gap: 6px; } .nav-submenu-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); color: rgba(234, 241, 248, 0.68); font-family: "Montserrat Variable", sans-serif; font-weight: 600; font-size: 0.85rem; text-decoration: none; transition: all 0.3s var(--ease-calm); } .nav-submenu-link i { width: 18px; text-align: center; color: var(--slate-500); font-size: 0.82rem; } .nav-submenu-link:hover, .nav-submenu-link.active { background: rgba(197, 160, 89, 0.08); color: #fff; } .nav-submenu-link:hover i, .nav-submenu-link.active i { color: var(--gold-400); } .nav-submenu-link--all { color: var(--gold-400); font-weight: 700; } .nav-submenu-link--all i { color: var(--gold-400); } /* ---------- Advisory service pillar pages ---------- */ .advisory-hero { padding-bottom: 92px; } .advisory-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 50px; align-items: center; margin-top: 34px; } .advisory-hero-grid .page-hero-subtitle { margin-left: 0; } .advisory-hero-orbit { min-height: 280px; position: relative; display: grid; place-items: center; } .advisory-orbit-ring { position: absolute; border: 1px solid rgba(217, 189, 130, .35); border-radius: 50%; transform: rotate(-20deg); animation: advisory-orbit 14s linear infinite; } .advisory-orbit-ring--one { width: 230px; height: 230px; } .advisory-orbit-ring--two { width: 170px; height: 270px; border-color: rgba(117, 146, 191, .45); animation-duration: 18s; animation-direction: reverse; } .advisory-orbit-core { position: relative; width: 122px; height: 122px; border-radius: 34px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; color: #fff; background: linear-gradient(145deg, rgba(74,111,165,.95), rgba(10,25,47,.94)); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 24px 55px -22px rgba(0,0,0,.75), inset 0 1px rgba(255,255,255,.16); transform: rotate(5deg); } .advisory-orbit-core i { font-size: 2rem; color: var(--gold-400); } .advisory-orbit-core span { font: 700 .62rem/1.2 "Montserrat Variable", sans-serif; text-transform: uppercase; letter-spacing: .08em; text-align: center; color: rgba(255,255,255,.72); } @keyframes advisory-orbit { to { transform: rotate(340deg); } } .advisory-facts-wrap { position: relative; z-index: 3; margin-top: -42px; } .advisory-facts { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevate); overflow: hidden; } .advisory-fact { padding: 24px 18px; text-align: center; border-right: 1px solid var(--line-soft); } .advisory-fact:last-child { border-right: 0; } .advisory-fact strong { display: block; color: var(--gold-600); font: 800 1.45rem/1 "Montserrat Variable", sans-serif; margin-bottom: 8px; } .advisory-fact span { display: block; color: var(--ink-500); font-size: .78rem; font-weight: 700; } .advisory-prose-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; } .advisory-prose-card { position: relative; background: linear-gradient(180deg, #fff, var(--paper-tint)); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 30px 30px 28px 62px; box-shadow: var(--shadow-elevate); min-height: 100%; overflow: hidden; } .advisory-prose-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--gold-400), var(--slate-500)); } .advisory-card-index { position: absolute; left: 22px; top: 30px; color: var(--gold-600); font: 800 .8rem/1 "Montserrat Variable", sans-serif; } .advisory-prose-card p { color: var(--ink-700); line-height: 1.78; margin: 0; } .advisory-carousel { position: relative; max-width: 860px; margin: 0 auto; touch-action: pan-y; cursor: grab; } .advisory-carousel.is-dragging { cursor: grabbing; user-select: none; } .advisory-carousel-track { position: relative; min-height: 230px; } .advisory-slide { display: none; min-height: 230px; padding: 42px 48px 38px; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(145deg, var(--navy-900), var(--navy-800)); box-shadow: var(--shadow-deep); border: 1px solid rgba(255,255,255,.1); animation: advisory-slide-in .45s var(--ease-calm); } .advisory-slide.is-active { display: block; } .advisory-slide-number { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 28px; color: var(--gold-400); background: rgba(197,160,89,.14); border: 1px solid rgba(197,160,89,.36); border-radius: 999px; font: 800 .75rem/1 "Montserrat Variable", sans-serif; margin-bottom: 22px; } .advisory-slide h3 { color: #fff; font-size: clamp(1.25rem, 3vw, 1.8rem); margin-bottom: 12px; } .advisory-slide p { color: rgba(255,255,255,.73); line-height: 1.72; max-width: 680px; margin: 0; } .advisory-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 18px; } .advisory-carousel-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-soft); background: #fff; color: var(--navy-800); cursor: pointer; transition: transform .3s var(--ease-calm), background .3s var(--ease-calm), color .3s var(--ease-calm); } .advisory-carousel-btn:hover, .advisory-carousel-btn:focus-visible { transform: translateY(-3px); background: var(--navy-900); color: var(--gold-400); } .advisory-carousel-dots { display: flex; gap: 8px; } .advisory-carousel-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 99px; background: var(--slate-400); opacity: .45; cursor: pointer; transition: width .3s var(--ease-calm), opacity .3s var(--ease-calm), background .3s var(--ease-calm); } .advisory-carousel-dot.is-active { width: 28px; opacity: 1; background: var(--gold-500); } @keyframes advisory-slide-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } .advisory-roadmap-section { background: radial-gradient(circle at 85% 15%, rgba(74,111,165,.09), transparent 32%), #fff; } .advisory-timeline { position: relative; max-width: 900px; margin: 0 auto; padding: 10px 0; } .advisory-timeline::before { content: ""; position: absolute; left: 25px; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--gold-400), var(--slate-400), transparent); } .advisory-timeline-item { position: relative; display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 22px; margin-bottom: 22px; } .advisory-timeline-item:last-child { margin-bottom: 0; } .advisory-timeline-marker { position: relative; z-index: 1; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: var(--navy-900); background: var(--gold-400); border: 5px solid #fff; box-shadow: 0 0 0 1px rgba(197,160,89,.45), 0 12px 26px -16px rgba(10,25,47,.7); font: 800 .88rem/1 "Montserrat Variable", sans-serif; transform: scale(.82); transition: transform .55s var(--ease-calm), background .55s var(--ease-calm); } .advisory-timeline-item.is-timeline-active .advisory-timeline-marker { transform: scale(1); background: var(--gold-400); } .advisory-timeline-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 22px 26px; box-shadow: var(--shadow-elevate); transition: transform .55s var(--ease-calm), box-shadow .55s var(--ease-calm); } .advisory-timeline-item.is-timeline-active .advisory-timeline-card { transform: translateX(5px); box-shadow: var(--shadow-deep); } .advisory-timeline-card > span { color: var(--gold-600); text-transform: uppercase; letter-spacing: .1em; font: 800 .68rem/1 "Montserrat Variable", sans-serif; } .advisory-timeline-card h3 { font-size: 1.1rem; margin: 9px 0 6px; } .advisory-timeline-card p { color: var(--ink-500); line-height: 1.65; margin: 0; } .advisory-chart-card { height: 100%; padding: 28px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-elevate); } .advisory-card-kicker { display: flex; align-items: center; gap: 8px; color: var(--gold-600); text-transform: uppercase; letter-spacing: .08em; font: 800 .68rem/1 "Montserrat Variable", sans-serif; margin-bottom: 12px; } .advisory-chart-card h3 { font-size: 1.2rem; margin-bottom: 7px; } .advisory-chart-card > p { color: var(--ink-500); font-size: .9rem; line-height: 1.55; margin-bottom: 22px; } .advisory-bars { display: flex; flex-direction: column; gap: 13px; } .advisory-bar-row { display: grid; grid-template-columns: 92px minmax(60px,1fr) 40px; align-items: center; gap: 12px; color: var(--ink-700); font-size: .78rem; } .advisory-bar-row strong { color: var(--navy-800); font-size: .78rem; text-align: right; } .advisory-bar-track { height: 10px; border-radius: 99px; background: var(--slate-100); overflow: hidden; } .advisory-bar-fill { display: block; width: var(--bar); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--slate-500), var(--gold-400)); transform-origin: left; animation: advisory-bar-grow 1.1s var(--ease-calm) both; } @keyframes advisory-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } .advisory-table-wrap { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-elevate); } .advisory-table { width: 100%; min-width: 720px; border-collapse: collapse; background: #fff; } .advisory-table th { padding: 16px 18px; background: var(--navy-900); color: #fff; border-bottom: 2px solid var(--gold-500); text-align: left; font: 700 .78rem/1.3 "Montserrat Variable", sans-serif; text-transform: uppercase; letter-spacing: .05em; } .advisory-table td { padding: 16px 18px; color: var(--ink-700); border-bottom: 1px solid var(--line-soft); line-height: 1.5; font-size: .9rem; vertical-align: top; } .advisory-table tr:last-child td { border-bottom: 0; } .advisory-table tbody tr:hover td { background: rgba(197,160,89,.07); } .advisory-table-hint { display: none; margin: 9px 14px 12px; color: var(--ink-500); font-size: .78rem; } .advisory-faq-card { height: 100%; padding: 26px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-elevate); transition: transform .35s var(--ease-calm), box-shadow .35s var(--ease-calm); } .advisory-faq-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-deep); } .advisory-faq-card > span { color: var(--gold-600); font: 800 .8rem/1 "Montserrat Variable", sans-serif; } .advisory-faq-card h3 { font-size: 1.05rem; margin: 15px 0 10px; } .advisory-faq-card p, .advisory-link-card p { color: var(--ink-500); line-height: 1.65; font-size: .92rem; } .advisory-links-section { background: linear-gradient(180deg, #fff, var(--paper-tint)); } .advisory-link-card { height: 100%; padding: 28px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-elevate); } .advisory-link-card > i { color: var(--gold-600); font-size: 1.45rem; margin-bottom: 15px; } .advisory-link-card h3 { font-size: 1.1rem; } .advisory-link { display: inline-flex; align-items: center; gap: 7px; color: var(--slate-600); font-weight: 800; font-size: .84rem; } .advisory-link:hover { color: var(--gold-600); } @media (max-width: 767px) { .advisory-hero-grid { grid-template-columns: 1fr; gap: 16px; } .advisory-hero-orbit { min-height: 215px; order: -1; } .advisory-orbit-ring--one { width: 180px; height: 180px; } .advisory-orbit-ring--two { width: 135px; height: 210px; } .advisory-orbit-core { width: 100px; height: 100px; border-radius: 28px; } .advisory-facts { grid-template-columns: repeat(2, 1fr); } .advisory-fact:nth-child(2) { border-right: 0; } .advisory-fact:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); } .advisory-prose-grid { grid-template-columns: 1fr; } .advisory-slide { padding: 30px 25px; } .advisory-timeline::before { left: 20px; } .advisory-timeline-item { grid-template-columns: 42px minmax(0,1fr); gap: 14px; } .advisory-timeline-marker { width: 42px; height: 42px; border-radius: 13px; } .advisory-timeline-card { padding: 19px 18px; } .advisory-table-hint { display: block; } } @media (prefers-reduced-motion: reduce) { .advisory-orbit-ring, .advisory-slide, .advisory-bar-fill { animation: none !important; } } /* ---------- Long-form iGaming editorial overview ---------- */ .casp-overview-heading { margin-bottom: 24px; } .casp-overview-heading h2 { margin-bottom: 0; } .casp-overview-prose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .casp-overview-prose-card { position: relative; min-height: 100%; padding: 26px 24px 24px 48px; background: linear-gradient(180deg, #fff, var(--paper-tint)); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevate); overflow: hidden; } .casp-overview-prose-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--gold-400), var(--slate-500)); } .casp-overview-card-index { position: absolute; left: 18px; top: 24px; color: var(--gold-600); font: 800 .72rem/1 "Montserrat Variable", sans-serif; letter-spacing: .04em; } .casp-overview-prose-card .about-body { font-size: .96rem; line-height: 1.72; } .casp-overview-carousel { position: relative; margin-top: 18px; touch-action: pan-y; cursor: grab; } .casp-overview-carousel:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 6px; border-radius: var(--radius-lg); } .casp-overview-carousel.is-dragging { cursor: grabbing; user-select: none; } .casp-overview-carousel-track { position: relative; min-height: 250px; } .casp-overview-slide { display: none; min-height: 250px; padding: 32px 42px 30px; background: linear-gradient(145deg, var(--navy-900), var(--navy-800)); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-lg); box-shadow: var(--shadow-deep); animation: casp-overview-slide-in .4s var(--ease-calm); } .casp-overview-slide.is-active { display: block; } .casp-overview-slide-number { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 28px; margin-bottom: 18px; border: 1px solid rgba(197, 160, 89, .36); border-radius: 999px; background: rgba(197, 160, 89, .14); color: var(--gold-400); font: 800 .72rem/1 "Montserrat Variable", sans-serif; } .casp-overview-slide .about-body { color: rgba(255, 255, 255, .78); font-size: 1rem; line-height: 1.78; } .casp-overview-slide strong { color: #fff; } .casp-overview-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; } .casp-overview-btn { width: 42px; height: 42px; border: 1px solid var(--line-soft); border-radius: 50%; background: #fff; color: var(--navy-800); font-size: 1.55rem; line-height: 1; cursor: pointer; transition: transform .3s var(--ease-calm), background .3s var(--ease-calm), color .3s var(--ease-calm); } .casp-overview-btn:hover, .casp-overview-btn:focus-visible { background: var(--navy-900); color: var(--gold-400); transform: translateY(-2px); } .casp-overview-dots { display: flex; align-items: center; gap: 7px; } .casp-overview-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 99px; background: var(--slate-400); opacity: .45; cursor: pointer; transition: width .3s var(--ease-calm), opacity .3s var(--ease-calm), background .3s var(--ease-calm); } .casp-overview-dot.is-active { width: 26px; opacity: 1; background: var(--gold-500); } @keyframes casp-overview-slide-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } } @media (max-width: 767px) { .casp-overview-prose-grid { grid-template-columns: 1fr; } .casp-overview-slide { min-height: 0; padding: 28px 24px; } .casp-overview-carousel-track { min-height: 0; } } @media (prefers-reduced-motion: reduce) { .casp-overview-slide { animation: none; } } /* ---------- About page: legal editorial layout ---------- */ .about-hero { padding-bottom: 112px; } .about-hero .page-hero-subtitle { max-width: 860px; font-size: 1.08rem; line-height: 1.8; } .about-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 900px; margin: 42px auto 0; } .about-stat-card { padding: 20px 14px; text-align: left; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-lg); background: rgba(255,255,255,.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .about-stat-card strong { display: block; color: var(--gold-400); font: 800 1.7rem/1.1 "Montserrat Variable", sans-serif; } .about-stat-card span { display: block; margin-top: 8px; color: rgba(255,255,255,.68); font-size: .78rem; } .about-editorial-section { background: radial-gradient(circle at 10% 15%, rgba(74,111,165,.08), transparent 28%), #fff; } .about-editorial-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 52px; align-items: center; } .about-editorial-copy h2 { margin-bottom: 22px; } .about-editorial-copy p { color: var(--ink-700); line-height: 1.82; font-size: 1.02rem; } .about-principle-panel { position: relative; padding: 34px 30px; color: #fff; background: linear-gradient(145deg, var(--navy-900), var(--navy-800)); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); box-shadow: var(--shadow-deep); overflow: hidden; } .about-principle-panel::after { content: ""; position: absolute; width: 240px; height: 240px; right: -90px; bottom: -100px; background: radial-gradient(circle, rgba(197,160,89,.22), transparent 68%); pointer-events: none; } .about-panel-label { color: var(--gold-400); text-transform: uppercase; letter-spacing: .1em; font: 800 .7rem/1 "Montserrat Variable", sans-serif; } .about-principle-panel h3 { color: #fff; font-size: 1.35rem; margin: 16px 0 10px; } .about-principle-panel p { color: rgba(255,255,255,.7); line-height: 1.65; } .about-principle-panel .check-list { position: relative; z-index: 1; margin-bottom: 0; } .about-principle-panel .check-list li { color: rgba(255,255,255,.84); font-size: .9rem; } .about-principle-panel .check-list li i { color: var(--gold-400); } .about-text-box { height: 100%; padding: 34px 32px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevate); transition: transform .45s var(--ease-calm), box-shadow .45s var(--ease-calm), border-color .45s var(--ease-calm); } .about-text-box:hover { transform: translateY(-7px); border-color: var(--gold-400); box-shadow: var(--shadow-deep); } .about-box-icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 16px; color: var(--gold-600); background: var(--gold-100); border: 1px solid rgba(197,160,89,.25); font-size: 1.35rem; } .about-text-box h3 { font-size: 1.35rem; margin-bottom: 16px; } .about-text-box p { color: var(--ink-500); line-height: 1.75; } .about-services-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .about-service-box { position: relative; min-height: 250px; padding: 26px 21px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevate); overflow: hidden; transition: transform .4s var(--ease-calm), box-shadow .4s var(--ease-calm), border-color .4s var(--ease-calm); } .about-service-box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--gold-400), var(--slate-500)); transform: scaleX(.25); transform-origin: left; transition: transform .4s var(--ease-calm); } .about-service-box:hover { transform: translateY(-7px); border-color: var(--slate-400); box-shadow: var(--shadow-deep); } .about-service-box:hover::before { transform: scaleX(1); } .about-service-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--slate-500), var(--navy-800)); } .about-service-box h3 { font-size: 1rem; line-height: 1.3; } .about-service-box p { color: var(--ink-500); font-size: .88rem; line-height: 1.65; margin: 0; } .about-governance-box { height: 100%; padding: 26px 28px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevate); transition: transform .4s var(--ease-calm), box-shadow .4s var(--ease-calm); } .about-governance-box:hover { transform: translateY(-5px); box-shadow: var(--shadow-deep); } .about-governance-box > span { color: var(--gold-600); font: 800 .8rem/1 "Montserrat Variable", sans-serif; letter-spacing: .08em; } .about-governance-box h3 { font-size: 1.08rem; margin: 14px 0 8px; } .about-governance-box p { color: var(--ink-500); font-size: .92rem; line-height: 1.65; margin: 0; } .about-testimonial { position: relative; height: 100%; margin: 0; padding: 30px 28px 26px; background: linear-gradient(180deg, #fff, var(--paper-tint)); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevate); } .about-quote-mark { position: absolute; top: 12px; right: 22px; color: var(--gold-400); font: 800 4rem/1 Georgia, serif; opacity: .65; } .about-testimonial blockquote { position: relative; margin: 0 0 22px; color: var(--ink-700); font-size: .97rem; line-height: 1.75; } .about-testimonial figcaption { color: var(--slate-600); font-size: .76rem; font-weight: 700; line-height: 1.5; } .about-offices-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .about-office-card { display: flex; gap: 16px; height: 100%; padding: 22px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevate); transition: transform .4s var(--ease-calm), box-shadow .4s var(--ease-calm); } .about-office-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-deep); } .about-office-marker { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--gold-600); background: var(--gold-100); } .about-office-card h3 { font-size: 1rem; margin: 0 0 2px; } .about-office-card p { color: var(--ink-500); font-size: .82rem; line-height: 1.5; margin: 4px 0; } .about-office-card .about-office-country { color: var(--slate-600); font-weight: 700; } .about-office-card a { color: var(--slate-600); font-size: .8rem; font-weight: 700; } .about-contact-section { background: radial-gradient(circle at 90% 10%, rgba(197,160,89,.1), transparent 28%), #fff; } .about-response-note { display: flex; gap: 12px; margin-top: 28px; padding: 17px 18px; border: 1px solid var(--line-soft); border-left: 3px solid var(--gold-500); border-radius: var(--radius); color: var(--ink-500); font-size: .86rem; line-height: 1.6; background: var(--paper-tint); } .about-response-note i { color: var(--slate-500); margin-top: 3px; } @media (max-width: 1100px) { .about-services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .about-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } } @media (max-width: 767px) { .about-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; } .about-editorial-grid { grid-template-columns: 1fr; gap: 28px; } .about-services-grid, .about-offices-grid { grid-template-columns: 1fr; } .about-service-box { min-height: 0; } .about-text-box { padding: 28px 24px; } } @media (prefers-reduced-motion: reduce) { .about-stat-card, .about-text-box, .about-service-box, .about-governance-box, .about-testimonial, .about-office-card, .about-team-member, .about-team-photo-wrap { transition-duration: .01ms !important; } } /* ---------- About page: elevated motion and editorial polish ---------- */ .about-hero { isolation: isolate; min-height: 620px; display: flex; align-items: center; background: radial-gradient(circle at 78% 22%, rgba(197, 160, 89, .18), transparent 24%), radial-gradient(circle at 14% 78%, rgba(74, 111, 165, .25), transparent 34%), linear-gradient(145deg, var(--navy-950) 0%, var(--navy-900) 52%, var(--navy-800) 100%); } .about-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(115deg, rgba(0,0,0,.9), transparent 70%); animation: about-grid-drift 22s linear infinite; } .about-hero::after { top: auto; right: -12%; bottom: -38%; width: 720px; height: 720px; background: radial-gradient(circle, rgba(197,160,89,.16), transparent 66%); animation: about-hero-glow 9s ease-in-out infinite alternate; } .about-hero .container { width: 100%; } .about-hero h1 { max-width: 880px; margin-left: auto; margin-right: auto; text-shadow: 0 10px 34px rgba(0,0,0,.28); } .about-hero .eyebrow::before, .about-hero .eyebrow::after { content: ""; display: inline-block; width: 34px; height: 1px; vertical-align: middle; background: var(--gold-500); margin: 0 12px; opacity: .72; } .about-stat-grid { perspective: 900px; } html.reveal-enabled .about-editorial-section .reveal:not(.is-visible), html.reveal-enabled #vision-mission .reveal:not(.is-visible), html.reveal-enabled #team .reveal:not(.is-visible), html.reveal-enabled #services .reveal:not(.is-visible), html.reveal-enabled #governance .reveal:not(.is-visible), html.reveal-enabled #client-feedback .reveal:not(.is-visible), html.reveal-enabled #offices .reveal:not(.is-visible), html.reveal-enabled #about-contact .reveal:not(.is-visible) { opacity: 0; filter: blur(4px); transform: translateY(34px) scale(.985); } .about-editorial-section .reveal, #vision-mission .reveal, #team .reveal, #services .reveal, #governance .reveal, #client-feedback .reveal, #offices .reveal, #about-contact .reveal { transition-property: opacity, transform, filter; } .about-editorial-section .reveal.is-visible, #vision-mission .reveal.is-visible, #team .reveal.is-visible, #services .reveal.is-visible, #governance .reveal.is-visible, #client-feedback .reveal.is-visible, #offices .reveal.is-visible, #about-contact .reveal.is-visible { filter: blur(0); } .about-stat-card { position: relative; overflow: hidden; transform: translateY(0) rotateX(0deg); transition: transform .5s var(--ease-calm), background-color .5s var(--ease-calm), border-color .5s var(--ease-calm), box-shadow .5s var(--ease-calm); } .about-stat-card::after { content: ""; position: absolute; inset: auto -20% -70% 20%; height: 120px; background: radial-gradient(circle, rgba(197,160,89,.3), transparent 68%); opacity: 0; transition: opacity .5s var(--ease-calm); } .about-stat-card:hover { transform: translateY(-8px) rotateX(3deg); background: rgba(255,255,255,.11); border-color: rgba(217,189,130,.55); box-shadow: 0 22px 44px -24px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.12); } .about-stat-card:hover::after { opacity: 1; } .about-stat-card strong { position: relative; z-index: 1; transition: letter-spacing .4s var(--ease-calm); } .about-stat-card:hover strong { letter-spacing: .03em; } .about-editorial-section { position: relative; overflow: hidden; } .about-editorial-section::after { content: ""; position: absolute; right: -120px; top: 18%; width: 300px; height: 300px; border: 1px solid rgba(74,111,165,.12); border-radius: 50%; box-shadow: 0 0 0 28px rgba(74,111,165,.035), 0 0 0 58px rgba(74,111,165,.025); pointer-events: none; } .about-editorial-copy { position: relative; } .about-editorial-copy::before { content: "01"; position: absolute; left: -44px; top: -4px; color: rgba(197,160,89,.35); font: 800 .78rem/1 "Montserrat Variable", sans-serif; letter-spacing: .12em; } .about-editorial-copy h2 { position: relative; padding-bottom: 18px; } .about-editorial-copy h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 74px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--gold-500), var(--slate-500)); } .about-principle-panel { transform: translateZ(0); transition: transform .55s var(--ease-calm), box-shadow .55s var(--ease-calm); } .about-principle-panel::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: calc(var(--radius-lg) - 7px); pointer-events: none; } .about-principle-panel:hover { transform: translateY(-8px) rotate(-.4deg); box-shadow: 0 40px 84px -30px rgba(6,15,29,.72); } #vision-mission { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--paper-tint), #eef3f9); } #vision-mission::before { content: ""; position: absolute; left: 8%; top: 18%; width: 1px; height: 64%; background: linear-gradient(transparent, rgba(197,160,89,.45), transparent); } .about-text-box { position: relative; overflow: hidden; transform: translateZ(0); } .about-text-box::after { content: ""; position: absolute; right: -44px; bottom: -54px; width: 170px; height: 170px; border: 1px solid rgba(74,111,165,.13); border-radius: 50%; transition: transform .65s var(--ease-calm), border-color .65s var(--ease-calm); } .about-text-box:hover::after { transform: scale(1.25); border-color: rgba(197,160,89,.3); } .about-box-icon { transition: transform .5s var(--ease-calm), color .5s var(--ease-calm), background-color .5s var(--ease-calm); } .about-text-box:hover .about-box-icon { transform: rotate(-6deg) scale(1.08); color: var(--navy-900); background: var(--gold-400); } /* ---------- About page: team portraits ---------- */ .about-team-section { position: relative; overflow: hidden; background: radial-gradient(circle at 12% 18%, rgba(74,111,165,.1), transparent 28%), radial-gradient(circle at 88% 80%, rgba(197,160,89,.1), transparent 26%), linear-gradient(180deg, #f8fafc, #fff); } .about-team-section::before { content: ""; position: absolute; top: 12%; right: -110px; width: 300px; height: 300px; border: 1px solid rgba(197,160,89,.16); border-radius: 50%; box-shadow: 0 0 0 26px rgba(197,160,89,.035), 0 0 0 54px rgba(74,111,165,.025); pointer-events: none; } .about-team-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; max-width: 1160px; margin: 0 auto; } .about-team-member { position: relative; min-width: 0; padding: 28px 18px 24px; text-align: center; background: rgba(255,255,255,.88); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevate); overflow: hidden; transition: transform .45s var(--ease-calm), box-shadow .45s var(--ease-calm), border-color .45s var(--ease-calm), background-color .45s var(--ease-calm); } .about-team-member::before { content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 3px; border-radius: 0 0 99px 99px; background: linear-gradient(90deg, var(--slate-500), var(--gold-400), var(--slate-500)); transform: scaleX(.45); transition: transform .45s var(--ease-calm); } .about-team-member:hover { transform: translateY(-8px); border-color: rgba(197,160,89,.42); background: #fff; box-shadow: var(--shadow-deep); } .about-team-member:hover::before { transform: scaleX(1); } .about-team-photo-wrap { position: relative; width: 148px; height: 148px; padding: 5px; margin: 0 auto 20px; border-radius: 50%; background: conic-gradient(from 210deg, var(--gold-400), var(--slate-500), var(--navy-800), var(--gold-400)); box-shadow: 0 14px 30px -15px rgba(10,25,47,.7), 0 0 0 7px rgba(197,160,89,.08); transition: transform .55s var(--ease-calm), box-shadow .55s var(--ease-calm); } .about-team-photo-wrap::after { content: ""; position: absolute; inset: -9px; border: 1px solid rgba(197,160,89,.28); border-radius: 50%; transform: scale(.88); opacity: 0; transition: transform .55s var(--ease-calm), opacity .55s var(--ease-calm); pointer-events: none; } .about-team-member:hover .about-team-photo-wrap { transform: translateY(-4px) scale(1.04); box-shadow: 0 22px 34px -16px rgba(10,25,47,.78), 0 0 0 7px rgba(197,160,89,.13); } .about-team-member:hover .about-team-photo-wrap::after { transform: scale(1); opacity: 1; } .about-team-photo-wrap .about-team-photo { position: relative; z-index: 1; width: 100%; height: 100%; margin: 0; max-height: none; object-fit: cover; border: 4px solid #fff; border-radius: 50%; background: var(--slate-100); } .about-team-initials { position: absolute; inset: 9px; z-index: 0; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--slate-500), var(--navy-900)); font: 800 1.35rem/1 "Montserrat Variable", sans-serif; letter-spacing: .05em; } .about-team-photo-wrap.is-image-missing .about-team-photo { opacity: 0; } .about-team-member h3 { position: relative; z-index: 1; margin: 0 0 8px; font-size: 1.02rem; line-height: 1.3; } .about-team-profile-link { color: inherit; transition: color .3s var(--ease-calm); } .about-team-profile-link:hover, .about-team-profile-link:focus-visible { color: var(--gold-600); } .about-team-profile-link i { margin-left: 5px; color: var(--slate-500); font-size: .78em; } .about-team-profile-link:hover i, .about-team-profile-link:focus-visible i { color: var(--gold-600); } .about-team-member p { position: relative; z-index: 1; min-height: 2.8em; margin: 0; color: var(--slate-600); font-size: .78rem; font-weight: 700; line-height: 1.45; } #services { background: radial-gradient(circle at 90% 20%, rgba(197,160,89,.08), transparent 28%), #fff; } .about-services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1160px; margin: 0 auto; } .about-service-box { min-height: 238px; transform: translateZ(0); } .about-service-box::after { content: ""; position: absolute; right: -34px; bottom: -44px; width: 125px; height: 125px; border: 1px solid rgba(74,111,165,.13); border-radius: 50%; transition: transform .55s var(--ease-calm), opacity .55s var(--ease-calm); } .about-service-box:hover::after { transform: scale(1.4); opacity: .7; } .about-service-box:hover .about-service-icon { transform: translateY(-4px) rotate(-5deg); box-shadow: 0 15px 28px -14px rgba(10,25,47,.7); } .about-service-icon { position: relative; z-index: 1; transition: transform .45s var(--ease-calm), box-shadow .45s var(--ease-calm); } .about-service-box h3, .about-service-box p { position: relative; z-index: 1; } #governance { background: linear-gradient(180deg, #f4f7fb, #edf2f8); } .about-governance-box { position: relative; overflow: hidden; } .about-governance-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--gold-400), var(--slate-500)); transform: scaleY(.2); transform-origin: bottom; transition: transform .5s var(--ease-calm); } .about-governance-box:hover::before { transform: scaleY(1); } .about-governance-box > span { display: inline-flex; align-items: center; gap: 8px; } .about-governance-box > span::after { content: ""; width: 34px; height: 1px; background: var(--gold-400); opacity: .65; } .about-testimonial { overflow: hidden; transition: transform .5s var(--ease-calm), box-shadow .5s var(--ease-calm), border-color .5s var(--ease-calm); } .about-testimonial::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 3px; background: linear-gradient(90deg, var(--gold-400), transparent); } .about-testimonial:hover { transform: translateY(-8px); border-color: rgba(197,160,89,.42); box-shadow: var(--shadow-deep); } .about-testimonial:hover .about-quote-mark { transform: translateY(-4px) rotate(-8deg); color: var(--gold-500); } .about-quote-mark { transition: transform .5s var(--ease-calm), color .5s var(--ease-calm); } #offices { background: radial-gradient(circle at 8% 82%, rgba(74,111,165,.1), transparent 30%), var(--paper-tint); } .about-office-card { position: relative; overflow: hidden; transition: transform .45s var(--ease-calm), box-shadow .45s var(--ease-calm), border-color .45s var(--ease-calm); } .about-office-card::after { content: ""; position: absolute; right: -28px; top: -28px; width: 92px; height: 92px; border: 1px solid rgba(197,160,89,.17); border-radius: 50%; transition: transform .5s var(--ease-calm); } .about-office-card:hover { transform: translateY(-7px) translateX(2px); border-color: rgba(74,111,165,.35); } .about-office-card:hover::after { transform: scale(1.45); } .about-office-marker { transition: transform .4s var(--ease-calm), background-color .4s var(--ease-calm); } .about-office-card:hover .about-office-marker { transform: rotate(-8deg) scale(1.08); background: var(--gold-400); color: var(--navy-900); } .about-contact-section { position: relative; overflow: hidden; } .about-contact-section::before { content: ""; position: absolute; left: -160px; bottom: -220px; width: 520px; height: 520px; border: 1px solid rgba(74,111,165,.12); border-radius: 50%; box-shadow: 0 0 0 24px rgba(74,111,165,.035), 0 0 0 54px rgba(74,111,165,.025); pointer-events: none; } .about-response-note { transition: transform .4s var(--ease-calm), border-color .4s var(--ease-calm), background-color .4s var(--ease-calm); } .about-response-note:hover { transform: translateX(5px); border-color: rgba(197,160,89,.48); background: #fff; } .about-contact-section .contact-form-card { position: relative; transform: translateZ(0); transition: transform .5s var(--ease-calm), box-shadow .5s var(--ease-calm); } .about-contact-section .contact-form-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-deep); } .about-contact-section .contact-form-card::before { height: 5px; background: linear-gradient(90deg, var(--gold-400), var(--slate-500), var(--gold-400)); background-size: 200% 100%; animation: about-gradient-slide 5s linear infinite; } @keyframes about-grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 54px 54px, 54px 54px; } } @keyframes about-hero-glow { from { transform: scale(.96); opacity: .72; } to { transform: scale(1.06); opacity: 1; } } @keyframes about-gradient-slide { to { background-position: 200% 0; } } @media (max-width: 767px) { .about-hero { min-height: 0; } .about-hero .eyebrow::before, .about-hero .eyebrow::after { width: 20px; margin: 0 7px; } .about-editorial-copy::before { left: 0; top: -22px; } .about-services-grid { grid-template-columns: 1fr; } .about-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .about-team-member { padding: 22px 10px 18px; } .about-team-photo-wrap { width: 104px; height: 104px; margin-bottom: 15px; } .about-team-member h3 { font-size: .84rem; } .about-team-member p { font-size: .68rem; } #vision-mission::before { display: none; } } @media (prefers-reduced-motion: reduce) { .about-hero::before, .about-hero::after, .about-contact-section .contact-form-card::before { animation: none !important; } .about-stat-card:hover, .about-principle-panel:hover, .about-testimonial:hover, .about-office-card:hover, .about-team-member:hover, .about-contact-section .contact-form-card:hover { transform: none; } .about-team-member:hover .about-team-photo-wrap { transform: none; } } /* ---------- About testimonials: horizontal client-feedback rail ---------- */ .about-testimonials-shell { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 14px; align-items: center; max-width: 1240px; margin: 0 auto; } .about-testimonials-viewport { position: relative; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; scrollbar-width: thin; scrollbar-color: var(--gold-500) rgba(74,111,165,.12); -webkit-overflow-scrolling: touch; scroll-behavior: smooth; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%); } .about-testimonials-viewport::-webkit-scrollbar { height: 7px; } .about-testimonials-viewport::-webkit-scrollbar-track { background: rgba(74,111,165,.1); border-radius: 99px; } .about-testimonials-viewport::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--slate-500), var(--gold-500)); border-radius: 99px; } .about-testimonials-viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } .about-testimonials-track { display: flex; gap: 18px; padding: 8px 2px 20px; } .about-testimonial { flex: 0 0 min(470px, calc(50% - 9px)); min-height: 320px; height: auto; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; padding: 28px 28px 24px; transition: transform .5s var(--ease-calm), box-shadow .5s var(--ease-calm), border-color .5s var(--ease-calm), opacity .5s var(--ease-calm); } .about-testimonial-topline { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; } .about-testimonial-category { display: inline-flex; align-items: center; gap: 8px; color: var(--slate-600); font: 800 .68rem/1 "Montserrat Variable", sans-serif; letter-spacing: .08em; text-transform: uppercase; } .about-testimonial-category i { color: var(--gold-600); font-size: .78rem; } .about-testimonial-index { color: rgba(74,111,165,.45); font: 800 .78rem/1 "Montserrat Variable", sans-serif; letter-spacing: .12em; } .about-testimonial blockquote { font-size: 1.04rem; line-height: 1.78; margin-bottom: 30px; } .about-testimonial figcaption { display: flex; align-items: center; gap: 11px; max-width: 92%; } .about-testimonial-avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--navy-900); background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); font: 800 .78rem/1 "Montserrat Variable", sans-serif; box-shadow: 0 7px 15px -8px rgba(10,25,47,.65); } .about-testimonial::after { content: ""; position: absolute; right: -34px; bottom: -48px; width: 150px; height: 150px; border: 1px solid rgba(74,111,165,.14); border-radius: 50%; transition: transform .6s var(--ease-calm), border-color .6s var(--ease-calm); pointer-events: none; } .about-testimonial:hover::after { transform: scale(1.35); border-color: rgba(197,160,89,.35); } .about-testimonials-control { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(74,111,165,.2); border-radius: 50%; background: #fff; color: var(--navy-800); box-shadow: 0 12px 26px -16px rgba(10,25,47,.65); cursor: pointer; transition: transform .35s var(--ease-calm), background-color .35s var(--ease-calm), color .35s var(--ease-calm), border-color .35s var(--ease-calm); } .about-testimonials-control:hover, .about-testimonials-control:focus-visible { transform: translateY(-3px); border-color: var(--gold-500); background: var(--navy-900); color: var(--gold-400); } .about-testimonials-hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; color: var(--ink-500); font-size: .78rem; } .about-testimonials-hint i { color: var(--gold-600); } @media (max-width: 767px) { .about-testimonials-shell { grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 8px; } .about-testimonials-track { gap: 12px; padding-bottom: 16px; } .about-testimonial { flex-basis: 86vw; min-height: 300px; padding: 25px 22px 22px; } .about-testimonial blockquote { font-size: .98rem; } .about-testimonials-control { width: 38px; height: 38px; font-size: .78rem; } .about-testimonials-viewport { mask-image: none; } } @media (prefers-reduced-motion: reduce) { .about-testimonials-viewport { scroll-behavior: auto; } .about-testimonials-control, .about-testimonial, .about-testimonial::after { transition-duration: .01ms !important; } } /* ---------- Main licensing navigation: desktop mega menus ---------- */ .app-main-menu-group { position: static !important; } .app-main-menu-toggle { display: inline-flex !important; align-items: center; gap: 5px; white-space: nowrap; } .app-main-menu-toggle > span { display: inline-flex; align-items: center; } .app-main-menu-toggle > span > i { color: var(--gold-400); font-size: .78rem; } .app-menu-caret { color: rgba(234,241,248,.48); font-size: .6rem; transition: transform .3s var(--ease-calm), color .3s var(--ease-calm); } .app-main-menu-toggle[aria-expanded="true"] .app-menu-caret, .app-main-menu-toggle.active .app-menu-caret { transform: rotate(180deg); color: var(--gold-400); } .app-main-menu-toggle.active { color: #fff !important; } /* Keep a desktop group label at its normal text color while its mega menu is being hovered or opened. Bootstrap applies `.show`/focus colors to dropdown toggles, which can otherwise make the active label unexpectedly dark. */ .app-navbar .app-main-menu-toggle, .app-navbar .app-main-menu-toggle:hover, .app-navbar .app-main-menu-toggle:focus, .app-navbar .app-main-menu-toggle:active, .app-navbar .app-main-menu-toggle.show, .app-navbar .app-main-menu-toggle[aria-expanded="true"] { color: rgba(234, 241, 248, 0.82) !important; } .app-navbar .app-main-menu-toggle.active, .app-navbar .app-main-menu-toggle.active:hover, .app-navbar .app-main-menu-toggle.active:focus, .app-navbar .app-main-menu-toggle.active[aria-expanded="true"] { color: #fff !important; } .app-mega-menu { position: fixed !important; top: 74px !important; left: 50% !important; right: auto !important; width: min(1120px, calc(100vw - 28px)); max-height: calc(100vh - 94px); overflow-y: auto; padding: 22px 24px 24px; border: 1px solid rgba(255,255,255,.1); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: linear-gradient(150deg, rgba(6,15,29,.99), rgba(15,42,74,.98)); box-shadow: 0 30px 70px -24px rgba(0,0,0,.7); transform: translateX(-50%) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .app-navbar.is-scrolled .app-mega-menu { top: 58px !important; } .app-mega-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 0 17px; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.1); } .app-mega-kicker { display: block; color: var(--gold-400); font: 800 .68rem/1 "Montserrat Variable", sans-serif; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 7px; } .app-mega-header strong { color: #fff; font: 700 1rem/1.2 "Montserrat Variable", sans-serif; } .app-mega-hub { flex: none; color: var(--gold-400); font: 700 .78rem/1 "Montserrat Variable", sans-serif; white-space: nowrap; } .app-mega-hub:hover { color: #fff; } .app-mega-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 26px; } .app-mega-column { display: flex; flex-direction: column; gap: 3px; } .app-mega-link { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 7px 9px; border-radius: 9px; color: rgba(234,241,248,.78); font: 600 .78rem/1.3 "Montserrat Variable", sans-serif; transition: color .25s var(--ease-calm), background .25s var(--ease-calm), transform .25s var(--ease-calm); } .app-mega-link:hover, .app-mega-link:focus, .app-mega-link.active { color: #fff; background: rgba(197,160,89,.12); transform: translateX(3px); } .app-menu-item-icon { flex: none; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: var(--slate-400); background: rgba(74,111,165,.18); font-size: .7rem; } .app-mega-link:hover .app-menu-item-icon, .app-mega-link.active .app-menu-item-icon { color: var(--gold-400); background: rgba(197,160,89,.18); } /* ---------- Main licensing navigation: mobile off-canvas ---------- */ .app-offcanvas { width: min(410px, 94vw) !important; } .app-offcanvas .offcanvas-body { overflow-y: auto; } .app-mobile-group-toggle { text-align: left; } .app-mobile-group-toggle > span { display: inline-flex; align-items: center; } .app-mobile-group-toggle > span > i { width: 20px; color: var(--gold-400); font-size: .9rem; text-align: center; } .app-mobile-group-toggle.active { color: #fff; background: rgba(197,160,89,.1); border-color: rgba(197,160,89,.28); } .app-mobile-group-toggle.active > span > i { color: var(--gold-400); } .app-mobile-jurisdictions { max-height: 58vh; overflow-y: auto; margin-top: 8px; padding: 7px 0 9px 12px; } .app-mobile-jurisdictions .nav-submenu-link { min-height: 42px; padding: 9px 11px; font-size: .78rem; } .app-mobile-jurisdictions .nav-submenu-link .app-menu-item-icon { width: 23px; height: 23px; } .app-mobile-directory-label { padding: 9px 12px 5px; color: rgba(217,189,130,.72); font: 800 .62rem/1.2 "Montserrat Variable", sans-serif; letter-spacing: .11em; text-transform: uppercase; } .nav-submenu-link--hub { color: var(--gold-400); font-weight: 800; background: rgba(197,160,89,.08); } .nav-submenu-link--hub i { color: var(--gold-400); } @media (min-width: 992px) and (max-width: 1279px) { .app-navbar .nav-link { font-size: .74rem; padding-left: 8px !important; padding-right: 8px !important; } .app-main-menu-toggle > span > i { display: none; } .app-navbar .btn-brand { padding-left: 13px; padding-right: 13px; font-size: .76rem; } } @media (max-width: 991px) { .app-mega-menu { display: none !important; } } @media (max-width: 575px) { .app-offcanvas .offcanvas-body { padding: 20px 16px; } .app-mobile-jurisdictions { max-height: 54vh; } } /* ---------- Main menu refinement: compact desktop bar + country flags ---------- */ .app-menu-flag { flex: none; display: inline-block; width: 28px; height: 21px; max-width: none; object-fit: cover; border-radius: 3px; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 3px 8px -5px rgba(0,0,0,.75); background: var(--slate-100); } .app-menu-flag--region { display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--slate-500), var(--navy-800)); font: 800 .54rem/1 "Montserrat Variable", sans-serif; letter-spacing: .04em; } .app-mega-link:hover .app-menu-flag, .app-mega-link.active .app-menu-flag, .nav-submenu-link:hover .app-menu-flag, .nav-submenu-link.active .app-menu-flag { border-color: rgba(217,189,130,.75); box-shadow: 0 5px 12px -5px rgba(197,160,89,.65); } @media (min-width: 992px) { .app-navbar { padding: 16px 0; } .app-navbar.is-scrolled { padding: 10px 0; } .app-navbar .navbar-nav { gap: 0 !important; } .app-navbar .nav-link { padding: 8px 11px !important; font-size: .88rem; letter-spacing: -.01em; } .app-main-menu-toggle { gap: 7px; } .app-menu-caret { font-size: .58rem; } .app-navbar .nav-item.ms-lg-2 { margin-left: 5px !important; } .app-navbar .btn-brand { min-height: 42px; padding: .65rem 1.15rem !important; font-size: .82rem; white-space: nowrap; } .app-mega-menu { top: 74px !important; } .app-navbar.is-scrolled .app-mega-menu { top: 58px !important; } } @media (min-width: 992px) and (max-width: 1199px) { .app-navbar .nav-link { padding-left: 7px !important; padding-right: 7px !important; font-size: .8rem; } .app-navbar .brand-logo { height: 34px; } .app-navbar .btn-brand { padding-left: .82rem !important; padding-right: .82rem !important; font-size: .74rem; } } @media (max-width: 991px) { .app-mobile-jurisdictions .app-menu-flag { width: 25px; height: 19px; } } /* Prevent horizontal scrolling inside every navigation submenu. Long jurisdiction labels must wrap or shrink within the available menu width; only the menu itself may scroll vertically when a screen is short. */ .app-mega-menu, .app-dropdown-menu, .app-mobile-jurisdictions, .app-offcanvas .offcanvas-body { overflow-x: hidden !important; } .app-mega-menu { width: min(1120px, calc(100vw - 28px)) !important; max-width: calc(100vw - 14px) !important; box-sizing: border-box; } .app-mega-columns, .app-mega-column, .app-mega-link, .app-mega-link > span:last-child { min-width: 0; } .app-mega-link > span:last-child { overflow-wrap: anywhere; } /* Links inside dark editorial panels must keep the same high-contrast champagne treatment used by the site's hover states. The generic `a { color: inherit; }` rule otherwise makes them inherit muted navy text from the light-theme body styles, which is nearly invisible on navy cards. */ .process-card-panel a:not(.btn), .advisory-slide a:not(.btn), .casp-overview-slide a:not(.btn), .about-principle-panel a:not(.btn), .glass-card a:not(.btn), .hero-card a:not(.btn), .stats-strip a:not(.btn), .hero-section a:not(.btn), .page-hero a:not(.btn), .cta-banner a:not(.btn), .compliance-section a:not(.btn) { color: var(--gold-400); text-decoration: underline; text-decoration-color: rgba(217, 189, 130, 0.55); text-underline-offset: 0.16em; } .process-card-panel a:not(.btn):hover, .advisory-slide a:not(.btn):hover, .casp-overview-slide a:not(.btn):hover, .about-principle-panel a:not(.btn):hover, .glass-card a:not(.btn):hover, .hero-card a:not(.btn):hover, .stats-strip a:not(.btn):hover, .hero-section a:not(.btn):hover, .page-hero a:not(.btn):hover, .cta-banner a:not(.btn):hover, .compliance-section a:not(.btn):hover { color: #fff; text-decoration-color: var(--gold-400); } /* ---------- Long-form blog research articles ---------- */ .blog-article-body { max-width: 980px; margin: 0 auto; } .blog-article-body > p, .blog-article-body > h2, .blog-article-body > h3, .blog-article-body > ol, .blog-article-body > blockquote, .blog-article-body > .article-callout, .blog-article-body > .article-source-note, .blog-article-body > .article-sources { max-width: 820px; margin-left: auto; margin-right: auto; } .blog-article-body > p { line-height: 1.85; } .blog-article-body h2 { margin-top: 58px; margin-bottom: 18px; font-size: clamp(1.55rem, 3vw, 2.15rem); position: relative; padding-top: 18px; } .blog-article-body h2::before { content: ""; display: block; width: 52px; height: 3px; border-radius: 99px; margin-bottom: 16px; background: linear-gradient(90deg, var(--gold-500), var(--slate-500)); } .blog-article-body h3 { font-size: 1.08rem; } .article-lead { max-width: 900px; margin: 0 auto 30px; padding: 34px 38px; border: 1px solid rgba(197,160,89,.28); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(197,160,89,.12), rgba(74,111,165,.08)); box-shadow: var(--shadow-elevate); } .article-keyword-strip { max-width: 900px; margin: 0 auto 30px; padding: 20px 24px 22px; border: 1px solid rgba(74,111,165,.18); border-radius: var(--radius-lg); background: linear-gradient(135deg, #fff, var(--paper-tint)); box-shadow: 0 16px 38px -28px rgba(10,25,47,.5); } .article-keyword-strip .article-kicker { display: block; margin-bottom: 13px !important; } .article-keywords { display: flex; flex-wrap: wrap; gap: 9px; } .article-keywords a { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 12px; border: 1px solid rgba(74,111,165,.18); border-radius: 999px; background: rgba(234,240,248,.7); color: var(--slate-600); font-size: .76rem; font-weight: 800; line-height: 1.2; text-decoration: none; transition: color .3s var(--ease-calm), background .3s var(--ease-calm), border-color .3s var(--ease-calm), transform .3s var(--ease-calm); } .article-keywords a:hover, .article-keywords a:focus-visible { color: var(--navy-900); background: var(--gold-100); border-color: rgba(197,160,89,.55); transform: translateY(-2px); } .article-kicker { color: var(--gold-600) !important; font: 800 .7rem/1.2 "Montserrat Variable", sans-serif; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px !important; } .article-dek { color: var(--navy-800) !important; font-size: clamp(1.12rem, 2.2vw, 1.4rem) !important; line-height: 1.65 !important; margin: 0 !important; } .article-callout { margin-top: 28px; margin-bottom: 30px; padding: 24px 28px; border-radius: var(--radius-lg); border-left: 4px solid var(--gold-500); color: var(--ink-700); background: var(--paper-tint); box-shadow: var(--shadow-elevate); line-height: 1.75; } .article-callout h3 { margin: 0 0 8px; } .article-callout p { margin: 0; } .article-callout--gold { background: linear-gradient(135deg, var(--gold-100), #fff); } .article-callout--navy { color: rgba(255,255,255,.82); background: linear-gradient(145deg, var(--navy-900), var(--navy-800)); border-left-color: var(--gold-400); } .article-callout--navy h3 { color: #fff; } .article-callout a, .article-source-note a, .article-sources a { color: var(--gold-600); font-weight: 700; text-decoration: underline; text-underline-offset: .15em; } .article-callout--navy a { color: var(--gold-400); } .article-figure { margin: 36px auto 42px; max-width: 980px; overflow: hidden; border-radius: var(--radius-lg); background: var(--navy-900); box-shadow: var(--shadow-deep); } .article-figure img { width: 100%; height: clamp(220px, 38vw, 430px); object-fit: cover; } .article-figure figcaption { padding: 12px 18px 15px; color: rgba(255,255,255,.64); font-size: .78rem; line-height: 1.5; } .article-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 980px; margin: 34px auto; } .article-stat-card { min-height: 124px; padding: 22px 18px; border: 1px solid rgba(74,111,165,.16); border-radius: var(--radius-lg); background: linear-gradient(180deg, #fff, var(--paper-tint)); box-shadow: var(--shadow-elevate); } .article-stat-card strong { display: block; color: var(--gold-600); font: 800 1.35rem/1.15 "Montserrat Variable", sans-serif; } .article-stat-card span { display: block; margin-top: 10px; color: var(--ink-500); font-size: .78rem; line-height: 1.45; } .article-source-note { padding: 15px 18px; border: 1px solid var(--line-soft); border-left: 3px solid var(--slate-500); border-radius: var(--radius); background: var(--paper-tint); color: var(--ink-500); font-size: .84rem; line-height: 1.6; } .article-source-note strong { color: var(--navy-800); } .article-table-wrap { max-width: 980px; margin: 28px auto 34px; overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevate); -webkit-overflow-scrolling: touch; } .article-table { width: 100%; min-width: 700px; border-collapse: collapse; background: #fff; font-size: .86rem; } .article-table th { padding: 16px 18px; color: #fff; background: var(--navy-900); border-bottom: 2px solid var(--gold-500); text-align: left; font: 700 .72rem/1.3 "Montserrat Variable", sans-serif; letter-spacing: .06em; text-transform: uppercase; } .article-table td { padding: 16px 18px; color: var(--ink-700); border-bottom: 1px solid var(--line-soft); vertical-align: top; line-height: 1.55; } .article-table tbody tr:last-child td { border-bottom: 0; } .article-table tbody tr:hover td { background: rgba(197,160,89,.07); } .article-table td strong { color: var(--navy-800); } .article-table a { color: var(--slate-600); font-weight: 700; text-decoration: underline; text-underline-offset: .15em; } .article-table a:hover { color: var(--gold-600); } .article-table--compact { min-width: 620px; } .article-grid { max-width: 980px; margin: 30px auto; display: grid; gap: 16px; } .article-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .article-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .article-panel, .article-fact-card { height: 100%; padding: 28px; border-radius: var(--radius-lg); box-shadow: var(--shadow-elevate); } .article-panel { color: rgba(255,255,255,.78); background: linear-gradient(145deg, var(--navy-900), var(--navy-800)); } .article-panel--slate { background: linear-gradient(145deg, var(--slate-600), var(--navy-800)); } .article-panel h3 { color: #fff; margin: 14px 0 8px; } .article-panel p { margin: 0; line-height: 1.7; } .article-panel-index { color: var(--gold-400); font: 800 .72rem/1 "Montserrat Variable", sans-serif; letter-spacing: .1em; } .article-fact-card { border: 1px solid var(--line-soft); background: linear-gradient(180deg, #fff, var(--paper-tint)); } .article-fact-card i { color: var(--gold-600); font-size: 1.35rem; } .article-fact-card h3 { margin: 17px 0 8px; font-size: 1.05rem; } .article-fact-card p { margin: 0; color: var(--ink-500); font-size: .88rem; line-height: 1.65; } .article-case-list { max-width: 820px; margin: 26px auto; display: grid; gap: 14px; } .article-case { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 16px; padding: 22px 24px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-elevate); } .article-case-number { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: var(--navy-900); background: var(--gold-400); font: 800 .9rem/1 "Montserrat Variable", sans-serif; } .article-case h3 { margin: 2px 0 7px; font-size: 1rem; } .article-case p { margin: 0; color: var(--ink-500); font-size: .91rem; line-height: 1.7; } .article-quote { margin-top: 36px; margin-bottom: 36px; padding: 30px 34px; border: 1px solid rgba(197,160,89,.3); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--navy-900), var(--navy-800)); box-shadow: var(--shadow-deep); } .article-quote p { margin: 0 0 8px; color: #fff; font: 700 clamp(1.15rem, 2.4vw, 1.55rem)/1.5 "Montserrat Variable", sans-serif; } .article-quote cite { color: var(--gold-400); font-size: .78rem; font-style: normal; } .article-chart-card { max-width: 820px; margin: 28px auto 34px; padding: 28px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-elevate); } .article-chart-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 22px; } .article-chart-heading h3 { margin: 8px 0 0; font-size: 1.12rem; } .article-chart-note { color: var(--ink-500); font-size: .72rem; text-align: right; } .article-bars { display: grid; gap: 14px; } .article-bar-row { display: grid; grid-template-columns: 145px minmax(80px,1fr) 34px; gap: 12px; align-items: center; color: var(--ink-700); font-size: .8rem; } .article-bar-row strong { color: var(--navy-800); text-align: right; } .article-bar-track { height: 11px; overflow: hidden; border-radius: 99px; background: var(--slate-100); } .article-bar-track i { display: block; width: var(--bar); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--slate-500), var(--gold-400)); } .article-chart-caption { margin: 20px 0 0; color: var(--ink-500); font-size: .78rem; line-height: 1.55; } .article-checklist { padding-left: 0; list-style: none; counter-reset: article-step; } .article-checklist li { counter-increment: article-step; position: relative; margin-bottom: 12px; padding: 18px 20px 18px 62px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: #fff; box-shadow: 0 10px 25px -20px rgba(10,25,47,.45); line-height: 1.65; } .article-checklist li::before { content: counter(article-step, decimal-leading-zero); position: absolute; left: 19px; top: 19px; color: var(--gold-600); font: 800 .78rem/1 "Montserrat Variable", sans-serif; } .article-sources { margin-top: 42px; padding: 28px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--paper-tint); } .article-sources h3 { margin-top: 0; } .article-sources ul { padding-left: 20px; color: var(--ink-700); line-height: 1.9; } .article-sources p { margin: 18px 0 0; color: var(--ink-500); font-size: .8rem; line-height: 1.6; } @media (max-width: 767px) { .blog-author-card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 24px 20px; } .blog-author-bio { margin-left: auto; margin-right: auto; } .article-lead { padding: 25px 22px; } .article-stat-grid, .article-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .article-grid--two { grid-template-columns: 1fr; } .article-stat-card { min-height: 0; padding: 18px 15px; } .article-stat-card strong { font-size: 1.05rem; } .article-table { min-width: 640px; } .article-chart-heading { display: block; } .article-chart-note { display: block; margin-top: 10px; text-align: left; } .article-bar-row { grid-template-columns: 112px minmax(50px,1fr) 30px; gap: 8px; font-size: .72rem; } .article-case { padding: 19px 17px; grid-template-columns: 32px minmax(0,1fr); gap: 12px; } .article-case-number { width: 30px; height: 30px; border-radius: 9px; font-size: .75rem; } .article-quote { padding: 25px 22px; } } @media (max-width: 460px) { .article-stat-grid, .article-grid--three { grid-template-columns: 1fr; } } /* Keep the editorial author card compact on phones after all desktop blog rules. */ @media (max-width: 767px) { .blog-author-card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 24px 20px; } .blog-author-bio { margin-left: auto; margin-right: auto; } } /* ---------- Navigation geometry fallback ---------- */ /* The runtime updates --app-navbar-height from the actual rendered navbar. This final rule intentionally comes after the legacy fixed 74/58px rules so Bootstrap, font loading, and scroll state cannot make the dropdown jump on Ctrl+F5. */ @media (min-width: 992px) { .app-mega-menu { top: var(--app-navbar-height, 74px) !important; } }