/* ============================================================ Leave a Mark — Design System: Colors & Typography Source: LAM Design System 2026.fig Updated: April 2026 ============================================================ */ /* ── Google Fonts ──────────────────────────────────────────── */ /* Loaded via preconnect in each page for faster rendering */ /* ── Local Fonts (Lato) ────────────────────────────────────── */ @font-face { font-family: 'Lato'; src: url('fonts/Lato-Light.ttf'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Lato'; src: url('fonts/Lato-LightItalic.ttf'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Lato'; src: url('fonts/Lato-Regular.ttf'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Lato'; src: url('fonts/Lato-Italic.ttf'); font-weight: 400; font-style: italic; } @font-face { font-family: 'Lato'; src: url('fonts/Lato-Medium.ttf'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Lato'; src: url('fonts/Lato-MediumItalic.ttf'); font-weight: 500; font-style: italic; } @font-face { font-family: 'Lato'; src: url('fonts/Lato-Semibold.ttf'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Lato'; src: url('fonts/Lato-Bold.ttf'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Lato'; src: url('fonts/Lato-BoldItalic.ttf'); font-weight: 700; font-style: italic; } @font-face { font-family: 'Lato'; src: url('fonts/Lato-Heavy.ttf'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Lato'; src: url('fonts/Lato-Black.ttf'); font-weight: 900; font-style: normal; } /* ── Design Tokens ─────────────────────────────────────────── */ :root { /* ── SIGNATURE GRADIENT — the core visual identity ── */ --gradient-brand: linear-gradient( #F7F6F2 6%, #FFFDF6 14%, #F4FFEA 25%, #69E06D 34%, #FDB3A4 47%, #FFB43E 53%, #EF4421 57%, #FFFDF6 64% ); /* ── RED-ORANGE — primary action color ── */ --brand-red: #EF4421; /* ★ PRIMARY */ --brand-red-dk: #C83010; /* hover */ --brand-coral: #F36346; --brand-salmon: #F98A74; /* sprint/pill fills */ --brand-pink: #FDB3A4; --brand-amber: #FFB43E; /* ── GREEN — major brand accent ── */ --green-vivid: #69E06D; /* primary green */ --green-mid: #BAEE9B; /* mid green */ --green-light: #F4FFEA; /* green tint bg */ --green-pale: #CFFAB5; /* very pale green */ --green-glow: rgba(207,250,181,1); /* shadow/glow */ /* ── NAVY — heading color ── */ --navy: #080F30; /* all headings (Lato Bold) */ --navy-mid: #101D51; /* ── NEUTRALS ── */ --neutral-dk: #383838; /* body copy */ --neutral-mid: #E8E8E8; /* card bg */ --neutral-lt: #F7F6F2; /* subtle bg */ /* ── CREAM — page backgrounds ── */ --cream: #FFFDF6; /* ★ primary page bg */ --cream-warm: #FAF8E9; /* slightly warmer */ /* ── Semantic ── */ --surface-page: #FFFDF6; --surface-card: #E8E8E8; --surface-white: #FFFFFF; --surface-dark: #080F30; --surface-green: #F4FFEA; --surface-brand: #EF4421; --fg-primary: #080F30; /* navy — headings */ --fg-secondary: #383838; /* body copy */ --fg-muted: #888888; --fg-inverse: #FFFFFF; --fg-accent: #EF4421; --fg-green: #14662A; --border-subtle: rgba(0,0,0,0.08); --border-default: rgba(0,0,0,0.18); --border-strong: rgba(0,0,0,0.45); /* ── Typography ── */ --font-display: 'Libre Baskerville', Georgia, serif; /* headings */ --font-body: 'Lato', system-ui, sans-serif; /* UI + body */ /* ── Type Scale ── */ --text-xs: 10px; /* Neue Haas Grotesk labels */ --text-sm: 15px; /* captions — Neue Haas 55 Roman */ --text-base: 18px; /* body — Lato Regular */ --text-md: 20px; /* body large — Lato Medium */ --text-lg: 25px; /* subhead — Libre Baskerville */ --text-xl: 30px; --text-2xl: 45px; /* heading */ --text-3xl: 60px; /* page heading */ --text-4xl: 75px; /* Lato ExtraBold display */ --text-5xl: 120px; /* hero numbers */ --text-brand:150px; /* brand display */ /* ── Spacing ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ── Radii ── */ --radius-sm: 4px; --radius-md: 15px; /* cards — Figma value */ --radius-lg: 16px; /* large cards */ --radius-full: 9999px; /* ── Shadows ── */ --shadow-green: 0 4px 24px rgba(105,224,109,0.35); --shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --shadow-md: 0 4px 20px rgba(0,0,0,0.12); --shadow-top: 0px -4px 20px rgba(0,0,0,0.15); /* ── Transitions ── */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 150ms; --dur-normal: 250ms; } /* ── Base ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); line-height: 1.65; color: var(--fg-secondary); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ── Semantic Type ── */ h1, .h1 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-4xl); line-height: 1.07; color: var(--fg-primary); letter-spacing: -0.01em; } h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); line-height: 1.15; color: var(--fg-primary); } h3, .h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.3; color: var(--fg-primary); } h4, .h4 { font-family: var(--font-body); font-weight: 500; font-size: var(--text-md); color: var(--fg-primary); } p { line-height: 1.65; text-wrap: pretty; } /* Sprint pill — from Figma */ .sprint-pill { background: var(--brand-salmon); color: white; font-family: var(--font-display); font-weight: 700; font-size: 25px; border-radius: 15px; padding: 0 24px; height: 62px; display: inline-flex; align-items: center; } /* Green dot accent — from Figma */ .accent-dot { width: 143px; height: 143px; border-radius: 50%; background: var(--brand-red); display: inline-block; } /* Section line — 0.7px from Figma */ .section-rule { border: none; border-top: 0.7px solid var(--fg-primary); margin: 0; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } html, body { background: #FFFDF6; } body { font-family: 'Lato', system-ui, sans-serif; color: #383838; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } em { font-style: italic; } .wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; } /* ─── NAV ─── */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(255,253,246,0.92); backdrop-filter: blur(8px); border-bottom: 0.7px solid rgba(0,0,0,0.08); } .nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .logo img { height: 28px; width: auto; display: block; } .nav-links { list-style: none; display: flex; align-items: center; gap: 20px; } .nav-links a { font-size: 14px; font-weight: 500; color: #383838; transition: color 200ms; } .nav-links a:hover { color: #080F30; } .nav-active { color: #080F30 !important; font-weight: 700 !important; position: relative; } .nav-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -24px; height: 2px; background: #EF4421; } .nav-cta { background: #EF4421; color: #fff !important; padding: 9px 22px; border-radius: 9999px; font-weight: 700 !important; transition: background 200ms; white-space: nowrap; } .nav-cta:hover { background: #C83010; } /* ─── BUTTONS ─── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 9999px; font-size: 14px; font-weight: 700; transition: all 200ms; } .btn svg { width: 15px; height: 15px; } .btn-lg { padding: 16px 30px; font-size: 15px; } .btn-brand { background: #EF4421; color: #fff !important; } .btn-brand:hover { background: #C83010; transform: translateY(-1px); } .btn-navy { background: #080F30; color: #fff !important; } .btn-navy:hover { background: #101D51; } .btn-outline { background: transparent; color: #383838 !important; border: 1px solid rgba(0,0,0,0.2); } .btn-outline:hover { border-color: #080F30; color: #080F30 !important; } .eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #888; font-weight: 700; border: 0.7px solid rgba(0,0,0,0.18); border-radius: 4px; padding: 4px 9px; display: inline-block; } /* ─── HERO ─── */ .hero { position: relative; overflow: hidden; padding: 92px 40px 0; } .hero-bg { position: absolute; inset: 0; background: radial-gradient(820px 460px at 88% 12%, rgba(105,224,109,0.28), transparent 62%), radial-gradient(680px 420px at 6% 96%, rgba(253,179,164,0.34), transparent 60%); pointer-events: none; } .hero-inner { position: relative; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.25fr 0.9fr; gap: 72px; align-items: center; } .hero-eyebrow { margin-bottom: 30px; } .hero h1 { font-family: 'Lato', sans-serif; font-weight: 900; color: #080F30; font-size: clamp(48px, 6vw, 82px); line-height: 0.98; letter-spacing: -0.025em; margin-bottom: 28px; text-wrap: balance; } .hero h1 em { font-family: 'Libre Baskerville', Georgia, serif; font-style: italic; font-weight: 700; color: #EF4421; letter-spacing: -0.015em; } .hero-lead { font-size: 19px; line-height: 1.65; color: #383838; max-width: 540px; margin-bottom: 36px; } .hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 44px; } .hero-trust { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #888; } .hero-trust strong { color: #080F30; font-weight: 800; } .hero-trust .sep { width: 4px; height: 4px; border-radius: 50%; background: #ccc; } /* hero visual */ .hero-visual { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .hero-rings { width: 100%; max-width: 440px; } .hero-orbit-label { position: absolute; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: #fff; border: 0.7px solid rgba(0,0,0,0.1); border-radius: 9999px; padding: 6px 14px; color: #080F30; box-shadow: 0 4px 16px rgba(0,0,0,0.06); white-space: nowrap; } .hol-1 { top: 6%; left: 50%; transform: translateX(-50%); } .hol-2 { top: 50%; right: -4%; transform: translateY(-50%); color: #14662A; border-color: #BAEE9B; } .hol-3 { bottom: 4%; left: 44%; transform: translateX(-50%); } .hero-orbit-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; } .hero-orbit-center .num { font-family: 'Lato'; font-weight: 900; font-size: 54px; color: #080F30; letter-spacing: -0.04em; line-height: 1; } .hero-orbit-center .lbl { font-family: 'Libre Baskerville', serif; font-style: italic; font-size: 14px; color: #888; } /* marquee */ .logos { padding: 64px 0 8px; } .logos-label { text-align: center; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #888; font-weight: 700; margin-bottom: 28px; } .marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; gap: 56px; width: max-content; animation: scroll 38s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes scroll { to { transform: translateX(-50%); } } .logo-word { font-family: 'Lato', sans-serif; font-weight: 800; font-size: 22px; color: #080F30; opacity: 0.34; letter-spacing: -0.01em; white-space: nowrap; transition: opacity 200ms; text-decoration: none; cursor: default; } a.logo-word { cursor: pointer; } .logo-word:hover { opacity: 0.85; } /* ─── SECTION SHELL ─── */ .section { padding: 96px 40px; } .section-rule { border-top: 0.7px solid rgba(0,0,0,0.1); } .sec-eyebrow { margin-bottom: 20px; } .sec-head { font-family: 'Lato', sans-serif; font-weight: 800; font-size: clamp(34px, 4vw, 52px); line-height: 1.07; letter-spacing: -0.02em; color: #080F30; max-width: 760px; margin-bottom: 20px; text-wrap: balance; } .sec-head em { font-family: 'Libre Baskerville', serif; font-style: italic; font-weight: 700; color: #EF4421; } .sec-lead { font-size: 18px; line-height: 1.7; color: #383838; max-width: 600px; } /* ─── PROBLEM / PIVOT ─── */ .pivot { background: #080F30; } .pivot .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } .pivot-eyebrow { color: #69E06D; border-color: rgba(105,224,109,0.4); margin-bottom: 24px; } .pivot h2 { font-family: 'Libre Baskerville', serif; font-weight: 700; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.18; color: #fff; letter-spacing: -0.01em; text-wrap: balance; } .pivot h2 em { color: #FDB3A4; } .pivot p { font-size: 17px; line-height: 1.75; color: #BAEE9B; margin-top: 24px; max-width: 480px; } .pivot-list { display: flex; flex-direction: column; gap: 2px; border-radius: 16px; overflow: hidden; } .pivot-row { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 26px 28px; background: rgba(255,255,255,0.04); align-items: start; } .pivot-row .ix { font-family: 'Lato'; font-weight: 800; font-size: 13px; color: #69E06D; padding-top: 3px; } .pivot-row .from { font-size: 13px; color: #888; text-decoration: line-through; text-decoration-color: rgba(239,68,33,0.6); } .pivot-row .to { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.4; margin-top: 4px; } /* ─── CAPABILITIES ─── */ .caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; border-radius: 18px; overflow: hidden; background: rgba(0,0,0,0.06); margin-top: 56px; border: 0.7px solid rgba(0,0,0,0.06); } .caps-grid--flush { margin-top: 0; } .caps-grid-2 { grid-template-columns: repeat(2, 1fr); } .caps-grid-3 { grid-template-columns: repeat(3, 1fr); } .cap { background: #FFFDF6; padding: 38px 34px; transition: background 250ms; display: flex; flex-direction: column; } .cap:hover { background: #F4FFEA; } .cap-num { font-family: 'Lato'; font-weight: 800; font-size: 12px; letter-spacing: 0.08em; color: #EF4421; margin-bottom: 22px; } .cap-icon { width: 48px; height: 48px; margin-bottom: 22px; } .cap h3 { font-family: 'Libre Baskerville', serif; font-weight: 700; font-size: 23px; line-height: 1.25; color: #080F30; margin-bottom: 8px; } .cap-sub { font-size: 14px; font-style: italic; color: #EF4421; font-family: 'Libre Baskerville', serif; margin-bottom: 16px; line-height: 1.4; } .cap p { font-size: 14px; line-height: 1.7; color: #555; margin-bottom: 24px; flex: 1; } .cap-link { font-size: 13px; font-weight: 700; color: #080F30; display: inline-flex; align-items: center; gap: 6px; transition: gap 200ms, color 200ms; } .cap:hover .cap-link { gap: 10px; color: #EF4421; } /* ─── PRACTICE (interactive) ─── */ .practice { background: #F4FFEA; } .practice-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; margin-top: 56px; } .practice-list { display: flex; flex-direction: column; gap: 2px; border-radius: 16px; overflow: hidden; border: 0.7px solid rgba(0,0,0,0.08); } .practice-item { display: flex; gap: 18px; padding: 24px 26px; background: #FFFDF6; cursor: pointer; transition: background 200ms; align-items: baseline; } .practice-item:hover:not(.active) { background: #fff; } .practice-item.active { background: #080F30; } .practice-item .pi-num { font-family: 'Lato'; font-weight: 800; font-size: 12px; color: #EF4421; min-width: 22px; } .practice-item.active .pi-num { color: #69E06D; } .practice-item .pi-title { font-family: 'Libre Baskerville', serif; font-weight: 700; font-size: 19px; color: #080F30; transition: color 200ms; } .practice-item.active .pi-title { color: #fff; } .practice-detail { position: sticky; top: 92px; background: #FFFDF6; border: 0.7px solid rgba(0,0,0,0.08); border-radius: 18px; padding: 44px; box-shadow: 0 4px 24px rgba(0,0,0,0.04); } .pd-eyebrow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #14662A; background: #fff; border: 0.5px solid #BAEE9B; border-radius: 4px; padding: 4px 9px; display: inline-block; margin-bottom: 22px; } .pd-title { font-family: 'Libre Baskerville', serif; font-weight: 700; font-size: 30px; line-height: 1.2; color: #080F30; margin-bottom: 8px; } .pd-sub { font-style: italic; color: #EF4421; font-family: 'Libre Baskerville', serif; font-size: 16px; margin-bottom: 20px; } .pd-body { font-size: 16px; line-height: 1.75; color: #383838; margin-bottom: 28px; } .pd-points { list-style: none; display: flex; flex-direction: column; gap: 14px; } .pd-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: #080F30; line-height: 1.5; } .pd-points .dot { width: 7px; height: 7px; border-radius: 50%; background: #69E06D; margin-top: 8px; flex-shrink: 0; box-shadow: 0 0 8px rgba(105,224,109,0.5); } .pd-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 28px; font-family: 'Lato'; font-size: 13px; font-weight: 700; color: #EF4421; transition: gap 200ms; } .pd-link:hover { gap: 10px; } /* ─── PROOF ─── */ .proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; } .quote-card { background: #FFFDF6; border: 0.7px solid rgba(0,0,0,0.08); border-radius: 18px; padding: 40px; display: flex; flex-direction: column; } .quote-card.dark { background: #080F30; border-color: #080F30; } .quote-mark { font-family: 'Libre Baskerville', serif; font-size: 64px; line-height: 0.5; color: #EF4421; height: 30px; } .quote-card.dark .quote-mark { color: #69E06D; } .quote-text { font-family: 'Libre Baskerville', serif; font-size: 21px; line-height: 1.5; color: #080F30; margin: 18px 0 28px; flex: 1; text-wrap: pretty; } .quote-card.dark .quote-text { color: #fff; } .quote-by { display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 0.7px solid rgba(0,0,0,0.1); } .quote-card.dark .quote-by { border-color: rgba(255,255,255,0.12); } .quote-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #EF4421, #FDB3A4); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; } .quote-card.dark .quote-avatar { background: linear-gradient(135deg, #69E06D, #BAEE9B); color: #0D3B14; } .quote-name { font-size: 15px; font-weight: 700; color: #080F30; } .quote-card.dark .quote-name { color: #fff; } .quote-role { font-size: 13px; color: #888; } .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 16px; border-radius: 16px; overflow: hidden; background: rgba(0,0,0,0.06); border: 0.7px solid rgba(0,0,0,0.06); } .metric { background: #FFFDF6; padding: 32px 28px; } .metric-num { font-family: 'Lato'; font-weight: 900; font-size: 46px; color: #080F30; letter-spacing: -0.03em; line-height: 1; margin-bottom: 8px; } .metric-num span { color: #EF4421; } .metric-lbl { font-size: 13px; color: #888; line-height: 1.5; } /* ─── SEGMENTS ─── */ .segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; } .segment { border: 0.7px solid rgba(0,0,0,0.1); border-radius: 16px; padding: 34px; transition: all 250ms; } .segment:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.07); border-color: rgba(0,0,0,0.16); } .segment-dot { width: 36px; height: 36px; border-radius: 50%; margin-bottom: 22px; } .segment h3 { font-family: 'Libre Baskerville', serif; font-weight: 700; font-size: 20px; color: #080F30; line-height: 1.3; margin-bottom: 10px; } .segment p { font-size: 14px; line-height: 1.65; color: #555; } /* ─── FAQ ─── */ .faq-list { margin-top: 44px; border-top: 0.7px solid rgba(0,0,0,0.1); } .faq-item { border-bottom: 0.7px solid rgba(0,0,0,0.1); } .faq-item summary { list-style: none; cursor: pointer; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: 'Libre Baskerville', serif; font-weight: 700; font-size: 19px; color: #080F30; line-height: 1.35; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 26px; font-weight: 400; color: #EF4421; flex: none; transition: transform 200ms; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p { font-size: 16px; line-height: 1.7; color: #555; max-width: 760px; margin: -2px 0 0; padding: 0 0 26px; } @media (max-width: 640px) { .faq-item summary { font-size: 17px; } } /* ─── TEAM ─── */ .team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 56px; } .team-card { border: 0.7px solid rgba(0,0,0,0.1); border-radius: 18px; padding: 38px 34px; display: flex; gap: 24px; align-items: center; transition: all 250ms; } .team-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.07); border-color: rgba(0,0,0,0.16); } .team-avatar { width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #EF4421, #FDB3A4); color: #fff; font-family: 'Lato'; font-weight: 800; font-size: 26px; display: flex; align-items: center; justify-content: center; } .team-card:nth-child(2) .team-avatar { background: linear-gradient(135deg, #69E06D, #BAEE9B); color: #0D3B14; } .team-name { font-family: 'Libre Baskerville', serif; font-weight: 700; font-size: 21px; color: #080F30; margin-bottom: 4px; } .team-role { font-size: 14px; color: #EF4421; font-style: italic; font-family: 'Libre Baskerville', serif; margin-bottom: 8px; } .team-bio { font-size: 14px; line-height: 1.6; color: #555; } /* ─── APPROACH ─── */ .approach { background: #FFFDF6; } .approach .wrap { display: grid; grid-template-columns: 0.8fr 1fr; gap: 72px; align-items: center; } .approach-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #14662A; background: #F4FFEA; border: 0.5px solid #BAEE9B; padding: 6px 14px; border-radius: 9999px; margin-bottom: 24px; } .approach h2 { font-family: 'Lato'; font-weight: 800; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.02em; color: #080F30; text-wrap: balance; } .approach h2 em { font-family: 'Libre Baskerville', serif; font-style: italic; font-weight: 700; color: #EF4421; } .approach-body p { font-size: 16px; line-height: 1.8; color: #383838; margin-bottom: 18px; } .approach-body p:last-child { margin-bottom: 0; } .approach-body strong { color: #080F30; } /* ─── CONVERSATION CTA ─── */ .convo { padding: 40px; } .convo-inner { max-width: 1280px; margin: 0 auto; background: #080F30; border-radius: 24px; padding: 80px 64px; position: relative; overflow: hidden; } .convo-inner::before { content: ''; position: absolute; top: -140px; right: -100px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(239,68,33,0.5), transparent 65%); pointer-events: none; } .convo-inner::after { content: ''; position: absolute; bottom: -160px; left: -80px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(105,224,109,0.32), transparent 65%); pointer-events: none; } .convo-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; } .convo-eyebrow { color: #69E06D; border-color: rgba(105,224,109,0.4); margin-bottom: 24px; } .convo h2, .convo h1.convo-h1 { font-family: 'Libre Baskerville', serif; font-weight: 700; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.14; color: #fff; letter-spacing: -0.01em; margin-bottom: 22px; text-wrap: balance; } .convo h2 em, .convo h1.convo-h1 em { color: #FDB3A4; } .convo p { font-size: 17px; line-height: 1.7; color: #BAEE9B; max-width: 520px; margin-bottom: 34px; } .convo-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .convo-free { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: #888; } .convo-free .pulse { width: 9px; height: 9px; border-radius: 50%; background: #69E06D; box-shadow: 0 0 10px rgba(105,224,109,0.8); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } } .convo-card { background: rgba(255,255,255,0.05); border: 0.7px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 34px; backdrop-filter: blur(4px); } .convo-card-title { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #888; margin-bottom: 22px; } .convo-steps { list-style: none; display: flex; flex-direction: column; gap: 18px; } .convo-steps li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; color: #fff; line-height: 1.5; } .convo-steps .ix { width: 26px; height: 26px; border-radius: 50%; border: 0.7px solid rgba(105,224,109,0.5); color: #69E06D; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* related-reading cards (article closing CTA) */ .rel-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; } .rel-card { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 0.7px solid rgba(255,255,255,0.09); transition: background 200ms, transform 200ms; } .rel-card:hover { background: rgba(255,255,255,0.09); transform: translateX(2px); } .rel-thumb { width: 62px; height: 62px; border-radius: 9px; overflow: hidden; flex-shrink: 0; } .rel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .rel-topic { font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: #69E06D; font-weight: 700; } .rel-title { display: block; font-family: 'Libre Baskerville', serif; font-size: 14.5px; color: #fff; line-height: 1.32; margin-top: 5px; } .rel-card:hover .rel-title { color: #BAEE9B; } .rel-browse { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #69E06D; transition: gap 200ms; } .rel-browse:hover { gap: 10px; } /* ─── FOOTER ─── */ .footer { background: #080F30; padding: 64px 40px 32px; } .footer-inner { max-width: 1280px; margin: 0 auto; } .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } .footer-logo { height: 22px; filter: invert(1) brightness(2); margin-bottom: 16px; display: block; } .footer-desc { font-size: 14px; line-height: 1.7; color: #888; margin-bottom: 16px; max-width: 280px; } .footer-loc { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #888; border: 0.5px solid #383838; padding: 3px 8px; border-radius: 4px; } .footer-col-title { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #888; border: 0.5px solid #383838; padding: 3px 8px; border-radius: 4px; display: inline-block; margin-bottom: 18px; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-links a { font-size: 14px; color: #888; transition: color 200ms; } .footer-links a:hover { color: #69E06D; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 0.7px solid rgba(255,255,255,0.06); font-size: 13px; color: #555; } .footer-copy span { color: #BAEE9B; } .footer-legal { display: flex; gap: 24px; } .footer-legal a { color: #555; transition: color 200ms; } .footer-legal a:hover { color: #888; } /* ─── HAMBURGER ─── */ .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; border-radius: 8px; transition: background 150ms; } .nav-burger:hover { background: rgba(0,0,0,0.06); } .nav-burger span { display: block; width: 22px; height: 2px; background: #080F30; border-radius: 2px; transition: transform 250ms, opacity 250ms; transform-origin: center; } .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* mobile drawer */ .nav-drawer { display: none; } /* ─── RESPONSIVE ─── */ @media (max-width: 1080px) { .hero-inner { grid-template-columns: 1fr; gap: 48px; } .hero-visual { max-width: 420px; margin: 0 auto; } .pivot .wrap, .approach .wrap, .convo-grid { grid-template-columns: 1fr; gap: 44px; } .caps-grid { grid-template-columns: 1fr; } .caps-grid-2 { grid-template-columns: 1fr; } .caps-grid-3 { grid-template-columns: 1fr; } .practice-grid { grid-template-columns: 1fr; } .practice-detail { position: static; } .proof-grid { grid-template-columns: 1fr; } .metrics { grid-template-columns: 1fr 1fr; } .segments { grid-template-columns: 1fr; } } @media (max-width: 720px) { .nav-burger { display: flex; } .nav-links { display: none; } .nav-drawer { display: block; position: fixed; inset: 68px 0 0 0; background: rgba(255,253,246,0.97); backdrop-filter: blur(12px); z-index: 49; padding: 24px 24px 40px; overflow-y: auto; transform: translateX(100%); transition: transform 280ms cubic-bezier(0.4,0,0.2,1); } .nav-drawer.open { transform: translateX(0); } .nav-drawer ul { list-style: none; display: flex; flex-direction: column; gap: 4px; } .nav-drawer ul li a { display: block; padding: 14px 12px; font-size: 18px; font-weight: 600; color: #383838; border-radius: 10px; transition: background 150ms, color 150ms; } .nav-drawer ul li a:hover { background: rgba(0,0,0,0.04); color: #080F30; } .nav-drawer .drawer-cta { margin-top: 16px; } .nav-drawer .drawer-cta a { display: block; text-align: center; background: #EF4421; color: #fff !important; padding: 14px 24px; border-radius: 9999px; font-weight: 700; font-size: 16px; } .nav-drawer .drawer-cta a:hover { background: #C83010; } .nav-inner { padding: 0 20px; gap: 8px; } .hero { padding: 56px 20px 0; } .section, .convo { padding: 64px 20px; } .wrap { padding: 0 20px; } .convo-inner { padding: 48px 24px; } .metrics { grid-template-columns: 1fr 1fr; } .footer { padding: 48px 20px 24px; } .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-bottom { flex-direction: column; gap: 12px; } } /* ─── INNER PAGE HERO ─── */ .page-hero { position: relative; overflow: hidden; padding: 80px 40px 64px; border-bottom: 0.7px solid rgba(0,0,0,0.08); } .page-hero-bg { position: absolute; inset: 0; background: radial-gradient(720px 380px at 88% 8%, rgba(105,224,109,0.22), transparent 62%), radial-gradient(560px 360px at 4% 100%, rgba(253,179,164,0.28), transparent 60%); pointer-events: none; } .page-hero-inner { position: relative; max-width: 1280px; margin: 0 auto; } .page-hero h1 { font-family: 'Lato', sans-serif; font-weight: 900; color: #080F30; font-size: clamp(40px, 5vw, 66px); line-height: 1.02; letter-spacing: -0.025em; margin: 22px 0 22px; text-wrap: balance; max-width: 900px; } .page-hero h1 em { font-family: 'Libre Baskerville', Georgia, serif; font-style: italic; font-weight: 700; color: #EF4421; } .page-hero-lead { font-size: 19px; line-height: 1.65; color: #383838; max-width: 600px; } /* ─── SPRINT FLOW ─── */ .sprint-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 56px; border-radius: 18px; overflow: hidden; background: rgba(0,0,0,0.06); border: 0.7px solid rgba(0,0,0,0.06); counter-reset: sprint; } .sprint-phase { background: #FFFDF6; padding: 34px 28px; position: relative; transition: background 250ms; display: flex; flex-direction: column; } .sprint-phase:hover { background: #F4FFEA; } .sprint-week { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #14662A; background: #F4FFEA; border: 0.5px solid #BAEE9B; border-radius: 4px; padding: 4px 9px; display: inline-block; align-self: flex-start; margin-bottom: 20px; } .sprint-num { font-family: 'Lato'; font-weight: 900; font-size: 38px; color: #EF4421; letter-spacing: -0.03em; line-height: 1; margin-bottom: 14px; opacity: 0.9; } .sprint-phase h3 { font-family: 'Libre Baskerville', serif; font-weight: 700; font-size: 21px; color: #080F30; margin-bottom: 6px; } .sprint-time { font-size: 12px; font-style: italic; color: #EF4421; font-family: 'Libre Baskerville', serif; margin-bottom: 16px; line-height: 1.4; } .sprint-phase p { font-size: 14px; line-height: 1.65; color: #555; } @media (max-width: 1080px) { .sprint-flow { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .sprint-flow { grid-template-columns: 1fr; } } /* ─── AVATAR PHOTOS ─── */ .quote-avatar img, .team-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .quote-avatar, .team-avatar { overflow: hidden; padding: 0; } /* ─── ARTICLE PAGE ─── */ .article-hero { position: relative; overflow: hidden; padding: 64px 40px 40px; border-bottom: 0.7px solid rgba(0,0,0,0.08); } .article-hero-bg { position: absolute; inset: 0; background: radial-gradient(680px 360px at 90% 6%, rgba(105,224,109,0.20), transparent 62%), radial-gradient(520px 340px at 2% 100%, rgba(253,179,164,0.26), transparent 60%); pointer-events: none; } .article-wrap { position: relative; max-width: 760px; margin: 0 auto; } .article-back { font-size: 13px; font-weight: 700; color: #888; display: inline-flex; align-items: center; gap: 7px; margin-bottom: 26px; transition: color 160ms; } .article-back:hover { color: #EF4421; } .article-meta-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; } .article-topic { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #14662A; background: #F4FFEA; border: 0.5px solid #BAEE9B; border-radius: 4px; padding: 4px 10px; } .article-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: #ccc; } .article-meta-txt { font-size: 13px; color: #888; } .article-title { font-family: 'Lato', sans-serif; font-weight: 900; color: #080F30; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 24px; text-wrap: balance; } .article-title em { font-family: 'Libre Baskerville', Georgia, serif; font-style: italic; font-weight: 700; color: #EF4421; } .article-byline { display: flex; align-items: center; gap: 14px; } .article-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .article-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .article-author-name { font-size: 15px; font-weight: 700; color: #080F30; text-decoration: none; } a.article-author-name:hover { color: #EF4421; text-decoration: underline; } .article-author-role { font-size: 13px; color: #888; } .article-body { max-width: 720px; margin: 0 auto; padding: 56px 40px 24px; } /* Article body set in the brand serif (Libre Baskerville) for an editorial reading feel */ .article-body > p, .article-body > p strong, .article-body ul li, .article-body ol li { font-family: 'Libre Baskerville', Georgia, serif; } .article-body > p { font-size: 18px; line-height: 1.8; color: #383838; margin-bottom: 24px; } .article-body > p strong { color: #080F30; font-weight: 800; } .article-body h2 { font-family: 'Lato', sans-serif; font-weight: 800; font-size: clamp(24px, 3vw, 32px); line-height: 1.18; letter-spacing: -0.02em; color: #080F30; margin: 48px 0 18px; text-wrap: balance; } .article-body h3 { font-family: 'Libre Baskerville', serif; font-weight: 700; font-size: 21px; color: #080F30; margin: 36px 0 14px; } .article-body ul { list-style: none; margin: 0 0 24px; display: flex; flex-direction: column; gap: 12px; } .article-body ul li { position: relative; padding-left: 24px; font-size: 17px; line-height: 1.7; color: #383838; } .article-body ul li::before { content: ''; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: #69E06D; box-shadow: 0 0 8px rgba(105,224,109,0.5); } .article-body ul li strong { color: #080F30; } .article-body ol { margin: 0 0 24px 22px; display: flex; flex-direction: column; gap: 12px; } .article-body ol li { font-size: 17px; line-height: 1.7; color: #383838; padding-left: 6px; } .article-body blockquote { margin: 28px 0; padding: 24px 28px; border-left: 3px solid #EF4421; background: #FFFDF6; border-radius: 0 12px 12px 0; font-family: 'Libre Baskerville', serif; font-style: italic; font-size: 20px; line-height: 1.55; color: #080F30; text-wrap: pretty; } .article-kicker { font-family: 'Libre Baskerville', serif; font-style: italic; font-size: 22px; line-height: 1.5; color: #EF4421; margin: 8px 0 28px; } @media (max-width: 720px) { .article-hero { padding: 40px 20px 32px; } .article-body { padding: 40px 20px 16px; } .article-body > p { font-size: 17px; } } /* ─── ARTICLE FEATURE IMAGE ─── */ .article-feature { max-width: 980px; margin: 0 auto; padding: 40px 40px 0; } .article-feature img { width: 100%; height: auto; border-radius: 18px; display: block; box-shadow: 0 10px 40px rgba(8,15,48,0.12); } .article-feature figcaption { font-size: 13px; color: #888; margin-top: 12px; text-align: center; font-style: italic; font-family: 'Libre Baskerville', serif; } .article-inline-image { margin: 28px 0; } .article-inline-image img { width: 100%; height: auto; border-radius: 12px; display: block; box-shadow: 0 6px 24px rgba(8,15,48,0.08); } .article-inline-image figcaption { font-size: 13px; color: #888; margin-top: 10px; text-align: center; font-style: italic; font-family: 'Libre Baskerville', serif; } .speakers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin: 28px 0 40px; } .speakers-grid .speaker-card { background: #FFFDF6; border: 0.7px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 24px; } .speakers-grid .speaker-card .article-inline-image { margin: 0 0 16px; } .speakers-grid .speaker-card .article-inline-image img { border-radius: 50%; width: 96px; height: 96px; object-fit: cover; margin: 0 auto; box-shadow: none; } .speakers-grid .speaker-card h3 { margin: 0 0 6px; font-size: 18px; } .speakers-grid .speaker-card p { font-size: 15px; margin-bottom: 10px; } .speakers-grid .speaker-card p:last-child { margin-bottom: 0; } .notion-columns:not(.speakers-grid) { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 24px 0; } .notion-callout { margin: 24px 0; padding: 20px 24px; background: #F4FFEA; border-left: 3px solid #69E06D; border-radius: 0 12px 12px 0; } .notion-callout p { margin-bottom: 12px; } .notion-callout p:last-child { margin-bottom: 0; } .notion-toggle { margin: 20px 0; border: 0.7px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 12px 16px; } .notion-toggle summary { cursor: pointer; font-weight: 700; color: #080F30; } .notion-toggle-body { margin-top: 12px; } @media (max-width: 720px) { .article-feature { padding: 24px 20px 0; } .speakers-grid { grid-template-columns: 1fr; } } /* ─── ARTICLE AUTHOR BIO (closing) ─── */ .article-author-bio { max-width: 720px; margin: 0 auto; padding: 8px 40px 16px; } .aab-inner { display: flex; gap: 20px; align-items: flex-start; padding: 28px 30px; border: 0.7px solid rgba(0,0,0,0.1); border-radius: 18px; background: #FFFDF6; } .aab-inner .article-avatar { width: 60px; height: 60px; flex-shrink: 0; } .aab-name { font-size: 16px; font-weight: 700; color: #080F30; text-decoration: none; } a.aab-name:hover { color: #EF4421; text-decoration: underline; } .aab-role { font-size: 13px; color: #EF4421; font-style: italic; font-family: 'Libre Baskerville', serif; margin: 2px 0 10px; } .aab-bio { font-size: 15px; line-height: 1.65; color: #555; } @media (max-width: 720px) { .article-author-bio { padding: 8px 20px 12px; } .aab-inner { padding: 24px; gap: 16px; } } /* ─── WEBINAR PAGES ─── */ .webinar-pill { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: #fff; background: #EF4421; border-radius: 4px; padding: 4px 10px; } .webinar-hero-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; } .webinar-hero-note { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: #888; } .webinar-hero-note .pulse { width: 9px; height: 9px; border-radius: 50%; background: #EF4421; box-shadow: 0 0 10px rgba(239,68,33,0.55); animation: pulse 2s ease-in-out infinite; } .webinar-signup-strip { padding: 0 40px 8px; } .webinar-signup-inner { max-width: 720px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 24px 28px; border-radius: 16px; background: linear-gradient(135deg, #F4FFEA 0%, #FFFDF6 100%); border: 0.7px solid #BAEE9B; } .webinar-signup-title { font-family: 'Lato', sans-serif; font-weight: 800; font-size: 18px; color: #080F30; margin-bottom: 6px; } .webinar-signup-copy p { font-size: 15px; line-height: 1.55; color: #555; margin: 0; max-width: 420px; } .webinar-register .convo-inner { background: linear-gradient(145deg, #080F30 0%, #1a2550 100%); } @media (max-width: 720px) { .webinar-signup-strip { padding: 0 20px 8px; } .webinar-signup-inner { padding: 20px; } .webinar-hero-cta { margin-top: 22px; } } /* ─── LANGUAGE SWITCHER ─── */ .nav-lang a { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: #888; border: 0.7px solid rgba(0,0,0,0.18); border-radius: 9999px; padding: 5px 11px; transition: all 180ms; } .nav-lang a:hover { color: #080F30; border-color: #080F30; } @media (max-width: 720px){ .nav-lang { display: inline-block !important; } }