/* ============================================================
HIGH ON TALES — DESIGN SYSTEM (v2 Complete)
Direction: Route B — Light Clinical Confident
Locked: 15 April 2026
Updated: 22 April 2026 — All components extracted from v2 pages
This is the SINGLE source of truth for all styling.
Link from every page:
============================================================ */
:root {
/* ---------- COLOUR ---------- */
/* Brand */
--hot-blue: #27AAE1;
--hot-blue-600: #1E8EBF;
--hot-blue-100: #E0F4FD;
--hot-dark: #0B1426;
--hot-dark-800: #132238;
--hot-orange: #F57612;
--hot-red: #E94560;
/* Secondary — ACCENTS ONLY (soft tints, small touches; never large fills) */
--hot-blue-bright: #108CFF;
--hot-lavender: #F0EEFF;
--hot-green: #D7FFCB;
--hot-yellow: #FFFCAB;
--hot-taupe: #C5A69C;
/* Neutrals (5-step ramp) */
--neutral-0: #FFFFFF;
--neutral-50: #FAFBFC;
--neutral-100: #F4F7FA;
--neutral-200: #E5E7EB;
--neutral-300: #D1D5DB;
--neutral-500: #6B7280;
--neutral-700: #374151;
--neutral-900: #1D2124;
/* Semantic */
--success: #22C55E;
--warning: #F59E0B;
--error: #E94560;
/* Surface & text (what components actually call) */
--bg: var(--neutral-50);
--surface: var(--neutral-0);
--surface-alt: var(--neutral-100);
--ink: var(--neutral-900);
--ink-mute: var(--neutral-500);
--line: var(--neutral-200);
--accent: var(--hot-blue);
--accent-ink: var(--hot-dark);
/* ---------- TYPOGRAPHY ---------- */
--font-body: 'Figtree', -apple-system, Segoe UI, sans-serif;
--font-display: 'Stack Sans', 'Archivo', 'Figtree', -apple-system, Segoe UI, sans-serif;
--font-accent: 'Taviraj', Georgia, serif; /* italic only — eyebrows, one emphasised word, pull quotes */
/* Type scale (modular — ratio ~1.2) */
--fs-xs: 12px;
--fs-sm: 14px;
--fs-base: 16px;
--fs-lg: 18px;
--fs-xl: 22px;
--fs-2xl: 28px;
--fs-3xl: 36px;
--fs-4xl: 48px;
--fs-5xl: 68px;
--fs-6xl: 88px;
/* Weights */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
/* Line-height */
--lh-tight: 1.05;
--lh-snug: 1.2;
--lh-normal: 1.5;
--lh-relaxed: 1.65;
/* Letter-spacing */
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-caps: 0.12em;
/* ---------- SPACING (4px base, 8-step ramp) ---------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
/* Section padding */
--section-y: var(--space-9);
--section-y-sm: var(--space-8);
--container-x: var(--space-6);
--container-max: 1200px;
/* ---------- RADIUS ---------- */
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 20px;
--radius-xl: 24px;
--radius-2xl: 32px;
--radius-full: 999px;
/* ---------- SHADOW ---------- */
--shadow-sm: 0 1px 2px rgba(11, 20, 38, 0.04);
--shadow: 0 1px 3px rgba(11, 20, 38, 0.04), 0 8px 16px -8px rgba(11, 20, 38, 0.10);
--shadow-lg: 0 1px 3px rgba(11, 20, 38, 0.04), 0 20px 40px -16px rgba(11, 20, 38, 0.18);
--shadow-xl: 0 1px 3px rgba(11, 20, 38, 0.04), 0 32px 64px -24px rgba(11, 20, 38, 0.25);
--shadow-btn: 0 10px 24px -12px rgba(11, 20, 38, 0.4);
/* ---------- BORDER ---------- */
--border: 1px solid var(--line);
--border-strong: 1px solid var(--neutral-300);
/* ---------- MOTION ---------- */
--dur-fast: 150ms;
--dur: 300ms;
--dur-slow: 500ms;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
/* ---------- Z-INDEX ---------- */
--z-nav: 100;
--z-overlay: 200;
--z-modal: 300;
}
@media (prefers-reduced-motion: reduce) {
:root {
--dur-fast: 0ms;
--dur: 0ms;
--dur-slow: 0ms;
}
}
/* ============================================================
BASE — Reset + body defaults
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: var(--lh-normal);
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); margin: 0; color: var(--ink); }
p { margin: 0; }
/* ============================================================
LAYOUT UTILITIES
============================================================ */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-x); }
section { padding: var(--section-y) 0; }
@media (max-width: 768px) { section { padding: var(--section-y-sm) 0; } }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.alt-bg { background: var(--surface-alt); }
/* ============================================================
TYPOGRAPHY
============================================================ */
.eyebrow {
display: inline-block;
font-family: var(--font-accent); font-style: italic; font-weight: 400;
font-size: var(--fs-lg); letter-spacing: 0; text-transform: none;
color: var(--hot-blue); margin-bottom: var(--space-3);
}
/* Taviraj italic accent — wrap ONE emphasised word/phrase in a heading (marketing only) */
.accent-word { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--hot-blue); }
h1 { font-size: var(--fs-5xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
h4 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
@media (max-width: 768px) {
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-2xl); }
}
.section-head { max-width: 680px; margin-bottom: var(--space-7); }
.text-center .section-head,
.text-center.section-head { margin-left: auto; margin-right: auto; }
.section-head p { font-size: var(--fs-lg); color: var(--ink-mute); margin-top: var(--space-3); line-height: var(--lh-relaxed); }
/* ============================================================
SKIP LINK (a11y)
============================================================ */
.skip-link {
position: absolute; top: -100px; left: 16px; z-index: 999;
background: var(--hot-dark); color: #fff; padding: 12px 24px;
border-radius: var(--radius); font-weight: var(--fw-semibold);
transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 12px; }
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius);
font-family: var(--font-body);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
line-height: 1;
text-decoration: none;
cursor: pointer;
border: 1px solid transparent;
transition: transform var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease);
}
.btn:focus-visible {
outline: 2px solid var(--hot-blue);
outline-offset: 2px;
}
/* Primary — dark pill with shadow lift */
.btn-primary {
background: var(--hot-dark);
color: var(--neutral-0);
box-shadow: var(--shadow-btn);
}
.btn-primary:hover {
background: var(--hot-blue);
color: var(--hot-dark);
transform: translateY(-1px);
}
/* Secondary — white with border */
.btn-secondary {
background: var(--surface);
color: var(--ink);
border-color: var(--line);
}
.btn-secondary:hover {
border-color: var(--hot-dark);
transform: translateY(-1px);
}
/* Ghost — inline link style */
.btn-ghost {
background: transparent;
color: var(--ink);
padding: var(--space-4) 0;
border-radius: 0;
}
.btn-ghost::after {
content: "\2192";
transition: transform var(--dur-fast) var(--ease);
}
.btn-ghost:hover::after { transform: translateX(4px); }
/* ============================================================
CARDS (base + variants)
============================================================ */
.card {
background: var(--surface);
border: var(--border);
border-radius: var(--radius-xl);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
transition: transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* Service card */
.card--service .card__icon {
width: 56px; height: 56px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--hot-blue-100), var(--surface));
border: var(--border);
display: flex; align-items: center; justify-content: center;
font-size: 26px;
margin-bottom: var(--space-4);
}
.card h3 {
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-tight);
color: var(--ink);
margin: 0 0 var(--space-3);
}
.card p {
color: var(--ink-mute);
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
margin: 0 0 var(--space-4);
}
/* Stat card */
.card--stat { text-align: left; }
.card--stat .stat-num {
font-size: var(--fs-4xl);
font-weight: var(--fw-extrabold);
color: var(--hot-dark);
letter-spacing: var(--tracking-tight);
line-height: 1;
margin-bottom: var(--space-2);
}
.card--stat .stat-label {
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
text-transform: none;
letter-spacing: var(--tracking-wide);
color: var(--ink-mute);
}
/* ============================================================
NAVIGATION — Frosted glass, mega-menu, mobile overlay
============================================================ */
.nav {
position: sticky; top: 0; z-index: var(--z-nav);
background: rgba(255,255,255,0.88);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: var(--border);
transition: box-shadow var(--dur) var(--ease);
}
.nav--scrolled { box-shadow: var(--shadow); }
.nav__inner {
max-width: var(--container-max); margin: 0 auto;
padding: var(--space-3) var(--container-x);
display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.nav__logo {
font-weight: var(--fw-extrabold); font-size: var(--fs-lg);
color: var(--hot-dark); letter-spacing: var(--tracking-tight);
text-decoration: none;
}
.nav__logo img { height: 36px; }
.nav__links { display: flex; gap: var(--space-1); align-items: center; }
.nav__link {
font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--neutral-700);
padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
text-decoration: none;
transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav__link:hover { color: var(--hot-dark); background: var(--surface-alt); }
.nav__cta {
padding: 10px 20px !important; font-size: 13px !important;
background: var(--hot-blue) !important; color: #fff !important;
box-shadow: 0 4px 12px rgba(39,170,225,0.3) !important;
border-radius: var(--radius) !important;
}
.nav__cta:hover { background: var(--hot-blue-600) !important; transform: translateY(-1px); }
/* Dropdown / Mega-menu */
.nav__item { position: relative; }
.nav__item > .nav__link::after {
content: ""; display: inline-block; width: 0; height: 0; margin-left: 5px;
border-left: 4px solid transparent; border-right: 4px solid transparent;
border-top: 4px solid currentColor; vertical-align: middle; opacity: 0.5;
transition: transform var(--dur-fast) var(--ease);
}
.nav__item:hover > .nav__link::after { transform: rotate(180deg); }
.nav__dropdown {
position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
background: var(--surface); border: var(--border); border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg); padding: var(--space-4);
padding-top: calc(var(--space-4) + 8px);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
transform: translateX(-50%) translateY(4px);
min-width: 520px;
}
.nav__item:hover .nav__dropdown {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
/* Bridge the gap between nav link and dropdown so it doesn't close when moving cursor */
.nav__dropdown::before {
content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px;
}
.mega-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.mega-link {
display: flex; align-items: flex-start; gap: var(--space-3);
padding: var(--space-3); border-radius: var(--radius-sm);
transition: background var(--dur-fast) var(--ease);
}
.mega-link:hover { background: var(--surface-alt); }
.mega-link__icon {
width: 36px; height: 36px; border-radius: var(--radius-sm); flex-shrink: 0;
background: var(--hot-blue-100); display: flex; align-items: center; justify-content: center;
color: var(--hot-blue);
}
.mega-link__text strong { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); }
.mega-link__text span { font-size: 11px; color: var(--ink-mute); line-height: 1.3; }
/* Simple dropdown (Industries) */
.nav__dropdown--simple { min-width: 240px; padding: var(--space-2); }
.nav__dropdown--simple .mega-link { padding: var(--space-2) var(--space-3); }
/* Hamburger */
.nav__hamburger {
display: none; background: none; border: none; cursor: pointer; padding: var(--space-2);
color: var(--ink); width: 44px; height: 44px; align-items: center; justify-content: center;
}
.nav__hamburger svg { width: 24px; height: 24px; }
@media (max-width: 900px) {
.nav__links { display: none; }
.nav__hamburger { display: flex; }
}
/* ============================================================
MOBILE NAV OVERLAY
============================================================ */
.mobile-nav {
position: fixed; inset: 0; z-index: var(--z-overlay);
background: rgba(11,20,38,0.5); backdrop-filter: blur(4px);
opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }
.mobile-nav__panel {
position: absolute; top: 0; right: 0; width: min(380px, 85vw); height: 100%;
background: var(--surface); box-shadow: var(--shadow-xl);
transform: translateX(100%); transition: transform var(--dur) var(--ease-out);
overflow-y: auto; padding: var(--space-5);
}
.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }
.mobile-nav__header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: var(--border);
}
.mobile-nav__close {
background: none; border: none; cursor: pointer; color: var(--ink);
width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
border-radius: var(--radius-sm);
}
.mobile-nav__close:hover { background: var(--surface-alt); }
.mobile-nav__group { margin-bottom: var(--space-4); }
.mobile-nav__group-title {
font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-mute);
letter-spacing: var(--tracking-wide); text-transform: none;
margin-bottom: var(--space-2); padding: 0 var(--space-3);
}
.mobile-nav__link {
display: block; padding: var(--space-3); border-radius: var(--radius-sm);
font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--ink);
transition: background var(--dur-fast) var(--ease);
}
.mobile-nav__link:hover { background: var(--surface-alt); }
.mobile-nav__cta {
display: block; text-align: center; margin-top: var(--space-5);
padding: var(--space-4); border-radius: var(--radius-lg);
background: var(--hot-blue); color: #fff; font-weight: var(--fw-semibold);
font-size: var(--fs-base); box-shadow: 0 8px 24px -8px rgba(39,170,225,0.4);
}
.mobile-nav__cta:hover { background: var(--hot-blue-600); }
/* ============================================================
FOOTER
============================================================ */
.footer {
background: var(--hot-blue);
color: rgba(255,255,255,0.9);
padding: var(--space-9) 0 var(--space-6);
}
.footer__inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-x);
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-7);
}
.footer h4 {
color: var(--neutral-0);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
text-transform: none;
letter-spacing: var(--tracking-wide);
margin: 0 0 var(--space-4);
}
.footer a {
color: rgba(255,255,255,0.85);
text-decoration: none;
font-size: var(--fs-sm);
display: block;
padding: var(--space-1) 0;
}
.footer a:hover { color: #fff; }
.footer__bottom {
margin-top: var(--space-7);
padding-top: var(--space-5);
border-top: 1px solid rgba(255,255,255,0.2);
font-size: var(--fs-xs);
color: rgba(255,255,255,0.7);
text-align: center;
}
@media (max-width: 768px) {
.footer__inner { grid-template-columns: 1fr 1fr; }
}
/* ============================================================
BREADCRUMB
============================================================ */
.breadcrumb {
font-size: var(--fs-sm); color: var(--ink-mute); margin-bottom: var(--space-4);
}
.breadcrumb a { color: var(--hot-blue); text-decoration: none; font-weight: var(--fw-medium); }
.breadcrumb a:hover { text-decoration: underline; }
/* ============================================================
INNER HERO (service pages, core pages)
============================================================ */
.inner-hero {
background: var(--surface); border-bottom: var(--border);
padding: var(--space-10) 0 var(--space-8); position: relative; overflow: hidden;
}
.inner-hero__grid {
position: absolute; inset: 0;
background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 56px 56px; opacity: 0.4;
mask-image: radial-gradient(ellipse at 80% 30%, #000, transparent 60%);
-webkit-mask-image: radial-gradient(ellipse at 80% 30%, #000, transparent 60%);
}
.inner-hero__blob {
position: absolute; top: -100px; right: -100px; width: 440px; height: 440px;
background: radial-gradient(circle, rgba(39,170,225,0.18), transparent 60%); border-radius: 50%;
}
.inner-hero .container { position: relative; }
.inner-hero h1 { max-width: 680px; margin-bottom: var(--space-4); }
.inner-hero__lede {
font-size: var(--fs-xl); color: var(--ink-mute); max-width: 640px;
line-height: var(--lh-relaxed); margin-bottom: var(--space-6);
}
.inner-hero__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
/* ============================================================
CASE STUDY HERO (gradient hero for case study detail pages)
============================================================ */
.case-hero {
position: relative; overflow: hidden;
background: linear-gradient(135deg, var(--hot-blue), var(--hot-dark));
padding: var(--space-10) 0 var(--space-9); color: #fff;
}
.case-hero__pattern {
position: absolute; inset: 0;
background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 70%);
}
.case-hero .container { position: relative; }
.case-hero .breadcrumb { color: rgba(255,255,255,0.6); }
.case-hero .breadcrumb a { color: rgba(255,255,255,0.8); }
.case-hero .breadcrumb a:hover { color: #fff; }
.case-hero__tag {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: #fff;
margin-bottom: var(--space-5);
}
.case-hero h1 { color: #fff; max-width: 720px; margin-bottom: var(--space-4); }
.case-hero__lede {
font-size: var(--fs-xl); color: rgba(255,255,255,0.8);
max-width: 640px; line-height: var(--lh-relaxed); margin-bottom: var(--space-6);
}
/* ============================================================
METRICS BAR
============================================================ */
.metrics {
padding: var(--space-7) 0; background: var(--surface);
border-bottom: var(--border);
}
.metrics__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .metrics__grid { grid-template-columns: repeat(2, 1fr); } }
.metric {
text-align: left; padding-left: var(--space-4);
border-left: 3px solid var(--hot-blue);
}
.metric__num {
display: block; font-family: var(--font-display);
font-size: var(--fs-4xl); font-weight: var(--fw-extrabold);
color: var(--hot-dark); line-height: 1; letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-2);
}
.metric__label {
font-size: var(--fs-xs); font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-wide); text-transform: none;
color: var(--ink-mute);
}
/* ============================================================
HOMEPAGE HERO
============================================================ */
.hero {
position: relative; overflow: hidden;
background: var(--surface);
padding: var(--space-10) 0 var(--space-9);
border-bottom: var(--border);
}
.hero__grid {
position: absolute; inset: 0;
background-image:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 56px 56px; opacity: 0.5;
mask-image: radial-gradient(ellipse at 75% 20%, #000 0%, transparent 65%);
-webkit-mask-image: radial-gradient(ellipse at 75% 20%, #000 0%, transparent 65%);
}
.hero__blob {
position: absolute; top: -120px; right: -120px;
width: 520px; height: 520px;
background: radial-gradient(circle, rgba(39,170,225,0.22), transparent 60%);
border-radius: 50%; filter: blur(10px);
}
.hero__inner { position: relative; max-width: 820px; display: flex; flex-direction: column; align-items: flex-start; }
.hero__tag {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: var(--surface); border: var(--border); border-radius: var(--radius-full);
font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--ink);
margin-bottom: var(--space-6); box-shadow: var(--shadow-sm);
}
.hero__tag::before {
content: ""; width: 8px; height: 8px; border-radius: 50%;
background: var(--success); box-shadow: 0 0 0 4px rgba(34,197,94,0.15);
}
.hero h1 .hl { position: relative; white-space: nowrap; font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--hot-blue); font-size: 1.08em; }
.hero h1 .hl::after {
content: ""; position: absolute; left: -2px; right: -2px; bottom: 2px;
height: 10px; background: var(--hot-blue); opacity: 0.18;
border-radius: 4px; z-index: -1;
}
.hero__lede {
font-size: var(--fs-lg); color: var(--ink-mute);
max-width: 480px; margin: var(--space-5) 0 var(--space-6); line-height: var(--lh-relaxed);
text-wrap: pretty;
}
.hero__ctas { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.hero__ctas .btn-primary {
background: var(--hot-blue); color: #fff;
box-shadow: 0 8px 24px -8px rgba(39,170,225,0.45);
}
.hero__ctas .btn-primary:hover { background: var(--hot-blue-600); color: #fff; transform: translateY(-1px); }
.hero__trust {
display: flex; gap: var(--space-6); margin-top: var(--space-8);
padding-top: var(--space-5); border-top: var(--border);
color: var(--ink-mute); font-size: var(--fs-sm); flex-wrap: wrap;
}
.hero__trust b { color: var(--ink); font-weight: var(--fw-bold); }
/* ============================================================
CLIENT LOGO MARQUEE
============================================================ */
.marquee { padding: var(--space-7) 0; background: var(--surface); border-bottom: var(--border); overflow: hidden; }
.marquee__label {
text-align: center; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-wide); text-transform: none;
color: var(--ink-mute); margin-bottom: var(--space-5);
}
.marquee__track {
display: flex; gap: var(--space-8); align-items: center;
animation: marquee-scroll 85s linear infinite; width: max-content;
}
.marquee__track:hover { animation-play-state: paused; }
.marquee__item {
flex-shrink: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold);
color: var(--neutral-300); letter-spacing: var(--tracking-tight);
white-space: nowrap; padding: 0 var(--space-2);
transition: color var(--dur) var(--ease);
}
.marquee__item:hover { color: var(--ink-mute); }
@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* ============================================================
PAIN POINTS — Image-forward cards (Udemy Business style)
============================================================ */
.pain { background: linear-gradient(180deg, var(--hot-lavender) 0%, var(--surface-alt) 100%); }
/* Minor secondary-colour rhythm — slim accent bar per card (accents only) */
.pain-grid .pain-card { position: relative; }
.pain-grid .pain-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
background: var(--hot-blue);
}
.pain-grid .pain-card:nth-child(1)::before { background: var(--hot-blue); }
.pain-grid .pain-card:nth-child(2)::before { background: var(--hot-blue-bright); }
.pain-grid .pain-card:nth-child(3)::before { background: var(--hot-taupe); }
.pain-grid .pain-card:nth-child(4)::before { background: var(--success); }
.pain-grid .pain-card:nth-child(5)::before { background: var(--warning); }
.pain-grid .pain-card:nth-child(6)::before { background: #8B7DEB; }
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .pain-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pain-grid { grid-template-columns: 1fr; } }
.pain-card {
background: var(--surface); border: var(--border); border-radius: var(--radius-xl);
overflow: hidden; display: flex; flex-direction: column;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pain-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--hot-blue); }
.pain-card__img {
width: 100%; height: 200px; object-fit: cover;
display: block; background: var(--surface-alt);
}
.pain-card__body { padding: var(--space-5); flex: 1; }
.pain-card h3 {
font-size: var(--fs-lg); font-weight: var(--fw-bold);
margin: 0 0 var(--space-2); line-height: var(--lh-snug);
}
.pain-card p {
font-size: var(--fs-sm); color: var(--ink-mute);
line-height: var(--lh-relaxed); margin: 0;
}
/* ============================================================
TRUST BAR
============================================================ */
.trust { padding: var(--space-8) 0; background: var(--surface); border-top: var(--border); border-bottom: var(--border); }
.trust-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
.trust-stat { text-align: left; border-left: 2px solid var(--hot-blue); padding-left: var(--space-4); }
.trust-stat__num {
display: block; font-size: var(--fs-4xl); font-weight: var(--fw-extrabold);
color: var(--hot-dark); line-height: 1; letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-2);
}
.trust-stat__lbl {
font-size: var(--fs-xs); font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-wide); text-transform: none; color: var(--ink-mute);
}
/* ============================================================
INDUSTRIES ROW
============================================================ */
.industries-row { background: var(--surface-alt); padding: var(--space-7) 0; }
.industries-row .section-head { margin-bottom: var(--space-5); }
.ind-grid { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }
.ind-chip {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-3) var(--space-5); background: var(--surface);
border: var(--border); border-radius: var(--radius-full);
font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink);
transition: all var(--dur) var(--ease);
}
.ind-chip:hover {
border-color: var(--hot-blue); color: var(--hot-blue);
box-shadow: var(--shadow-sm); transform: translateY(-1px);
}
.ind-chip svg { width: 18px; height: 18px; color: var(--hot-blue); }
/* ============================================================
PROCESS STEPS (homepage)
============================================================ */
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .process-grid { grid-template-columns: 1fr; } }
.step {
position: relative; padding: var(--space-6);
background: var(--surface); border: var(--border); border-radius: var(--radius-2xl);
transition: box-shadow var(--dur) var(--ease);
}
.step:hover { box-shadow: var(--shadow); }
.step__num {
position: absolute; top: var(--space-5); right: var(--space-5);
font-size: var(--fs-4xl); font-weight: var(--fw-extrabold);
color: var(--hot-blue); opacity: 0.3; line-height: 1;
}
.step__tag {
font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--hot-blue);
letter-spacing: var(--tracking-wide); text-transform: none; margin-bottom: var(--space-3);
}
.step h3 { font-size: var(--fs-xl); margin-bottom: var(--space-3); }
.step p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-relaxed); }
/* ============================================================
SERVICES GRID (homepage)
============================================================ */
.services { background: linear-gradient(180deg, var(--hot-blue-100) 0%, var(--surface) 100%); }
.services .eyebrow { color: var(--hot-blue); }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }
.service {
display: block; background: var(--surface); border: var(--border);
border-radius: var(--radius-xl); padding: var(--space-5);
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.service:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--hot-blue); }
.service__icon {
width: 52px; height: 52px; border-radius: var(--radius-lg);
background: var(--hot-blue-100); border: 1px solid rgba(39,170,225,0.2);
display: flex; align-items: center; justify-content: center;
margin-bottom: var(--space-4); color: var(--hot-blue);
}
.service__icon svg { width: 24px; height: 24px; }
.service h3 { color: var(--ink); font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.service p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-relaxed); margin-bottom: var(--space-4); }
.service__link { color: var(--hot-blue); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.service__link::after { content: " \2192"; display: inline-block; transition: transform var(--dur-fast) var(--ease); }
.service:hover .service__link::after { transform: translateX(4px); }
/* ============================================================
CASE STUDY CARDS (homepage + listing)
============================================================ */
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .cases-grid { grid-template-columns: 1fr; } }
.case {
background: var(--surface); border: var(--border); border-radius: var(--radius-2xl);
overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
display: flex; flex-direction: column;
}
.case:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.case__cover {
height: 180px; display: flex; align-items: center; justify-content: center;
color: #fff; position: relative; overflow: hidden;
}
.case__cover svg { width: 48px; height: 48px; opacity: 0.8; }
.case__cover--a { background: linear-gradient(135deg, #27AAE1, #0B1426); }
.case__cover--b { background: linear-gradient(135deg, #F57612, #E94560); }
.case__cover--c { background: linear-gradient(135deg, #0B1426, #132238); }
.case__body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; }
.case__eyebrow {
font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--hot-blue);
letter-spacing: var(--tracking-wide); text-transform: none; margin-bottom: var(--space-2);
}
.case h3 { font-size: var(--fs-xl); margin-bottom: var(--space-3); }
.case p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-relaxed); margin-bottom: var(--space-4); }
.case__metric {
margin-top: auto; padding-top: var(--space-4); border-top: var(--border);
display: flex; justify-content: space-between; align-items: baseline;
}
.case__metric b { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); color: var(--hot-dark); letter-spacing: var(--tracking-tight); }
.case__metric span { font-size: var(--fs-xs); color: var(--ink-mute); font-weight: var(--fw-semibold); text-transform: none; letter-spacing: var(--tracking-wide); }
/* ============================================================
TESTIMONIALS
============================================================ */
.testimonials { background: var(--surface-alt); }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr; } }
/* Testimonial Carousel */
.testimonial-carousel { position: relative; }
.testimonial-carousel__track { overflow: hidden; }
.testimonial-carousel__slide {
display: none;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
}
.testimonial-carousel__slide--active { display: grid; }
@media (max-width: 768px) {
.testimonial-carousel__slide { grid-template-columns: 1fr; }
}
.testimonial-carousel__nav {
display: flex; align-items: center; justify-content: center;
gap: var(--space-4); margin-top: var(--space-6);
}
.testimonial-carousel__arrow {
width: 44px; height: 44px; border-radius: 50%;
border: 1px solid var(--neutral-200, #e5e7eb);
background: var(--surface); color: var(--ink);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; transition: all var(--dur-fast) var(--ease);
}
.testimonial-carousel__arrow:hover {
background: var(--hot-blue); color: #fff; border-color: var(--hot-blue);
}
.testimonial-carousel__dots { display: flex; gap: var(--space-2); }
.testimonial-carousel__dot {
width: 10px; height: 10px; border-radius: 50%; border: none;
background: var(--neutral-200, #d1d5db); cursor: pointer;
transition: background var(--dur-fast) var(--ease);
}
.testimonial-carousel__dot--active { background: var(--hot-blue); width: 28px; border-radius: 5px; }
.testimonial {
background: var(--surface); border: var(--border); border-radius: var(--radius-2xl);
padding: var(--space-6); position: relative; display: flex; flex-direction: column;
transition: box-shadow var(--dur) var(--ease);
}
.testimonial:hover { box-shadow: var(--shadow); }
.testimonial__quote {
font-size: var(--fs-base); color: var(--ink); line-height: var(--lh-relaxed);
flex: 1; font-style: italic;
}
.testimonial__quote::before {
content: "\201C"; display: block; font-size: 48px; line-height: 1;
color: var(--hot-blue); opacity: 0.3; font-style: normal; margin-bottom: var(--space-2);
}
.testimonial__author {
margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border);
display: flex; align-items: center; gap: var(--space-3);
}
.testimonial__avatar {
width: 40px; height: 40px; border-radius: 50%; background: var(--hot-blue-100);
display: flex; align-items: center; justify-content: center;
font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--hot-blue);
}
.testimonial__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); }
.testimonial__role { font-size: var(--fs-xs); color: var(--ink-mute); }
/* ============================================================
BLOG PREVIEW CARDS
============================================================ */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
background: var(--surface); border: var(--border); border-radius: var(--radius-2xl);
overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
display: flex; flex-direction: column;
}
.blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.blog-card__cover {
height: 160px; display: flex; align-items: center; justify-content: center;
color: var(--hot-blue);
}
.blog-card__cover--a { background: linear-gradient(135deg, var(--hot-blue-100), var(--surface-alt)); }
.blog-card__cover--b { background: linear-gradient(135deg, var(--surface-alt), var(--hot-blue-100)); }
.blog-card__cover--c { background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200)); }
.blog-card__cover svg { width: 40px; height: 40px; opacity: 0.5; }
.blog-card__body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; }
.blog-card__meta {
font-size: var(--fs-xs); color: var(--ink-mute); margin-bottom: var(--space-3);
display: flex; gap: var(--space-3);
}
.blog-card h3 {
font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin-bottom: var(--space-3);
line-height: var(--lh-snug); color: var(--ink);
}
.blog-card p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-relaxed); }
.blog-card__link {
margin-top: auto; padding-top: var(--space-4);
font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--hot-blue);
}
.blog-card__link::after { content: " \2192"; display: inline-block; transition: transform var(--dur-fast) var(--ease); }
.blog-card:hover .blog-card__link::after { transform: translateX(4px); }
/* ============================================================
FAQ ACCORDION
============================================================ */
.faq { background: var(--surface-alt); }
.faq-list { max-width: 820px; margin: 0 auto; }
details.faq-item {
background: var(--surface); border: var(--border); border-radius: var(--radius-lg);
padding: var(--space-5); margin-bottom: var(--space-3);
transition: box-shadow var(--dur) var(--ease);
}
details.faq-item[open] { box-shadow: var(--shadow); }
details.faq-item summary {
list-style: none; cursor: pointer;
font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--ink);
display: flex; justify-content: space-between; align-items: center;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
content: "+"; font-size: 28px; font-weight: 300; color: var(--hot-blue);
transition: transform var(--dur) var(--ease); line-height: 1; flex-shrink: 0; margin-left: var(--space-3);
}
details.faq-item[open] summary::after { transform: rotate(45deg); }
details.faq-item p { margin-top: var(--space-3); color: var(--ink-mute); font-size: var(--fs-base); line-height: var(--lh-relaxed); }
/* ============================================================
CTA BAND
============================================================ */
.cta-band {
background: linear-gradient(135deg, var(--hot-blue), #1E8EBF); color: #fff;
border-radius: var(--radius-2xl);
padding: var(--space-8) var(--space-7); margin: var(--space-9) var(--container-x) 0;
text-align: center; position: relative; overflow: hidden;
}
.cta-band--dark {
background: var(--hot-dark);
}
.cta-band::before {
content: ""; position: absolute; top: -50%; left: 50%; width: 600px; height: 600px;
background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 60%);
transform: translateX(-50%); pointer-events: none;
}
.cta-band--dark::before {
background: radial-gradient(circle, rgba(39,170,225,0.2), transparent 60%);
}
.cta-band h2 { color: #fff; margin-bottom: var(--space-3); position: relative; }
.cta-band p { color: rgba(255,255,255,0.85); max-width: 560px; margin: 0 auto var(--space-5); position: relative; font-size: var(--fs-lg); }
.cta-band .btn-primary { background: #fff; color: var(--hot-dark); position: relative; box-shadow: var(--shadow-lg); }
.cta-band .btn-primary:hover { background: var(--hot-dark); color: #fff; }
.cta-band--dark .btn-primary { background: var(--hot-blue); color: var(--hot-dark); }
.cta-band--dark .btn-primary:hover { background: #fff; color: var(--hot-blue); }
/* ============================================================
FORM SYSTEM
============================================================ */
.form-layout {
display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-8); align-items: start;
}
@media (max-width: 900px) { .form-layout { grid-template-columns: 1fr; } }
.form-card {
background: var(--surface); border: var(--border); border-radius: var(--radius-xl);
padding: var(--space-7); box-shadow: var(--shadow);
}
.form-card h2 { margin-bottom: var(--space-2); }
.form-intro { font-size: var(--fs-base); color: var(--ink-mute); margin-bottom: var(--space-6); line-height: var(--lh-relaxed); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-group { margin-bottom: var(--space-5); }
.form-group label {
display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
color: var(--ink); margin-bottom: var(--space-2);
}
.form-group label .req { color: var(--hot-red); margin-left: 2px; }
.form-group input,
.form-group select,
.form-group textarea {
width: 100%; padding: var(--space-3) var(--space-4);
border: var(--border); border-radius: var(--radius);
font-family: var(--font-body); font-size: var(--fs-base); color: var(--ink);
background: var(--surface); transition: border-color var(--dur-fast) var(--ease);
outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--hot-blue);
box-shadow: 0 0 0 3px rgba(39,170,225,0.12);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-group select {
cursor: pointer; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 16px center;
padding-right: 40px;
}
.form-hint { font-size: var(--fs-xs); color: var(--ink-mute); margin-top: var(--space-1); }
.form-submit { margin-top: var(--space-2); }
.form-submit .btn-primary { width: 100%; justify-content: center; padding: var(--space-4) var(--space-6); font-size: var(--fs-base); }
.form-note { font-size: var(--fs-xs); color: var(--ink-mute); text-align: center; margin-top: var(--space-3); }
/* ============================================================
SIDEBAR (consultation page)
============================================================ */
.sidebar { position: sticky; top: 96px; }
.steps-card {
background: var(--surface); border: var(--border); border-radius: var(--radius-xl);
padding: var(--space-6); margin-bottom: var(--space-4);
}
.steps-card h3 { margin-bottom: var(--space-5); }
.step-item { display: flex; gap: var(--space-4); margin-bottom: var(--space-5); }
.step-item:last-child { margin-bottom: 0; }
.step-num {
flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
background: var(--hot-blue-100); border: 2px solid var(--hot-blue);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: var(--fs-sm);
font-weight: var(--fw-bold); color: var(--hot-blue);
}
.step-item h4 { font-family: var(--font-display); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--ink); margin: 0 0 var(--space-1); }
.step-item p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-normal); margin: 0; }
.trust-card {
background: var(--hot-dark); border-radius: var(--radius-xl);
padding: var(--space-6); color: #fff;
}
.trust-card h3 { color: #fff; margin-bottom: var(--space-4); }
.trust-row { display: flex; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-5); }
.trust-item { text-align: left; }
.trust-item__num {
font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-extrabold);
color: var(--hot-blue); line-height: 1; margin-bottom: var(--space-1);
}
.trust-item__lbl { font-size: var(--fs-xs); color: rgba(255,255,255,0.55); text-transform: none; letter-spacing: var(--tracking-wide); font-weight: var(--fw-semibold); }
.quote-mini {
border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--space-4);
font-size: var(--fs-sm); color: rgba(255,255,255,0.75);
line-height: var(--lh-relaxed); font-style: italic;
}
.quote-mini cite {
display: block; margin-top: var(--space-2); font-style: normal;
font-size: var(--fs-xs); color: rgba(255,255,255,0.45); font-weight: var(--fw-semibold);
}
/* ============================================================
TWO-COLUMN CONTENT (service pages)
============================================================ */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.two-col p { font-size: var(--fs-base); color: var(--ink-mute); line-height: var(--lh-relaxed); margin-bottom: var(--space-4); }
.two-col ul { list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.two-col ul li {
padding: var(--space-2) 0 var(--space-2) var(--space-6); position: relative;
font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-normal);
}
.two-col ul li::before {
content: ""; position: absolute; left: 0; top: 14px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--hot-blue-100); border: 2px solid var(--hot-blue);
}
.visual-block {
background: linear-gradient(135deg, var(--hot-blue-100), var(--surface-alt));
border: var(--border); border-radius: var(--radius-xl);
padding: var(--space-8); display: flex; align-items: center; justify-content: center;
font-size: 80px; min-height: 320px;
}
.visual-block--bare {
background: none; border: none; padding: 0; min-height: 0; font-size: 0;
display: block;
}
.visual-block--img { padding: 0; overflow: hidden; }
.visual-block--img img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.loc-collage {
display: grid;
grid-template-columns: 1.35fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 12px;
min-height: 340px;
}
.loc-collage__main {
grid-row: 1 / 3;
width: 100%; height: 100%;
object-fit: cover; display: block;
border-radius: var(--radius-xl);
border: var(--border);
}
.loc-collage__sm {
width: 100%; height: 100%;
object-fit: cover; display: block;
border-radius: var(--radius-lg);
border: var(--border);
}
@media (max-width: 600px) {
.loc-collage { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 140px; }
.loc-collage__main { grid-row: 1 / 2; grid-column: 1 / 3; }
}
/* ============================================================
INTERACTIVE LMS WIREFRAME (click to fill with brand colour)
============================================================ */
.visual-block:has(.lms-wire) { background: none; }
.lms-wire {
--w-card: #FFFFFF; --w-line: #E4E7EC; --w-fill: #E4E7EC; --w-fill-2: #CDD3DB;
--w-play: #B4BAC4; --w-topbar: #F0F2F5;
width: 100%; max-width: 100%; cursor: pointer; user-select: none;
display: flex; flex-direction: column; align-items: center; gap: 14px;
-webkit-tap-highlight-color: transparent;
}
.lms-wire:focus-visible { outline: none; }
.lms-wire:focus-visible .lms-frame { box-shadow: 0 0 0 3px rgba(39,170,225,0.4); }
.lms-frame {
width: 100%; background: var(--w-card); border: 1px solid #E4E7EC;
border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(11,20,38,0.08);
aspect-ratio: 16 / 9; display: flex; flex-direction: column;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lms-wire:hover .lms-frame { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(11,20,38,0.12); }
/* Hover teaser: hint the brand colour before the click commits it */
.lms-wire:not(.is-colored):hover .lms-player { background: linear-gradient(135deg, rgba(39,170,225,0.55), rgba(16,140,255,0.55)); }
.lms-wire:not(.is-colored):hover .lms-play { border-color: transparent transparent transparent rgba(255,255,255,0.9); }
.lms-wire:not(.is-colored):hover .lms-logo { background: rgba(39,170,225,0.5); }
.lms-wire:not(.is-colored):hover .lms-progress span { background: rgba(39,170,225,0.5); }
.lms-wire:not(.is-colored):hover .lms-hint { color: var(--hot-blue); }
.lms-topbar {
display: flex; align-items: center; gap: 8px; padding: 8px 12px;
background: var(--w-topbar); border-bottom: 1px solid #E4E7EC;
transition: background .4s var(--ease);
}
.lms-logo { width: 44px; height: 12px; border-radius: 4px; background: var(--w-fill-2); transition: background .45s var(--ease); }
.lms-nav { display: flex; gap: 8px; margin-left: 10px; }
.lms-navdot { width: 30px; height: 6px; border-radius: 3px; background: var(--w-fill); transition: background .45s var(--ease) .05s; }
.lms-avatar { width: 18px; height: 18px; border-radius: 50%; background: var(--w-fill-2); margin-left: auto; transition: background .45s var(--ease) .1s; }
.lms-body { display: flex; gap: 12px; padding: 10px; flex: 1; min-height: 0; }
.lms-side { display: flex; flex-direction: column; gap: 8px; flex: 0 0 96px; }
.lms-mod { height: 13px; border-radius: 4px; background: var(--w-fill); transition: background .45s var(--ease); }
.lms-mod.is-active { background: var(--w-fill-2); }
.lms-main { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.lms-player {
flex: 1 1 40%; min-height: 24px; border-radius: 8px; background: var(--w-fill);
display: flex; align-items: center; justify-content: center;
transition: background .5s var(--ease);
}
.lms-play {
width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px;
border-color: transparent transparent transparent var(--w-play);
margin-left: 3px; transition: border-color .5s var(--ease);
}
.lms-progress { height: 6px; border-radius: 3px; background: var(--w-fill); overflow: hidden; }
.lms-progress span { display: block; width: 62%; height: 100%; border-radius: 3px; background: var(--w-fill-2); transition: background .5s var(--ease); }
.lms-line { height: 8px; border-radius: 3px; background: var(--w-line); }
.lms-line--title { width: 70%; height: 10px; }
.lms-line--w70 { width: 88%; }
.lms-quiz { display: flex; flex-direction: column; gap: 5px; margin-top: auto; }
.lms-opt {
height: 13px; border-radius: 5px; background: var(--w-line); position: relative;
transition: background .45s var(--ease), box-shadow .45s var(--ease);
}
.lms-opt.is-correct::after {
content: ""; position: absolute; left: 7px; top: 50%; width: 7px; height: 7px;
border-radius: 50%; background: var(--w-play); transform: translateY(-50%);
transition: background .45s var(--ease);
}
.lms-hint {
font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-mute);
display: inline-flex; align-items: center; gap: 6px; transition: color .4s var(--ease);
}
.lms-hint__on { display: none; }
/* --- Coloured (customised) state — driven by --wt / --wt2 / --wt-soft theme vars --- */
.lms-wire { --wt: #27AAE1; --wt2: #108CFF; --wt-soft: #CFEAF8; }
.lms-wire.is-colored .lms-logo { background: var(--wt); }
.lms-wire.is-colored .lms-navdot.is-active { background: var(--wt); }
.lms-wire.is-colored .lms-navdot:not(.is-active) { background: var(--wt-soft); }
.lms-wire.is-colored .lms-avatar { background: var(--wt2); }
.lms-wire.is-colored .lms-mod.is-active { background: var(--wt); }
.lms-wire.is-colored .lms-mod:not(.is-active) { background: var(--wt-soft); }
.lms-wire.is-colored .lms-player { background: linear-gradient(135deg, var(--wt), var(--wt2)); }
.lms-wire.is-colored .lms-play { border-color: transparent transparent transparent #FFFFFF; }
.lms-wire.is-colored .lms-progress span { background: var(--wt); }
.lms-wire.is-colored .lms-line--title { background: var(--wt); opacity: .85; }
.lms-wire.is-colored .lms-opt.is-correct { background: var(--wt-soft); box-shadow: inset 0 0 0 1.5px var(--wt); }
.lms-wire.is-colored .lms-opt.is-correct::after { background: var(--wt2); }
.lms-wire.is-colored .lms-hint { color: var(--wt2); }
.lms-wire.is-colored .lms-hint__off { display: none; }
.lms-wire.is-colored .lms-hint__on { display: inline; }
/* Swatch picker */
.two-col--lms { grid-template-columns: minmax(300px, 1fr) 1.05fr; align-items: center; gap: var(--space-7); }
.two-col--lms > div:first-child { max-width: 460px; }
@media (max-width: 900px) { .two-col--lms { grid-template-columns: 1fr; } .two-col--lms > div:first-child { max-width: none; } }
.lms-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 520px; margin: 0 auto; }
.lms-stage .lms-wire { flex: 1; min-width: 0; }
.lms-swatches {
display: flex; flex-direction: row; justify-content: center; gap: 12px; flex-shrink: 0;
}
.lms-sw {
width: 32px; height: 32px; border-radius: 50%; cursor: pointer; padding: 0;
border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px rgba(11,20,38,0.12), 0 4px 10px rgba(11,20,38,0.10);
transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
position: relative;
}
.lms-sw:hover { transform: scale(1.12); }
.lms-sw.is-active { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--sw); }
.lms-sw.is-active::after {
content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
color: #FFFFFF; font-size: 12px; font-weight: 700;
}
@media (max-width: 600px) {
.lms-stage { flex-direction: column-reverse; align-items: stretch; }
.lms-swatches { flex-direction: row; justify-content: center; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
.lms-wire *, .lms-frame { transition: none !important; }
}
/* --- Capability scenes + tabs (custom-elearning "What We Build") --- */
.lms-main { position: relative; }
.lms-scene { display: none; flex-direction: column; gap: 7px; flex: 1; min-height: 0; animation: lms-scene-in .3s var(--ease-out) both; }
.lms-scene.is-on { display: flex; }
@keyframes lms-scene-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* drag & drop */
.lms-scene--drag { justify-content: center; gap: 10px; }
.dd-row { display: flex; align-items: center; gap: 10px; }
.dd-chip { width: 34%; height: 16px; border-radius: 6px; background: var(--wt, #27AAE1); }
.dd-arrow { flex: 1; height: 2px; border-radius: 2px; background: var(--w-line); position: relative; }
.dd-arrow::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); border: 4px solid transparent; border-left-color: var(--w-line); }
.dd-slot { width: 34%; height: 16px; border-radius: 6px; border: 1.5px dashed var(--w-fill-2); }
.dd-slot.is-filled { border-style: solid; border-color: var(--wt, #27AAE1); background: var(--wt-soft, #CFEAF8); }
/* branching */
.lms-scene--branch { justify-content: center; align-items: center; gap: 8px; }
.br-prompt { width: 60%; height: 15px; border-radius: 6px; background: var(--w-fill-2); }
.br-choices { display: flex; gap: 10px; width: 100%; justify-content: center; }
.br-choice { width: 40%; height: 15px; border-radius: 6px; background: var(--w-line); }
.br-choice.is-picked { background: var(--wt, #27AAE1); }
.br-fork { display: flex; gap: 32%; }
.br-line { width: 2px; height: 14px; background: var(--w-fill-2); }
.br-outcomes { display: flex; gap: 10px; width: 100%; justify-content: center; }
.br-out { width: 40%; height: 13px; border-radius: 6px; }
.br-out.is-good { background: var(--wt-soft, #CFEAF8); box-shadow: inset 0 0 0 1.5px var(--wt, #27AAE1); }
.br-out.is-bad { background: var(--w-line); }
/* spaced repetition */
.lms-scene--spaced { justify-content: center; gap: 12px; }
.sp-cards { display: flex; gap: 8px; align-items: flex-end; height: 46%; }
.sp-card { flex: 1; border-radius: 6px 6px 4px 4px; background: var(--w-line); height: 60%; }
.sp-card.is-done { background: var(--wt-soft, #CFEAF8); height: 78%; }
.sp-card.is-now { background: var(--wt, #27AAE1); height: 100%; }
.sp-track { display: flex; align-items: center; gap: 8px; }
.sp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--w-line); }
.sp-dot.is-on { background: var(--wt, #27AAE1); }
/* mobile */
.lms-scene--mobile { align-items: center; justify-content: center; }
.mob-phone {
width: 34%; min-width: 78px; aspect-ratio: 9 / 16; max-height: 100%;
border: 2px solid var(--w-fill-2); border-radius: 12px; padding: 9px 8px;
display: flex; flex-direction: column; gap: 6px; background: var(--w-card);
}
.mob-bar { height: 8px; border-radius: 3px; background: var(--w-line); }
.mob-bar--pill { width: 40%; background: var(--wt, #27AAE1); }
.mob-bar--w70 { width: 70%; }
.mob-play { flex: 1; border-radius: 8px; background: linear-gradient(135deg, var(--wt, #27AAE1), var(--wt2, #108CFF)); display: grid; place-items: center; }
.mob-play .lms-play { border-color: transparent transparent transparent #fff; }
/* scorm / xapi */
.lms-scene--scorm { justify-content: center; align-items: center; gap: 12px; }
.sc-badges { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.sc-badge {
font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--wt, #27AAE1);
background: var(--wt-soft, #CFEAF8); border: 1px solid var(--wt, #27AAE1);
padding: 4px 9px; border-radius: 999px;
}
.sc-sync { display: flex; align-items: center; gap: 0; width: 66%; }
.sc-node { width: 16px; height: 16px; border-radius: 5px; background: var(--w-fill-2); flex-shrink: 0; }
.sc-node--lms { background: var(--wt, #27AAE1); }
.sc-wire { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--wt, #27AAE1) 0 5px, transparent 5px 10px); }
.sc-caption { font-size: 11px; color: var(--ink-mute); text-align: center; }
.lms-caps { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.lms-cap {
font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--ink-mute);
background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
padding: 7px 13px; cursor: pointer;
transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lms-cap:hover { border-color: var(--hot-blue); color: var(--hot-blue); }
.lms-cap.is-active { background: var(--hot-dark); border-color: var(--hot-dark); color: #fff; }
.lms-swatches__label { font-size: 13px; font-weight: var(--fw-semibold); color: var(--ink-mute); margin-right: 4px; align-self: center; }
/* ============================================================
FEATURE GRID (service pages)
============================================================ */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .feat-grid { grid-template-columns: 1fr; } }
.feat {
background: var(--surface); border: var(--border); border-radius: var(--radius-lg);
padding: var(--space-5); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.feat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.feat__icon {
width: 48px; height: 48px; border-radius: var(--radius);
background: linear-gradient(135deg, var(--hot-blue-100), var(--surface));
border: var(--border); display: flex; align-items: center; justify-content: center;
font-size: 22px; margin-bottom: var(--space-3);
}
.feat h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.feat p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-relaxed); }
/* ============================================================
PROCESS STEPS (service pages — with blue top bar)
============================================================ */
.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .process-steps { grid-template-columns: 1fr; } }
.pstep {
position: relative; padding: var(--space-6); background: var(--surface);
border: var(--border); border-radius: var(--radius-xl); overflow: hidden;
}
.pstep::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--hot-blue), transparent);
}
.pstep__num {
position: absolute; top: var(--space-5); right: var(--space-5);
font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: var(--fw-extrabold);
color: var(--hot-blue); opacity: 0.28; line-height: 1;
}
.pstep h3 { margin-bottom: var(--space-3); }
.pstep p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-relaxed); }
/* ============================================================
SAMPLE WORK (service pages)
============================================================ */
.sample-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .sample-grid { grid-template-columns: 1fr; } }
.sample {
background: var(--surface); border: var(--border); border-radius: var(--radius-xl);
overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sample:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.sample__bar { height: 4px; }
.sample__bar--blue { background: var(--hot-blue); }
.sample__bar--orange { background: var(--hot-orange); }
.sample__bar--dark { background: var(--hot-dark); }
.sample__body { padding: var(--space-5); }
.sample__industry {
font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--hot-blue);
letter-spacing: var(--tracking-wide); text-transform: none; margin-bottom: var(--space-2);
}
.sample h3 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.sample p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-relaxed); }
/* ============================================================
RELATED SERVICES (service pages)
============================================================ */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .related-grid { grid-template-columns: 1fr; } }
.related {
background: var(--surface); border: var(--border); border-radius: var(--radius-lg);
padding: var(--space-5); text-decoration: none; color: inherit;
transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
display: block;
}
.related:hover { transform: translateY(-2px); border-color: var(--hot-blue); }
.related h3 { color: var(--hot-dark); font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.related p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-relaxed); margin-bottom: var(--space-3); }
.related__link {
font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--hot-blue);
text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2);
}
.related__link::after { content: "\2192"; transition: transform var(--dur-fast) var(--ease); }
.related:hover .related__link::after { transform: translateX(4px); }
/* ============================================================
QUOTE BLOCK (case study detail)
============================================================ */
.quote-block {
background: var(--hot-dark); color: #fff; border-radius: var(--radius-xl);
padding: var(--space-7); position: relative; overflow: hidden;
max-width: 820px; margin: 0 auto;
}
.quote-block::before {
content: "\201C"; position: absolute; top: -16px; left: 24px;
font-family: var(--font-display); font-size: 160px; color: rgba(39,170,225,0.15);
line-height: 1; pointer-events: none;
}
.quote-block blockquote {
margin: 0; font-size: var(--fs-xl); line-height: var(--lh-relaxed);
color: rgba(255,255,255,0.9); position: relative; font-style: italic;
}
.quote-block cite {
display: block; margin-top: var(--space-4); font-style: normal;
font-size: var(--fs-sm); color: rgba(255,255,255,0.5);
font-weight: var(--fw-semibold);
}
/* ============================================================
STORY (case study prose sections)
============================================================ */
.story { max-width: 820px; margin: 0 auto; }
.story h2 { margin-bottom: var(--space-4); }
.story p { font-size: var(--fs-lg); color: var(--neutral-700); line-height: var(--lh-relaxed); margin-bottom: var(--space-4); }
.story p:last-child { margin-bottom: 0; }
.story ul { list-style: none; padding: 0; margin: var(--space-4) 0; }
.story ul li {
padding: var(--space-3) 0 var(--space-3) var(--space-7); position: relative;
font-size: var(--fs-base); color: var(--neutral-700); line-height: var(--lh-relaxed);
}
.story ul li::before {
content: ""; position: absolute; left: 0; top: 18px;
width: 18px; height: 18px; border-radius: 50%;
background: var(--hot-blue-100); border: 2px solid var(--hot-blue);
}
.story ul li strong { color: var(--ink); }
/* ============================================================
APPROACH CARDS (case study detail)
============================================================ */
.approach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); max-width: 820px; margin: 0 auto; }
@media (max-width: 768px) { .approach-grid { grid-template-columns: 1fr; } }
.approach-card {
background: var(--surface); border: var(--border); border-radius: var(--radius-lg);
padding: var(--space-5); position: relative; overflow: hidden;
}
.approach-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--hot-blue), transparent);
}
.approach-card h3 { margin-bottom: var(--space-2); }
.approach-card p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-relaxed); }
/* ============================================================
PROJECT META (case study detail)
============================================================ */
.project-meta {
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
max-width: 820px; margin: 0 auto;
}
@media (max-width: 768px) { .project-meta { grid-template-columns: repeat(2, 1fr); } }
.meta-item {
padding: var(--space-4); background: var(--surface); border: var(--border);
border-radius: var(--radius-lg);
}
.meta-item__label {
font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-mute);
letter-spacing: var(--tracking-wide); text-transform: none;
margin-bottom: var(--space-2);
}
.meta-item__value { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink); }
/* ============================================================
MORE CASES GRID (case study detail — related cases)
============================================================ */
.more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (max-width: 768px) { .more-grid { grid-template-columns: 1fr; } }
.more-card {
background: var(--surface); border: var(--border); border-radius: var(--radius-xl);
overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.more-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.more-card__cover {
height: 140px; display: flex; align-items: center; justify-content: center;
font-size: 48px; color: #fff;
}
.more-card__cover--b { background: linear-gradient(135deg, var(--hot-orange), var(--hot-red)); }
.more-card__cover--c { background: linear-gradient(135deg, var(--hot-dark), var(--hot-dark-800)); }
.more-card__body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; }
.more-card__eyebrow {
font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--hot-blue);
letter-spacing: var(--tracking-wide); text-transform: none; margin-bottom: var(--space-2);
}
.more-card h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); color: var(--ink); }
.more-card p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-relaxed); }
/* ============================================================
WHATSAPP FLOATING BUTTON
============================================================ */
.whatsapp-float {
position: fixed; bottom: 24px; right: 24px; z-index: 90;
width: 56px; height: 56px; border-radius: 50%;
background: #25D366; color: #fff; border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 16px rgba(37,211,102,0.4);
transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(37,211,102,0.5); }
.whatsapp-float svg { width: 28px; height: 28px; }
/* ============================================================
SCROLL REVEAL
============================================================ */
.reveal {
opacity: 0; transform: translateY(24px);
transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
will-change: opacity, transform; backface-visibility: hidden;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* Stagger children */
.reveal-stagger > * { opacity: 0; transform: translateY(16px);
transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); will-change: opacity, transform; backface-visibility: hidden; }
.reveal-stagger.is-visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 80ms; }
.reveal-stagger.is-visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 320ms; }
.reveal-stagger.is-visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
.reveal-stagger.is-visible > *:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 480ms; }
.reveal-stagger.is-visible > *:nth-child(8) { opacity: 1; transform: translateY(0); transition-delay: 560ms; }
.reveal-stagger.is-visible > *:nth-child(9) { opacity: 1; transform: translateY(0); transition-delay: 640ms; }
/* Once revealed, drop will-change so idle elements don't hold GPU layers */
.reveal.is-visible, .reveal-stagger.is-visible > * { will-change: auto; }
/* ============================================================
SMOOTH MOTION — global polish
============================================================ */
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
/* GPU-promote interactive cards so hover lifts stay buttery (no sub-pixel jitter) */
.card, .feat, .pillar, .result-stat, .connect__step, .flow-step__card, .service,
.case, .blog-card, .portfolio-card, .team-card, .industry-card, .more-card,
.related, .sample, .pstep {
backface-visibility: hidden;
}
/* ============================================================
REIMAGINATION v8 — Real-content components & polish
============================================================ */
/* Page fade-in transition */
@media (prefers-reduced-motion: no-preference) {
/* opacity-only: animating transform on body leaves a persistent transform (fill:both),
which turns body into the containing block for ALL position:fixed elements
(WhatsApp float, scroll progress, modals) and breaks their positioning. */
body { animation: page-fade-in 480ms var(--ease-out) both; }
@keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }
}
/* --- Logo marquee with real images (full colour) --- */
.marquee__item--img {
display: inline-flex; align-items: center; height: 36px; padding: 0 var(--space-5);
vertical-align: middle;
}
.marquee__item--img img {
height: 36px; width: auto; max-width: 160px;
filter: none;
opacity: 1;
transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.marquee__track:hover .marquee__item--img img { opacity: 1; }
.marquee__item--img:hover img { opacity: 1; transform: scale(1.05); }
/* --- Social proof badges row --- */
.social-proof {
background: var(--surface-alt);
border-top: var(--border); border-bottom: var(--border);
padding: var(--space-7) 0;
}
.social-proof__row {
display: flex; flex-wrap: wrap; gap: var(--space-6);
align-items: center; justify-content: center;
}
.social-proof__label {
width: 100%; text-align: center; font-size: var(--fs-xs);
font-weight: var(--fw-semibold); color: var(--ink-mute);
letter-spacing: var(--tracking-wide); text-transform: none;
margin-bottom: var(--space-5);
}
.social-proof__badge {
display: inline-block; height: 110px;
filter: grayscale(0.15);
transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.social-proof__badge:hover { filter: grayscale(0); transform: translateY(-3px); }
.social-proof__badge img { height: 110px; width: auto; display: block; }
@media (max-width: 700px) {
.social-proof__row { gap: var(--space-4); }
.social-proof__badge, .social-proof__badge img { height: 88px; }
}
/* --- Hero video upgrade --- */
.hero__video-wrap {
position: relative; width: 100%;
border-radius: var(--radius-xl); overflow: hidden;
box-shadow: var(--shadow-lg);
background: var(--ink);
}
.hero__video-wrap > img,
.hero__video-wrap > video { width: 100%; height: auto; display: block; }
.hero__play-btn {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 88px; height: 88px; border-radius: 50%;
background: rgba(255,255,255,0.95); border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
transition: transform var(--dur-fast) var(--ease);
}
.hero__play-btn:hover { transform: translate(-50%, -50%) scale(1.08); }
.hero__play-btn::before {
content: ""; display: block; width: 0; height: 0;
border-left: 22px solid var(--hot-blue);
border-top: 14px solid transparent; border-bottom: 14px solid transparent;
margin-left: 6px;
}
/* --- Testimonial photo avatars --- */
.testimonial__avatar--photo {
width: 48px; height: 48px; border-radius: 50%;
overflow: hidden; flex-shrink: 0;
background: var(--surface-alt);
}
.testimonial__avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* --- Case study covers as images --- */
.case__cover--img { padding: 0; height: 200px; overflow: hidden; }
.case__cover--img img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform var(--dur-base) var(--ease);
}
.case:hover .case__cover--img img { transform: scale(1.04); }
/* --- Blog cover as images --- */
.blog-card__cover--img { padding: 0; height: 180px; overflow: hidden; }
.blog-card__cover--img img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform var(--dur-base) var(--ease);
}
.blog-card:hover .blog-card__cover--img img { transform: scale(1.05); }
/* --- Portfolio screenshot mockup cards --- */
.portfolio-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
@media (max-width: 900px) { .portfolio-grid { grid-template-columns: 1fr; } }
.portfolio-card {
background: var(--surface); border: var(--border); border-radius: var(--radius-xl);
overflow: hidden; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
display: flex; flex-direction: column;
}
.portfolio-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--hot-blue); }
.portfolio-card__img { height: 220px; overflow: hidden; }
.portfolio-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-base) var(--ease); }
.portfolio-card:hover .portfolio-card__img img { transform: scale(1.05); }
.portfolio-card__body { padding: var(--space-5); }
.portfolio-card__tag {
font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--hot-blue);
letter-spacing: var(--tracking-wide); text-transform: none;
margin-bottom: var(--space-2);
}
.portfolio-card h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); color: var(--ink); }
.portfolio-card p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-relaxed); }
/* --- Team grid with headshots --- */
.team-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
}
@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
text-align: center; background: var(--surface);
border: var(--border); border-radius: var(--radius-xl);
padding: var(--space-5);
transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.team-card__photo {
width: 140px; height: 140px; border-radius: 50%;
margin: 0 auto var(--space-4); overflow: hidden;
background: var(--surface-alt);
border: 4px solid var(--surface);
box-shadow: var(--shadow-sm);
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* normal + hover portrait swap */
.team-card__photo { position: relative; }
.team-card__photo .photo--hover {
position: absolute; inset: 0; opacity: 0;
transition: opacity var(--dur) var(--ease);
}
.team-card:hover .photo--hover { opacity: 1; }
.team-card__name { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink); margin-bottom: var(--space-1); }
.team-card__role { font-size: var(--fs-sm); color: var(--hot-blue); font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }
.team-card__bio { font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-relaxed); }
/* --- Multi-step form --- */
.steps-form { background: var(--surface); border: var(--border); border-radius: var(--radius-xl); padding: var(--space-7); }
.steps-form__indicator {
display: flex; gap: var(--space-2); align-items: center;
margin-bottom: var(--space-6);
}
.steps-form__step-dot {
flex: 1; height: 6px; border-radius: 3px;
background: var(--neutral-200);
transition: background var(--dur-fast) var(--ease);
}
.steps-form__step-dot.is-active { background: var(--hot-blue); }
.steps-form__step-dot.is-done { background: var(--hot-dark); }
.steps-form__count {
font-size: var(--fs-xs); font-weight: var(--fw-semibold);
color: var(--ink-mute); text-transform: none;
letter-spacing: var(--tracking-wide); margin-bottom: var(--space-3);
}
.steps-form__panel { display: none; }
.steps-form__panel.is-active { display: block; animation: step-in .35s var(--ease-out); }
@keyframes step-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.steps-form__panel h3 { font-size: var(--fs-2xl); margin-bottom: var(--space-2); }
.steps-form__panel p.lede { font-size: var(--fs-md); color: var(--ink-mute); margin-bottom: var(--space-5); }
.steps-form__nav { display: flex; gap: var(--space-3); justify-content: space-between; margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border); }
/* --- WhatsApp float upgrade (pulse + tooltip + entrance) --- */
.whatsapp-float { animation: wa-entrance .7s var(--ease-out) .8s both; }
@keyframes wa-entrance { from { opacity: 0; transform: translateY(40px) scale(.6); } to { opacity: 1; transform: translateY(0) scale(1); } }
.whatsapp-float::before {
content: ""; position: absolute; inset: -4px; border-radius: 50%;
background: rgba(37,211,102,0.45); z-index: -1;
animation: wa-pulse 2s var(--ease-out) infinite;
}
@keyframes wa-pulse { 0% { transform: scale(0.95); opacity: 0.7; } 70% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(1.4); opacity: 0; } }
.whatsapp-float__tip {
position: absolute; right: 72px; top: 50%; transform: translateY(-50%);
background: var(--hot-dark); color: #fff;
padding: 8px 14px; border-radius: var(--radius);
font-size: var(--fs-sm); font-weight: var(--fw-semibold);
white-space: nowrap; box-shadow: var(--shadow);
opacity: 0; pointer-events: none;
transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.whatsapp-float__tip::after {
content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
border-left: 6px solid var(--hot-dark);
border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.whatsapp-float:hover .whatsapp-float__tip { opacity: 1; transform: translateY(-50%) translateX(-4px); }
/* --- Standardised footer social icons --- */
.footer-social { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-5); }
.footer-social__icon {
width: 36px; height: 36px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9);
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.footer-social__icon:hover { background: #fff; color: var(--hot-blue); transform: translateY(-2px); }
.footer a.footer-social__icon { display: inline-flex; padding: 0; }
.footer-social__icon { line-height: 0; }
.footer-social__icon svg,
.footer-social__icon i {
position: static; display: block; flex: 0 0 auto; margin: 0;
width: 18px !important; height: 18px !important;
}
/* --- Card micro-interactions (icon lift on hover) --- */
.service:hover .service__icon { transform: scale(1.08) rotate(-2deg); }
.service__icon { transition: transform var(--dur-fast) var(--ease); }
/* --- 404 page --- */
.error-404 {
padding: var(--space-10) 0; text-align: center;
min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center;
}
.error-404__inner { max-width: 600px; margin: 0 auto; }
.error-404__art { margin-bottom: var(--space-6); }
.error-404__art img { max-width: 100%; height: auto; }
.error-404 h1 { font-size: var(--fs-4xl); margin-bottom: var(--space-3); }
.error-404 p { font-size: var(--fs-lg); color: var(--ink-mute); margin-bottom: var(--space-6); }
.error-404__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
/* --- Article (blog) page --- */
.article {
max-width: 760px; margin: 0 auto; padding: var(--space-8) var(--space-6);
}
.article__meta { color: var(--ink-mute); font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.article__cover { width: 100%; height: auto; border-radius: var(--radius-xl); margin-bottom: var(--space-6); }
.article h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); margin-bottom: var(--space-4); }
.article h2 { font-size: var(--fs-2xl); margin-top: var(--space-7); margin-bottom: var(--space-3); }
.article h3 { font-size: var(--fs-xl); margin-top: var(--space-5); margin-bottom: var(--space-2); }
.article p { font-size: var(--fs-md); line-height: var(--lh-relaxed); margin-bottom: var(--space-4); color: var(--ink); }
.article ul { padding-left: var(--space-5); margin-bottom: var(--space-4); }
.article li { margin-bottom: var(--space-2); line-height: var(--lh-relaxed); }
.article blockquote {
border-left: 4px solid var(--hot-blue); padding: var(--space-3) var(--space-5);
background: var(--surface-alt); border-radius: 0 var(--radius) var(--radius) 0;
margin: var(--space-5) 0; font-style: italic; color: var(--ink);
}
/* --- Footer brand text classes --- */
.footer__brand { font-size: 22px; font-weight: var(--fw-extrabold); color: #fff; letter-spacing: -1px; margin-bottom: 12px; }
.footer__about { font-size: 14px; line-height: 1.6; max-width: 300px; margin: 0 0 16px; color: rgba(255,255,255,0.85); }
/* ============================================================
REIMAGINATION v8.1 — Content-page typography & layout fixes
(case-studies, portfolio, about-stats, forms, breadcrumb chip)
============================================================ */
/* --- Breadcrumb chip --- */
.inner-hero .breadcrumb {
display: inline-flex; align-items: center; gap: var(--space-2);
font-size: var(--fs-xs); font-weight: var(--fw-semibold);
color: var(--ink-mute); text-transform: none;
letter-spacing: var(--tracking-wide);
padding: 6px 14px; background: var(--surface-alt);
border: var(--border); border-radius: 999px;
margin-bottom: var(--space-4);
}
.inner-hero .breadcrumb a { color: var(--hot-blue); text-decoration: none; }
.inner-hero .breadcrumb a:hover { text-decoration: underline; }
/* --- Inner hero rhythm --- */
.inner-hero { padding: var(--space-9) 0 var(--space-7); }
.inner-hero h1 { font-size: var(--fs-5xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-3); }
.inner-hero__lede { font-size: var(--fs-xl); color: var(--ink-mute); max-width: 640px; line-height: var(--lh-relaxed); margin-bottom: var(--space-6); }
.inner-hero__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
/* ============================================================
CASE STUDIES — full layout
============================================================ */
.case-studies-section { padding: var(--space-9) 0 var(--space-10); }
.case-study {
background: var(--surface);
border: var(--border);
border-radius: var(--radius-2xl);
padding: var(--space-7);
margin-bottom: var(--space-7);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
@media (max-width: 700px) { .case-study { padding: var(--space-5); } }
.case-study .case-cover-img {
margin: calc(var(--space-7) * -1) calc(var(--space-7) * -1) var(--space-6);
width: calc(100% + var(--space-7) * 2) !important;
border-radius: 0 !important;
display: block;
}
@media (max-width: 700px) {
.case-study .case-cover-img {
margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5);
width: calc(100% + var(--space-5) * 2) !important;
}
}
.case-study-header {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--space-6);
align-items: start;
padding-bottom: var(--space-6);
border-bottom: var(--border);
margin-bottom: var(--space-6);
}
@media (max-width: 800px) { .case-study-header { grid-template-columns: 1fr; gap: var(--space-5); } }
.case-study-industry {
display: inline-block;
font-family: var(--font-accent);
font-style: italic;
font-weight: 400;
font-size: var(--fs-lg);
color: var(--hot-blue);
text-transform: none;
letter-spacing: 0;
background: none;
padding: 0;
border-radius: 0;
margin-bottom: var(--space-2);
}
.case-study-title {
font-size: var(--fs-3xl);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-3);
color: var(--ink);
}
@media (max-width: 700px) { .case-study-title { font-size: var(--fs-2xl); } }
.case-study-challenge {
font-size: var(--fs-md);
color: var(--ink-mute);
line-height: var(--lh-relaxed);
margin: 0;
}
/* Metrics — proper KPI card grid */
.case-study-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
.case-study-metrics .metric {
background: var(--surface-alt);
border: var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5);
text-align: left;
position: relative;
overflow: hidden;
}
.case-study-metrics .metric::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0;
width: 4px; background: var(--hot-blue);
}
.case-study-metrics .metric-number {
display: block;
font-size: var(--fs-3xl);
font-weight: var(--fw-extrabold);
color: var(--ink);
letter-spacing: var(--tracking-tight);
line-height: 1;
margin-bottom: 6px;
}
.case-study-metrics .metric-label {
display: block;
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
color: var(--ink-mute);
text-transform: none;
letter-spacing: var(--tracking-wide);
}
/* Body sections */
.case-study-body { display: flex; flex-direction: column; gap: var(--space-6); }
.study-section { }
.study-section h3 {
font-size: var(--fs-xl);
font-weight: var(--fw-extrabold);
color: var(--ink);
letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-3);
padding-left: var(--space-4);
border-left: 4px solid var(--hot-blue);
line-height: var(--lh-tight);
}
.study-section p {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: var(--ink);
margin-bottom: var(--space-3);
}
.study-section ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.study-section ul li {
position: relative;
padding-left: var(--space-6);
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: var(--ink);
}
.study-section ul li::before {
content: "";
position: absolute; left: 0; top: 10px;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--hot-blue);
box-shadow: inset 0 0 0 3px var(--surface);
border: 2px solid var(--hot-blue);
}
.study-section ul li strong { color: var(--ink); font-weight: var(--fw-bold); }
/* Pull-quote callout (Quote from X:) */
.study-section p[style*="border-left"] {
background: linear-gradient(135deg, rgba(39,170,225,0.06), rgba(39,170,225,0.02)) !important;
border-left: 4px solid var(--hot-blue) !important;
border-radius: 0 var(--radius-lg) var(--radius-lg) 0 !important;
padding: var(--space-5) var(--space-5) var(--space-5) var(--space-5) !important;
margin-top: var(--space-5) !important;
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
font-style: italic;
color: var(--ink);
position: relative;
}
.study-section p[style*="border-left"] strong { font-style: normal; display: block; margin-bottom: 6px; color: var(--hot-blue); font-size: var(--fs-xs); text-transform: none; letter-spacing: var(--tracking-wide); }
/* ============================================================
PORTFOLIO — project cards (text version, used in portfolio.html)
============================================================ */
.project-card {
background: var(--surface);
border: var(--border);
border-radius: var(--radius-xl);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--hot-blue); }
.project-thumb--img { padding: 0 !important; height: 220px !important; }
.project-thumb--img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-base) var(--ease); }
.project-card:hover .project-thumb--img img { transform: scale(1.05); }
.project-content { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.project-type {
align-self: flex-start;
display: inline-block;
font-family: var(--font-accent); font-style: italic; font-weight: 400;
font-size: var(--fs-sm);
color: var(--hot-blue); text-transform: none;
letter-spacing: 0.01em;
padding: 3px 14px;
border: 1px solid var(--hot-blue);
border-radius: var(--radius-full);
background: transparent;
}
.project-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink); line-height: var(--lh-tight); margin: 0; }
.project-client { font-size: var(--fs-sm); color: var(--ink-mute); font-weight: var(--fw-semibold); margin: 0; }
.project-desc { font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-relaxed); margin: var(--space-2) 0 0; }
.project-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.project-tag {
display: inline-block; font-size: 11px; font-weight: var(--fw-semibold);
background: var(--surface-alt); color: var(--ink-mute);
padding: 4px 10px; border-radius: 999px;
border: 1px solid var(--line);
}
/* Portfolio grid container — match design system */
.portfolio-section { padding: var(--space-8) 0 var(--space-9); }
.portfolio-section .portfolio-grid,
.portfolio-section [class*="grid"] {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
@media (max-width: 900px) {
.portfolio-section .portfolio-grid,
.portfolio-section [class*="grid"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.portfolio-section .portfolio-grid,
.portfolio-section [class*="grid"] { grid-template-columns: 1fr; }
}
/* ============================================================
ABOUT — stats bar + role label
============================================================ */
.stats-bar {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
padding: var(--space-7) 0;
}
@media (max-width: 700px) { .stats-bar { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
.stat-item {
text-align: left;
padding-left: var(--space-4);
border-left: 3px solid var(--hot-blue);
}
.stat-number {
display: block;
font-size: var(--fs-4xl);
font-weight: var(--fw-extrabold);
color: var(--ink);
letter-spacing: var(--tracking-tight);
line-height: 1;
margin-bottom: 6px;
}
.stat-label, .stat-item span:not(.stat-number) {
display: block;
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
color: var(--ink-mute);
text-transform: none;
letter-spacing: var(--tracking-wide);
}
/* Team card .role label */
.team-card .role,
.team-card__role {
display: block;
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--hot-blue);
margin-bottom: var(--space-3);
}
.team-card h3 { font-size: var(--fs-lg); margin-bottom: 4px; color: var(--ink); }
.team-card p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-relaxed); }
.alt-bg { background: var(--surface-alt); padding: var(--space-7) 0; border-top: var(--border); border-bottom: var(--border); }
/* ============================================================
FORMS — section, container, group polish
============================================================ */
.form-section { padding: var(--space-8) 0 var(--space-9); }
.form-container {
max-width: 720px; margin: 0 auto;
background: var(--surface);
border: var(--border);
border-radius: var(--radius-2xl);
padding: var(--space-7);
box-shadow: var(--shadow-sm);
}
@media (max-width: 700px) { .form-container { padding: var(--space-5); } }
.form-container h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-2); letter-spacing: var(--tracking-tight); }
.form-intro { font-size: var(--fs-md); color: var(--ink-mute); margin-bottom: var(--space-6); line-height: var(--lh-relaxed); }
.form-note { font-size: var(--fs-sm); color: var(--ink-mute); text-align: center; margin-top: var(--space-4); line-height: var(--lh-relaxed); }
.form-note-small { font-size: var(--fs-xs); color: var(--ink-mute); margin-top: 6px; line-height: var(--lh-relaxed); }
.form-group { margin-bottom: var(--space-5); }
.form-group label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); margin-bottom: 8px; }
.form-group.required label::after { content: " *"; color: var(--hot-red); }
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px 14px;
font-size: var(--fs-md);
font-family: inherit;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--hot-blue);
box-shadow: 0 0 0 3px rgba(39,170,225,0.15);
}
.form-group textarea { min-height: 110px; resize: vertical; line-height: var(--lh-relaxed); }
/* Next-steps bullets */
.next-steps { padding: var(--space-8) 0 var(--space-9); background: var(--surface-alt); border-top: var(--border); }
.next-steps .text-center { text-align: center; max-width: 640px; margin: 0 auto var(--space-7); }
.next-steps .text-center h2 { font-size: var(--fs-3xl); margin-top: var(--space-2); letter-spacing: var(--tracking-tight); }
/* ============================================================
GENERIC CONTENT TYPOGRAPHY (paragraphs/lists in sections)
Tighten reading rhythm site-wide
============================================================ */
section p { line-height: var(--lh-relaxed); }
.container > h1, .container > h2 { letter-spacing: var(--tracking-tight); }
section ul:not([class]) {
padding-left: var(--space-5);
display: flex; flex-direction: column; gap: var(--space-2);
}
section ul:not([class]) li { line-height: var(--lh-relaxed); }
/* Class-based case study quote callout */
.case-quote {
background: linear-gradient(135deg, rgba(39,170,225,0.08), rgba(39,170,225,0.02));
border-left: 4px solid var(--hot-blue);
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
padding: var(--space-5);
margin-top: var(--space-5);
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
font-style: italic;
color: var(--ink);
}
.case-quote strong {
font-style: normal;
display: block;
margin-bottom: 6px;
color: var(--hot-blue);
font-size: var(--fs-xs);
text-transform: none;
letter-spacing: var(--tracking-wide);
font-weight: var(--fw-bold);
}
/* ============================================================
CASE STUDIES v2 — editorial layout
============================================================ */
.cs-list { display: flex; flex-direction: column; gap: 72px; }
.cs-case { --cs-accent: var(--hot-blue); }
.cs-case__top {
display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: stretch;
}
.cs-case--flip .cs-case__top { grid-template-columns: 1fr 1.05fr; }
.cs-case--flip .cs-case__media { order: 2; }
.cs-case__media {
position: relative; border-radius: 20px; overflow: hidden;
border: 1px solid var(--border); background: var(--surface-alt); min-height: 340px;
box-shadow: 0 30px 60px -40px rgba(11,20,38,.45);
}
.cs-case__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-case__media::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(160deg, transparent 55%, color-mix(in oklab, var(--cs-accent) 55%, transparent));
pointer-events: none;
}
.cs-case__index {
position: absolute; top: 18px; left: 20px; z-index: 2;
font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 1px;
color: #fff; background: color-mix(in oklab, var(--cs-accent) 88%, #000);
padding: 7px 14px; border-radius: 999px; box-shadow: 0 6px 18px -6px rgba(0,0,0,.4);
}
.cs-case__intro { display: flex; flex-direction: column; justify-content: center; }
.cs-case__industry {
font-family: var(--font-accent); font-style: italic; font-size: 19px;
color: var(--cs-accent); margin-bottom: 10px;
}
.cs-case__title {
font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1.1;
color: var(--hot-dark); margin: 0 0 14px;
}
.cs-case__lede { font-size: 16.5px; line-height: 1.6; color: var(--ink-mute); margin: 0 0 24px; }
.cs-case__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cs-kpi {
position: relative; background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; padding: 18px 20px; overflow: hidden;
}
.cs-kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cs-accent); }
.cs-kpi__num { display: block; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--cs-accent); }
.cs-kpi__label { display: block; font-size: 15px; color: var(--ink-mute); font-weight: 600; margin-top: 8px; }
.cs-case__story {
margin-top: 28px; display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 0;
border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: var(--surface);
}
.cs-col { padding: 28px; border-right: 1px solid var(--border); }
.cs-col:last-child { border-right: none; }
.cs-col__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cs-col__head i { width: 18px; height: 18px; color: var(--cs-accent); }
.cs-col__head strong {
font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 1.2px;
text-transform: uppercase; color: var(--hot-dark);
}
.cs-col p { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0 0 12px; }
.cs-col p:last-child { margin-bottom: 0; }
.cs-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cs-col ul li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.cs-col ul li i { flex-shrink: 0; width: 16px; height: 16px; color: var(--cs-accent); margin-top: 3px; }
.cs-col ul li strong { color: var(--hot-dark); font-weight: 700; }
.cs-quote2 {
margin-top: 20px; position: relative; padding: 30px 34px 30px 76px;
border-radius: 20px; background: color-mix(in oklab, var(--cs-accent) 7%, var(--surface));
border: 1px solid color-mix(in oklab, var(--cs-accent) 22%, var(--border));
}
.cs-quote2::before {
content: '\201C'; position: absolute; left: 26px; top: 4px;
font-family: var(--font-accent); font-size: 78px; line-height: 1; color: var(--cs-accent); opacity: .5;
}
.cs-quote2 p { font-family: var(--font-accent); font-style: italic; font-size: 20px; line-height: 1.5; color: var(--hot-dark); margin: 0 0 12px; }
.cs-quote2 cite { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--cs-accent); }
@media (max-width: 900px) {
.cs-case__top, .cs-case--flip .cs-case__top { grid-template-columns: 1fr; gap: 24px; }
.cs-case--flip .cs-case__media { order: 0; }
.cs-case__media { min-height: 240px; }
.cs-case__story { grid-template-columns: 1fr; }
.cs-col { border-right: none; border-bottom: 1px solid var(--border); }
.cs-col:last-child { border-bottom: none; }
.cs-case__title { font-size: 27px; }
}
/* ============================================================
PORTFOLIO — filter tabs & thumb fix
============================================================ */
.filter-tabs {
display: flex; flex-wrap: wrap; gap: var(--space-2);
justify-content: center; margin-bottom: var(--space-7);
padding-bottom: var(--space-5); border-bottom: var(--border);
}
.filter-btn {
background: transparent;
border: 1px solid var(--line);
color: var(--ink-mute);
font-size: var(--fs-sm); font-weight: var(--fw-semibold);
padding: 10px 18px;
border-radius: 999px;
cursor: pointer;
transition: all var(--dur-fast) var(--ease);
font-family: inherit;
}
.filter-btn:hover { color: var(--hot-blue); border-color: var(--hot-blue); }
.filter-btn.active { background: var(--hot-dark); color: #fff; border-color: var(--hot-dark); }
/* Override stale inline border-radius on retrofitted project thumbs */
.project-card .project-thumb--img {
border-radius: 0 !important;
height: 220px !important;
margin: 0 !important;
}
/* ============================================================
BLOG INDEX page polish (blog.html)
============================================================ */
.blog-section { padding: var(--space-8) 0 var(--space-9); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }
/* --- Blog index: layout + editorial article cards with featured thumbnails --- */
.blog-wrapper { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--space-7); align-items: start; }
@media (max-width: 900px) { .blog-wrapper { grid-template-columns: 1fr; } }
.blog-wrapper .blog-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .blog-wrapper .blog-grid { grid-template-columns: 1fr; } }
/* Blog sidebar widgets */
.blog-sidebar { display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: 96px; }
.sidebar-widget {
background: var(--surface); border: var(--border);
border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6);
}
.sidebar-widget h3 {
font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold);
color: var(--ink); margin: 0 0 var(--space-4); letter-spacing: var(--tracking-tight);
}
.category-list { list-style: none; margin: 0; padding: 0; }
.category-list li { margin: 0; }
.category-list li + li { border-top: 1px solid var(--line); }
.category-list a {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
padding: var(--space-3) 0; color: var(--ink-mute);
font-size: var(--fs-sm); font-weight: var(--fw-medium);
transition: color var(--dur-fast) var(--ease);
}
.category-list a:hover { color: var(--hot-blue); }
.category-count {
flex: none; min-width: 26px; height: 22px; padding: 0 8px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface-alt); color: var(--ink-mute);
border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.category-list a:hover .category-count { background: var(--hot-blue); color: #fff; }
/* Recent-articles variant */
.sidebar-widget .recent-list a { display: block; font-weight: var(--fw-semibold); color: var(--ink); }
.sidebar-widget .recent-list a:hover { color: var(--hot-blue); }
.article-card {
display: flex; flex-direction: column;
background: var(--surface); border: var(--border); border-radius: var(--radius-2xl);
overflow: hidden;
transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in oklch, var(--hot-blue) 40%, var(--line)); }
.article-thumb {
position: relative; aspect-ratio: 16 / 10; width: 100%;
display: flex; align-items: center; justify-content: center;
background:
radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,0.28), transparent 55%),
linear-gradient(135deg, var(--hot-blue), var(--hot-cyan, #27aae1));
color: #fff; overflow: hidden; font-size: 0;
}
.article-thumb::before {
content: ""; position: absolute; inset: 0;
background-image: linear-gradient(rgba(255,255,255,0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.16) 1px, transparent 1px);
background-size: 30px 30px; opacity: 0.35; pointer-events: none;
}
.article-thumb::after {
content: ""; position: absolute; width: 220px; height: 220px; right: -70px; bottom: -90px;
background: rgba(255,255,255,0.14); border-radius: 50%; pointer-events: none;
}
.article-thumb i, .article-thumb svg { position: relative; width: 52px !important; height: 52px !important; stroke-width: 1.5; opacity: 0.96; }
.article-thumb--img { background: none !important; padding: 0 !important; }
.article-thumb--img::before, .article-thumb--img::after { display: none !important; }
.article-thumb--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-base) var(--ease); }
.article-card:hover .article-thumb--img img { transform: scale(1.05); }
.article-card:nth-child(2) .article-thumb { background: radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,0.28), transparent 55%), linear-gradient(135deg, #1573c4, #27aae1); }
.article-card:nth-child(3) .article-thumb { background: radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,0.28), transparent 55%), linear-gradient(135deg, #0b8fb0, #34c3d6); }
.article-card:nth-child(4) .article-thumb { background: radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,0.28), transparent 55%), linear-gradient(135deg, #2456a8, #2e9bd6); }
.article-content { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.article-meta { display: flex; gap: var(--space-3); font-size: var(--fs-xs); color: var(--ink-mute); text-transform: none; letter-spacing: var(--tracking-wide); margin-bottom: var(--space-3); }
.article-title { font-size: var(--fs-xl); line-height: var(--lh-snug); margin-bottom: var(--space-3); }
.article-excerpt { font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-relaxed); margin-bottom: var(--space-4); }
.article-link { margin-top: auto; font-weight: var(--fw-semibold); color: var(--hot-blue); }
.article-link:hover { text-decoration: underline; }
============================================================ */
.faq-list .faq-item, details.faq-item {
background: var(--surface); border: var(--border);
border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
margin-bottom: var(--space-3);
}
.faq-list .faq-item summary, details.faq-item summary {
font-size: var(--fs-md); font-weight: var(--fw-semibold);
color: var(--ink); cursor: pointer; list-style: none;
display: flex; justify-content: space-between; align-items: center;
}
.faq-list .faq-item summary::-webkit-details-marker, details.faq-item summary::-webkit-details-marker { display: none; }
.faq-list .faq-item summary::after, details.faq-item summary::after {
content: "+"; font-size: 22px; font-weight: var(--fw-bold);
color: var(--hot-blue); transition: transform var(--dur-fast) var(--ease);
}
.faq-list .faq-item[open] summary::after, details.faq-item[open] summary::after { content: "−"; }
.faq-list .faq-item p, details.faq-item p {
margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border);
font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--ink-mute);
}
/* CTA band polish */
.cta-band {
background: var(--hot-dark); color: #fff;
border-radius: var(--radius-2xl);
padding: var(--space-7); text-align: center;
position: relative; overflow: hidden;
}
.cta-band h2 { color: #fff; font-size: var(--fs-3xl); margin-bottom: var(--space-3); letter-spacing: var(--tracking-tight); }
.cta-band p { color: rgba(255,255,255,0.75); font-size: var(--fs-lg); max-width: 560px; margin: 0 auto var(--space-5); line-height: var(--lh-relaxed); }
/* --- Unified 3x3 services grid (replaces split featured + compact rows) --- */
.services-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
@media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }
/* ============================================================
JOURNEY PATH — Our Process section
============================================================ */
.journey { padding: var(--space-9) 0 var(--space-10); }
.journey__wrap {
position: relative;
margin-top: var(--space-7);
min-height: 420px;
}
.journey__path {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 280px;
transform: translateY(-50%);
pointer-events: none;
z-index: 1;
}
.journey__draw {
stroke-dasharray: 1800;
stroke-dashoffset: 1800;
transition: stroke-dashoffset 2.5s ease-out;
}
.journey__wrap.is-visible .journey__draw {
stroke-dashoffset: 0;
}
.journey__milestones {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
position: relative;
z-index: 2;
}
.journey__milestone {
position: relative;
display: flex; flex-direction: column;
align-items: center;
}
.journey__milestone--top { padding-bottom: 200px; }
.journey__milestone--bottom { padding-top: 200px; flex-direction: column-reverse; }
.journey__num {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--accent, var(--hot-blue));
color: #FFFFFF;
font-size: 18px;
font-weight: var(--fw-extrabold);
letter-spacing: -0.5px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 6px rgba(39,170,225,0.12), 0 6px 20px rgba(11,20,38,0.15);
position: relative;
z-index: 3;
margin: var(--space-3) 0;
transition: transform var(--dur-fast) var(--ease);
}
.journey__num::before {
content: ""; position: absolute; inset: -6px;
border-radius: 50%;
background: var(--accent, var(--hot-blue));
opacity: 0.18;
z-index: -1;
animation: journey-pulse 2.4s ease-out infinite;
}
@keyframes journey-pulse {
0% { transform: scale(0.95); opacity: 0.3; }
70% { transform: scale(1.6); opacity: 0; }
100% { transform: scale(1.6); opacity: 0; }
}
.journey__milestone:hover .journey__num { transform: scale(1.1); }
.journey__card {
background: var(--surface);
border: var(--border);
border-radius: var(--radius-xl);
padding: var(--space-5);
text-align: left;
width: 100%;
box-shadow: var(--shadow-sm);
transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
position: relative;
overflow: hidden; /* clip ::before accent strip to rounded corners */
isolation: isolate;
}
.journey__milestone:hover .journey__card {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--accent, var(--hot-blue));
}
.journey__card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--accent, var(--hot-blue));
/* No border-radius needed — parent .journey__card now clips with overflow:hidden */
z-index: 1;
}
.journey__tag {
display: inline-block;
font-size: var(--fs-xs); font-weight: var(--fw-bold);
color: var(--accent, var(--hot-blue));
text-transform: none;
letter-spacing: var(--tracking-wide);
background: rgba(39,170,225,0.08);
padding: 4px 10px; border-radius: 999px;
margin-bottom: var(--space-3);
}
.journey__card h3 {
font-size: var(--fs-xl);
margin-bottom: var(--space-2);
line-height: var(--lh-tight);
color: var(--ink);
}
.journey__card p {
font-size: var(--fs-sm);
color: var(--ink-mute);
line-height: var(--lh-relaxed);
margin-bottom: var(--space-3);
}
.journey__sub {
list-style: none; padding: 0; margin: 0 0 var(--space-3);
display: flex; flex-direction: column; gap: 6px;
}
.journey__sub li {
position: relative;
padding-left: var(--space-4);
font-size: var(--fs-sm);
color: var(--ink);
line-height: var(--lh-snug);
}
.journey__sub li::before {
content: "";
position: absolute; left: 0; top: 8px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent, var(--hot-blue));
}
.journey__week {
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
color: var(--ink-mute);
text-transform: none;
letter-spacing: var(--tracking-wide);
padding-top: var(--space-3);
border-top: var(--border);
}
/* Mobile: collapse to vertical timeline */
@media (max-width: 900px) {
.journey__path { display: none; }
.journey__wrap { min-height: 0; }
.journey__milestones {
grid-template-columns: 1fr;
gap: var(--space-5);
position: relative;
}
.journey__milestones::before {
content: "";
position: absolute;
left: 28px; top: 28px; bottom: 28px;
width: 2px;
background: linear-gradient(180deg, #27AAE1, #F57612, #0B1426);
z-index: 0;
}
.journey__milestone,
.journey__milestone--top,
.journey__milestone--bottom {
flex-direction: row;
align-items: flex-start;
gap: var(--space-4);
padding: 0;
}
.journey__num { margin: 0; flex-shrink: 0; width: 48px; height: 48px; font-size: 16px; }
.journey__card { flex: 1; }
}
/* ============================================================
INDUSTRIES — sector cards (Learning Designed For Your Industry)
============================================================ */
.industries-section { padding: var(--space-9) 0 var(--space-9); }
.industries-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
margin-top: var(--space-7);
}
@media (max-width: 1000px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .industries-grid { grid-template-columns: 1fr; } }
.industry-card {
--sector: var(--hot-blue);
--sector-bg: var(--hot-blue-100);
background: var(--surface);
border: var(--border);
border-radius: var(--radius-2xl);
padding: var(--space-6);
display: flex; flex-direction: column;
gap: var(--space-3);
text-decoration: none;
color: var(--ink);
position: relative;
overflow: hidden;
transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.industry-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0;
height: 4px; background: var(--sector);
border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}
.industry-card::after {
content: ""; position: absolute;
bottom: -120px; right: -120px;
width: 240px; height: 240px;
background: var(--sector-bg);
border-radius: 50%;
opacity: 0.6;
z-index: 0;
transition: transform var(--dur-base) var(--ease);
}
.industry-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: var(--sector);
}
.industry-card:hover::after { transform: scale(1.15); }
.industry-card > * { position: relative; z-index: 1; }
.industry-card__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.industry-card__icon {
width: 48px; height: 48px; border-radius: var(--radius-lg);
background: var(--sector-bg);
color: var(--sector);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: transform var(--dur-fast) var(--ease);
}
.industry-card__icon svg { width: 24px; height: 24px; }
.industry-card:hover .industry-card__icon { transform: scale(1.08) rotate(-3deg); }
.industry-card__tag {
font-size: var(--fs-xs); font-weight: var(--fw-bold);
color: var(--sector); text-transform: none;
letter-spacing: var(--tracking-wide);
}
.industry-card h3 {
font-size: var(--fs-xl);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
color: var(--ink);
margin: 0;
}
.industry-card p {
font-size: var(--fs-sm);
color: var(--ink-mute);
line-height: var(--lh-relaxed);
margin: 0;
}
.industry-card__points {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 6px;
}
.industry-card__points li {
font-size: var(--fs-sm);
color: var(--ink);
position: relative;
padding-left: var(--space-4);
line-height: var(--lh-snug);
}
.industry-card__points li::before {
content: "";
position: absolute; left: 0; top: 8px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--sector);
}
.industry-card__foot {
display: flex; justify-content: space-between; align-items: center;
padding-top: var(--space-3);
border-top: var(--border);
margin-top: auto;
}
.industry-card__stat {
font-size: var(--fs-xs);
color: var(--ink-mute);
font-weight: var(--fw-semibold);
text-transform: none;
letter-spacing: var(--tracking-wide);
}
.industry-card__stat b {
color: var(--ink);
font-size: var(--fs-md);
font-weight: var(--fw-extrabold);
margin-right: 4px;
}
.industry-card__cta {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--fs-sm); font-weight: var(--fw-bold);
color: var(--sector);
}
.industry-card__cta svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); }
.industry-card:hover .industry-card__cta svg { transform: translateX(4px); }
/* CTA variant card */
.industry-card--cta {
background: linear-gradient(135deg, var(--sector-bg), var(--surface));
border: 2px dashed var(--sector);
}
/* ============================================================
INDUSTRY STATS — dark band
============================================================ */
.industry-stats {
background: var(--hot-dark);
color: #FFFFFF;
padding: var(--space-9) 0;
position: relative;
overflow: hidden;
}
.industry-stats::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(39,170,225,0.15), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(245,118,18,0.12), transparent 50%);
z-index: 0;
}
.industry-stats > .container { position: relative; z-index: 1; }
.industry-stats h2 { color: #FFFFFF; font-size: var(--fs-3xl); letter-spacing: var(--tracking-tight); }
.industry-stats__grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
}
@media (max-width: 700px) { .industry-stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
.industry-stats__box {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-xl);
padding: var(--space-5);
text-align: left;
transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.industry-stats__box:hover {
background: rgba(255,255,255,0.07);
border-color: var(--hot-blue);
}
.industry-stats__icon {
width: 44px; height: 44px;
background: rgba(39,170,225,0.15);
color: var(--hot-blue);
border-radius: var(--radius);
display: flex; align-items: center; justify-content: center;
margin-bottom: var(--space-4);
}
.industry-stats__icon svg { width: 22px; height: 22px; }
.industry-stats__num {
display: block;
font-size: var(--fs-4xl);
font-weight: var(--fw-extrabold);
color: #FFFFFF;
letter-spacing: var(--tracking-tight);
line-height: 1;
margin-bottom: 8px;
}
.industry-stats__lbl {
display: block;
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
color: rgba(255,255,255,0.65);
text-transform: none;
letter-spacing: var(--tracking-wide);
}
/* ============================================================
INDUSTRY DIFF — How we solve industry-specific learning
============================================================ */
.industry-diff { padding: var(--space-9) 0; background: var(--surface-alt); border-top: var(--border); border-bottom: var(--border); }
.industry-diff__grid {
display: grid; grid-template-columns: 1.1fr 1fr;
gap: var(--space-7);
margin-top: var(--space-7);
align-items: center;
}
@media (max-width: 900px) { .industry-diff__grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.industry-diff__copy h3 {
font-size: var(--fs-3xl);
letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-3);
line-height: var(--lh-tight);
}
.industry-diff__copy > p {
font-size: var(--fs-md); color: var(--ink-mute);
line-height: var(--lh-relaxed); margin-bottom: var(--space-5);
}
.industry-diff__list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: var(--space-3);
}
.industry-diff__list li {
display: flex; align-items: flex-start; gap: var(--space-3);
font-size: var(--fs-md); color: var(--ink);
line-height: var(--lh-snug);
}
.industry-diff__list li i {
width: 24px; height: 24px;
background: rgba(34,197,94,0.12);
color: #22C55E;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.industry-diff__list li i svg { width: 14px; height: 14px; }
.industry-diff__visual { display: flex; flex-direction: column; gap: var(--space-3); }
.industry-diff__visual-card {
background: var(--surface);
border: var(--border);
border-radius: var(--radius-xl);
padding: var(--space-4) var(--space-5);
display: flex; align-items: center; gap: var(--space-4);
box-shadow: var(--shadow-sm);
transition: transform var(--dur-fast) var(--ease);
}
.industry-diff__visual-card:hover { transform: translateX(6px); }
.industry-diff__visual-icon {
width: 52px; height: 52px;
background: rgba(39,170,225,0.12);
color: var(--hot-blue);
border-radius: var(--radius-lg);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.industry-diff__visual-icon svg { width: 24px; height: 24px; }
.industry-diff__visual-text { display: flex; flex-direction: column; gap: 2px; }
.industry-diff__visual-text strong { font-size: var(--fs-md); font-weight: var(--fw-extrabold); color: var(--ink); }
.industry-diff__visual-text span { font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-snug); }
/* CTA banner dark variant */
.cta-band--dark { background: var(--hot-dark); }
/* ============================================================
GLASSMORPHISM ICON SYSTEM (v8.2)
Applies a layered glass tile treatment to every icon container
site-wide. Each container gets:
- soft brand-gradient base (blue → deep blue by default)
- frosted glass overlay (offset top-right rectangle)
- drop shadow + inner highlight for depth
- Lucide icon stroke = white, sits above the glass
Color scheme is overridable per-section via CSS variables:
--ig-c1, --ig-c2, --ig-c3 = gradient stops
--ig-shadow = drop shadow color
============================================================ */
:root {
--ig-c1: #C7E5F5;
--ig-c2: #5BBEE8;
--ig-c3: #1E6FA8;
--ig-shadow: rgba(39,170,225,0.4);
--ig-radius: 16px;
}
/* Universal glass-icon container treatment */
.service__icon,
.industry-card__icon,
.industry-stats__icon,
.industry-diff__visual-icon,
.mega-link__icon,
.feat__icon,
.card__icon,
.check-icon,
.icon-glass {
position: relative !important;
background: linear-gradient(135deg, var(--ig-c1), var(--ig-c2) 55%, var(--ig-c3)) !important;
border-radius: var(--ig-radius) !important;
border: 1px solid rgba(255,255,255,0.35) !important;
box-shadow:
0 12px 28px -10px var(--ig-shadow),
0 2px 4px -1px rgba(11,20,38,0.08),
inset 0 1px 0 rgba(255,255,255,0.5),
inset 0 -1px 0 rgba(0,0,0,0.06) !important;
overflow: visible !important;
isolation: isolate;
}
/* Frosted overlay — offset top-right tile */
.service__icon::before,
.industry-card__icon::before,
.industry-stats__icon::before,
.industry-diff__visual-icon::before,
.mega-link__icon::before,
.feat__icon::before,
.card__icon::before,
.icon-glass::before {
content: "";
position: absolute;
top: -22%;
right: -22%;
width: 64%;
height: 64%;
border-radius: calc(var(--ig-radius) * 0.85);
background: rgba(255,255,255,0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.55);
box-shadow:
0 6px 18px -6px rgba(11,20,38,0.18),
inset 0 1px 0 rgba(255,255,255,0.6);
z-index: 1;
pointer-events: none;
}
/* Soft inner glow blob */
.service__icon::after,
.industry-card__icon::after,
.industry-stats__icon::after,
.industry-diff__visual-icon::after,
.mega-link__icon::after,
.feat__icon::after,
.card__icon::after,
.icon-glass::after {
content: "";
position: absolute;
bottom: -10%;
left: -10%;
width: 50%;
height: 50%;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.45), transparent 70%);
z-index: 0;
pointer-events: none;
}
/* Lucide / inline SVG strokes inside glass = white */
.service__icon svg,
.industry-card__icon svg,
.industry-stats__icon svg,
.industry-diff__visual-icon svg,
.mega-link__icon svg,
.feat__icon svg,
.card__icon svg,
.icon-glass svg {
position: relative;
z-index: 2;
color: #FFFFFF !important;
stroke: #FFFFFF !important;
filter: drop-shadow(0 1px 2px rgba(11,20,38,0.18));
}
/* ----- HORIZONTAL ROW CARDS (use-case lists, distinct from feat-grid) ----- */
.hrow-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.hrow {
display: flex; gap: 18px; align-items: flex-start;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-lg); padding: 24px 26px;
transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.hrow:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--hot-blue-200); }
.hrow .feat__icon { margin: 0; flex: 0 0 auto; }
.hrow h3 { font-size: 18px; margin: 0 0 6px; }
.hrow p { margin: 0; color: var(--ink-mute); font-size: 15px; line-height: 1.55; }
@media (max-width: 760px) { .hrow-grid { grid-template-columns: 1fr; } }
/* ----- INTERACTIVE BRANCHING SCENARIO DEMO (gamification page) ----- */
.sim-demo { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-6); align-items: stretch; }
@media (max-width: 900px) { .sim-demo { grid-template-columns: 1fr; } }
.sim-screen {
background: linear-gradient(160deg, #0F2036, #0B1426);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-2xl); overflow: hidden;
box-shadow: 0 24px 60px rgba(11,20,38,0.28); color: #fff;
display: flex; flex-direction: column; min-height: 420px;
}
.sim-topbar {
display: flex; align-items: center; gap: 10px;
padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.03);
}
.sim-topbar__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hot-blue); box-shadow: 0 0 0 4px rgba(39,170,225,0.18); }
.sim-topbar__title { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.01em; }
.sim-topbar__tag { margin-left: auto; font-size: 12px; color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-full); padding: 3px 12px; }
.sim-reset { margin-left: 10px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 12px; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-full); padding: 4px 12px; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.sim-reset:hover { background: var(--hot-blue); border-color: var(--hot-blue); color: #fff; }
.sim-stage { padding: 26px 24px; flex: 1; display: flex; flex-direction: column; }
.sim-scene-label { font-family: var(--font-accent); font-style: italic; color: var(--hot-blue); font-size: 15px; margin-bottom: 10px; }
.sim-scene {
font-size: 19px; line-height: 1.5; color: #EAF0F6; font-weight: 500;
margin-bottom: 22px; text-wrap: pretty;
}
.sim-choices { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.sim-choice {
text-align: left; width: 100%; cursor: pointer;
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
color: #fff; border-radius: var(--radius-lg); padding: 15px 18px;
font-family: inherit; font-size: 15px; line-height: 1.45;
display: flex; align-items: center; gap: 14px;
transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.sim-choice:hover { background: rgba(39,170,225,0.14); border-color: var(--hot-blue); transform: translateX(3px); }
.sim-choice__key {
flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 13px; font-family: var(--font-display);
}
.sim-choice.is-correct { background: rgba(50,190,130,0.18); border-color: #34C77B; }
.sim-choice.is-wrong { background: rgba(233,69,96,0.16); border-color: #E94560; }
.sim-choice.is-correct .sim-choice__key { background: #34C77B; }
.sim-choice.is-wrong .sim-choice__key { background: #E94560; }
.sim-choice:disabled { cursor: default; }
.sim-choice.is-dim { opacity: 0.4; }
.sim-outcome {
border-radius: var(--radius-lg); padding: 16px 18px; margin-top: 4px;
font-size: 15px; line-height: 1.55; display: none;
}
.sim-outcome.show { display: block; }
.sim-outcome--good { background: rgba(50,190,130,0.14); border: 1px solid rgba(50,190,130,0.4); color: #C9F3DE; }
.sim-outcome--bad { background: rgba(233,69,96,0.12); border: 1px solid rgba(233,69,96,0.4); color: #F7CBD3; }
.sim-outcome strong { color: #fff; }
.sim-next {
margin-top: 18px; align-self: flex-start; display: none;
background: var(--hot-blue); color: #fff; border: none; cursor: pointer;
border-radius: var(--radius-full); padding: 11px 22px; font-family: var(--font-display);
font-weight: 600; font-size: 14px; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.sim-next.show { display: inline-flex; align-items: center; gap: 8px; }
.sim-next:hover { background: #1C84B0; transform: translateY(-1px); }
/* Side panel: score + HUD */
.sim-hud { display: flex; flex-direction: column; gap: 16px; }
.sim-hud__card {
background: var(--surface); border: var(--border); border-radius: var(--radius-xl);
padding: var(--space-5);
}
.sim-hud__label { font-size: 13px; color: var(--ink-mute); margin-bottom: 6px; }
.sim-score { font-family: var(--font-display); font-weight: 800; font-size: 44px; color: var(--hot-blue); line-height: 1; }
.sim-score__max { font-size: 20px; color: var(--ink-mute); font-weight: 600; }
.sim-progress-track { height: 8px; border-radius: var(--radius-full); background: var(--surface-alt); overflow: hidden; margin-top: 14px; }
.sim-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--hot-blue), #108CFF); border-radius: inherit; transition: width var(--dur) var(--ease); }
.sim-hud__steps { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.sim-step-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-mute); }
.sim-step-row__dot { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-alt); border: 1px solid var(--line); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--ink-mute); }
.sim-step-row.is-done .sim-step-row__dot { background: #34C77B; border-color: #34C77B; color: #fff; }
.sim-step-row.is-active { color: var(--ink); font-weight: 600; }
.sim-step-row.is-active .sim-step-row__dot { background: var(--hot-blue); border-color: var(--hot-blue); color: #fff; }
.sim-restart { background: none; border: none; color: var(--hot-blue); font-family: var(--font-display); font-weight: 600; font-size: 14px; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 6px; }
.sim-restart:hover { text-decoration: underline; }
/* ----- TOOL / SOFTWARE LOGO CHIPS (real product icons) ----- */
.feat__icon.tool-icon { background: none !important; overflow: visible !important; }
.feat__icon.tool-icon::before, .feat__icon.tool-icon::after { display: none !important; }
.feat__icon.tool-icon img { width: 30px; height: 30px; object-fit: contain; position: relative; z-index: 2; }
.feat__icon.tool-icon i { width: 24px; height: 24px; color: #fff; }
.feat__icon.tool-icon--chip { background: #fff !important; border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(11,20,38,.08); }
.feat__icon.tool-icon--badge span { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 15px; letter-spacing: .3px; position: relative; z-index: 2; }
/* ----- GLASS ICON v9 (clean frosted brand glass, per-card shape) ----- */
.service__icon--g2,
.feat__icon--g2,
.card__icon--g2,
.mega-link__icon--g2 {
border-radius: var(--shape, 18px) !important;
overflow: visible !important;
box-shadow:
0 14px 26px -12px var(--ig-shadow),
0 2px 6px -2px rgba(11,20,38,0.10),
inset 0 1px 0 rgba(255,255,255,0.65) !important;
}
/* remove the blurry offset tile + colored blob over the icon */
.service__icon--g2::before,
.service__icon--g2::after,
.feat__icon--g2::before,
.feat__icon--g2::after,
.card__icon--g2::before,
.card__icon--g2::after,
.mega-link__icon--g2::before,
.mega-link__icon--g2::after { display: none !important; }
/* sparkle glint, top-left */
.service__icon--g2 i::after,
.feat__icon--g2 i::after,
.card__icon--g2 i::after,
.mega-link__icon--g2 i::after {
content: "";
position: absolute; top: -8px; left: -6px;
width: 12px; height: 12px; z-index: 3;
background:
radial-gradient(circle, rgba(255,255,255,0.95) 0 1.5px, transparent 2px),
linear-gradient(#fff,#fff) center/2px 12px no-repeat,
linear-gradient(#fff,#fff) center/12px 2px no-repeat;
opacity: 0.9; pointer-events: none;
}
/* Lucide tags stay above the glass layers */
.service__icon i,
.industry-card__icon i,
.industry-stats__icon i,
.industry-diff__visual-icon i,
.mega-link__icon i,
.feat__icon i,
.card__icon i,
.icon-glass i {
position: relative; z-index: 2;
display: inline-flex; align-items: center; justify-content: center;
}
/* Numeral inside a glass tile (step indicators, replacing number emojis) */
.feat__icon .feat__num, .card__icon .feat__num {
position: relative; z-index: 2;
font-family: var(--font-display); font-weight: var(--fw-extrabold);
font-size: 20px; color: #fff; line-height: 1;
}
/* ----- Sector / brand colour variants ----- */
/* Industry cards already set --sector / --sector-bg; map to --ig-* */
.industry-card__icon {
--ig-c1: color-mix(in srgb, var(--sector,#27AAE1) 25%, white);
--ig-c2: var(--sector,#27AAE1);
--ig-c3: color-mix(in srgb, var(--sector,#27AAE1) 70%, #0B1426);
--ig-shadow: color-mix(in srgb, var(--sector,#27AAE1) 40%, transparent);
}
/* Orange variant (explainer videos / accent) */
.icon-glass--orange,
.feat__icon--orange,
.card__icon--orange {
--ig-c1: #FFD9A8;
--ig-c2: #F57612;
--ig-c3: #B0500A;
--ig-shadow: rgba(245,118,18,0.45);
}
/* Green variant (success / health) */
.icon-glass--green,
.feat__icon--green,
.card__icon--green {
--ig-c1: #B7F0C2;
--ig-c2: #22C55E;
--ig-c3: #157A3A;
--ig-shadow: rgba(34,197,94,0.45);
}
/* Purple variant (premium / SaaS) */
.icon-glass--purple,
.feat__icon--purple,
.card__icon--purple {
--ig-c1: #D2C2FA;
--ig-c2: #7C3AED;
--ig-c3: #4C1D95;
--ig-shadow: rgba(124,58,237,0.45);
}
/* Dark variant */
.icon-glass--dark {
--ig-c1: #4A5871;
--ig-c2: #1F2D45;
--ig-c3: #0B1426;
--ig-shadow: rgba(11,20,38,0.5);
}
/* ----- Sizing per context ----- */
.service__icon { width: 64px !important; height: 64px !important; --ig-radius: 18px; }
.service__icon svg { width: 26px !important; height: 26px !important; }
.industry-card__icon { width: 56px !important; height: 56px !important; --ig-radius: 16px; }
.industry-card__icon svg { width: 24px !important; height: 24px !important; }
.industry-stats__icon { width: 48px !important; height: 48px !important; --ig-radius: 14px; }
.industry-stats__icon svg { width: 22px !important; height: 22px !important; }
.industry-diff__visual-icon { width: 56px !important; height: 56px !important; --ig-radius: 16px; }
.industry-diff__visual-icon svg { width: 24px !important; height: 24px !important; }
.mega-link__icon {
width: 36px !important; height: 36px !important;
--ig-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
}
.mega-link__icon svg { width: 18px !important; height: 18px !important; }
/* Hover lift + slight rotation */
.service:hover .service__icon,
.industry-card:hover .industry-card__icon,
.industry-stats__box:hover .industry-stats__icon,
.industry-diff__visual-card:hover .industry-diff__visual-icon,
.mega-link:hover .mega-link__icon {
transform: translateY(-2px) scale(1.06) rotate(-3deg);
}
.service__icon, .industry-card__icon, .industry-stats__icon, .industry-diff__visual-icon, .mega-link__icon {
transition: transform var(--dur-fast) var(--ease);
}
/* Industries-row chips (homepage) — minor glass tint */
.ind-chip {
background: linear-gradient(135deg, rgba(199,229,245,0.6), rgba(91,190,232,0.15)) !important;
border: 1px solid rgba(39,170,225,0.25) !important;
color: var(--ink) !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.ind-chip i { color: var(--hot-blue); }
.ind-chip:hover {
background: linear-gradient(135deg, var(--hot-blue), var(--hot-blue-600)) !important;
color: #fff !important;
border-color: transparent !important;
}
.ind-chip:hover i,
.ind-chip:hover svg { color: #fff !important; stroke: #fff !important; }
/* Inline industries-row icons stay simple */
.ind-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px;
background: linear-gradient(135deg, var(--ig-c1), var(--ig-c2) 55%, var(--ig-c3));
color: #fff;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.35);
box-shadow:
0 12px 28px -10px var(--ig-shadow),
inset 0 1px 0 rgba(255,255,255,0.5);
font-size: 22px;
margin-bottom: var(--space-3);
}
/* Ensure check-icon (used on lists) stays small/circular but glassy */
.check-icon { width: 24px !important; height: 24px !important; --ig-radius: 50%; }
.check-icon::before, .check-icon::after { display: none; }
.check-icon svg { width: 14px !important; height: 14px !important; }
/* Fallback: any data-lucide rendered without a styled wrapper still gets baseline */
[data-lucide] { vertical-align: middle; }
/* Make the homepage 'featured 3 services' row gradient strip blend with glass — already removed since 3x3 grid is uniform */
/* ============================================================
HERO — seamless image, aligned with heading top
============================================================ */
.hero__grid-wrap {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: var(--space-8);
align-items: start;
}
.hero__visual {
position: relative;
display: flex;
align-items: center; /* vertically centre against the copy block */
justify-content: center;
padding-top: 0;
}
.hero__img {
width: 116%; /* enlarge the transparent illustration */
max-width: none;
height: auto;
display: block;
border-radius: 0;
box-shadow: none;
background: transparent;
/* Bleed toward the viewport edge and pull up to optically balance */
margin-right: calc(var(--space-8) * -1);
margin-left: calc(var(--space-6) * -1);
}
@media (max-width: 1100px) {
.hero__img { width: 108%; margin-right: 0; margin-left: 0; }
}
@media (max-width: 900px) {
.hero__grid-wrap { grid-template-columns: 1fr !important; gap: var(--space-5); }
.hero__visual { margin-top: var(--space-3); }
.hero__img { width: 100%; max-width: 560px; }
}
/* Remove default container padding constraint on the right of hero so image bleeds */
.hero .hero__grid-wrap { padding-right: 0; }
@media (max-width: 1100px) { .hero .hero__grid-wrap { padding-right: var(--space-5); } }
/* Make hero block taller so left text + right image don't fight */
.hero { min-height: 560px; }
@media (max-width: 900px) { .hero { min-height: 0; } }
/* ============================================================
LOGO — mobile nav + footer
============================================================ */
.mobile-nav__logo {
height: 32px; width: auto; display: block;
}
.footer__brand-logo {
height: 40px; width: auto; display: block;
margin-bottom: var(--space-4);
/* logo.svg is dark — invert it so it reads white on dark footer */
filter: brightness(0) invert(1);
opacity: 0.95;
}
/* Slightly larger nav logo on big screens */
.nav__logo img {
height: 36px; width: auto; max-width: 180px;
display: block;
}
@media (max-width: 700px) { .nav__logo img { height: 32px; } }
/* ============================================================
NAV LOGO — guaranteed visible
============================================================ */
.nav__logo {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.nav__logo img,
.nav__logo-img {
display: block !important;
height: 36px !important;
width: auto !important;
max-width: 200px !important;
object-fit: contain;
}
@media (max-width: 700px) {
.nav__logo img,
.nav__logo-img { height: 30px !important; }
}
/* ============================================================
JOURNEY — 4-step variant (our-process.html)
============================================================ */
.journey--four .journey__wrap { min-height: 480px; }
.journey--four .journey__path { height: 320px; }
.journey--four .journey__milestones {
grid-template-columns: repeat(4, 1fr);
}
.journey--four .journey__milestone--top { padding-bottom: 220px; }
.journey--four .journey__milestone--bottom { padding-top: 220px; }
/* ============================================================
FLOW — clean 4-step process (our-process.html)
============================================================ */
.flow { margin-top: 52px; }
.flow__row { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.flow__row::before {
content: ''; position: absolute; top: 28px; left: 12.5%; right: 12.5%; height: 3px; z-index: 0;
background: linear-gradient(90deg, #27AAE1, #108CFF, #23B3A8, #1E6FA8);
border-radius: 2px; transform: scaleX(0); transform-origin: left;
transition: transform 1.6s var(--ease);
}
.flow.is-visible .flow__row::before { transform: scaleX(1); }
.flow-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.flow-step__num {
width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
font-family: var(--font-display); font-weight: 800; font-size: 18px; color: #fff;
background: var(--accent); box-shadow: 0 10px 22px -8px var(--accent);
border: 4px solid var(--surface); margin-bottom: 24px;
}
.flow-step__card {
background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
padding: 24px; width: 100%; position: relative; overflow: hidden;
transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.flow-step__card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--accent); }
.flow-step:hover .flow-step__card { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.flow-step__tag {
display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 11px;
letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent);
background: color-mix(in oklab, var(--accent) 12%, var(--surface)); padding: 5px 11px;
border-radius: 999px; margin-bottom: 12px;
}
.flow-step__card h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); line-height: 1.2; color: var(--ink); margin: 0 0 8px; }
.flow-step__card p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: 1.55; margin: 0 0 14px; }
.flow-step ul { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.flow-step ul li { position: relative; padding-left: 20px; font-size: 13.5px; color: var(--ink); line-height: 1.45; }
.flow-step ul li::before { content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.flow-step__week {
display: flex; align-items: center; gap: 7px; width: 100%; padding-top: 13px;
border-top: 1px solid var(--border); font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--accent);
}
.flow-step__week i { width: 15px; height: 15px; }
@media (max-width: 1000px) {
.flow__row { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
.flow__row::before { display: none; }
}
@media (max-width: 560px) { .flow__row { grid-template-columns: 1fr; } }
@media (max-width: 1100px) {
.journey--four .journey__milestones { grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-5); }
.journey--four .journey__path { display: none; }
.journey--four .journey__wrap { min-height: 0; }
.journey--four .journey__milestone,
.journey--four .journey__milestone--top,
.journey--four .journey__milestone--bottom {
flex-direction: column !important;
align-items: center !important;
padding: 0 !important;
}
.journey--four .journey__milestones::before { display: none; }
}
@media (max-width: 700px) {
.journey--four .journey__milestones { grid-template-columns: 1fr; }
.journey--four .journey__milestone,
.journey--four .journey__milestone--top,
.journey--four .journey__milestone--bottom {
flex-direction: row !important;
align-items: flex-start !important;
gap: var(--space-4);
}
.journey--four .journey__milestones {
position: relative;
}
.journey--four .journey__milestones::before {
content: "";
display: block;
position: absolute;
left: 28px; top: 28px; bottom: 28px;
width: 2px;
background: linear-gradient(180deg, #27AAE1, #F57612, #22C55E, #0B1426);
z-index: 0;
}
.journey--four .journey__num { margin: 0; flex-shrink: 0; width: 48px; height: 48px; font-size: 16px; }
.journey--four .journey__card { flex: 1; }
}
/* ----- ILT → eLEARNING TRANSFORMER (conversion page) ----- */
.ilt-switch {
display: inline-flex; align-items: center; position: relative;
background: var(--surface-alt); border: 1px solid var(--line);
border-radius: var(--radius-full); padding: 5px; gap: 0; cursor: pointer;
user-select: none; margin: 0 auto var(--space-6); box-shadow: var(--shadow-sm);
}
.ilt-switch__thumb {
position: absolute; top: 5px; left: 5px; height: calc(100% - 10px); width: calc(50% - 5px);
background: var(--hot-blue); border-radius: var(--radius-full);
transition: transform var(--dur) var(--ease); box-shadow: 0 6px 16px -6px rgba(39,170,225,0.6); z-index: 0;
}
.ilt-switch.is-digital .ilt-switch__thumb { transform: translateX(100%); }
.ilt-switch__opt {
position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-display); font-weight: 700; font-size: 15px;
color: var(--ink-mute); padding: 10px 26px; border-radius: var(--radius-full);
transition: color var(--dur-fast) var(--ease); white-space: nowrap;
}
.ilt-switch__opt i { width: 17px; height: 17px; }
.ilt-switch:not(.is-digital) .ilt-switch__opt[data-mode="classroom"],
.ilt-switch.is-digital .ilt-switch__opt[data-mode="digital"] { color: #fff; }
.ilt-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .ilt-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ilt-cards { grid-template-columns: 1fr; } }
.ilt-card { min-height: 260px; cursor: pointer; }
.ilt-card__inner {
position: relative; width: 100%; height: 100%; min-height: 300px;
}
.ilt-face {
position: absolute; inset: 0;
border-radius: var(--radius-lg); padding: var(--space-5);
display: flex; flex-direction: column; gap: 12px;
transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.ilt-face--front {
background: var(--surface-alt); border: 1px solid var(--line);
opacity: 1; transform: translateY(0) scale(1); visibility: visible;
transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0s 0s;
}
.ilt-face--back {
background: linear-gradient(160deg, #0F2036, #0B1426); border: 1px solid rgba(255,255,255,0.1);
opacity: 0; transform: translateY(10px) scale(0.97); pointer-events: none; visibility: hidden;
transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0s 0.45s;
}
.ilt-card.is-digital .ilt-face--front { opacity: 0; transform: translateY(-10px) scale(0.97); pointer-events: none; visibility: hidden; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0s 0.45s; }
.ilt-card.is-digital .ilt-face--back { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0s 0s; }
.ilt-face__icon {
width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ilt-face--front .ilt-face__icon { background: #E6EAF0; color: var(--ink-mute); }
.ilt-face--front .ilt-face__icon i { width: 26px; height: 26px; }
.ilt-face--back .ilt-face__icon {
background: linear-gradient(160deg, rgba(39,170,225,0.9), rgba(30,111,168,0.9));
color: #fff; box-shadow: 0 10px 22px -8px rgba(39,170,225,0.7);
}
.ilt-face--back .ilt-face__icon i { width: 26px; height: 26px; }
.ilt-face__tag {
align-self: flex-start; font-family: var(--font-display); font-weight: 700; font-size: 11px;
letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-full);
}
.ilt-face--front .ilt-face__tag { background: #E6EAF0; color: var(--ink-mute); }
.ilt-face--back .ilt-face__tag { background: rgba(39,170,225,0.18); color: #7FD0F0; }
.ilt-face h4 { font-family: var(--font-display); font-size: 18px; margin: 0; line-height: 1.25; }
.ilt-face--front h4 { color: var(--ink); }
.ilt-face--back h4 { color: #fff; }
.ilt-face p { font-size: 14px; line-height: 1.55; margin: 0; }
.ilt-face--front p { color: var(--ink-mute); }
.ilt-face--back p { color: rgba(255,255,255,0.68); }
.ilt-face__foot { margin-top: auto; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.ilt-face--front .ilt-face__foot { color: var(--ink-mute); }
.ilt-face--back .ilt-face__foot { color: #7FD0F0; }
.ilt-face__foot i { width: 15px; height: 15px; }
.ilt-hint { text-align: center; margin-top: var(--space-5); color: var(--ink-mute); font-size: 14px; }
.ilt-hint strong { color: var(--hot-blue); }
/* ----- STANDARDS EXPLORER (scorm/xapi page) ----- */
.stex { max-width: 1040px; margin: 0 auto; }
.stex-tabs {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px;
}
.stex-tab {
display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
padding: 16px 18px; border-radius: var(--radius-lg); background: var(--surface-alt);
border: 1px solid var(--line); cursor: pointer; text-align: left;
transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.stex-tab:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stex-tab__name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.stex-tab__meta { font-size: 12px; color: var(--ink-mute); }
.stex-tab.is-active {
background: linear-gradient(160deg, #0F2036, #0B1426); border-color: transparent;
box-shadow: 0 16px 34px -14px rgba(15,32,54,.55); transform: translateY(-2px);
}
.stex-tab.is-active .stex-tab__name { color: #fff; }
.stex-tab.is-active .stex-tab__meta { color: #7FD0F0; }
.stex-panel {
display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0;
border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
background: var(--w-card); box-shadow: var(--shadow-lg);
}
.stex-info { padding: 32px; }
.stex-info__badge {
display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display);
font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
color: var(--hot-blue); background: var(--hot-blue-100); padding: 5px 12px;
border-radius: var(--radius-full); margin-bottom: 16px;
}
.stex-info h3 { font-family: var(--font-display); font-size: 24px; margin: 0 0 10px; color: var(--ink); }
.stex-info__desc { font-size: 15px; line-height: 1.6; color: var(--ink-mute); margin: 0 0 22px; }
.stex-info__label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 10px; }
.stex-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.stex-chip {
display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
color: var(--ink); background: var(--surface-alt); border: 1px solid var(--line);
padding: 6px 12px; border-radius: var(--radius-full);
}
.stex-chip i { width: 14px; height: 14px; color: var(--hot-blue); }
.stex-compat { display: flex; flex-direction: column; gap: 6px; }
.stex-compat__row { display: flex; align-items: center; gap: 12px; }
.stex-compat__bar { flex: 1; height: 8px; border-radius: var(--radius-full); background: var(--surface-alt); overflow: hidden; }
.stex-compat__fill { height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--hot-blue), #1E6FA8); transition: width .6s var(--ease); }
.stex-compat__val { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); min-width: 44px; text-align: right; }
.stex-flow {
background: linear-gradient(160deg, #0F2036, #0B1426); color: #fff;
padding: 32px; display: flex; flex-direction: column;
}
.stex-flow__title { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #7FD0F0; margin: 0 0 20px; }
.stex-flow__diagram { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 22px; }
.stex-node {
flex: 1; text-align: center; padding: 14px 8px; border-radius: 12px;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.stex-node i { width: 22px; height: 22px; color: #7FD0F0; }
.stex-node span { display: block; font-size: 12px; font-weight: 600; margin-top: 8px; color: rgba(255,255,255,.85); }
.stex-arrow { color: rgba(127,208,240,.7); flex-shrink: 0; }
.stex-arrow i { width: 20px; height: 20px; }
.stex-log { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 150px; }
.stex-log__line {
display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.8);
padding: 9px 12px; border-radius: 9px; background: rgba(255,255,255,.05);
opacity: 0; transform: translateX(-8px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.stex-log__line.is-in { opacity: 1; transform: translateX(0); }
.stex-log__line i { width: 15px; height: 15px; color: #6FD89A; flex-shrink: 0; }
.stex-log__line code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #7FD0F0; }
.stex-play {
align-self: flex-start; margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #0B1426;
background: #7FD0F0; border: none; padding: 9px 18px; border-radius: var(--radius-full); cursor: pointer;
transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.stex-play:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(127,208,240,.6); }
.stex-play i { width: 15px; height: 15px; }
@media (max-width: 860px) {
.stex-tabs { grid-template-columns: repeat(2, 1fr); }
.stex-panel { grid-template-columns: 1fr; }
}
/* ============================================================
VIDEO STYLE STUDIO — explainer-videos page
============================================================ */
.vstudio {
--vs-accent: var(--hot-blue);
display: grid; grid-template-columns: 300px 1fr;
gap: var(--space-6); margin-top: var(--space-7);
align-items: start;
}
.vstudio__rail { display: flex; flex-direction: column; gap: 10px; }
.vstyle-btn {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px; border-radius: 14px;
border: 1.5px solid var(--line); background: var(--surface);
cursor: pointer; text-align: left; width: 100%;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.vstyle-btn:hover { transform: translateX(3px); border-color: var(--vsb, var(--hot-blue)); }
.vstyle-btn.is-active {
border-color: var(--vsb); background: color-mix(in oklab, var(--vsb) 8%, var(--surface));
box-shadow: 0 6px 20px -12px var(--vsb);
}
.vstyle-btn__ico {
width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px;
display: grid; place-items: center; color: #fff;
background: linear-gradient(135deg, var(--vsb), color-mix(in oklab, var(--vsb) 60%, #000));
}
.vstyle-btn__ico i { width: 20px; height: 20px; }
.vstyle-btn__tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vstyle-btn__tx strong { font-size: var(--fs-base); color: var(--ink); font-weight: var(--fw-bold); }
.vstyle-btn__tx span { font-size: var(--fs-xs); color: var(--ink-mute); }
.vstudio__stage { display: flex; flex-direction: column; gap: var(--space-4); }
.vplayer {
position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden;
background: #0d1220; border: 1px solid rgba(255,255,255,.08);
box-shadow: var(--shadow-lg);
}
.vplayer__scene { position: absolute; inset: 0; }
.vscene { position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--ease); display: grid; place-items: center; }
.vscene.is-on { opacity: 1; }
/* 2D — bouncing flat character shapes */
.vs-2d { background: radial-gradient(circle at 30% 30%, #12324a, #0d1220); }
.vs-2d .b { position: absolute; border-radius: 50%; }
.vs-2d .b1 { width: 90px; height: 90px; left: 22%; top: 34%; background: #27AAE1; animation: vbob 2.4s ease-in-out infinite; }
.vs-2d .b2 { width: 54px; height: 54px; left: 44%; top: 46%; background: #F5C86B; border-radius: 14px; animation: vbob 2.4s ease-in-out infinite .3s; }
.vs-2d .b3 { width: 68px; height: 68px; left: 62%; top: 30%; background: #A79BF0; animation: vbob 2.4s ease-in-out infinite .6s; }
.vs-2d .g { position: absolute; left: 12%; right: 12%; bottom: 22%; height: 3px; background: rgba(255,255,255,.18); border-radius: 3px; }
@keyframes vbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
/* 3D — layered depth cards */
.vs-3d { background: linear-gradient(135deg, #0f1830, #0d1220); perspective: 700px; }
.vs-3d .card3 {
position: absolute; width: 130px; height: 84px; border-radius: 12px; left: 50%; top: 50%;
transform-style: preserve-3d; animation: vspin 6s linear infinite;
}
.vs-3d .f {
position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden;
display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px;
}
.vs-3d .fa { background: linear-gradient(135deg, #5AA8FF, #1667C8); transform: translateZ(42px); }
.vs-3d .fb { background: linear-gradient(135deg, #4FC9C0, #1E8F87); transform: rotateY(90deg) translateZ(42px); }
.vs-3d .fc { background: linear-gradient(135deg, #A79BF0, #6C5CD6); transform: rotateY(180deg) translateZ(42px); }
.vs-3d .fd { background: linear-gradient(135deg, #F5C86B, #D69A2E); transform: rotateY(270deg) translateZ(42px); }
@keyframes vspin { from { transform: translate(-50%,-50%) rotateX(-12deg) rotateY(0); } to { transform: translate(-50%,-50%) rotateX(-12deg) rotateY(360deg); } }
/* Motion graphics — kinetic bars + counter */
.vs-mg { background: linear-gradient(135deg, #1a1330, #0d1220); }
.vs-mg .bars { position: absolute; left: 14%; right: 14%; bottom: 26%; display: flex; gap: 8px; align-items: flex-end; height: 46%; }
.vs-mg .bar { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #A79BF0, #6C5CD6); animation: vgrow 1.6s ease-in-out infinite alternate; }
.vs-mg .bar:nth-child(2){ animation-delay:.2s; background: linear-gradient(180deg,#5AA8FF,#1667C8);}
.vs-mg .bar:nth-child(3){ animation-delay:.4s; background: linear-gradient(180deg,#4FC9C0,#1E8F87);}
.vs-mg .bar:nth-child(4){ animation-delay:.6s; background: linear-gradient(180deg,#F5C86B,#D69A2E);}
.vs-mg .bar:nth-child(5){ animation-delay:.8s;}
.vs-mg .num { position: absolute; left: 14%; top: 20%; font-size: 40px; font-weight: 800; color: #fff; font-family: var(--font-display); letter-spacing: -1px; }
@keyframes vgrow { from { height: 24%; } to { height: 100%; } }
/* Whiteboard — hand-draw line */
.vs-wb { background: #f7f6f2; }
.vs-wb svg { width: 74%; height: 74%; }
.vs-wb .draw { stroke: #1a2b3c; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 620; stroke-dashoffset: 620; animation: vdraw 3.4s ease-in-out infinite; }
.vs-wb .hand { fill: #27AAE1; animation: vhand 3.4s ease-in-out infinite; }
@keyframes vdraw { 0% { stroke-dashoffset: 620; } 60%,100% { stroke-dashoffset: 0; } }
@keyframes vhand { 0%{ transform: translate(0,0);} 60%,100%{ transform: translate(120px,-16px);} }
/* Live — film frame lower-third */
.vs-live { background: linear-gradient(160deg, #1c2530, #0d1220); }
.vs-live .frame { position: absolute; inset: 10% 12%; border-radius: 10px; background: linear-gradient(135deg,#2e3a48,#1a222c); overflow: hidden; }
.vs-live .frame::after { content:""; position:absolute; inset:0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.09) 50%, transparent 60%); animation: vshine 3s ease-in-out infinite; }
.vs-live .lt { position: absolute; left: 16%; bottom: 22%; height: 30px; width: 44%; border-radius: 6px; background: rgba(39,170,225,.85); }
.vs-live .rec { position: absolute; right: 16%; top: 16%; display:flex; align-items:center; gap:6px; color:#fff; font-size:11px; font-weight:700; }
.vs-live .rec .dot { width:9px; height:9px; border-radius:50%; background:#ff4d4d; animation: vblink 1.2s steps(1) infinite; }
@keyframes vshine { 0%,100%{ transform: translateX(-30%);} 50%{ transform: translateX(30%);} }
@keyframes vblink { 50% { opacity: 0; } }
/* Hybrid — split live + animation */
.vs-hy { background: #0d1220; }
.vs-hy .half { position: absolute; top: 0; bottom: 0; width: 50%; display: grid; place-items: center; }
.vs-hy .left { left: 0; background: linear-gradient(135deg,#2e3a48,#1a222c); }
.vs-hy .right { right: 0; background: radial-gradient(circle at 50% 40%, #12324a, #0d1220); }
.vs-hy .right .o { width: 60px; height: 60px; border-radius: 50%; background: #27AAE1; animation: vbob 2.2s ease-in-out infinite; }
.vs-hy .seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.25); transform: translateX(-1px); }
/* play chrome */
.vplayer__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent); }
.vplayer__bar .pp { width: 22px; height: 22px; border-radius: 50%; background: var(--vs-accent); display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.vplayer__bar .pp i { width: 12px; height: 12px; }
.vplayer__track { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; }
.vplayer__fill { height: 100%; width: 34%; background: var(--vs-accent); border-radius: 4px; animation: vprog 8s linear infinite; }
@keyframes vprog { from { width: 4%; } to { width: 100%; } }
.vplayer__time { font-size: 11px; color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.vplayer__badge { position: absolute; left: 14px; top: 14px; z-index: 2; font-size: 11px; font-weight: 700; color: #fff; background: var(--vs-accent); padding: 5px 11px; border-radius: 999px; letter-spacing: .3px; }
.vstudio__info { background: var(--surface); border: var(--border); border-radius: 14px; padding: var(--space-5); }
.vstudio__info h3 { font-size: var(--fs-xl); color: var(--ink); margin-bottom: 6px; }
.vstudio__info > p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: var(--lh-relaxed); margin-bottom: var(--space-4); }
.vstudio__meta { display: flex; flex-wrap: wrap; gap: var(--space-5); padding-top: var(--space-4); border-top: 1px dashed var(--line); }
.vmeta { display: flex; flex-direction: column; gap: 2px; }
.vmeta__k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .6px; color: var(--ink-mute); font-weight: 700; }
.vmeta__v { font-size: var(--fs-base); color: var(--ink); font-weight: 700; }
.vchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-4); }
.vchip { font-size: var(--fs-xs); font-weight: 600; padding: 5px 11px; border-radius: 999px; background: color-mix(in oklab, var(--vs-accent) 12%, var(--surface)); color: color-mix(in oklab, var(--vs-accent) 75%, #000); border: 1px solid color-mix(in oklab, var(--vs-accent) 25%, transparent); }
@media (max-width: 880px) {
.vstudio { grid-template-columns: 1fr; }
.vstudio__rail { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
.vstyle-btn { flex-shrink: 0; min-width: 210px; }
}
/* ============================================================
LOCALIZATION STUDIO — multilingual page
============================================================ */
.locstudio { --loc-accent: #2E9E63; display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
.locstudio__rail { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; padding-right: 6px; }
.locstudio__rail::-webkit-scrollbar { width: 6px; }
.locstudio__rail::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--loc-accent) 30%, transparent); border-radius: 6px; }
.loc-lang {
display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px;
padding: 11px 13px; transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); flex-shrink: 0;
}
.loc-lang:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--llc,#2E9E63) 45%, var(--border)); }
.loc-lang.is-active { border-color: var(--llc,#2E9E63); box-shadow: 0 8px 20px -10px color-mix(in oklab, var(--llc,#2E9E63) 60%, transparent); background: color-mix(in oklab, var(--llc,#2E9E63) 6%, var(--surface)); }
.loc-lang__code {
flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .5px;
color: #fff; background: var(--llc,#2E9E63);
}
.loc-lang__tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.loc-lang__tx strong { font-family: var(--font-display); font-size: 14.5px; color: var(--hot-dark); line-height: 1.2; }
.loc-lang__tx span { font-size: 15px; color: var(--ink-mute); line-height: 1.2; }
.loc-lang__tx span[dir="rtl"] { direction: rtl; }
.locstudio__stage { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; }
.loc-frame {
--loc-accent: #2E9E63; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
box-shadow: 0 24px 60px -30px rgba(11,20,38,.35); display: flex; flex-direction: column;
}
.loc-frame__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: color-mix(in oklab, var(--loc-accent) 10%, var(--surface)); border-bottom: 1px solid var(--border); }
.loc-frame__dots { display: flex; gap: 5px; }
.loc-frame__dots span { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in oklab, var(--loc-accent) 35%, var(--border)); }
.loc-frame__url { font-size: 12px; color: var(--ink-mute); font-family: ui-monospace, Menlo, monospace; margin-left: 4px; }
.loc-frame__flag { margin-left: auto; font-family: var(--font-display); font-weight: 800; font-size: 11px; color: #fff; background: var(--loc-accent); padding: 3px 9px; border-radius: 999px; letter-spacing: .5px; }
.loc-frame__body { padding: 26px 26px 24px; flex: 1; transition: opacity .25s var(--ease); }
.loc-frame__body[dir="rtl"] { text-align: right; }
.loc-eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--loc-accent); margin-bottom: 12px; }
.loc-frame__title { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.15; color: var(--hot-dark); margin: 0 0 14px; }
.loc-frame__lead { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0 0 22px; }
.loc-vo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: color-mix(in oklab, var(--loc-accent) 8%, var(--surface)); border: 1px solid color-mix(in oklab, var(--loc-accent) 20%, transparent); border-radius: 13px; margin-bottom: 18px; }
.loc-frame__body[dir="rtl"] .loc-vo { flex-direction: row-reverse; }
.loc-vo__btn { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--loc-accent); color: #fff; display: grid; place-items: center; cursor: pointer; }
.loc-vo__btn i { width: 17px; height: 17px; }
.loc-vo__wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 26px; }
.loc-vo__wave span { flex: 1; background: color-mix(in oklab, var(--loc-accent) 55%, transparent); border-radius: 3px; animation: locwave 1.1s ease-in-out infinite; }
@keyframes locwave { 0%,100% { height: 22%; } 50% { height: 90%; } }
.loc-vo__meta { flex-shrink: 0; text-align: right; }
.loc-frame__body[dir="rtl"] .loc-vo__meta { text-align: left; }
.loc-vo__meta strong { display: block; font-family: var(--font-display); font-size: 13px; color: var(--hot-dark); }
.loc-vo__meta span { font-size: 15px; color: var(--ink-mute); }
.loc-cta-mock { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff; background: var(--loc-accent); padding: 11px 22px; border-radius: 999px; }
.loc-side { display: flex; flex-direction: column; gap: 14px; }
.loc-side__head { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-mute); }
.loc-adapt { display: flex; flex-direction: column; gap: 10px; }
.loc-adapt__item { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; }
.loc-adapt__ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in oklab, var(--loc-accent) 12%, var(--surface)); color: var(--loc-accent); }
.loc-adapt__ico i { width: 17px; height: 17px; }
.loc-adapt__tx strong { display: block; font-family: var(--font-display); font-size: 14px; color: var(--hot-dark); margin-bottom: 2px; }
.loc-adapt__tx span { font-size: 15px; color: var(--ink-mute); line-height: 1.45; }
@media (max-width: 980px) { .locstudio__stage { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
.locstudio { grid-template-columns: 1fr; }
.locstudio__rail { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; }
.loc-lang { flex-shrink: 0; min-width: 180px; }
}
/* ============================================================
CREDENTIAL CARD — online degree page (replaces flat visual-block)
============================================================ */
.cred-panel { display: flex; flex-direction: column; gap: 16px; align-self: start; }
.cred-card {
background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
box-shadow: 0 24px 60px -32px rgba(11,20,38,.4);
}
.cred-card__ribbon {
background: linear-gradient(120deg, var(--hot-dark), color-mix(in oklab, var(--hot-blue) 70%, var(--hot-dark)));
color: #fff; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between;
}
.cred-card__ribbon strong { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .3px; }
.cred-card__ribbon span { font-size: 15px; opacity: .8; }
.cred-card__body { padding: 24px; }
.cred-card__label { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--hot-blue); }
.cred-card__title { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.2; color: var(--hot-dark); margin: 8px 0 4px; }
.cred-card__sub { font-size: 15px; color: var(--ink-mute); margin: 0 0 20px; }
.cred-card__seal {
flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.4);
}
.cred-card__seal i { width: 22px; height: 22px; }
.cred-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cred-meta__item { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; }
.cred-meta__k { font-size: 12px; color: var(--ink-mute); font-weight: 600; }
.cred-meta__v { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--hot-dark); margin-top: 2px; }
.cred-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.cred-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 14px; text-align: center; }
.cred-stat__n { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--hot-blue); line-height: 1; }
.cred-stat__l { font-size: 15px; color: var(--ink-mute); margin-top: 6px; line-height: 1.35; }
/* ============================================================
SEMESTER JOURNEY — interactive course anatomy
============================================================ */
.semester { --sem-accent: var(--hot-blue); }
.semester__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sem-seg {
position: relative; text-align: left; cursor: pointer; background: var(--surface);
border: 1.5px solid var(--border); border-bottom: none; border-radius: 14px 14px 0 0;
padding: 16px 18px 20px; transition: background .2s var(--ease), border-color .2s var(--ease);
}
.sem-seg::after { content: ''; position: absolute; left: -0.5px; right: -0.5px; bottom: 0; height: 4px; background: var(--border); transition: background .2s var(--ease); }
.sem-seg:hover { background: color-mix(in oklab, var(--sem-accent) 5%, var(--surface)); }
.sem-seg.is-active { border-color: var(--sem-accent); }
.sem-seg.is-active::after { background: var(--sem-accent); height: 4px; }
.sem-seg__no { font-family: var(--font-display); font-weight: 800; font-size: 12px; color: var(--sem-accent); opacity: .5; }
.sem-seg__wk { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--sem-accent); margin-top: 4px; }
.sem-seg__name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--hot-dark); margin-top: 3px; line-height: 1.2; }
.semester__panel {
border: 1.5px solid var(--sem-accent); border-radius: 0 0 20px 20px; background: var(--surface);
padding: 34px; display: grid; grid-template-columns: 1fr .92fr; gap: 40px; align-items: start;
}
.sem-info { transition: opacity .25s var(--ease); }
.sem-info__eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sem-accent); }
.sem-info__title { font-family: var(--font-display); font-weight: 800; font-size: 27px; line-height: 1.15; color: var(--hot-dark); margin: 8px 0 12px; }
.sem-info__desc { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0 0 22px; }
.sem-acts { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.sem-acts li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; color: var(--ink); line-height: 1.45; }
.sem-acts li i { flex-shrink: 0; width: 18px; height: 18px; color: var(--sem-accent); margin-top: 2px; }
.sem-mix__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.sem-mix__head strong { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-mute); }
.sem-mix__bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.sem-mix__bar span { transition: width .4s var(--ease); }
.sem-mix__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.sem-mix__legend span { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--ink-mute); }
.sem-mix__legend span::before { content: ''; width: 11px; height: 11px; border-radius: 3px; background: var(--dot); }
.sem-card { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; transition: opacity .25s var(--ease); }
.sem-card__bar { display: flex; align-items: center; gap: 8px; padding: 13px 18px; background: var(--surface); border-bottom: 1px solid var(--border); }
.sem-card__bar i { width: 18px; height: 18px; color: var(--sem-accent); }
.sem-card__bar strong { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--hot-dark); }
.sem-card__bar em { margin-left: auto; font-style: normal; font-size: 15px; color: var(--ink-mute); }
.sem-lessons { padding: 8px 0; }
.sem-lesson { display: flex; align-items: center; gap: 13px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.sem-lesson:last-child { border-bottom: none; }
.sem-lesson__ico { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in oklab, var(--sem-accent) 12%, var(--surface)); color: var(--sem-accent); }
.sem-lesson__ico i { width: 16px; height: 16px; }
.sem-lesson__tx { flex: 1; min-width: 0; }
.sem-lesson__tx strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--hot-dark); }
.sem-lesson__tx span { font-size: 14px; color: var(--ink-mute); }
.sem-card__foot { padding: 14px 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sem-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 999px; background: color-mix(in oklab, var(--sem-accent) 12%, var(--surface)); color: var(--sem-accent); }
.sem-chip i { width: 14px; height: 14px; }
@media (max-width: 900px) {
.semester__panel { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
.semester__track { grid-template-columns: 1fr 1fr; }
.sem-seg { border-radius: 12px; border-bottom: 1.5px solid var(--border); }
.sem-seg.is-active { border-bottom-color: var(--sem-accent); }
}
/* ============================================================
PILLARS — about page philosophy
============================================================ */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pillar {
position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-2xl); padding: 30px;
transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.pillar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--accent); }
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.pillar__n {
position: absolute; top: 20px; right: 24px; font-family: var(--font-display); font-weight: 800;
font-size: 34px; line-height: 1; color: color-mix(in oklab, var(--accent) 20%, transparent);
}
.pillar__icon {
width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
background: color-mix(in oklab, var(--accent) 12%, var(--surface)); color: var(--accent); margin-bottom: 18px;
}
.pillar__icon i { width: 26px; height: 26px; }
.pillar h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: var(--ink); margin: 0 0 10px; line-height: 1.2; }
.pillar p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: 1.6; margin: 0; }
.pillars__close { text-align: center; max-width: 720px; margin: 36px auto 0; font-size: var(--fs-md); color: var(--ink); line-height: 1.6; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }
/* ============================================================
RESULT STATS — healthcare/industry results band
============================================================ */
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.result-stat {
position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-2xl); padding: 34px 30px;
transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.result-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); }
.result-stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.result-stat__icon {
width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
background: color-mix(in oklab, var(--accent) 12%, var(--surface)); color: var(--accent); margin-bottom: 18px;
}
.result-stat__icon i { width: 24px; height: 24px; }
.result-stat__num {
font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 4.4vw, 54px);
line-height: 1; color: var(--accent); margin-bottom: 12px; letter-spacing: -1px;
}
.result-stat h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); color: var(--ink); margin: 0 0 8px; line-height: 1.2; }
.result-stat p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: 1.55; margin: 0; }
@media (max-width: 860px) { .result-stats { grid-template-columns: 1fr; } }
/* ============================================================
CONNECT JOURNEY — "what happens next" + multi-path CTA
============================================================ */
.connect { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; margin-top: 44px; }
.connect__step {
position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl);
padding: 30px 28px 28px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.connect__step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--hot-blue); }
.connect__num {
width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #fff;
background: var(--hot-blue); margin-bottom: 16px;
}
.connect__step h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); color: var(--ink); margin: 0 0 8px; }
.connect__step p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: 1.55; margin: 0; }
.connect__step .connect__when { display: block; margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--hot-blue); }
.connect__arrow { display: none; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; position: relative; }
.cta-actions .btn i { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }
.btn-ghost-light {
display: inline-flex; align-items: center; padding: 14px 26px; border-radius: 999px;
font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); text-decoration: none;
color: #fff; border: 1.5px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.06);
transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.6); transform: translateY(-2px); }
.cta-reassure { margin-top: 20px; font-size: 13.5px; color: rgba(255,255,255,0.65); position: relative; }
@media (max-width: 860px) { .connect { grid-template-columns: 1fr; } }
/* ============================================================
SHOWREEL — hero button + lazy Vimeo lightbox
============================================================ */
.btn-showreel {
display: inline-flex; align-items: center; gap: 10px; justify-content: center;
background: var(--hot-dark); color: #fff;
border: 1.5px solid var(--hot-dark);
cursor: pointer;
}
.btn-showreel:hover { background: #16233d; border-color: #16233d; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-showreel__play { display: none; }
.showreel {
position: fixed; inset: 0; z-index: var(--z-modal);
background: rgba(11,20,38,0.82); backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center; padding: var(--space-5);
opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility 0s var(--dur);
}
.showreel.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease); }
.showreel__frame {
width: min(1080px, 100%); border-radius: var(--radius-lg); overflow: hidden;
box-shadow: var(--shadow-xl); background: #000;
transform: scale(0.96); transition: transform var(--dur) var(--ease-out);
}
.showreel.is-open .showreel__frame { transform: scale(1); }
.showreel__close {
position: absolute; top: 22px; right: 24px; width: 44px; height: 44px; border-radius: 50%;
border: none; cursor: pointer; color: #fff; background: rgba(255,255,255,0.14);
display: grid; place-items: center; transition: background var(--dur-fast) var(--ease);
}
.showreel__close:hover { background: rgba(255,255,255,0.28); }
/* ============================================================
RESPONSIVE SAFETY — small-screen guards
============================================================ */
/* Hero highlight phrase may overflow very narrow phones when locked to nowrap */
@media (max-width: 600px) { .hero h1 .hl { white-space: normal; } }
/* Never let any element force horizontal scroll (off-canvas mobile nav parks 380px off-screen) */
html, body { overflow-x: hidden; }
@media (max-width: 600px) {
.nav__dropdown { min-width: min(520px, 88vw); }
}
/* ============================================================
MOBILE UX OPTIMISATION (mobile-only; desktop untouched)
Scoped to max-width:900px / 600px so desktop is unaffected.
============================================================ */
@media (max-width: 900px) {
.form-group input, .form-group select, .form-group textarea { font-size: 16px; }
.mobile-nav__close { width: 44px; height: 44px; }
.mobile-nav__link { min-height: 48px; display: flex; align-items: center; }
.mobile-nav__cta { min-height: 52px; }
.btn { min-height: 44px; }
}
@media (max-width: 600px) {
.hero__ctas { flex-direction: column; align-items: stretch; }
.hero__ctas .btn { width: 100%; justify-content: center; min-height: 50px; }
.hero h1, .inner-hero h1 { font-size: clamp(2.1rem, 9vw, 2.75rem); line-height: 1.12; }
}
/* ============================================================
MOBILE DENSITY TIGHTENING (phones only; desktop untouched)
============================================================ */
@media (max-width: 768px) {
section { padding-top: 44px; padding-bottom: 44px; }
}
@media (max-width: 600px) {
:root {
--space-9: 52px;
--space-8: 40px;
--space-7: 30px;
--space-6: 22px;
--space-5: 20px;
}
section { padding-top: 34px; padding-bottom: 34px; }
.hero { min-height: 0; }
.hero__grid-wrap { gap: 20px !important; }
.hero__ctas { gap: 10px; }
.hero__trust { margin-top: 18px; padding-top: 16px; }
}
/* ============================================================
MOBILE 2UP CARDS (phones only; desktop untouched)
============================================================ */
@media (max-width: 600px) {
.services-grid, .pain-grid, .industries-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.services-grid .service, .pain-grid .pain-card { padding: 16px !important; }
}