/* ========================================================================== TWEAKS OVERLAY Activated by [data-tweak-tone] / [data-tweak-density] on . ========================================================================== */ /* ---- TONE: Restrained ---- Strip the serif italic accent everywhere — site reads as plain corporate display. We keep color so accent words don't disappear; just neutralize family + style. */ html[data-tweak-tone="restrained"] em, html[data-tweak-tone="restrained"] .accent, html[data-tweak-tone="restrained"] .hero-manifesto em, html[data-tweak-tone="restrained"] .services-title em, html[data-tweak-tone="restrained"] .svc-media-kicker em, html[data-tweak-tone="restrained"] .clients-title em, html[data-tweak-tone="restrained"] .bento-title em, html[data-tweak-tone="restrained"] .bento-title .coral, html[data-tweak-tone="restrained"] .bento-card h4 em, html[data-tweak-tone="restrained"] .svc-title em, html[data-tweak-tone="restrained"] .svc-item .l em, html[data-tweak-tone="restrained"] .b-portrait-title em, html[data-tweak-tone="restrained"] .b-empower-title em, html[data-tweak-tone="restrained"] .entity-name em, html[data-tweak-tone="restrained"] .faq-title em, html[data-tweak-tone="restrained"] .faq-title .coral, html[data-tweak-tone="restrained"] .dark-cta-title em, html[data-tweak-tone="restrained"] .footer-mission, html[data-tweak-tone="restrained"] .footer-mission em, html[data-tweak-tone="restrained"] .expert-role { font-family: var(--font-display) !important; font-style: normal !important; font-weight: 600 !important; letter-spacing: -0.01em !important; } /* keep serif coloring on the accent so emphasis still reads */ html[data-tweak-tone="restrained"] .footer-mission { font-weight: 400 !important; } /* ---- TONE: Literary ---- Push more of the headline copy into serif italic — every section heading reads as editorial. We pull the entire

/ display title into serif italic, with the existing em accent bumping into oversized italic for extra prominence. */ html[data-tweak-tone="literary"] .hero-h1, html[data-tweak-tone="literary"] .services-title, html[data-tweak-tone="literary"] .clients-title, html[data-tweak-tone="literary"] .bento-title, html[data-tweak-tone="literary"] .entities-head h2, html[data-tweak-tone="literary"] .experts-head h2, html[data-tweak-tone="literary"] .faq-title, html[data-tweak-tone="literary"] .dark-cta-title { font-family: var(--font-serif) !important; font-style: italic !important; font-weight: 400 !important; letter-spacing: -0.01em !important; } /* the existing em becomes display-sans and bold — flips the relationship */ html[data-tweak-tone="literary"] .hero-h1 em, html[data-tweak-tone="literary"] .services-title em, html[data-tweak-tone="literary"] .clients-title em, html[data-tweak-tone="literary"] .bento-title em, html[data-tweak-tone="literary"] .bento-title .coral, html[data-tweak-tone="literary"] .entities-head h2 em, html[data-tweak-tone="literary"] .experts-head h2 em, html[data-tweak-tone="literary"] .faq-title em, html[data-tweak-tone="literary"] .faq-title .coral, html[data-tweak-tone="literary"] .dark-cta-title em { font-family: var(--font-display) !important; font-style: normal !important; font-weight: 600 !important; } /* eyebrow / kickers also lean editorial */ html[data-tweak-tone="literary"] .section-eyebrow, html[data-tweak-tone="literary"] .clients-eyebrow, html[data-tweak-tone="literary"] .entities-eyebrow, html[data-tweak-tone="literary"] .experts-eyebrow, html[data-tweak-tone="literary"] .bento-eyebrow, html[data-tweak-tone="literary"] .faq-eyebrow { font-family: var(--font-serif) !important; font-style: italic !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; font-weight: 400 !important; } /* ---- DENSITY ---- Compact / Comfortable / Generous tweak vertical breathing room. Vars are written by JS: --tw-section-pad, --tw-card-pad. */ html[data-tweak-density] .section, html[data-tweak-density] .clients, html[data-tweak-density] .numbers, html[data-tweak-density] .bento, html[data-tweak-density] .experts, html[data-tweak-density] .faq, html[data-tweak-density] .entities, html[data-tweak-density] .dark-cta { padding-top: var(--tw-section-pad) !important; padding-bottom: var(--tw-section-pad) !important; } html[data-tweak-density] .clients { padding-bottom: calc(var(--tw-section-pad) * 0.85) !important; } html[data-tweak-density] .numbers { padding-bottom: calc(var(--tw-section-pad) * 1.15) !important; } html[data-tweak-density] .dark-cta { padding-top: calc(var(--tw-section-pad) * 1.15) !important; padding-bottom: calc(var(--tw-section-pad) * 1.15) !important; } /* card padding scales too */ html[data-tweak-density] .entity { padding: var(--tw-card-pad) !important; } html[data-tweak-density] .bento-card { padding: var(--tw-card-pad) !important; } /* tighten/loosen the spacing under heads in step with density */ html[data-tweak-density="compact"] .entities-head, html[data-tweak-density="compact"] .experts-head { margin-bottom: 36px !important; } html[data-tweak-density="generous"] .entities-head, html[data-tweak-density="generous"] .experts-head { margin-bottom: 80px !important; } /* ========================================================================== TWEAK PANEL — palette swatches ========================================================================== */ .bp-tw-palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .bp-tw-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: border-color 140ms ease, background 140ms ease; } .bp-tw-swatch:hover { background: rgba(0,0,0,0.04); } .bp-tw-swatch.is-on { border-color: var(--bp-coral); background: rgba(232,107,79,0.06); } .bp-tw-swatch-dot { display: block; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.12); } .bp-tw-swatch-label { font-size: 10.5px; font-family: var(--font-mono, monospace); letter-spacing: 0.04em; color: var(--fg-3); text-transform: uppercase; } .bp-tw-swatch.is-on .bp-tw-swatch-label { color: var(--bp-coral-deep); } /* ========================================================================== FOOTER — STACKED FSP LIST Each licensed entity on its own line with its FSP number. ========================================================================== */ .footer-fsps { display: flex; flex-direction: column; gap: 2px; line-height: 1.55; } /* ========================================================================== FLOATING WHATSAPP HELPLINE BUTTON ========================================================================== */ .wa-fab { position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 90; width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0, 0, 0, 0.18); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; text-decoration: none; } .wa-fab:hover, .wa-fab:focus-visible { transform: translateY(-2px) scale(1.05); background: #1FB855; box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45), 0 4px 10px rgba(0, 0, 0, 0.22); outline: none; } .wa-fab-icon { width: 32px; height: 32px; display: block; position: relative; z-index: 1; } .wa-fab-pulse { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(37, 211, 102, 0.6); animation: wa-pulse 2.2s ease-out infinite; pointer-events: none; } @keyframes wa-pulse { 0% { transform: scale(0.95); opacity: 0.8; } 70% { transform: scale(1.25); opacity: 0; } 100% { transform: scale(0.95); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .wa-fab-pulse { animation: none; } .wa-fab:hover, .wa-fab:focus-visible { transform: none; } } @media (max-width: 640px) { .wa-fab { width: 54px; height: 54px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } .wa-fab-icon { width: 28px; height: 28px; } }