/* =========================================================================
Black & Orange — Colors & Type
The 5-color brand palette, type system, and semantic tokens.
Source of truth: BnO NEW BRAND.fig (/COLORS, /TYPOGRAPHY).
========================================================================= */
/* ── FONTS (woff2-first; ttf fallback) ──────────────────────────────────
font-display: optional → both fonts (with in HTML head)
Behavior: if font arrives before first paint → uses it; else uses metric-matched
fallback for the full session. Eliminates CLS completely on desktop.
Updated: 2026-06-27 — woff2 conversion for ~55% size reduction
──────────────────────────────────────────────────────────────────── */
@font-face {
font-family: "Fraunces";
src: url("/assets/brand/fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.woff2") format("woff2-variations"),
url("/assets/brand/fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf") format("truetype-variations");
font-weight: 100 900;
font-style: normal;
font-display: optional;
unicode-range:U+100-130,U+132-148,U+14A-151,U+154-17E,U+18F,U+192,U+1A0-1A1,U+1AF-1B0,U+1C4-1CC,U+1D9-1DA,U+1E6-1E7,U+1EA-1EB,U+1FA-21B,U+22A-22D,U+230-233,U+237,U+259,U+2B9-2BA,U+2BC,U+2C6-2C7,U+2D8-2DD,U+300-304,U+306-308,U+30B-30C,U+30F,U+311-312,U+315,U+31B,U+324,U+326-328,U+32E,U+331,U+1E08-1E09,U+1E0C-1E0F,U+1E14-1E17,U+1E1C-1E1D,U+1E20-1E21,U+1E24-1E25,U+1E2A-1E2B,U+1E2E-1E2F,U+1E36-1E37,U+1E3A-1E3B,U+1E42-1E43,U+1E46-1E49,U+1E4C-1E53,U+1E5A-1E5B,U+1E5E-1E5F,U+1E62-1E65,U+1E6C-1E6F,U+1E78-1E7B,U+1E80-1E85,U+1E92-1E93,U+1E97,U+1E9E,U+1EA0-1EF9,U+2070,U+2074,U+20A1,U+20A3-20A4,U+20A6-20A7,U+20A9,U+20AB,U+20AD,U+20B1-20B2,U+20B5,U+20B9-20BA,U+20BC-20BD,U+2116,U+2215,U+2219,U+2248,U+2260,U+2264-2265,U+27E8-27E9,U+E132-E133,U+FB00-FB04;}
@font-face {
font-family: "Fraunces";
src:url("/assets/brand/fonts/latin/Fraunces-VariableFont_SOFT_WONK_opsz_wght-d18f56511313.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: optional;
unicode-range:U+20-7E,U+A0-FF,U+131,U+152-153,U+2010,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2044,U+2052,U+20AC,U+2122,U+2212;}
@font-face {
font-family: "Fraunces";
src: url("/assets/brand/fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.woff2") format("woff2-variations"),
url("/assets/brand/fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf") format("truetype-variations");
font-weight: 100 900;
font-style: italic;
font-display: optional;
unicode-range:U+100-130,U+132-148,U+14A-151,U+154-17E,U+18F,U+192,U+1A0-1A1,U+1AF-1B0,U+1C4-1CC,U+1D9-1DA,U+1E6-1E7,U+1EA-1EB,U+1FA-21B,U+22A-22D,U+230-233,U+237,U+259,U+2B9-2BA,U+2BC,U+2C6-2C7,U+2D8-2DD,U+300-304,U+306-308,U+30B-30C,U+30F,U+311-312,U+315,U+31B,U+323-324,U+326-328,U+32E,U+331,U+1E08-1E09,U+1E0C-1E0F,U+1E14-1E17,U+1E1C-1E1D,U+1E20-1E21,U+1E24-1E25,U+1E2A-1E2B,U+1E2E-1E2F,U+1E36-1E37,U+1E3A-1E3B,U+1E42-1E43,U+1E46-1E49,U+1E4C-1E53,U+1E5A-1E5B,U+1E5E-1E5F,U+1E62-1E65,U+1E6C-1E6F,U+1E78-1E7B,U+1E80-1E85,U+1E92-1E93,U+1E97,U+1E9E,U+1EA0-1EF9,U+2070,U+2074,U+20A1,U+20A3-20A4,U+20A6-20A7,U+20A9,U+20AB,U+20AD,U+20B1-20B2,U+20B5,U+20B9-20BA,U+20BC-20BD,U+2116,U+2215,U+2219,U+2248,U+2260,U+2264-2265,U+27E8-27E9,U+E132-E133,U+FB00-FB04;}
@font-face {
font-family: "Fraunces";
src:url("/assets/brand/fonts/latin/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght-3263dae3fdbf.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: optional;
unicode-range:U+20-7E,U+A0-FF,U+131,U+152-153,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2044,U+2052,U+20AC,U+2122,U+2212;}
@font-face {
font-family: "Inter";
src: url("/assets/brand/fonts/Inter-VariableFont_opsz_wght.woff2") format("woff2-variations"),
url("/assets/brand/fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations");
font-weight: 100 900;
font-style: normal;
font-display: optional;
unicode-range:U+100-130,U+132-148,U+14A-151,U+154-1C3,U+1C5-254,U+256-27B,U+27E-284,U+286-290,U+292-2A4,U+2A6-304,U+306-30A,U+30C,U+30F,U+313,U+315,U+31B,U+323,U+326-328,U+32C,U+337-338,U+342-343,U+346-36F,U+374-376,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3D7,U+3DC-3DD,U+3F0-3F6,U+3F9-3FA,U+3FC-479,U+480-49D,U+4A0-4FF,U+52F,U+E3F,U+1D00,U+1D0D,U+1D1B,U+1D43,U+1D47-1D49,U+1D4D,U+1D4F-1D50,U+1D52,U+1D56-1D58,U+1D5B,U+1D62-1D65,U+1D9C,U+1DA0,U+1DBB,U+1DBF-1DF5,U+1DFC-1E9B,U+1E9D-1F15,U+1F18-1F1D,U+1F20-1F45,U+1F48-1F4D,U+1F50-1F57,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7D,U+1F80-1FB4,U+1FB6-1FC4,U+1FC6-1FD3,U+1FD6-1FDB,U+1FDD-1FEF,U+1FF2-1FF4,U+1FF6-1FFE,U+2070-2071,U+2074-208E,U+2090-209C,U+20A0-20AB,U+20AD-20AF,U+20B1-20B5,U+20B8-20BA,U+20BC-20BF,U+20DB-20DE,U+20E8,U+20F0,U+2100-2101,U+2103,U+2105-2106,U+2109,U+2113,U+2116-2117,U+211E-2121,U+2126,U+212A-212B,U+212E,U+2132,U+213B,U+214D,U+2150-217F,U+2183-2186,U+2189,U+2193-2199,U+21A9-21AA,U+21B0-21B1,U+21B3-21B4,U+21BA-21BB,U+21D0,U+21D2,U+21D4,U+21DE-21DF,U+21E4-21E5,U+21E7,U+21EA,U+2202,U+2205-2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2236,U+2248,U+2260,U+2264-2265,U+2295-2298,U+2303-2305,U+2318,U+2325-2327,U+232B,U+2380,U+2387,U+238B,U+23CE-23CF,U+2423,U+2460-2468,U+24B6-24CF,U+24EA,U+25A0-25A2,U+25AA,U+25B2-25B3,U+25B6-25B7,U+25BA-25BD,U+25C0-25C1,U+25C4-25C7,U+25CA-25CB,U+25CF,U+25E6,U+25EF,U+2600,U+263C,U+2661,U+2665,U+26A0,U+2717,U+2756,U+2764,U+2780-2788,U+27EF,U+27F5-27FA,U+2913,U+2A38,U+2B06,U+2B12-2B13,U+2B1C,U+2B24,U+2C7C,U+2C7F,U+2DFF,U+2E18,U+A69F,U+A7FF,U+A92E,U+E000,U+E002-E05E,U+E06A-E0BD,U+E0C8-E0CC,U+E0DC-E0E6,U+E0F3-E0F5,U+E106,U+E109-E10A,U+E10C-E10F,U+E111-E113,U+E117-E118,U+E121-E122,U+E124,U+E12A-E15E,U+E163,U+E1C3,U+E1D2-E1DF,U+E1E1-E2DC,U+EE01-EE07,U+EE09-EE0A,U+EE0C-EE12,U+EE14,U+EE17,U+EE1D-EE45,U+EE47-EE84,U+EE87-EED6,U+EED8-EEE1,U+F6C3,U+FEFF,U+1F12F-1F149,U+1F16A-1F16B,U+1F850,U+1F852;}
@font-face {
font-family: "Inter";
src:url("/assets/brand/fonts/latin/Inter-VariableFont_opsz_wght-1f60993a96d5.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: optional;
unicode-range:U+0,U+20-7E,U+A0-AC,U+AE-FF,U+131,U+152-153,U+2000-200B,U+2010-2027,U+202F-2055,U+2057,U+205F,U+20AC,U+2122,U+2190-2192,U+21B5,U+2212,U+2605-2606,U+2713;}
@font-face {
font-family: "Inter";
src: url("/assets/brand/fonts/Inter-Italic-VariableFont_opsz_wght.woff2") format("woff2-variations"),
url("/assets/brand/fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations");
font-weight: 100 900;
font-style: italic;
font-display: optional;
unicode-range:U+100-130,U+132-148,U+14A-151,U+154-1C3,U+1C5-254,U+256-27B,U+27E-284,U+286-290,U+292-2A4,U+2A6-304,U+306-30A,U+30C,U+30F,U+313,U+315,U+31B,U+323,U+326-328,U+32C,U+337-338,U+342-343,U+346-36F,U+374-376,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3D7,U+3DC-3DD,U+3F0-3F6,U+3F9-3FA,U+3FC-479,U+480-49D,U+4A0-4FF,U+52F,U+E3F,U+1D00,U+1D0D,U+1D1B,U+1D43,U+1D47-1D49,U+1D4D,U+1D4F-1D50,U+1D52,U+1D56-1D58,U+1D5B,U+1D62-1D65,U+1D9C,U+1DA0,U+1DBB,U+1DBF-1DF5,U+1DFC-1E9B,U+1E9D-1F15,U+1F18-1F1D,U+1F20-1F45,U+1F48-1F4D,U+1F50-1F57,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7D,U+1F80-1FB4,U+1FB6-1FC4,U+1FC6-1FD3,U+1FD6-1FDB,U+1FDD-1FEF,U+1FF2-1FF4,U+1FF6-1FFE,U+2070-2071,U+2074-208E,U+2090-209C,U+20A0-20AB,U+20AD-20AF,U+20B1-20B5,U+20B8-20BA,U+20BC-20BF,U+20DB-20DE,U+20E8,U+20F0,U+2100-2101,U+2103,U+2105-2106,U+2109,U+2113,U+2116-2117,U+211E-2121,U+2126,U+212A-212B,U+212E,U+2132,U+213B,U+214D,U+2150-217F,U+2183-2186,U+2189,U+2193-2199,U+21A9-21AA,U+21B0-21B1,U+21B3-21B4,U+21BA-21BB,U+21D0,U+21D2,U+21D4,U+21DE-21DF,U+21E4-21E5,U+21E7,U+21EA,U+2202,U+2205-2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2236,U+2248,U+2260,U+2264-2265,U+2295-2298,U+2303-2305,U+2318,U+2325-2327,U+232B,U+2380,U+2387,U+238B,U+23CE-23CF,U+2423,U+2460-2468,U+24B6-24CF,U+24EA,U+25A0-25A2,U+25AA,U+25B2-25B3,U+25B6-25B7,U+25BA-25BD,U+25C0-25C1,U+25C4-25C7,U+25CA-25CB,U+25CF,U+25E6,U+25EF,U+2600,U+263C,U+2661,U+2665,U+26A0,U+2717,U+2756,U+2764,U+2780-2788,U+27EF,U+27F5-27FA,U+2913,U+2A38,U+2B06,U+2B12-2B13,U+2B1C,U+2B24,U+2C7C,U+2C7F,U+2DFF,U+2E18,U+A69F,U+A7FF,U+A92E,U+E000,U+E002-E02B,U+E04B-E05E,U+E06A-E0BD,U+E0C8-E0CC,U+E0DC-E0E6,U+E0F3-E0F5,U+E106,U+E109-E10A,U+E10C-E10F,U+E111-E113,U+E117-E118,U+E121-E122,U+E124,U+E12A-E15E,U+E163,U+E1C3,U+E1D2-E1DF,U+E1E1-E274,U+E27B-E2DC,U+EE01-EE07,U+EE09-EE0A,U+EE0C-EE12,U+EE14,U+EE17,U+EE1D-EE45,U+EE47-EE84,U+EE87-EEE1,U+F6C3,U+FEFF,U+1F12F-1F149,U+1F16A-1F16B,U+1F850,U+1F852;}
@font-face {
font-family: "Inter";
src:url("/assets/brand/fonts/latin/Inter-Italic-VariableFont_opsz_wght-dbdfa861d75d.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: optional;
unicode-range:U+0,U+20-7E,U+A0-AC,U+AE-FF,U+131,U+152-153,U+2000-200B,U+2010-2027,U+202F-2055,U+2057,U+205F,U+20AC,U+2122,U+2190-2192,U+21B5,U+2212,U+2605-2606,U+2713;}
/* ── FALLBACK FONTS with adjusted metrics (eliminates CLS on font swap) ──
"Fraunces Fallback" uses Georgia metrics scaled to match Fraunces x-height.
"Inter Fallback" uses Arial metrics scaled to match Inter.
Browser uses these while waiting for the real font; no layout jump occurs.
─────────────────────────────────────────────────────────────────────── */
@font-face {
font-family: "Fraunces Fallback";
src: local("Georgia"), local("Times New Roman");
size-adjust: 115%;
ascent-override: 86%;
descent-override: 22%;
line-gap-override: 0%;
}
@font-face {
font-family: "Inter Fallback";
src: local("Arial"), local("Helvetica Neue"), local("-apple-system");
size-adjust: 100%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}
:root {
/* -------- PRIMITIVE COLORS ------------------------------------------- */
/* Named per the official palette — "Fiery orange / Mellow yellow /
Lively pink / Cool gray / Slack black". These are the ONLY brand colors. */
--bno-fiery-orange: #FE8301; /* 254, 131, 1 */
--bno-mellow-yellow: #FFED02; /* 255, 237, 2 */
--bno-lively-pink: #ED8BFA; /* 237, 139, 250 */
--bno-cool-gray: #EBEAE8; /* 235, 234, 232 — the "paper" neutral */
--bno-slack-black: #000000; /* 0, 0, 0 */
--bno-paper: #FFFFFF; /* pure white, secondary neutral */
/* Accent ink (used sparingly in doodles — a soft red/coral) */
--bno-doodle-pink: #FF5678; /* from hand-drawn doodle accents */
/* Soft solids for large content cards. Keep the saturated palette for
accents, lines, gradients and UI details. */
--bno-soft-orange: #ffd9ba;
--bno-soft-yellow: #fff3b8;
--bno-soft-pink: #f4cdf8;
--bno-soft-card-gray: #efeeec;
--bno-shadow-soft: 0 0 10px rgba(0, 0, 0, 0.035), 0 2px 5px rgba(0, 0, 0, 0.018);
--bno-shadow-panel: 0 0 14px rgba(0, 0, 0, 0.045), 0 3px 7px rgba(0, 0, 0, 0.022);
--bno-shadow-hover: 0 0 18px rgba(0, 0, 0, 0.06), 0 4px 9px rgba(0, 0, 0, 0.028);
/* -------- SIGNATURE GRADIENT ----------------------------------------- */
/* The "squiggle" — yellow → orange → lively pink. This is the single
most identifiable brand mark after the logo. */
--bno-squiggle: linear-gradient(
95deg,
var(--bno-mellow-yellow) 0%,
var(--bno-fiery-orange) 55%,
var(--bno-lively-pink) 100%
);
--bno-squiggle-radial: radial-gradient(
circle at 30% 40%,
var(--bno-mellow-yellow) 0%,
var(--bno-fiery-orange) 45%,
var(--bno-lively-pink) 95%
);
--bno-squiggle-soft: linear-gradient(
120deg,
#FFF6C8 0%,
#FFE1B3 35%,
#FCD6E6 75%,
#F7DBFB 100%
);
/* -------- SEMANTIC COLORS -------------------------------------------- */
--color-bg: var(--bno-paper);
--color-bg-alt: var(--bno-cool-gray);
--color-bg-invert: var(--bno-slack-black);
--color-fg: var(--bno-slack-black);
--color-fg-muted: #575555;
--color-fg-subtle: #8A8888;
--color-fg-invert: var(--bno-paper);
--color-accent: var(--bno-fiery-orange);
--color-accent-2: var(--bno-mellow-yellow);
--color-accent-3: var(--bno-lively-pink);
--color-border: #E6E5E3;
--color-border-strong: var(--bno-slack-black);
/* -------- TYPE FAMILIES --------------------------------------------- */
/* Display → Fraunces (serif with optical sizing; signature italics).
Body/UI → Inter (the typography page references Inter specifically,
with SF Pro used in some layouts; Inter is our canonical
Google-Fonts-available pick for everything text-shaped).
Mono → system mono (rare in brand; used for data/code only). */
--font-display: "Fraunces", "Fraunces 72pt Soft", "Fraunces Fallback", Georgia, "Times New Roman", serif;
--font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "SF Pro Text",
"Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
Consolas, "Liberation Mono", monospace;
/* -------- TYPE SIZES (1080 design-space) ----------------------------- */
/* Display scale mirrors the hero treatments on the Slogan & lockups. */
--size-display-xl: clamp(72px, 9vw, 160px); /* 140-160 in lockups */
--size-display-lg: clamp(56px, 6.5vw, 112px);
--size-display-md: clamp(40px, 4.5vw, 80px);
--size-h1: 36px;
--size-h2: 32px;
--size-h3: 28px;
--size-h4: 22px;
--size-body-lg: 20px;
--size-body: 16px;
--size-body-sm: 14px;
--size-label: 12px;
--size-caption: 10px;
/* -------- WEIGHTS & LETTER-SPACING ---------------------------------- */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-black: 800;
--tracking-tight: -0.02em;
--tracking-display: 0.01em; /* lockups use 1% tracking in Fraunces */
--tracking-wide: 0.08em;
--tracking-caps: 0.12em;
/* -------- SPACING (8pt grid) ---------------------------------------- */
--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;
/* -------- RADII ----------------------------------------------------- */
/* The palette swatches use a soft superellipse-ish rounding; buttons
are pill-shaped. Cards stay sharp or very gently rounded. */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 24px;
--radius-xl: 40px; /* big palette-swatch feel */
--radius-pill: 999px;
--radius-card: 20px;
/* -------- ELEVATION (used sparingly — brand is mostly flat) --------- */
--shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
--shadow-2: 0 4px 14px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
--shadow-3: 0 20px 60px rgba(0,0,0,0.10), 0 6px 18px rgba(0,0,0,0.06);
--shadow-ink: 0 2px 0 rgba(0,0,0,1); /* hand-drawn cartoon offset */
/* -------- MOTION ---------------------------------------------------- */
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 120ms;
--dur-med: 220ms;
--dur-slow: 420ms;
}
/* =========================================================================
ELEMENT DEFAULTS — apply design-system styles to raw HTML tags
========================================================================= */
html {
font-family: var(--font-sans);
color: var(--color-fg);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
font-size: var(--size-body);
line-height: 1.5;
margin: 0;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: var(--weight-regular); /* Fraunces reads best at 400-500 */
letter-spacing: var(--tracking-display);
line-height: 1.0;
margin: 0 0 var(--space-4);
color: var(--color-fg);
text-wrap: balance;
}
h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); line-height: 1.1; }
h4 { font-size: var(--size-h4); line-height: 1.2; }
p { margin: 0 0 var(--space-4); text-wrap: pretty; max-width: 62ch; }
small { font-size: var(--size-body-sm); color: var(--color-fg-muted); }
code, kbd, pre, samp {
font-family: var(--font-mono);
font-size: 0.95em;
}
a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
}
a:hover { color: var(--bno-fiery-orange); }
hr {
border: 0;
border-top: 1.5px solid var(--color-border-strong);
margin: var(--space-6) 0;
}
/* =========================================================================
UTILITY CLASSES — the building blocks for every page
========================================================================= */
.display-xl { font-family: var(--font-display); font-size: var(--size-display-xl); font-weight: 400; line-height: 0.95; letter-spacing: var(--tracking-display); }
.display-lg { font-family: var(--font-display); font-size: var(--size-display-lg); font-weight: 400; line-height: 0.95; letter-spacing: var(--tracking-display); }
.display-md { font-family: var(--font-display); font-size: var(--size-display-md); font-weight: 400; line-height: 1.0; letter-spacing: var(--tracking-display); }
.display-italic { font-style: italic; } /* signature Fraunces italic emphasis */
.eyebrow { font-family: var(--font-sans); font-size: var(--size-label); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-fg-muted); }
.label { font-family: var(--font-sans); font-size: var(--size-label); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.caption{ font-family: var(--font-sans); font-size: var(--size-caption); font-weight: 400; color: var(--color-fg-muted); }
.bg-paper { background: var(--bno-paper); }
.bg-cool { background: var(--bno-cool-gray); }
.bg-ink { background: var(--bno-slack-black); color: var(--color-fg-invert); }
.bg-orange { background: var(--bno-soft-orange); }
.bg-yellow { background: var(--bno-soft-yellow); }
.bg-pink { background: var(--bno-soft-pink); }
.bg-squiggle{ background: var(--bno-squiggle); }
.bg-squiggle-soft { background: var(--bno-squiggle-soft); }
.text-squiggle {
background: var(--bno-squiggle);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
/* Pill button — the black pill is the signature CTA across the brand. */
.btn {
display: inline-flex; align-items: center; gap: var(--space-2);
font-family: var(--font-sans); font-size: var(--size-body-sm);
font-weight: 600; letter-spacing: var(--tracking-wide);
padding: 10px 18px; border-radius: var(--radius-pill);
border: 1.5px solid transparent; cursor: pointer;
transition: transform var(--dur-fast) var(--ease-out),
background-color var(--dur-fast),
color var(--dur-fast);
text-decoration: none;
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-primary { background: var(--bno-slack-black); color: var(--bno-paper); }
.btn-primary:hover { background: var(--bno-fiery-orange); color: var(--bno-slack-black); }
.btn-secondary { background: var(--bno-paper); color: var(--bno-slack-black); border-color: var(--bno-slack-black); }
.btn-secondary:hover { background: var(--bno-slack-black); color: var(--bno-paper); }
.btn-accent { background: var(--bno-fiery-orange); color: var(--bno-slack-black); }
.btn-accent:hover { background: var(--bno-mellow-yellow); }
/* Focus ring — accessible, brand-tinted. */
:where(a, button, input, textarea, select, .btn):focus-visible {
outline: 2.5px solid var(--bno-fiery-orange);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* Card */
.card {
background: var(--bno-paper);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
padding: var(--space-5);
}
.card-cool { background: var(--bno-cool-gray); border-color: transparent; }
:root {
--site-max: 1220px;
--site-line: rgba(0, 0, 0, 0.12);
--site-muted: rgba(0, 0, 0, 0.64);
--bno-soft-orange: #ffe1c8;
--bno-soft-yellow: #fff5a8;
--bno-soft-pink: #f4cdf8;
--bno-soft-card-gray: #efeeec;
--bno-shadow-soft: 0 0 12px rgba(0, 0, 0, 0.035), 0 2px 6px rgba(0, 0, 0, 0.022);
--bno-shadow-panel: 0 0 16px rgba(0, 0, 0, 0.045), 0 3px 8px rgba(0, 0, 0, 0.026);
--bno-shadow-hover: 0 0 20px rgba(0, 0, 0, 0.06), 0 4px 11px rgba(0, 0, 0, 0.034);
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
max-width: calc(var(--site-max) + 48px);
margin: 0 auto;
padding: 16px 24px;
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 16px;
background: rgba(255, 255, 255, 0.94);
border-bottom: 1px solid var(--site-line);
backdrop-filter: blur(18px);
}
.brand-link {
display: inline-flex;
align-items: center;
gap: 10px;
color: #000;
text-decoration: none;
font-weight: 900;
white-space: nowrap;
}
.brand-link img {
width: 34px;
height: 34px;
}
.desktop-nav {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
min-width: 0;
}
.desktop-nav a,
.desktop-nav button {
border: 0;
background: transparent;
color: #000;
font: 800 13px/1.2 Inter, system-ui, sans-serif;
text-decoration: none;
padding: 10px 11px;
border-radius: 999px;
cursor: pointer;
}
.desktop-nav a:hover,
.desktop-nav button:hover,
.desktop-nav .nav-link:hover {
background: #EBEAE8;
}
.site-header .btn {
display: inline-flex;
align-items: center;
justify-content: center;
}
.nav-cta {
min-height: 44px;
padding: 12px 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
background: #000;
border: 1.5px solid #000;
border-radius: 999px;
font: 900 13px/1.1 Inter, system-ui, sans-serif;
letter-spacing: 0.02em;
text-decoration: none;
white-space: nowrap;
transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
}
/* Shared polish: large content cards use softened fills and all-around shadows. */
.metric-card.orange,
.case-card.orange,
.contact-card.orange,
.answer-card.orange,
.cases-mini-card:nth-child(3) {
color: #000;
background: var(--bno-soft-orange);
}
.metric-card.yellow,
.case-card.featured,
.contact-card.yellow,
.answer-card.yellow,
.culture-card.yellow,
.about-ai-card.yellow,
.cases-mini-card:nth-child(2) {
color: #000;
background: var(--bno-soft-yellow);
}
.metric-card.pink {
color: #000;
background: var(--bno-soft-pink);
}
.score-card,
.answer-card,
.risk-card,
.case-card,
.case-logo,
.metric-card,
.route-grid article,
.deliverables article,
.service-grid article,
.timeline article,
.contact-card,
.location-chip,
.contact-faq-grid article,
.role-card,
.culture-card,
.value-card-careers,
.faq-card,
.expectations-grid article,
.proof-snapshot,
.boost-visual,
.seo-visual,
.ads-visual,
.aeo-visual,
.ai-visual,
.branding-visual,
.loop-visual,
.outbound-visual,
.implementation-visual,
.migration-visual,
.integrations-visual,
.education-visual,
.realestate-visual,
.about-visual,
.contact-form-shell,
.careers-form-card {
box-shadow: var(--bno-shadow-panel);
}
.case-card:hover,
.case-card:focus-visible {
box-shadow: var(--bno-shadow-hover);
}
.nav-cta:hover,
.nav-cta:focus-visible {
color: #000;
background: #FE8301;
border-color: #FE8301;
transform: translateY(-1px);
outline: none;
}
.language-switch {
display: inline-flex;
align-items: center;
gap: 7px;
color: #000;
font: 900 14px/1 Inter, system-ui, sans-serif;
white-space: nowrap;
}
.language-switch a {
width: 32px;
height: 32px;
display: inline-grid;
place-items: center;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 999px;
background: #fff;
text-decoration: none;
font-size: 19px;
line-height: 1;
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.language-switch a:hover,
.language-switch a:focus-visible {
background: #FE8301;
border-color: #FE8301;
transform: translateY(-1px);
outline: none;
}
.mobile-menu-toggle,
.mobile-nav-panel {
display: none;
}
.mobile-menu-toggle {
width: 46px;
height: 46px;
border: 1.5px solid #000;
border-radius: 999px;
background: #fff;
color: #000;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
cursor: pointer;
transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.mobile-menu-toggle span {
width: 18px;
height: 2px;
display: block;
background: currentColor;
border-radius: 999px;
transition: transform 180ms ease, opacity 180ms ease;
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus-visible {
background: #FE8301;
border-color: #FE8301;
transform: translateY(-1px);
outline: none;
}
.site-header.is-mobile-open .mobile-menu-toggle span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.site-header.is-mobile-open .mobile-menu-toggle span:nth-child(2) {
opacity: 0;
}
.site-header.is-mobile-open .mobile-menu-toggle span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
body.mobile-nav-open {
overflow: hidden;
}
.btn {
transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn:hover,
.btn:focus-visible {
transform: translateY(-1px);
outline: none;
}
.btn-primary {
color: #fff;
background: #000;
border-color: #000;
}
.btn-secondary,
.btn-light {
color: #000;
background: #fff;
border-color: #000;
}
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-light:hover,
.btn-light:focus-visible {
color: #000;
background: #FE8301;
border-color: #FE8301;
}
.nav-item {
position: relative;
}
.nav-item::after {
content: "";
position: absolute;
left: -22px;
right: -22px;
top: 100%;
height: 28px;
}
.mega-menu {
position: fixed;
left: 50%;
top: 74px;
width: min(1120px, calc(100vw - 32px));
transform: translateX(-50%) translateY(8px);
display: grid;
gap: 18px;
padding: 18px;
background: #fff;
border: 1px solid var(--site-line);
border-radius: 18px;
box-shadow: var(--bno-shadow-hover);
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease, transform 180ms ease;
}
.services-menu {
grid-template-columns: 1.2fr repeat(3, minmax(160px, 1fr));
}
.industry-menu {
width: min(880px, calc(100vw - 32px));
grid-template-columns: 1.2fr repeat(2, minmax(180px, 1fr));
}
.compact-menu {
width: min(520px, calc(100vw - 32px));
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.simple-menu {
position: absolute;
left: 50%;
top: calc(100% + 14px);
width: min(320px, calc(100vw - 32px));
grid-template-columns: 1fr;
}
.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu,
.nav-item.is-open .mega-menu {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.mega-feature,
.mega-column {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 16px;
border-radius: 14px;
}
.mega-feature {
background: #000;
color: #fff;
min-height: 100%;
}
.site-header .mega-feature h3,
.site-header .mega-feature p {
color: #fff;
}
.mega-feature span,
.mega-column span {
font: 900 11px/1 Inter, system-ui, sans-serif;
letter-spacing: 0;
text-transform: uppercase;
color: #FE8301;
}
.mega-feature h3 {
margin: 0;
max-width: 12ch;
font: 700 28px/0.98 Fraunces, Georgia, serif;
}
.mega-feature p {
margin: 0;
color: rgba(255, 255, 255, 0.72);
font: 600 13px/1.45 Inter, system-ui, sans-serif;
}
.mega-column small {
margin: 0;
color: var(--site-muted);
font: 600 13px/1.45 Inter, system-ui, sans-serif;
}
.mega-column {
background: #EBEAE8;
}
.mega-column.highlight {
background: linear-gradient(120deg, rgba(255, 237, 2, 0.32), rgba(254, 131, 1, 0.16), rgba(237, 139, 250, 0.18));
}
.mega-column a {
width: 100%;
padding: 10px 0;
color: #000;
border-radius: 0;
}
.mega-column a:hover {
background: transparent;
color: #FE8301;
}
.mega-column strong {
display: block;
font-size: 15px;
}
.mega-column small {
display: block;
color: var(--site-muted);
}
.logo-strip {
padding: 32px max(20px, calc((100vw - var(--site-max)) / 2));
color: var(--bno-paper);
background: var(--bno-slack-black);
border-top: 1.5px solid var(--bno-slack-black);
border-bottom: 1.5px solid var(--bno-slack-black);
}
.logo-strip p {
max-width: none;
margin: 0 0 24px;
color: rgba(255, 255, 255, 0.76);
font-size: 13px;
font-weight: 780;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.logo-cloud {
display: grid;
grid-template-columns: repeat(8, minmax(76px, 1fr));
align-items: center;
gap: 20px;
}
.logo-cloud img {
width: 100%;
height: 72px;
padding: 18px;
border: 1.5px solid rgba(255, 255, 255, 0.18);
border-radius: 8px;
background: var(--bno-paper);
object-fit: contain;
}
.site-footer {
display: block;
margin-top: 0;
padding: 0;
background: #EBEAE8;
color: #000;
border-top: 1px solid var(--site-line);
}
.footer-main {
max-width: var(--site-max);
margin: 0 auto;
padding: 72px 24px 64px;
display: grid;
grid-template-columns: minmax(300px, 0.95fr) minmax(0, 1.55fr);
gap: 72px;
}
.footer-proof {
display: flex;
flex-direction: column;
gap: 22px;
align-items: flex-start;
}
.footer-logo {
display: inline-flex;
align-items: center;
gap: 12px;
color: #000;
text-decoration: none;
font: 900 24px/1 Inter, system-ui, sans-serif;
}
.footer-logo img {
width: 46px;
height: 46px;
}
.footer-proof p {
max-width: 32ch;
margin: 0;
color: var(--site-muted);
font: 650 18px/1.45 Inter, system-ui, sans-serif;
}
.footer-accent {
width: min(100%, 520px);
height: 2px;
background-image: linear-gradient(90deg, #FE8301 0 12px, transparent 12px 28px), linear-gradient(90deg, #FFED02, #FE8301, #ED8BFA);
background-size: 28px 2px, 100% 2px;
background-repeat: repeat-x, no-repeat;
border-radius: 999px;
}
.badge-grid {
display: grid;
grid-template-columns: repeat(3, minmax(76px, 1fr));
gap: 12px;
width: min(100%, 460px);
}
.badge-grid img {
width: 100%;
height: 84px;
object-fit: contain;
padding: 10px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 12px;
}
.footer-map {
display: grid;
grid-template-columns: 0.95fr 0.9fr 1.1fr 1.05fr;
gap: 36px;
}
.footer-column {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 11px;
min-height: auto;
padding: 0;
border-right: 0;
}
.footer-column:last-child {
padding-right: 0;
border-right: 0;
}
.footer-column h3 {
margin: 0 0 8px;
color: #000;
font: 750 24px/1.05 Fraunces, Georgia, serif;
}
.footer-column h3:not(:first-child) {
margin-top: 22px;
}
.footer-column a,
.footer-column p {
margin: 0;
color: rgba(0, 0, 0, 0.72);
text-decoration: none;
font: 700 15px/1.35 Inter, system-ui, sans-serif;
}
.footer-column a:hover,
.footer-social a:hover {
color: #FE8301;
}
.footer-brand-bar {
min-height: 96px;
padding: 22px 24px;
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 24px;
background: #fff;
border-top: 1px solid var(--site-line);
}
.footer-brand-bar img {
width: 44px;
height: 44px;
justify-self: center;
}
.footer-brand-bar p {
margin: 0;
text-align: center;
color: #000;
font: 650 clamp(20px, 2.2vw, 28px)/1.15 Fraunces, Georgia, serif;
}
.site-footer em {
font-style: italic;
}
.footer-social {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.footer-social a {
color: rgba(0, 0, 0, 0.72);
text-decoration: none;
font: 750 14px/1.2 Inter, system-ui, sans-serif;
}
@media (max-width: 1120px) {
.site-header {
grid-template-columns: auto 1fr auto auto;
gap: 12px;
}
.desktop-nav {
display: none;
}
.mobile-menu-toggle {
display: inline-flex;
justify-self: end;
grid-column: 3;
}
.site-header .btn {
display: inline-flex;
justify-self: end;
grid-column: 4;
}
.site-header > .language-switch {
display: none;
}
.mobile-nav-panel {
position: fixed;
top: var(--mobile-nav-top, 76px);
left: 50%;
z-index: 80;
width: min(100vw - 24px, 760px);
max-height: calc(100dvh - var(--mobile-nav-top, 76px) - 12px);
display: block;
padding: 10px;
border: 1px solid #000;
border-radius: 18px;
background: rgba(255, 255, 255, 0.98);
box-shadow: var(--bno-shadow-panel);
opacity: 0;
pointer-events: none;
transform: translate(-50%, -8px);
transition: opacity 180ms ease, transform 180ms ease;
overflow: hidden;
}
.site-header.is-mobile-open .mobile-nav-panel {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
.mobile-nav-scroll {
max-height: calc(100dvh - var(--mobile-nav-top, 76px) - 34px);
padding: 6px;
overflow-y: auto;
overscroll-behavior: contain;
}
.mobile-nav-cta {
min-height: 54px;
margin: 0 0 10px;
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: #000;
border: 1.5px solid #000;
border-radius: 999px;
font: 900 14px/1.1 Inter, system-ui, sans-serif;
text-decoration: none;
text-align: center;
}
.mobile-language {
padding: 14px;
display: grid;
gap: 10px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 16px;
background: #EBEAE8;
}
.mobile-language strong {
color: #000;
font: 900 13px/1.1 Inter, system-ui, sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mobile-language div {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.mobile-language a {
min-height: 44px;
display: grid;
place-items: center;
border: 1.5px solid #000;
border-radius: 999px;
color: #000;
background: #fff;
font: 900 14px/1.1 Inter, system-ui, sans-serif;
text-decoration: none;
}
.mobile-language a:hover,
.mobile-language a:focus-visible {
background: #FE8301;
border-color: #FE8301;
outline: none;
}
.mobile-nav-cta:hover,
.mobile-nav-cta:focus-visible {
color: #000;
background: #FE8301;
border-color: #FE8301;
outline: none;
}
.mobile-nav-group {
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.mobile-nav-heading,
.mobile-nav-direct {
width: 100%;
min-height: 58px;
padding: 0 8px;
display: flex;
align-items: center;
justify-content: space-between;
border: 0;
background: transparent;
color: #000;
font: 900 18px/1.1 Inter, system-ui, sans-serif;
text-decoration: none;
text-align: left;
cursor: pointer;
}
.mobile-nav-direct {
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.mobile-nav-icon {
width: 26px;
height: 26px;
position: relative;
flex: 0 0 auto;
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 999px;
}
.mobile-nav-icon::before,
.mobile-nav-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 11px;
height: 2px;
background: #000;
border-radius: 999px;
transform: translate(-50%, -50%);
}
.mobile-nav-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
transition: transform 160ms ease;
}
.mobile-nav-heading[aria-expanded="true"] .mobile-nav-icon::after {
transform: translate(-50%, -50%) rotate(0deg);
}
.mobile-nav-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
padding: 0 0 14px;
}
.mobile-nav-links[hidden] {
display: none;
}
.mobile-nav-link {
min-height: 96px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
color: #000;
background: #EBEAE8;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 12px;
text-decoration: none;
}
.mobile-nav-link strong {
font: 900 15px/1.08 Inter, system-ui, sans-serif;
}
.mobile-nav-link small {
color: rgba(0, 0, 0, 0.62);
font: 750 12px/1.28 Inter, system-ui, sans-serif;
}
.mobile-nav-link:hover,
.mobile-nav-link:focus-visible {
background: #FFF200;
outline: none;
}
.footer-main {
grid-template-columns: 1fr;
gap: 44px;
}
.footer-map {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.logo-cloud {
grid-template-columns: repeat(4, minmax(76px, 1fr));
}
}
@media (max-width: 700px) {
.site-header {
grid-template-columns: auto 1fr auto auto;
padding: 12px 16px;
gap: 12px;
}
.brand-link span {
display: none;
}
.site-header .btn {
display: none;
padding: 12px 14px;
font-size: 12px;
}
.site-header.mobile-short-cta .btn {
display: inline-flex;
}
.mobile-menu-toggle {
width: 42px;
height: 42px;
}
.mobile-nav-panel {
width: calc(100vw - 20px);
border-radius: 16px;
}
.mobile-nav-links {
grid-template-columns: 1fr;
}
.footer-main {
padding: 52px 18px 48px;
}
.badge-grid,
.footer-map {
grid-template-columns: 1fr 1fr;
}
.logo-cloud {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.logo-cloud img {
height: 68px;
padding: 16px;
}
.badge-grid img {
height: 72px;
}
.footer-brand-bar {
grid-template-columns: 1fr;
}
.footer-social {
justify-content: center;
}
}
:root {
--bno-soft-orange: #ffe1c8;
--bno-soft-yellow: #fff5a8;
--bno-soft-pink: #f4cdf8;
--bno-soft-card-gray: #efeeec;
--bno-shadow-soft: 0 0 12px rgba(0, 0, 0, 0.035), 0 2px 6px rgba(0, 0, 0, 0.022);
--bno-shadow-panel: 0 0 16px rgba(0, 0, 0, 0.045), 0 3px 8px rgba(0, 0, 0, 0.026);
--bno-shadow-hover: 0 0 20px rgba(0, 0, 0, 0.06), 0 4px 11px rgba(0, 0, 0, 0.034);
}
/* Final visual polish loaded after page-specific CSS. */
:is(
.score-card,
.answer-card,
.risk-card,
.case-card,
.case-logo,
.metric-card,
.route-grid article,
.method-card,
.deliverables article,
.service-grid article,
.timeline article,
.contact-card,
.location-chip,
.contact-faq-grid article,
.route-steps article,
.role-card,
.culture-card,
.value-card-careers,
.faq-card,
.expectations-grid article,
.proof-snapshot,
.boost-visual,
.seo-visual,
.ads-visual,
.aeo-visual,
.ai-visual,
.branding-visual,
.loop-visual,
.outbound-visual,
.implementation-visual,
.migration-visual,
.integrations-visual,
.education-visual,
.realestate-visual,
.about-visual,
.contact-form-shell,
.careers-form-card,
.hub-card,
.route-panel,
.form-shell
) {
box-shadow: var(--bno-shadow-panel) !important;
}
:is(
.case-card:hover,
.case-card:focus-visible,
.service-grid article:hover,
.route-grid article:hover,
.timeline article:hover,
.metric-card:hover,
.role-card:hover
) {
box-shadow: var(--bno-shadow-hover) !important;
}
:is(
.metric-card.orange,
.case-card.orange,
.contact-card.orange,
.answer-card.orange,
.cases-mini-card:nth-child(3),
.hub-card:nth-child(2),
.route-grid article:nth-child(4),
.proof-grid article:nth-child(2n),
.deliverables article:nth-child(3n+2),
.risk-path article:nth-child(1),
.levels-grid article:nth-child(4)
) {
background: var(--bno-soft-orange) !important;
color: #000 !important;
}
:is(
.metric-card.yellow,
.case-card.featured:not(.dark),
.contact-card.yellow,
.answer-card.yellow,
.culture-card.yellow,
.about-ai-card.yellow,
.cases-mini-card:nth-child(2),
.timeline article:nth-child(2),
.risk-card,
.risk-path article:nth-child(3),
.locations-grid .location-chip:nth-child(2),
.locations-grid .location-chip:nth-child(5),
.expectations-grid article:nth-child(2),
.route-grid article:nth-child(2),
.deliverables article:nth-child(3n+1),
.proof-grid article:nth-child(3n+1),
.levels-grid article:nth-child(2)
) {
background: var(--bno-soft-yellow) !important;
color: #000 !important;
}
:is(
.metric-card.pink,
.timeline article:nth-child(4),
.route-grid article:nth-child(3),
.deliverables article:nth-child(3n),
.proof-grid article:nth-child(3n),
.hub-card:nth-child(4),
.levels-grid article:nth-child(3)
) {
background: var(--bno-soft-pink) !important;
color: #000 !important;
}
:is(
.signal-chip.orange,
.signal-chip.yellow,
.signal-chip.pink,
.flow-pill.orange,
.flow-pill.yellow,
.flow-pill.pink,
.sales-card.orange,
.sales-card.yellow,
.sales-card.pink
) {
box-shadow: none !important;
}
:is(
.metric-card.orange,
.metric-card.yellow,
.metric-card.pink,
.case-card.orange,
.case-card.featured:not(.dark),
.contact-card.orange,
.contact-card.yellow,
.answer-card.orange,
.answer-card.yellow,
.answer-card.black,
.culture-card.yellow,
.risk-card,
.risk-path article,
.timeline article,
.route-grid article
) :is(h1, h2, h3, h4, strong, b, p, span, small, li) {
color: inherit;
}
.answer-card.black {
background: var(--bno-soft-card-gray) !important;
color: #000 !important;
}
.risk-path article:nth-child(2),
.expectations-grid article:nth-child(4) {
background: #000 !important;
color: #fff !important;
}
.risk-path article:nth-child(2) :is(small, b, span, p),
.expectations-grid article:nth-child(4) :is(small, b, span, p, h3) {
color: #fff !important;
}
.method-head .eyebrow::before {
display: none !important;
}
.method-head .eyebrow,
.method .section-head.centered .eyebrow {
justify-content: center !important;
}
.method .section-head.centered .eyebrow::before {
display: none !important;
}
.score-card,
.cases-visual,
.proof-snapshot,
.boost-visual,
.seo-visual,
.ads-visual,
.aeo-visual,
.ai-visual,
.branding-visual,
.loop-visual,
.outbound-visual,
.implementation-visual,
.migration-visual,
.integrations-visual,
.education-visual,
.realestate-visual,
.about-visual {
transform: none !important;
}
.metric-card h3,
.route-grid h3,
.compare-grid h3,
.service-grid h3,
.hub-card h3 {
font-size: clamp(25px, 2vw, 30px) !important;
line-height: 1.02 !important;
overflow-wrap: anywhere;
}
.method .route-grid h3 {
font-size: clamp(21px, 1.55vw, 26px) !important;
}
.method .route-grid p {
font-size: clamp(15px, 1.05vw, 17px) !important;
line-height: 1.45 !important;
}
.method .route-grid b {
font-size: clamp(48px, 4.6vw, 66px) !important;
}
.method .route-grid article {
min-height: 360px !important;
}
.risk-card {
box-shadow: var(--bno-shadow-panel) !important;
}
.risk-card :is(h3, b) {
font-size: clamp(22px, 1.85vw, 30px) !important;
line-height: 0.98 !important;
}
.risk-card :is(p, span) {
font-size: clamp(14px, 1vw, 16px) !important;
line-height: 1.34 !important;
}
.proof-grid strong {
font-size: clamp(26px, 2.45vw, 36px) !important;
line-height: 0.98 !important;
}
.risk-path article {
min-height: 245px !important;
padding: clamp(14px, 1.7vw, 20px) !important;
}
.risk-path b {
font-size: clamp(17px, 1.15vw, 22px) !important;
line-height: 1 !important;
overflow-wrap: anywhere;
}
.risk-path span {
font-size: 12px !important;
line-height: 1.28 !important;
}
.risk-path small {
font-size: 11px !important;
letter-spacing: 0.08em !important;
}
.timeline h3,
.offer-card h3,
.levels-grid h3 {
font-size: clamp(18px, 1.25vw, 22px) !important;
line-height: 1.02 !important;
overflow-wrap: anywhere;
}
.deliverables article strong {
font-size: clamp(16px, 1.12vw, 20px) !important;
line-height: 1.05 !important;
}
.contact-card h3 {
font-size: clamp(18px, 1.25vw, 22px) !important;
line-height: 1.02 !important;
overflow-wrap: anywhere;
}
.location-chip strong {
font-size: clamp(14px, 0.92vw, 18px) !important;
line-height: 1.04 !important;
overflow-wrap: anywhere;
}
.route-steps h3 {
font-size: clamp(15px, 1vw, 18px) !important;
line-height: 1.04 !important;
overflow-wrap: anywhere;
}
.contact-faq-grid h3 {
font-size: clamp(18px, 1.25vw, 22px) !important;
line-height: 1.04 !important;
}
.role-card h3 {
font-size: clamp(15px, 0.98vw, 18px) !important;
line-height: 1.03 !important;
overflow-wrap: anywhere;
}
.culture-card h3 {
font-size: clamp(22px, 1.75vw, 29px) !important;
line-height: 1.02 !important;
}
.route .section-head {
display: block !important;
max-width: 840px !important;
margin: 0 auto 42px !important;
text-align: center !important;
}
.route .section-head h2 {
max-width: 720px !important;
margin-inline: auto !important;
}
.timeline {
max-width: 980px !important;
margin-inline: auto !important;
}
.timeline article {
min-width: 0 !important;
}
.locations-grid {
align-items: stretch !important;
}
.contact-faq-grid h3,
.role-card h3 {
overflow-wrap: anywhere !important;
}
.site-header {
border-bottom-color: var(--site-line, rgba(0, 0, 0, 0.12)) !important;
}
@media (max-width: 760px) {
.locations-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.location-chip {
min-width: 0;
}
.location-chip strong {
font-size: clamp(15px, 6vw, 18px) !important;
}
}
/* System-wide final pass: softer shadows and calmer solid color blocks. */
:is(
.score-card,
.answer-card,
.risk-card,
.case-card,
.case-logo,
.case-logo-box,
.metric-card,
.route-grid article,
.method-card,
.deliverables article,
.service-grid article,
.timeline article,
.contact-card,
.location-chip,
.contact-faq-grid article,
.route-steps article,
.role-card,
.culture-card,
.value-card-careers,
.faq-card,
.expectations-grid article,
.proof-snapshot,
.proof-card,
.proof-grid article,
.boost-visual,
.seo-visual,
.ads-visual,
.aeo-visual,
.ai-visual,
.branding-visual,
.loop-visual,
.outbound-visual,
.implementation-visual,
.migration-visual,
.integrations-visual,
.education-visual,
.realestate-visual,
.finance-visual,
.b2b-visual,
.tourism-visual,
.health-visual,
.logistics-visual,
.industrial-visual,
.about-visual,
.contact-form-shell,
.careers-form-card,
.hub-card,
.route-panel,
.form-shell,
.visual-card,
.process-card,
.platform-card,
.scope-card,
.source-card,
.pain-card,
.signal-card,
.map-card,
.cta-card,
.about-ai-card,
.client-logo,
.logo-card,
.review-column article,
.cases-mini-card,
.compare-card,
.level-card,
.levels-grid article,
.pattern-card,
.system-card,
.step-card
) {
box-shadow: var(--bno-shadow-panel) !important;
}
:is(
.case-card:hover,
.case-card:focus-visible,
.service-grid article:hover,
.route-grid article:hover,
.timeline article:hover,
.metric-card:hover,
.role-card:hover,
.contact-card:hover,
.hub-card:hover,
.proof-grid article:hover,
.deliverables article:hover
) {
box-shadow: var(--bno-shadow-hover) !important;
transform: translateY(-1px);
}
:is(article, div, section).orange,
:is(
.metric-card.orange,
.case-card.orange,
.contact-card.orange,
.answer-card.orange,
.about-ai-card.orange,
.culture-card.orange,
.offer-card.orange,
.proof-card.orange,
.visual-card.orange,
.process-card.orange,
.platform-card.orange,
.step-card.orange,
.system-card.orange,
.scope-card.orange,
.source-card.orange,
.pain-card.orange,
.signal-card.orange,
.level-card.orange,
.hub-card.orange,
.cases-mini-card.orange,
.method-card.orange,
.route-panel.orange,
.route-grid article:nth-child(4),
.deliverables article:nth-child(3n+2),
.service-grid article:nth-child(6),
.timeline article:nth-child(5),
.proof-grid article:nth-child(3n+2),
.risk-path article:nth-child(1),
.levels-grid article:nth-child(4),
.hub-card:nth-child(2)
) {
background: var(--bno-soft-orange) !important;
background-color: var(--bno-soft-orange) !important;
color: #000 !important;
}
:is(article, div, section).yellow,
:is(
.metric-card.yellow,
.case-card.featured:not(.dark),
.case-card.yellow,
.contact-card.yellow,
.answer-card.yellow,
.culture-card.yellow,
.about-ai-card.yellow,
.offer-card.yellow,
.proof-card.yellow,
.visual-card.yellow,
.process-card.yellow,
.platform-card.yellow,
.step-card.yellow,
.system-card.yellow,
.scope-card.yellow,
.source-card.yellow,
.pain-card.yellow,
.signal-card.yellow,
.level-card.yellow,
.hub-card.yellow,
.cases-mini-card:nth-child(2),
.route-grid article:nth-child(2),
.deliverables article:nth-child(3n+1),
.service-grid article:nth-child(2),
.service-grid article:nth-child(5),
.timeline article:nth-child(2),
.proof-grid article:nth-child(3n+1),
.risk-card,
.risk-path article:nth-child(3),
.locations-grid .location-chip:nth-child(2),
.locations-grid .location-chip:nth-child(5),
.expectations-grid article:nth-child(2),
.levels-grid article:nth-child(2)
) {
background: var(--bno-soft-yellow) !important;
background-color: var(--bno-soft-yellow) !important;
color: #000 !important;
}
:is(article, div, section).pink,
:is(
.metric-card.pink,
.case-card.pink,
.contact-card.pink,
.answer-card.pink,
.culture-card.pink,
.about-ai-card.pink,
.offer-card.pink,
.proof-card.pink,
.visual-card.pink,
.process-card.pink,
.platform-card.pink,
.step-card.pink,
.system-card.pink,
.scope-card.pink,
.source-card.pink,
.pain-card.pink,
.signal-card.pink,
.level-card.pink,
.hub-card.pink,
.cases-mini-card.pink,
.method-card.pink,
.route-grid article:nth-child(3),
.deliverables article:nth-child(3n),
.service-grid article:nth-child(4),
.timeline article:nth-child(4),
.proof-grid article:nth-child(3n),
.levels-grid article:nth-child(3),
.hub-card:nth-child(4)
) {
background: var(--bno-soft-pink) !important;
background-color: var(--bno-soft-pink) !important;
color: #000 !important;
}
:is(
.flow-pill.orange,
.flow-pill.yellow,
.flow-pill.pink,
.signal-chip.orange,
.signal-chip.yellow,
.signal-chip.pink,
.sales-card.orange,
.sales-card.yellow,
.sales-card.pink,
.hero-tag.orange,
.hero-tag.yellow,
.hero-tag.pink,
.chip.orange,
.chip.yellow,
.chip.pink
) {
background: revert-layer;
}
:is(
.metric-card,
.route-grid article,
.service-grid article,
.deliverables article,
.timeline article,
.proof-grid article,
.case-card,
.contact-card,
.answer-card,
.risk-card,
.hub-card,
.role-card,
.culture-card
) :is(h1, h2, h3, h4, p, span, small, strong, b, li, a) {
color: inherit;
}
.method-head .eyebrow::before,
.method .section-head.center .eyebrow::before,
.method .section-head.centered .eyebrow::before {
display: none !important;
}
.method-head .eyebrow,
.method .section-head.center .eyebrow,
.method .section-head.centered .eyebrow {
justify-content: center !important;
}
.hub-card h3,
.method-card h3,
.route-grid h3,
.service-grid h3,
.metric-card h3 {
font-size: clamp(23px, 1.85vw, 29px) !important;
line-height: 1.02 !important;
overflow-wrap: anywhere !important;
}
.risk-card .risk-path b,
.risk-card .risk-path h3,
.risk-path article b,
.risk-path article h3 {
font-size: clamp(16px, 1.1vw, 20px) !important;
line-height: 1.02 !important;
}
.risk-path article {
min-width: 0 !important;
}
.risk-path article:nth-child(2) small,
.risk-path article:nth-child(2) span {
color: #fff !important;
}
.timeline h3,
.offer-card h3,
.levels-grid h3,
.contact-card h3,
.contact-faq-grid h3,
.role-card h3 {
font-size: clamp(17px, 1.16vw, 21px) !important;
line-height: 1.04 !important;
overflow-wrap: anywhere !important;
}
.location-chip strong {
font-size: clamp(13px, 0.8vw, 16px) !important;
line-height: 1 !important;
overflow-wrap: anywhere !important;
}
.route-steps h3 {
font-size: clamp(14px, 0.92vw, 17px) !important;
line-height: 1.04 !important;
}
.contact-faq-grid h3 {
font-size: clamp(18px, 1.18vw, 22px) !important;
}
.role-card h3 {
font-size: clamp(18px, 1.18vw, 22px) !important;
}
.answer-card.black {
background: var(--bno-soft-card-gray) !important;
color: #000 !important;
}
.answer-card.black :is(h2, h3, p, b, strong, span) {
color: #000 !important;
}
@media (max-width: 760px) {
.location-chip strong {
font-size: clamp(13px, 4.6vw, 17px) !important;
}
.contact-card h3,
.contact-faq-grid h3,
.role-card h3 {
font-size: clamp(18px, 5.4vw, 22px) !important;
}
}
/* Global visual-system enforcement. This sits last so page-level CSS cannot
bring back heavy shadows or saturated large-card fills. */
:root {
--bno-soft-orange: #ffe1c8;
--bno-soft-yellow: #fff5a8;
--bno-soft-pink: #f4cdf8;
--bno-shadow-soft: 0 0 12px rgba(0, 0, 0, 0.035), 0 2px 6px rgba(0, 0, 0, 0.022);
--bno-shadow-panel: 0 0 16px rgba(0, 0, 0, 0.045), 0 3px 8px rgba(0, 0, 0, 0.026);
--bno-shadow-hover: 0 0 20px rgba(0, 0, 0, 0.06), 0 4px 11px rgba(0, 0, 0, 0.034);
}
:is(
.score-card,
.answer-card,
.risk-card,
.case-card,
.case-logo,
.metric-card,
.route-grid article,
.method-card,
.deliverables article,
.service-grid article,
.timeline article,
.contact-card,
.location-chip,
.contact-faq-grid article,
.route-steps article,
.role-card,
.culture-card,
.value-card-careers,
.faq-card,
.expectations-grid article,
.proof-snapshot,
.proof-grid article,
.boost-visual,
.seo-visual,
.ads-visual,
.aeo-visual,
.ai-visual,
.branding-visual,
.loop-visual,
.outbound-visual,
.implementation-visual,
.migration-visual,
.integrations-visual,
.education-visual,
.realestate-visual,
.about-visual,
.contact-form-shell,
.careers-form-card,
.hub-card,
.route-panel,
.form-shell,
.cases-mini-card,
.compare-card,
.level-card,
.levels-grid article,
.pattern-card,
.system-card,
.step-card,
.offer-card,
.platform-card,
.process-card,
.source-card,
.pain-card,
.signal-card,
.map-card,
.cta-card,
.about-ai-card,
.client-logo,
.logo-card,
.review-column article,
.industry-logo-strip img,
.proof-logo-strip img
) {
box-shadow: var(--bno-shadow-panel) !important;
filter: none !important;
}
:is(
.case-card:hover,
.case-card:focus-visible,
.service-grid article:hover,
.route-grid article:hover,
.timeline article:hover,
.metric-card:hover,
.role-card:hover,
.contact-card:hover,
.hub-card:hover,
.proof-grid article:hover,
.deliverables article:hover,
.contact-faq-grid article:hover,
.culture-card:hover,
.value-card-careers:hover
) {
box-shadow: var(--bno-shadow-hover) !important;
transform: none !important;
}
:is(
.score-card,
.answer-card,
.risk-card,
.case-card,
.route-grid article,
.method-card,
.deliverables article,
.service-grid article,
.timeline article,
.contact-card,
.role-card,
.culture-card,
.value-card-careers,
.proof-grid article,
.hub-card,
.cases-mini-card,
.compare-card,
.level-card,
.levels-grid article,
.pattern-card,
.system-card,
.step-card,
.offer-card,
.platform-card,
.process-card,
.source-card,
.pain-card,
.signal-card,
.map-card,
.cta-card,
.about-ai-card,
.location-chip
).orange,
:is(
.metric-card.orange,
.case-card.orange,
.contact-card.orange,
.answer-card.orange,
.about-ai-card.orange,
.culture-card.orange,
.offer-card.orange,
.proof-card.orange,
.visual-card.orange,
.process-card.orange,
.platform-card.orange,
.step-card.orange,
.system-card.orange,
.scope-card.orange,
.source-card.orange,
.pain-card.orange,
.signal-card.orange,
.level-card.orange,
.hub-card.orange,
.cases-mini-card.orange,
.method-card.orange,
.route-panel.orange,
.route-grid article:nth-child(4),
.deliverables article:nth-child(3n+2),
.service-grid article:nth-child(6),
.timeline article:nth-child(5),
.proof-grid article:nth-child(3n+2),
.risk-path article:nth-child(1),
.levels-grid article:nth-child(4),
.hub-card:nth-child(2),
.locations-grid .location-chip:nth-child(4),
.expectations-grid article:nth-child(3)
) {
background: var(--bno-soft-orange) !important;
background-color: var(--bno-soft-orange) !important;
color: #000 !important;
}
:is(
.score-card,
.answer-card,
.risk-card,
.case-card,
.route-grid article,
.method-card,
.deliverables article,
.service-grid article,
.timeline article,
.contact-card,
.role-card,
.culture-card,
.value-card-careers,
.proof-grid article,
.hub-card,
.cases-mini-card,
.compare-card,
.level-card,
.levels-grid article,
.pattern-card,
.system-card,
.step-card,
.offer-card,
.platform-card,
.process-card,
.source-card,
.pain-card,
.signal-card,
.map-card,
.cta-card,
.about-ai-card,
.location-chip
).yellow,
:is(
.metric-card.yellow,
.case-card.featured:not(.dark),
.case-card.yellow,
.contact-card.yellow,
.answer-card.yellow,
.culture-card.yellow,
.about-ai-card.yellow,
.offer-card.yellow,
.proof-card.yellow,
.visual-card.yellow,
.process-card.yellow,
.platform-card.yellow,
.step-card.yellow,
.system-card.yellow,
.scope-card.yellow,
.source-card.yellow,
.pain-card.yellow,
.signal-card.yellow,
.level-card.yellow,
.hub-card.yellow,
.cases-mini-card:nth-child(2),
.route-grid article:nth-child(2),
.deliverables article:nth-child(3n+1),
.service-grid article:nth-child(2),
.service-grid article:nth-child(5),
.timeline article:nth-child(2),
.proof-grid article:nth-child(3n+1),
.risk-card,
.risk-path article:nth-child(3),
.locations-grid .location-chip:nth-child(2),
.locations-grid .location-chip:nth-child(5),
.expectations-grid article:nth-child(2),
.levels-grid article:nth-child(2)
) {
background: var(--bno-soft-yellow) !important;
background-color: var(--bno-soft-yellow) !important;
color: #000 !important;
}
:is(
.score-card,
.answer-card,
.risk-card,
.case-card,
.route-grid article,
.method-card,
.deliverables article,
.service-grid article,
.timeline article,
.contact-card,
.role-card,
.culture-card,
.value-card-careers,
.proof-grid article,
.hub-card,
.cases-mini-card,
.compare-card,
.level-card,
.levels-grid article,
.pattern-card,
.system-card,
.step-card,
.offer-card,
.platform-card,
.process-card,
.source-card,
.pain-card,
.signal-card,
.map-card,
.cta-card,
.about-ai-card,
.location-chip
).pink,
:is(
.metric-card.pink,
.case-card.pink,
.contact-card.pink,
.answer-card.pink,
.culture-card.pink,
.about-ai-card.pink,
.offer-card.pink,
.proof-card.pink,
.visual-card.pink,
.process-card.pink,
.platform-card.pink,
.step-card.pink,
.system-card.pink,
.scope-card.pink,
.source-card.pink,
.pain-card.pink,
.signal-card.pink,
.level-card.pink,
.hub-card.pink,
.cases-mini-card.pink,
.method-card.pink,
.route-grid article:nth-child(3),
.deliverables article:nth-child(3n),
.service-grid article:nth-child(4),
.timeline article:nth-child(4),
.proof-grid article:nth-child(3n),
.levels-grid article:nth-child(3),
.hub-card:nth-child(4)
) {
background: var(--bno-soft-pink) !important;
background-color: var(--bno-soft-pink) !important;
color: #000 !important;
}
:is(.flow-pill, .signal-chip, .sales-card, .hero-tag, .chip, .diagram-card, .architecture-card).orange,
:is(.flow-pill, .signal-chip, .sales-card, .hero-tag, .chip, .diagram-card, .architecture-card).yellow,
:is(.flow-pill, .signal-chip, .sales-card, .hero-tag, .chip, .diagram-card, .architecture-card).pink {
box-shadow: none !important;
}
.method .section-head.center .eyebrow::before,
.method .section-head.centered .eyebrow::before,
.method-head .eyebrow::before {
display: none !important;
}
.method .route-grid h3,
.trust-grid article strong,
.hub-card h3,
.method-card h3,
.route-grid h3,
.service-grid h3,
.metric-card h3 {
font-size: clamp(22px, 1.65vw, 27px) !important;
line-height: 1.02 !important;
overflow-wrap: anywhere !important;
}
.risk-path {
gap: clamp(10px, 1.2vw, 14px) !important;
}
.risk-path article {
min-width: 0 !important;
padding: clamp(16px, 1.5vw, 20px) !important;
}
.risk-path article :is(b, h3, strong) {
font-size: clamp(24px, 2.05vw, 32px) !important;
line-height: 0.98 !important;
overflow-wrap: anywhere !important;
}
.risk-path article :is(p, span) {
font-size: clamp(13px, 0.95vw, 15px) !important;
line-height: 1.18 !important;
}
.risk-path article:nth-child(2) :is(small, span) {
color: #fff !important;
}
.timeline h3,
.offer-card h3,
.levels-grid h3,
.contact-card h3,
.contact-faq-grid h3,
.role-card h3,
.deliverables article strong {
font-size: clamp(17px, 1.1vw, 21px) !important;
line-height: 1.04 !important;
overflow-wrap: anywhere !important;
}
.location-chip strong {
font-size: clamp(13px, 0.78vw, 16px) !important;
line-height: 1 !important;
overflow-wrap: anywhere !important;
}
/* 2026-05-13 final shared visual pass.
This layer intentionally loads last so the whole site uses one softer depth
and large solid cards stop feeling visually harsh. */
:root {
--bno-soft-orange: #ffe2cc;
--bno-soft-yellow: #fff6ad;
--bno-soft-pink: #f4cdf8;
--bno-soft-card-gray: #efeeec;
--bno-shadow-soft: 0 0 10px rgba(0, 0, 0, .035), 0 2px 5px rgba(0, 0, 0, .018);
--bno-shadow-panel: 0 0 14px rgba(0, 0, 0, .045), 0 3px 7px rgba(0, 0, 0, .022);
--bno-shadow-hover: 0 0 18px rgba(0, 0, 0, .06), 0 4px 9px rgba(0, 0, 0, .028);
}
:is(
.score-card,
.answer-card,
.risk-card,
.case-card,
.case-logo,
.metric-card,
.method-card,
.route-grid article,
.service-grid article,
.deliverables article,
.timeline article,
.offer-card,
.proof-card,
.proof-grid article,
.proof-snapshot,
.contact-card,
.contact-faq-grid article,
.location-chip,
.role-card,
.culture-card,
.value-card-careers,
.expectations-grid article,
.levels-grid article,
.hub-card,
.cases-mini-card,
.compare-card,
.pattern-card,
.system-card,
.step-card,
.platform-card,
.process-card,
.source-card,
.pain-card,
.signal-card,
.scope-card,
.map-card,
.cta-card,
.about-ai-card,
.form-shell,
.contact-form-shell,
.careers-form-card,
.boost-visual,
.seo-visual,
.ads-visual,
.aeo-visual,
.ai-visual,
.branding-visual,
.loop-visual,
.outbound-visual,
.implementation-visual,
.migration-visual,
.integrations-visual,
.education-visual,
.realestate-visual,
.about-visual,
.cases-visual
) {
box-shadow: var(--bno-shadow-panel) !important;
filter: none !important;
}
:is(
.score-card,
.answer-card,
.risk-card,
.case-card,
.metric-card,
.method-card,
.proof-snapshot,
.contact-card,
.role-card,
.culture-card,
.boost-visual,
.seo-visual,
.ads-visual,
.aeo-visual,
.ai-visual,
.branding-visual,
.loop-visual,
.outbound-visual,
.implementation-visual,
.migration-visual,
.integrations-visual,
.education-visual,
.realestate-visual,
.about-visual,
.cases-visual
)::before,
:is(
.score-card,
.answer-card,
.risk-card,
.case-card,
.metric-card,
.method-card,
.proof-snapshot,
.contact-card,
.role-card,
.culture-card,
.boost-visual,
.seo-visual,
.ads-visual,
.aeo-visual,
.ai-visual,
.branding-visual,
.loop-visual,
.outbound-visual,
.implementation-visual,
.migration-visual,
.integrations-visual,
.education-visual,
.realestate-visual,
.about-visual,
.cases-visual
)::after {
box-shadow: none !important;
filter: none !important;
}
.risk-card::after {
box-shadow: none !important;
}
:is(
.case-card:hover,
.case-card:focus-visible,
.service-grid article:hover,
.service-grid article:focus-visible,
.route-grid article:hover,
.route-grid article:focus-visible,
.timeline article:hover,
.timeline article:focus-visible,
.metric-card:hover,
.metric-card:focus-visible,
.role-card:hover,
.role-card:focus-visible,
.hub-card:hover,
.hub-card:focus-visible,
.contact-card:hover,
.contact-card:focus-visible
) {
box-shadow: var(--bno-shadow-hover) !important;
transform: none !important;
}
:is(
.metric-card.orange,
.case-card.orange,
.contact-card.orange,
.answer-card.orange,
.culture-card.orange,
.about-ai-card.orange,
.offer-card.orange,
.proof-card.orange,
.visual-card.orange,
.process-card.orange,
.platform-card.orange,
.step-card.orange,
.system-card.orange,
.scope-card.orange,
.source-card.orange,
.pain-card.orange,
.signal-card.orange,
.level-card.orange,
.hub-card.orange,
.cases-mini-card.orange,
.method-card.orange,
.route-grid article:nth-child(4),
.deliverables article:nth-child(3n+2),
.service-grid article:nth-child(6),
.timeline article:nth-child(5),
.proof-grid article:nth-child(3n+2),
.risk-path article:nth-child(1),
.levels-grid article:nth-child(4),
.hub-card:nth-child(2),
.locations-grid .location-chip:nth-child(4),
.expectations-grid article:nth-child(3)
) {
background: var(--bno-soft-orange) !important;
background-color: var(--bno-soft-orange) !important;
color: #000 !important;
}
:is(
.metric-card.yellow,
.case-card.yellow,
.case-card.featured:not(.dark),
.contact-card.yellow,
.answer-card.yellow,
.culture-card.yellow,
.about-ai-card.yellow,
.offer-card.yellow,
.proof-card.yellow,
.visual-card.yellow,
.process-card.yellow,
.platform-card.yellow,
.step-card.yellow,
.system-card.yellow,
.scope-card.yellow,
.source-card.yellow,
.pain-card.yellow,
.signal-card.yellow,
.level-card.yellow,
.hub-card.yellow,
.cases-mini-card:nth-child(2),
.route-grid article:nth-child(2),
.deliverables article:nth-child(3n+1),
.service-grid article:nth-child(2),
.service-grid article:nth-child(5),
.timeline article:nth-child(2),
.proof-grid article:nth-child(3n+1),
.risk-card,
.risk-path article:nth-child(3),
.locations-grid .location-chip:nth-child(2),
.locations-grid .location-chip:nth-child(5),
.expectations-grid article:nth-child(2),
.levels-grid article:nth-child(2)
) {
background: var(--bno-soft-yellow) !important;
background-color: var(--bno-soft-yellow) !important;
color: #000 !important;
}
:is(
.metric-card.pink,
.case-card.pink,
.contact-card.pink,
.answer-card.pink,
.culture-card.pink,
.about-ai-card.pink,
.offer-card.pink,
.proof-card.pink,
.visual-card.pink,
.process-card.pink,
.platform-card.pink,
.step-card.pink,
.system-card.pink,
.scope-card.pink,
.source-card.pink,
.pain-card.pink,
.signal-card.pink,
.level-card.pink,
.hub-card.pink,
.cases-mini-card.pink,
.method-card.pink,
.route-grid article:nth-child(3),
.deliverables article:nth-child(3n),
.service-grid article:nth-child(4),
.timeline article:nth-child(4),
.proof-grid article:nth-child(3n),
.levels-grid article:nth-child(3),
.hub-card:nth-child(4)
) {
background: var(--bno-soft-pink) !important;
background-color: var(--bno-soft-pink) !important;
color: #000 !important;
}
:is(
.metric-card,
.case-card,
.contact-card,
.answer-card,
.culture-card,
.about-ai-card,
.offer-card,
.proof-card,
.visual-card,
.process-card,
.platform-card,
.step-card,
.system-card,
.scope-card,
.source-card,
.pain-card,
.signal-card,
.level-card,
.hub-card,
.cases-mini-card,
.method-card,
.route-grid article,
.deliverables article,
.service-grid article,
.timeline article,
.proof-grid article,
.levels-grid article,
.risk-path article,
.location-chip,
.expectations-grid article
) :is(h1, h2, h3, h4, strong, b, p, span, small, li) {
color: inherit;
}
:is(.flow-pill, .signal-chip, .sales-card, .hero-tag, .chip).orange {
background: var(--bno-fiery-orange) !important;
background-color: var(--bno-fiery-orange) !important;
}
:is(.flow-pill, .signal-chip, .sales-card, .hero-tag, .chip).yellow {
background: var(--bno-mellow-yellow) !important;
background-color: var(--bno-mellow-yellow) !important;
}
:is(.flow-pill, .signal-chip, .sales-card, .hero-tag, .chip).pink {
background: var(--bno-lively-pink) !important;
background-color: var(--bno-lively-pink) !important;
}
:is(.flow-pill, .signal-chip, .sales-card, .hero-tag, .chip) {
box-shadow: none !important;
}
/* -------------------------------------------------------------------------
Site-wide final visual pass
This block intentionally sits last: it keeps the full site feeling like one
design system after many page-level iterations.
------------------------------------------------------------------------- */
:root {
--bno-soft-orange: #ffd9ba;
--bno-soft-yellow: #fff3b8;
--bno-soft-pink: #f4cdf8;
--bno-shadow-soft: 0 0 10px rgba(0, 0, 0, 0.035), 0 2px 5px rgba(0, 0, 0, 0.018);
--bno-shadow-panel: 0 0 14px rgba(0, 0, 0, 0.045), 0 3px 7px rgba(0, 0, 0, 0.022);
--bno-shadow-hover: 0 0 18px rgba(0, 0, 0, 0.06), 0 4px 9px rgba(0, 0, 0, 0.028);
}
:is(
.answer-card,
.score-card,
.risk-card,
.case-card,
.case-logo,
.cases-visual,
.metric-card,
.route-grid article,
.method-card,
.offer-card,
.deliverables article,
.service-grid article,
.timeline article,
.contact-card,
.contact-form-shell,
.contact-faq-grid article,
.location-chip,
.route-steps article,
.role-card,
.culture-card,
.value-card-careers,
.faq-card,
.expectations-grid article,
.proof-snapshot,
.proof-card,
.visual-card,
.process-card,
.platform-card,
.step-card,
.system-card,
.scope-card,
.source-card,
.pain-card,
.signal-card,
.map-card,
.cta-card,
.about-ai-card,
.cases-mini-card,
.compare-card,
.level-card,
.levels-grid article,
.pattern-card,
.trust-grid article,
.logo-cloud-card,
.hub-card,
.route-panel,
.form-shell,
.careers-form-card,
.boost-visual,
.seo-visual,
.ads-visual,
.aeo-visual,
.ai-visual,
.branding-visual,
.loop-visual,
.outbound-visual,
.implementation-visual,
.migration-visual,
.integrations-visual,
.education-visual,
.realestate-visual,
.financial-visual,
.b2b-visual,
.tourism-visual,
.health-visual,
.logistics-visual,
.industrial-visual,
.about-visual,
.careers-visual
) {
box-shadow: var(--bno-shadow-panel) !important;
filter: none !important;
}
:is(
.answer-card,
.score-card,
.risk-card,
.case-card,
.cases-visual,
.metric-card,
.route-grid article,
.method-card,
.offer-card,
.service-grid article,
.timeline article,
.contact-card,
.contact-form-shell,
.contact-faq-grid article,
.role-card,
.culture-card,
.hub-card,
.proof-card,
.visual-card,
.process-card,
.platform-card,
.step-card,
.system-card,
.scope-card,
.source-card,
.pain-card,
.signal-card,
.level-card,
.levels-grid article,
.trust-grid article,
.boost-visual,
.seo-visual,
.ads-visual,
.aeo-visual,
.ai-visual,
.branding-visual,
.loop-visual,
.outbound-visual,
.implementation-visual,
.migration-visual,
.integrations-visual,
.education-visual,
.realestate-visual,
.financial-visual,
.b2b-visual,
.tourism-visual,
.health-visual,
.logistics-visual,
.industrial-visual,
.about-visual,
.careers-visual
)::before,
:is(
.answer-card,
.score-card,
.risk-card,
.case-card,
.cases-visual,
.metric-card,
.route-grid article,
.method-card,
.offer-card,
.service-grid article,
.timeline article,
.contact-card,
.contact-form-shell,
.contact-faq-grid article,
.role-card,
.culture-card,
.hub-card,
.proof-card,
.visual-card,
.process-card,
.platform-card,
.step-card,
.system-card,
.scope-card,
.source-card,
.pain-card,
.signal-card,
.level-card,
.levels-grid article,
.trust-grid article,
.boost-visual,
.seo-visual,
.ads-visual,
.aeo-visual,
.ai-visual,
.branding-visual,
.loop-visual,
.outbound-visual,
.implementation-visual,
.migration-visual,
.integrations-visual,
.education-visual,
.realestate-visual,
.financial-visual,
.b2b-visual,
.tourism-visual,
.health-visual,
.logistics-visual,
.industrial-visual,
.about-visual,
.careers-visual
)::after {
box-shadow: none !important;
filter: none !important;
}
:is(
.case-card:hover,
.case-card:focus-visible,
.service-grid article:hover,
.service-grid article:focus-visible,
.route-grid article:hover,
.route-grid article:focus-visible,
.timeline article:hover,
.timeline article:focus-visible,
.metric-card:hover,
.metric-card:focus-visible,
.role-card:hover,
.role-card:focus-visible,
.hub-card:hover,
.hub-card:focus-visible,
.contact-card:hover,
.contact-card:focus-visible,
.trust-grid article:hover,
.trust-grid article:focus-visible
) {
box-shadow: var(--bno-shadow-hover) !important;
transform: none !important;
}
:is(
.orange,
.metric-card.orange,
.case-card.orange,
.contact-card.orange,
.answer-card.orange,
.culture-card.orange,
.about-ai-card.orange,
.offer-card.orange,
.proof-card.orange,
.visual-card.orange,
.process-card.orange,
.platform-card.orange,
.step-card.orange,
.system-card.orange,
.scope-card.orange,
.source-card.orange,
.pain-card.orange,
.signal-card.orange,
.level-card.orange,
.hub-card.orange,
.cases-mini-card.orange,
.method-card.orange
) {
background-color: var(--bno-soft-orange) !important;
background-image: none !important;
color: #000 !important;
}
:is(
.yellow,
.metric-card.yellow,
.case-card.yellow,
.contact-card.yellow,
.answer-card.yellow,
.culture-card.yellow,
.about-ai-card.yellow,
.offer-card.yellow,
.proof-card.yellow,
.visual-card.yellow,
.process-card.yellow,
.platform-card.yellow,
.step-card.yellow,
.system-card.yellow,
.scope-card.yellow,
.source-card.yellow,
.pain-card.yellow,
.signal-card.yellow,
.level-card.yellow,
.hub-card.yellow,
.cases-mini-card.yellow,
.method-card.yellow
) {
background-color: var(--bno-soft-yellow) !important;
background-image: none !important;
color: #000 !important;
}
:is(
.pink,
.metric-card.pink,
.case-card.pink,
.contact-card.pink,
.answer-card.pink,
.culture-card.pink,
.about-ai-card.pink,
.offer-card.pink,
.proof-card.pink,
.visual-card.pink,
.process-card.pink,
.platform-card.pink,
.step-card.pink,
.system-card.pink,
.scope-card.pink,
.source-card.pink,
.pain-card.pink,
.signal-card.pink,
.level-card.pink,
.hub-card.pink,
.cases-mini-card.pink,
.method-card.pink
) {
background-color: var(--bno-soft-pink) !important;
background-image: none !important;
color: #000 !important;
}
/* Keep small diagram chips and accents saturated; only large solid cards soften. */
:is(
.flow-pill,
.signal-chip,
.sales-card,
.hero-tag,
.chip,
.diagram-node,
.diagram-step,
.admissions-loop span
).orange {
background: var(--bno-fiery-orange) !important;
background-color: var(--bno-fiery-orange) !important;
}
:is(
.flow-pill,
.signal-chip,
.sales-card,
.hero-tag,
.chip,
.diagram-node,
.diagram-step,
.admissions-loop span
).yellow {
background: var(--bno-mellow-yellow) !important;
background-color: var(--bno-mellow-yellow) !important;
}
:is(
.flow-pill,
.signal-chip,
.sales-card,
.hero-tag,
.chip,
.diagram-node,
.diagram-step,
.admissions-loop span
).pink {
background: var(--bno-lively-pink) !important;
background-color: var(--bno-lively-pink) !important;
}
:is(
.metric-card,
.case-card,
.contact-card,
.answer-card,
.culture-card,
.about-ai-card,
.offer-card,
.proof-card,
.visual-card,
.process-card,
.platform-card,
.step-card,
.system-card,
.scope-card,
.source-card,
.pain-card,
.signal-card,
.level-card,
.hub-card,
.cases-mini-card,
.method-card,
.route-grid article,
.deliverables article,
.service-grid article,
.timeline article,
.proof-grid article,
.levels-grid article,
.risk-path article,
.location-chip,
.expectations-grid article,
.contact-faq-grid article,
.role-card
) :is(h1, h2, h3, h4, strong, b, p, span, small, li, a) {
color: inherit;
}
.method .section-head.center .eyebrow::before,
.method .section-head.centered .eyebrow::before,
.method-head .eyebrow::before {
display: none !important;
}
:is(
.route-grid h3,
.service-grid h3,
.metric-card h3,
.timeline h3,
.offer-card h3,
.levels-grid h3,
.contact-card h3,
.contact-faq-grid h3,
.role-card h3,
.culture-card h2,
.culture-card h3,
.hub-card h3,
.method-card h3,
.proof-card h3,
.process-card h3,
.platform-card h3,
.step-card h3,
.system-card h3,
.scope-card h3,
.source-card h3,
.pain-card h3,
.signal-card h3,
.case-card h3,
.deliverables article strong
) {
font-size: clamp(20px, 1.65vw, 28px) !important;
line-height: 1.04 !important;
overflow-wrap: anywhere !important;
}
.trust-grid article strong {
font-size: clamp(34px, 3.4vw, 50px) !important;
line-height: 0.96 !important;
overflow-wrap: anywhere !important;
}
.risk-path article h3,
.expectations-grid article h3,
.contact-faq-grid article h3,
.role-card h3 {
font-size: clamp(20px, 1.45vw, 26px) !important;
}
.location-chip strong {
font-size: clamp(16px, 1.5vw, 26px) !important;
line-height: 0.98 !important;
}
html[lang^="es"] main :is(h1, h2, h3) :is(.bno-heading-accent, em) {
display: inline;
color: transparent !important;
background: var(--bno-squiggle);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-style: italic;
}
html[lang^="es"] main :is(h1, h2, h3) .bno-heading-accent {
white-space: normal;
}
/* Motion layer: subtle BnO interactions inspired by the Data IQ landings. */
:root {
--bno-motion-ease: cubic-bezier(0.23, 1, 0.32, 1);
--bno-motion-fast: 180ms;
--bno-card-line: linear-gradient(
125deg,
rgba(255, 237, 2, 0.85) 0%,
rgba(254, 131, 1, 0.92) 52%,
rgba(237, 139, 250, 0.85) 100%
);
--bno-card-glow: rgba(254, 131, 1, 0.28);
}
body.reveal-ready [data-reveal] {
transition-delay: var(--reveal-delay, 0ms) !important;
}
@media (hover: hover) and (pointer: fine) {
:is(
.btn,
.nav-cta,
.language-switch a,
.mobile-menu-toggle,
.logo-cloud img,
.badge-grid img,
.mini-grid div,
.metric-card,
.route-grid article,
.deliverables article,
.compare-grid article,
.service-grid article,
.proof-grid article,
.contact-card,
.contact-faq-grid article,
.hub-card,
.case-card,
.answer-card,
.risk-card,
.method-card,
.role-card,
.culture-card,
.cases-mini-card,
.level-card,
.pattern-card,
.system-card,
.step-card,
.process-card,
.platform-card,
.scope-card,
.source-card,
.pain-card,
.signal-card,
.map-card,
.cta-card,
.faq-list details,
.footer-social a,
.footer-column a
) {
transition:
translate var(--bno-motion-fast) var(--bno-motion-ease),
transform var(--bno-motion-fast) var(--bno-motion-ease),
box-shadow var(--bno-motion-fast) var(--bno-motion-ease),
border-color var(--bno-motion-fast) var(--bno-motion-ease),
background var(--bno-motion-fast) var(--bno-motion-ease),
color var(--bno-motion-fast) var(--bno-motion-ease),
scale var(--bno-motion-fast) var(--bno-motion-ease),
opacity var(--bno-motion-fast) var(--bno-motion-ease) !important;
}
:is(
.metric-card,
.route-grid article,
.deliverables article,
.compare-grid article,
.service-grid article,
.proof-grid article,
.contact-card,
.contact-faq-grid article,
.hub-card,
.case-card,
.answer-card,
.risk-card,
.method-card,
.role-card,
.culture-card,
.cases-mini-card,
.level-card,
.pattern-card,
.system-card,
.step-card,
.process-card,
.platform-card,
.scope-card,
.source-card,
.pain-card,
.signal-card,
.map-card,
.cta-card,
.faq-list details,
.mini-grid div
):hover {
translate: 0 -5px;
scale: 1.012;
box-shadow: 0 24px 52px -24px var(--bno-card-glow), var(--bno-shadow-hover) !important;
}
:is(.logo-cloud img, .badge-grid img):hover {
translate: 0 -3px;
border-color: rgba(254, 131, 1, 0.72) !important;
}
.footer-column a:hover,
.footer-social a:hover {
translate: 3px 0;
}
.desktop-nav :is(a, button) {
position: relative;
}
.desktop-nav :is(a, button)::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 6px;
height: 2px;
border-radius: 999px;
background: var(--bno-squiggle);
transform: scaleX(0);
transform-origin: left;
transition: transform 220ms var(--bno-motion-ease);
}
.desktop-nav :is(a:hover, a:focus-visible, button:hover, button:focus-visible)::after,
.nav-item:hover > button::after,
.nav-item:focus-within > button::after {
transform: scaleX(1);
}
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
:is(
.metric-card,
.route-grid article,
.deliverables article,
.compare-grid article,
.service-grid article,
.proof-grid article,
.mini-grid div,
.contact-card,
.hub-card,
.case-card,
.answer-card,
.risk-card,
.method-card,
.role-card,
.culture-card,
.faq-list details,
.cases-mini-card,
.level-card,
.pattern-card,
.system-card,
.step-card,
.process-card,
.platform-card,
.scope-card,
.source-card,
.pain-card,
.signal-card,
.map-card,
.cta-card
) {
position: relative;
isolation: isolate;
overflow: hidden;
}
:is(
.metric-card,
.route-grid article,
.deliverables article,
.compare-grid article,
.service-grid article,
.proof-grid article,
.mini-grid div,
.contact-card,
.hub-card,
.case-card,
.answer-card,
.risk-card,
.method-card,
.role-card,
.culture-card,
.faq-list details,
.cases-mini-card,
.level-card,
.pattern-card,
.system-card,
.step-card,
.process-card,
.platform-card,
.scope-card,
.source-card,
.pain-card,
.signal-card,
.map-card,
.cta-card
)::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
padding: 2px;
border-radius: inherit;
background: var(--bno-card-line);
opacity: 0;
pointer-events: none;
transform-origin: 50% 50%;
transition: opacity 260ms var(--bno-motion-ease);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
:is(
.metric-card,
.route-grid article,
.deliverables article,
.compare-grid article,
.service-grid article,
.proof-grid article,
.mini-grid div,
.contact-card,
.hub-card,
.case-card,
.answer-card,
.risk-card,
.method-card,
.role-card,
.culture-card,
.faq-list details,
.cases-mini-card,
.level-card,
.pattern-card,
.system-card,
.step-card,
.process-card,
.platform-card,
.scope-card,
.source-card,
.pain-card,
.signal-card,
.map-card,
.cta-card
):hover::after {
opacity: 1;
}
:is(.metric-card.orange, .case-card.orange, .contact-card.orange, .answer-card.orange, .about-ai-card.orange, .culture-card.orange, .offer-card.orange, .proof-card.orange):hover {
--bno-card-glow: rgba(254, 131, 1, 0.5);
}
:is(.metric-card.yellow, .case-card.featured:not(.dark), .contact-card.yellow, .answer-card.yellow, .culture-card.yellow, .about-ai-card.yellow, .risk-card):hover {
--bno-card-glow: rgba(255, 237, 2, 0.4);
}
:is(.metric-card.pink, .hub-card:nth-child(4), .sales-card.pink):hover {
--bno-card-glow: rgba(237, 139, 250, 0.48);
}
}
.faq-list details[open] {
border-color: var(--bno-fiery-orange);
box-shadow: var(--bno-shadow-hover) !important;
}
@media (prefers-reduced-motion: no-preference) {
.squiggle-one {
animation: bno-squiggle-one 16s ease-in-out infinite alternate;
}
.squiggle-two {
animation: bno-squiggle-two 18s ease-in-out infinite alternate;
}
.blueprint-squiggle,
.risk-squiggle {
animation: bno-squiggle-soft-drift 20s ease-in-out infinite alternate;
}
.hero-doodle {
animation: bno-doodle-float 6.8s ease-in-out infinite;
}
.eyebrow::before {
background-size: 180% 100%;
animation: bno-accent-slide 5.8s ease-in-out infinite alternate;
}
}
@keyframes bno-squiggle-one {
from { transform: rotate(20deg) translate3d(0, 0, 0); }
to { transform: rotate(22deg) translate3d(-18px, 14px, 0); }
}
@keyframes bno-squiggle-two {
from { transform: rotate(198deg) translate3d(0, 0, 0); }
to { transform: rotate(195deg) translate3d(18px, -12px, 0); }
}
@keyframes bno-squiggle-soft-drift {
from { transform: rotate(158deg) translate3d(0, 0, 0); }
to { transform: rotate(161deg) translate3d(-16px, 12px, 0); }
}
@keyframes bno-doodle-float {
0%, 100% { transform: rotate(-5deg) translateY(0); }
50% { transform: rotate(-3deg) translateY(-12px); }
}
@keyframes bno-accent-slide {
from { background-position: 0% 50%; }
to { background-position: 100% 50%; }
}
@keyframes bno-card-line-orbit {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
body.reveal-ready [data-reveal] {
transition-delay: 0ms !important;
}
:is(.squiggle-one, .squiggle-two, .blueprint-squiggle, .risk-squiggle, .hero-doodle) {
animation: none !important;
}
.eyebrow::before {
animation: none !important;
}
:is(
.metric-card,
.route-grid article,
.deliverables article,
.compare-grid article,
.service-grid article,
.proof-grid article,
.contact-card,
.contact-faq-grid article,
.hub-card,
.case-card,
.answer-card,
.risk-card,
.method-card,
.role-card,
.culture-card,
.cases-mini-card,
.level-card,
.pattern-card,
.system-card,
.step-card,
.process-card,
.platform-card,
.scope-card,
.source-card,
.pain-card,
.signal-card,
.map-card,
.cta-card,
.faq-list details,
.mini-grid div,
.logo-cloud img,
.badge-grid img,
.footer-column a,
.footer-social a
) {
translate: none !important;
scale: none !important;
}
:is(
.metric-card,
.route-grid article,
.deliverables article,
.compare-grid article,
.service-grid article,
.proof-grid article,
.mini-grid div,
.contact-card,
.hub-card,
.case-card,
.answer-card,
.risk-card,
.method-card,
.role-card,
.culture-card,
.faq-list details,
.cases-mini-card,
.level-card,
.pattern-card,
.system-card,
.step-card,
.process-card,
.platform-card,
.scope-card,
.source-card,
.pain-card,
.signal-card,
.map-card,
.cta-card
)::after {
animation: none !important;
opacity: 0 !important;
}
}
/* ============================================================
Answer section — visual two-column layout (outcome triad)
============================================================ */
.answer-card.answer-split {
display: grid;
grid-template-columns: 1.3fr 0.9fr;
gap: clamp(28px, 4vw, 60px);
align-items: center;
text-align: left;
}
.answer-split .answer-copy { min-width: 0; }
.answer-split h2 {
font-size: clamp(26px, 2.56vw, 40px);
line-height: 1.02;
margin-bottom: 18px;
}
.answer-split .answer-copy p:last-child {
max-width: 46ch;
color: var(--color-fg-muted);
font-size: 18px;
}
.answer-outcomes {
display: grid;
gap: 14px;
}
.outcome-chip {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 18px;
border-radius: 14px;
border: 1.5px solid var(--bno-slack-black);
background: var(--bno-paper);
box-shadow: 0 16px 34px -26px rgba(0, 0, 0, 0.5);
transition:
transform var(--bno-motion-fast, 180ms) var(--bno-motion-ease),
box-shadow var(--bno-motion-fast, 180ms) var(--bno-motion-ease);
}
@media (hover: hover) and (pointer: fine) {
.outcome-chip:hover {
transform: translateY(-3px);
box-shadow: 0 22px 40px -24px rgba(0, 0, 0, 0.55);
}
}
.outcome-arrow {
flex: 0 0 auto;
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: 12px;
font-size: 28px;
font-weight: 700;
color: #000;
}
.outcome-down .outcome-arrow { background: linear-gradient(140deg, #FFED02 0%, #FE8301 100%); }
.outcome-up .outcome-arrow { background: linear-gradient(140deg, #FE8301 0%, #ED8BFA 100%); }
.outcome-text { min-width: 0; }
.outcome-text strong {
display: block;
font-size: 18px;
line-height: 1.15;
margin-bottom: 3px;
}
.outcome-text small {
display: block;
font-size: 14px;
line-height: 1.4;
color: var(--color-fg-muted);
}
@media (max-width: 900px) {
.answer-card.answer-split {
grid-template-columns: 1fr;
gap: 26px;
}
}
:root {
--assistant-max: 920px;
}
/* Screen-reader-only text (used for assistant label) */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* --- BnO: IA assistant strip (MX) --- */
.bno-assistant-strip {
position: relative;
z-index: 6;
padding: 64px max(24px, calc((100vw - var(--page-max, var(--site-max, 1180px))) / 2));
background:
radial-gradient(circle at 20% 0%, rgba(255, 142, 61, 0.14), transparent 55%),
radial-gradient(circle at 90% 30%, rgba(255, 205, 64, 0.14), transparent 55%),
radial-gradient(circle at 60% 90%, rgba(255, 114, 139, 0.10), transparent 55%),
var(--bno-paper);
}
.assistant-shell {
display: grid;
gap: 18px;
max-width: var(--assistant-max);
margin-left: auto;
margin-right: auto;
}
.assistant-eyebrow {
margin: 0 0 10px;
width: fit-content;
padding: 7px 12px;
border-radius: var(--radius-pill);
border: 1.5px solid rgba(16, 16, 16, 0.14);
background: rgba(255,255,255,0.72);
display: inline-flex;
align-items: center;
gap: 10px;
max-width: min(var(--assistant-max), 100%);
flex-wrap: wrap;
}
.assistant-eyebrow-tag {
font-size: 12px;
font-weight: 850;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
white-space: nowrap;
}
.assistant-eyebrow-text {
font-size: 13px;
font-weight: 650;
letter-spacing: -0.01em;
text-transform: none;
}
.assistant-card {
background: transparent;
}
/* --- Conversación: burbujas de chat --- */
.assistant-messages {
display: flex;
flex-direction: column;
gap: 14px;
padding: 4px 2px 8px;
/* Sin altura fija: la conversación crece en el flujo y empuja el composer
hacia abajo (scroll natural de la página), como el chat del evento.
Así se evita el segundo scroll interno. */
}
.assistant-messages[hidden] {
display: none;
}
.assistant-msg {
max-width: 90%;
border-radius: 18px;
padding: 14px 18px;
font-size: 1rem;
line-height: 1.55;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Pregunta del usuario — derecha, gradiente suave */
.assistant-msg-user {
align-self: flex-end;
background: var(--bno-squiggle-soft);
border: 1px solid rgba(254, 131, 1, 0.35);
border-bottom-right-radius: 6px;
white-space: pre-wrap;
}
/* Respuesta del bot — izquierda, papel, con avatar */
.assistant-msg-bot {
align-self: flex-start;
display: flex;
gap: 12px;
background: var(--bno-paper);
border: 1px solid rgba(16, 16, 16, 0.12);
border-bottom-left-radius: 6px;
box-shadow: var(--bno-shadow-soft, 0 6px 18px rgba(0,0,0,0.06));
}
.assistant-av {
flex: 0 0 auto;
width: 30px;
height: 30px;
margin-top: 2px;
border-radius: 50%;
background: var(--bno-squiggle);
}
.assistant-tx {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
}
.assistant-tx p {
margin: 0;
}
.assistant-tx p + p {
margin-top: 10px;
}
.assistant-tx a {
color: var(--bno-fiery-orange);
font-weight: 700;
text-decoration: underline;
overflow-wrap: anywhere;
}
.assistant-tx strong {
font-weight: 800;
}
.assistant-note {
margin-top: 10px;
color: var(--color-fg-muted, rgba(0,0,0,0.62));
font-size: 13px;
}
/* Indicador "escribiendo…" */
.assistant-typing {
display: inline-flex;
gap: 5px;
padding: 6px 0;
}
.assistant-typing i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-fg-muted, #575555);
animation: assistant-bounce 1.2s infinite ease-in-out;
}
.assistant-typing i:nth-child(2) { animation-delay: 0.15s; }
.assistant-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes assistant-bounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
30% { transform: translateY(-5px); opacity: 1; }
}
/* --- Composer --- */
.assistant-input {
padding: 0;
}
.assistant-composer {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 14px 14px 20px;
border-radius: 24px;
background: var(--bno-slack-black);
box-shadow: 0 16px 36px rgba(0,0,0,0.18);
}
.assistant-composer textarea {
width: 100%;
resize: none;
min-height: 22px;
max-height: 120px;
overflow: auto;
border: 0;
background: transparent;
color: var(--bno-paper);
padding: 0;
font: inherit;
line-height: 1.4;
}
.assistant-composer textarea::placeholder {
color: rgba(255,255,255,0.62);
}
.assistant-composer textarea:focus-visible {
outline: none;
}
.assistant-send {
position: relative;
height: 46px;
width: 46px;
border-radius: 999px;
border: 0;
background: var(--bno-squiggle);
color: var(--bno-slack-black);
font-weight: 900;
cursor: pointer;
display: grid;
place-items: center;
transition: transform 180ms var(--ease-out), filter 180ms var(--ease-out);
}
.assistant-send-icon {
font-size: 18px;
line-height: 1;
transform: translateY(-1px);
}
.assistant-send-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 0;
background: rgba(0,0,0,0.92);
color: #fff;
padding: 8px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 650;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 8px;
opacity: 0;
transform: translateY(6px);
pointer-events: none;
transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
white-space: nowrap;
box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}
.assistant-send-tooltip-icon {
width: 20px;
height: 20px;
border-radius: 999px;
display: grid;
place-items: center;
background: rgba(255,255,255,0.12);
font-size: 13px;
}
.assistant-send:hover,
.assistant-send:focus-visible {
transform: translateY(-1px) scale(1.04);
outline: none;
filter: saturate(1.05);
}
.assistant-send:hover .assistant-send-tooltip,
.assistant-send:focus-visible .assistant-send-tooltip {
opacity: 1;
transform: translateY(0);
}
.assistant-send:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
/* --- Chips de preguntas sugeridas --- */
.assistant-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 16px;
}
.assistant-chips:empty {
display: none;
}
.assistant-chip {
border: 1px solid rgba(16, 16, 16, 0.16);
background: var(--bno-paper);
border-radius: 999px;
padding: 9px 16px;
font: inherit;
font-size: 0.88rem;
font-weight: 600;
color: var(--bno-slack-black);
cursor: pointer;
transition: background 150ms var(--ease-out), color 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.assistant-chip:hover,
.assistant-chip:focus-visible {
background: var(--bno-slack-black);
color: var(--bno-paper);
transform: translateY(-1px);
outline: none;
}
.assistant-cta-row {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding-top: 6px;
}
@media (max-width: 860px) {
.bno-assistant-strip {
padding-top: 42px;
padding-bottom: 42px;
}
.assistant-send-tooltip {
display: none;
}
.assistant-msg {
max-width: 96%;
}
}
:root {
--page-max: 1180px;
--gbp-line: rgba(0, 0, 0, 0.14);
--gbp-muted: rgba(0, 0, 0, 0.66);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
overflow-x: hidden;
background: var(--bno-paper);
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
}
.section-pad {
position: relative;
padding: 104px max(24px, calc((100vw - var(--page-max)) / 2));
}
.eyebrow {
display: inline-flex;
align-items: center;
width: fit-content;
min-height: 32px;
margin: 0 0 20px;
padding: 8px 12px;
border: 1.5px solid var(--bno-slack-black);
border-radius: 999px;
background: var(--bno-paper);
color: var(--bno-slack-black);
font: 850 12px/1 var(--font-sans);
letter-spacing: 0;
text-transform: uppercase;
}
.btn {
min-height: 48px;
padding: 0 20px;
border: 1.5px solid var(--bno-slack-black);
border-radius: 999px;
font: 850 14px/1 var(--font-sans);
text-decoration: none;
white-space: nowrap;
}
.btn-secondary {
background: var(--bno-paper);
}
.gbp-hero {
min-height: calc(100vh - 78px);
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.72fr);
align-items: center;
gap: 56px;
overflow: hidden;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.96)),
var(--bno-squiggle-soft);
}
.gbp-hero-copy,
.hero-system {
position: relative;
z-index: 2;
}
.gbp-hero h1 {
max-width: 16ch;
margin: 0 0 28px;
font-size: 40px;
line-height: 1.02;
letter-spacing: 0;
}
.hero-lede {
max-width: 58ch;
color: rgba(0, 0, 0, 0.78);
font-size: 21px;
line-height: 1.42;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 34px;
}
.proof-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-top: 34px;
}
.proof-row img {
width: auto;
max-width: 156px;
max-height: 58px;
padding: 10px 12px;
border: 1.5px solid var(--gbp-line);
border-radius: 8px;
background: rgba(255, 255, 255, 0.78);
object-fit: contain;
}
.gbp-squiggle {
position: absolute;
pointer-events: none;
user-select: none;
}
.gbp-squiggle-one {
right: 18px;
bottom: -70px;
width: 380px;
opacity: 0.9;
transform: rotate(-10deg);
}
.hero-system {
display: grid;
gap: 18px;
}
.system-node {
min-height: 230px;
padding: 28px;
border: 1.5px solid var(--bno-slack-black);
border-radius: 8px;
background: var(--bno-paper);
box-shadow: var(--bno-shadow-panel);
}
.system-node span,
.shift-grid span,
.route-grid span,
.method-track span {
display: inline-grid;
place-items: center;
min-width: 44px;
height: 34px;
margin-bottom: 18px;
border: 1.5px solid var(--bno-slack-black);
border-radius: 999px;
background: var(--bno-mellow-yellow);
font: 900 13px/1 var(--font-sans);
}
.system-node strong {
display: block;
margin-bottom: 12px;
font-family: var(--font-display);
font-size: 40px;
font-weight: 430;
line-height: 1;
letter-spacing: 0;
}
.system-node p {
margin: 0;
color: var(--gbp-muted);
}
.node-bottom {
background: var(--bno-slack-black);
color: var(--bno-paper);
}
.node-bottom strong {
color: var(--bno-paper);
}
.node-bottom p {
color: rgba(255, 255, 255, 0.74);
}
.system-arrow {
width: 2px;
height: 46px;
margin: -6px auto;
background: var(--bno-slack-black);
}
.system-arrow::after {
content: "";
display: block;
width: 14px;
height: 14px;
margin: 34px 0 0 -6px;
border-right: 2px solid var(--bno-slack-black);
border-bottom: 2px solid var(--bno-slack-black);
transform: rotate(45deg);
}
.logo-strip {
padding: 32px max(20px, calc((100vw - var(--page-max)) / 2));
border-top: 1.5px solid var(--bno-slack-black);
border-bottom: 1.5px solid var(--bno-slack-black);
color: var(--bno-paper);
background: var(--bno-slack-black);
}
.logo-strip p {
max-width: none;
margin: 0 0 24px;
color: rgba(255, 255, 255, 0.76);
font-size: 13px;
font-weight: 760;
letter-spacing: 0;
text-transform: uppercase;
text-align: center;
}
.logo-cloud {
display: grid;
grid-template-columns: repeat(6, minmax(92px, 1fr));
align-items: center;
gap: 20px;
}
.logo-cloud img {
width: 100%;
height: 72px;
max-width: none;
max-height: none;
padding: 18px;
border: 1.5px solid rgba(255, 255, 255, 0.18);
border-radius: 8px;
background: var(--bno-paper);
object-fit: contain;
filter: grayscale(1);
}
.section-head {
max-width: 850px;
margin-bottom: 42px;
}
.section-head.narrow {
max-width: 720px;
}
.section-head h2,
.answer-copy h2,
.brain-copy h2,
.proof-copy h2,
.final-cta h2 {
margin: 0 0 20px;
font-size: 45px;
line-height: 1;
letter-spacing: 0;
}
.section-head p,
.answer-copy p,
.brain-copy p,
.proof-copy p,
.final-cta p {
color: var(--gbp-muted);
font-size: 18px;
}
.shift-grid,
.value-grid,
.route-grid,
.deliverable-grid,
.fit-grid {
display: grid;
gap: 16px;
}
.shift-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.shift-grid article,
.value-grid article,
.route-grid article,
.deliverable-grid article,
.fit-grid article,
.compare-table article,
.faq-list details {
border: 1.5px solid var(--bno-slack-black);
border-radius: 8px;
background: var(--bno-paper);
box-shadow: var(--bno-shadow-panel);
}
.shift-grid article {
min-height: 260px;
padding: 24px;
}
.shift-grid article:nth-child(1) {
background: var(--bno-soft-yellow);
}
.shift-grid article:nth-child(2) {
background: var(--bno-soft-orange);
}
.shift-grid article:nth-child(3) {
background: var(--bno-soft-pink);
}
.shift-grid article:nth-child(4) {
color: var(--bno-paper);
background: var(--bno-slack-black);
}
.shift-grid article:nth-child(4) h3 {
color: var(--bno-paper);
}
.shift-grid article:nth-child(4) p {
color: rgba(255, 255, 255, 0.72);
}
.shift-grid article:nth-child(4) span {
color: var(--bno-slack-black);
background: var(--bno-paper);
}
.shift-grid span {
width: fit-content;
padding: 0 12px;
background: var(--bno-paper);
}
.shift-grid h3,
.value-grid h3,
.route-grid h3,
.deliverable-grid h3,
.fit-grid strong,
.compare-table h3 {
margin: 0 0 12px;
font-family: var(--font-display);
font-size: 28px;
font-weight: 430;
line-height: 1.06;
letter-spacing: 0;
}
.shift-grid p,
.value-grid p,
.route-grid p,
.deliverable-grid p,
.fit-grid p,
.compare-table li {
color: var(--gbp-muted);
font-size: 15px;
}
.source-note {
max-width: 780px;
margin-top: 20px;
color: var(--gbp-muted);
font-size: 14px;
}
.old-new {
background: var(--bno-cool-gray);
}
.compare-table {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.compare-table article {
padding: 30px;
}
.compare-table .highlight {
background: var(--bno-soft-yellow);
}
.compare-table ul {
display: grid;
gap: 12px;
margin: 0;
padding-left: 20px;
}
.answer-block {
display: grid;
grid-template-columns: minmax(0, 1fr) 210px;
align-items: center;
gap: 44px;
border-top: 1.5px solid var(--bno-slack-black);
border-bottom: 1.5px solid var(--bno-slack-black);
background: var(--bno-slack-black);
color: var(--bno-paper);
}
.answer-copy h2 {
color: var(--bno-paper);
}
.answer-copy p {
max-width: 78ch;
color: rgba(255, 255, 255, 0.78);
}
.answer-block .eyebrow,
.brain .eyebrow {
color: var(--bno-slack-black);
}
.answer-doodle {
width: 190px;
padding: 24px;
border: 1.5px solid var(--bno-paper);
border-radius: 8px;
background: var(--bno-mellow-yellow);
justify-self: end;
}
.value-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.value-grid article,
.route-grid article,
.deliverable-grid article,
.fit-grid article {
min-height: 220px;
padding: 24px;
}
.value-grid span {
display: inline-block;
margin-bottom: 18px;
padding: 8px 10px;
border-radius: 999px;
background: var(--bno-cool-gray);
font: 850 12px/1 var(--font-sans);
text-transform: uppercase;
}
.value-grid article:nth-child(2) span,
.value-grid article:nth-child(3) span {
background: var(--bno-soft-orange);
}
.booms-method {
background: var(--bno-squiggle-soft);
}
.method-track {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
.method-track article {
min-height: 246px;
padding: 22px;
border: 1.5px solid var(--bno-slack-black);
border-radius: 8px;
background: rgba(255, 255, 255, 0.82);
}
.method-track strong {
display: block;
margin-bottom: 10px;
font: 900 18px/1.08 var(--font-sans);
}
.method-track p {
color: var(--gbp-muted);
font-size: 15px;
}
.route-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.route-grid article:nth-child(2),
.deliverable-grid article:nth-child(2),
.deliverable-grid article:nth-child(5) {
background: var(--bno-soft-yellow);
}
.route-grid article:nth-child(3),
.deliverable-grid article:nth-child(3),
.deliverable-grid article:nth-child(6) {
background: var(--bno-soft-orange);
}
.brain {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.7fr);
gap: 54px;
align-items: center;
background: var(--bno-slack-black);
color: var(--bno-paper);
}
.brain-copy h2 {
color: var(--bno-paper);
}
.brain-copy p {
color: rgba(255, 255, 255, 0.76);
}
.brain-map {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.brain-map span {
min-height: 104px;
display: grid;
place-items: center;
border: 1.5px solid var(--bno-paper);
border-radius: 8px;
background: rgba(255, 255, 255, 0.08);
color: var(--bno-paper);
font: 900 18px/1 var(--font-sans);
}
.brain-map span:nth-child(2),
.brain-map span:nth-child(5) {
color: var(--bno-slack-black);
background: var(--bno-mellow-yellow);
}
.brain-map span:nth-child(3) {
color: var(--bno-slack-black);
background: var(--bno-fiery-orange);
}
.deliverable-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.proof {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(330px, 0.65fr);
gap: 56px;
align-items: center;
background: var(--bno-cool-gray);
}
.proof-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 28px;
}
.proof-stats span {
min-height: 104px;
padding: 18px;
border: 1.5px solid var(--bno-slack-black);
border-radius: 8px;
background: var(--bno-paper);
font-weight: 760;
}
.proof-stats strong {
display: block;
margin-bottom: 6px;
font-family: var(--font-display);
font-size: 36px;
font-weight: 430;
line-height: 1;
}
.proof-photo {
margin: 0;
}
.proof-photo img {
width: 100%;
aspect-ratio: 1 / 1.08;
border: 1.5px solid var(--bno-slack-black);
border-radius: 8px;
object-fit: cover;
}
.proof-photo figcaption {
margin-top: 10px;
color: var(--gbp-muted);
font: 850 12px/1.2 var(--font-sans);
text-transform: uppercase;
}
.reviews {
overflow: hidden;
background: var(--bno-paper);
}
.reviews-head {
display: grid;
grid-template-columns: minmax(0, 1fr) 240px;
align-items: end;
gap: 32px;
margin-bottom: 42px;
}
.reviews h2 {
max-width: 780px;
margin: 0;
font-size: 45px;
line-height: 1;
letter-spacing: 0;
}
.rating-card,
.review-column article {
border: 1.5px solid var(--bno-slack-black);
border-radius: 8px;
}
.rating-card {
padding: 22px;
background: var(--bno-soft-yellow);
box-shadow: var(--bno-shadow-panel);
}
.rating-card strong {
display: block;
font-family: var(--font-display);
font-size: 72px;
line-height: 0.9;
font-weight: 420;
}
.rating-card span,
.rating-card small {
display: block;
font-weight: 800;
}
.rating-card small {
margin-top: 8px;
color: rgba(0, 0, 0, 0.58);
}
.review-wall {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
height: 660px;
overflow: hidden;
padding: 4px 0;
mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.review-wall::before,
.review-wall::after {
content: "";
position: absolute;
z-index: 3;
left: 0;
right: 0;
height: 120px;
pointer-events: none;
}
.review-wall::before {
top: 0;
background: linear-gradient(to bottom, var(--bno-paper), rgba(255, 255, 255, 0));
}
.review-wall::after {
bottom: 0;
background: linear-gradient(to top, var(--bno-paper), rgba(255, 255, 255, 0));
}
.review-column {
min-width: 0;
overflow: hidden;
}
.review-column-inner {
display: grid;
gap: 18px;
animation: reviewScrollUp 54s linear infinite;
will-change: transform;
}
.review-column.reverse .review-column-inner {
animation-name: reviewScrollDown;
animation-duration: 62s;
transform: translateY(-50%);
}
.review-wall:hover .review-column-inner {
animation-play-state: paused;
}
.review-column article {
min-height: 245px;
padding: 22px;
display: flex;
flex-direction: column;
background: var(--bno-cool-gray);
box-shadow: var(--bno-shadow-soft);
}
.review-column article:nth-child(2n) {
background: var(--bno-paper);
}
.review-column article:nth-child(3n) {
background: var(--bno-soft-yellow);
}
.review-column article:nth-child(5n) {
background: var(--bno-soft-pink);
}
.stars {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
color: var(--bno-fiery-orange);
font-size: 18px;
font-weight: 850;
letter-spacing: 0;
}
.stars span {
color: var(--bno-slack-black);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0;
}
.review-column h3 {
margin: 0;
font-family: var(--font-display);
font-size: 25px;
font-weight: 430;
line-height: 1.05;
letter-spacing: 0;
}
.review-column p {
margin: 16px 0 20px;
color: var(--bno-slack-black);
font-size: 15px;
line-height: 1.42;
}
.review-column span:not(.stars span) {
color: var(--color-fg-muted);
line-height: 1.35;
}
.review-column b {
margin-top: auto;
padding-top: 16px;
}
.source-line {
margin-top: 12px;
color: var(--color-fg-muted);
font-size: 13px;
}
.fit-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fit-grid article:first-child {
background: var(--bno-soft-yellow);
}
.fit-grid article:last-child {
background: var(--bno-soft-card-gray);
}
.fit-grid strong {
display: block;
}
.faq {
background: var(--bno-cool-gray);
}
.faq-list {
display: grid;
gap: 12px;
max-width: 920px;
}
.faq-list details {
padding: 0;
overflow: hidden;
}
.faq-list summary {
cursor: pointer;
padding: 22px 24px;
font: 900 18px/1.2 var(--font-sans);
}
.faq-list p {
max-width: 76ch;
margin: 0;
padding: 0 24px 24px;
color: var(--gbp-muted);
}
.final-cta {
overflow: hidden;
border-top: 1.5px solid var(--bno-slack-black);
border-bottom: 1.5px solid var(--bno-slack-black);
background: var(--bno-soft-yellow);
}
.final-cta > div {
position: relative;
z-index: 2;
max-width: 800px;
}
.cta-squiggle {
right: 18px;
bottom: -110px;
width: 340px;
transform: rotate(18deg);
}
@media (max-width: 980px) {
.section-pad {
padding: 78px 22px;
}
.gbp-hero,
.brain,
.proof,
.answer-block {
grid-template-columns: 1fr;
}
.gbp-hero {
min-height: auto;
padding-top: 76px;
}
.gbp-hero h1 {
max-width: 16ch;
font-size: 32px;
}
.hero-lede {
font-size: 18px;
}
.shift-grid,
.value-grid,
.route-grid,
.deliverable-grid,
.method-track {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.reviews-head {
grid-template-columns: 1fr;
}
.review-wall {
grid-template-columns: repeat(2, minmax(0, 1fr));
height: 620px;
}
.review-column:nth-child(3) {
display: none;
}
.answer-doodle {
justify-self: start;
}
}
@media (max-width: 680px) {
.section-pad {
padding: 64px 18px;
}
.gbp-hero h1 {
max-width: 14ch;
font-size: 24px;
}
.section-head h2,
.answer-copy h2,
.brain-copy h2,
.proof-copy h2,
.final-cta h2 {
font-size: 30px;
}
.hero-actions,
.proof-row {
align-items: stretch;
flex-direction: column;
}
.proof-row img {
max-width: 178px;
}
.shift-grid,
.value-grid,
.route-grid,
.deliverable-grid,
.method-track,
.reviews-head,
.fit-grid,
.compare-table,
.proof-stats,
.brain-map {
grid-template-columns: 1fr;
}
.reviews h2 {
font-size: 30px;
}
.review-wall {
grid-template-columns: 1fr;
height: 620px;
}
.review-column:nth-child(2),
.review-column:nth-child(3) {
display: none;
}
.system-node,
.value-grid article,
.route-grid article,
.deliverable-grid article,
.fit-grid article,
.shift-grid article,
.method-track article {
min-height: auto;
}
.logo-cloud {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.logo-cloud img {
height: 68px;
padding: 16px;
}
.gbp-squiggle-one,
.cta-squiggle {
right: 18px;
max-width: 300px;
}
}
@media (prefers-reduced-motion: reduce) {
.review-column-inner {
animation: none;
}
}
@keyframes reviewScrollUp {
0% { transform: translateY(0); }
100% { transform: translateY(-50%); }
}
@keyframes reviewScrollDown {
0% { transform: translateY(-50%); }
100% { transform: translateY(0); }
}
/* ═══════════════════════════════════════════════════════════════════════
AI Growth Partner redesign — estilos plantilla de landings (2026-07-15)
Namespaced y reusables en las 4 verticales (Educación primero).
Reversible: eliminar este bloque completo.
═══════════════════════════════════════════════════════════════════════ */
/* ── Hero media (reemplaza .hero-system con foto real) ────────────────── */
.gp-hero-media {
position: relative;
z-index: 2;
}
.gp-hero-media figure {
margin: 0;
}
.gp-hero-frame {
position: relative;
border: 1.5px solid var(--bno-slack-black);
border-radius: 16px;
overflow: hidden;
background: var(--bno-cool-gray);
box-shadow: var(--bno-shadow-panel);
}
.gp-hero-frame img {
width: 100%;
height: 420px;
object-fit: cover;
}
.gp-hero-badge {
position: absolute;
left: 14px;
bottom: 14px;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
border: 1.5px solid var(--bno-slack-black);
border-radius: 12px;
background: rgba(255, 255, 255, 0.94);
box-shadow: var(--bno-shadow-panel);
backdrop-filter: blur(6px);
}
.gp-hero-badge strong {
font-family: var(--font-display);
font-size: 30px;
font-weight: 430;
line-height: 1;
}
.gp-hero-badge span {
font-size: 12px;
font-weight: 800;
line-height: 1.15;
color: var(--gbp-muted);
}
.gp-hero-media figcaption {
margin-top: 14px;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
color: var(--gbp-muted);
}
/* ── Trío AI Growth Partner (Más matrícula · Menos costo · Más velocidad) ── */
.gp-trio {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 40px;
}
.gp-trio-item {
position: relative;
padding: 24px;
border: 1.5px solid var(--bno-slack-black);
border-radius: 12px;
background: var(--bno-paper);
box-shadow: var(--bno-shadow-panel);
}
.gp-trio-arrow {
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
margin-bottom: 16px;
border: 1.5px solid var(--bno-slack-black);
border-radius: 999px;
font-size: 20px;
font-weight: 900;
line-height: 1;
}
.gp-trio-item.up .gp-trio-arrow {
background: #e5f1e9;
color: #2f8a5b;
}
.gp-trio-item.down .gp-trio-arrow {
background: var(--bno-mellow-yellow);
color: var(--bno-slack-black);
}
.gp-trio-item strong {
display: block;
margin-bottom: 8px;
font-family: var(--font-display);
font-size: 26px;
font-weight: 430;
line-height: 1.05;
}
.gp-trio-item small {
display: block;
font-size: 15px;
line-height: 1.45;
color: var(--gbp-muted);
}
/* ── Agents map (portado del Home; namespaced para las 4 verticales) ──── */
.agents-map {
--o: #FE8301;
--ink: #141414;
--soft: #FBF6EE;
--line: #EFE7DB;
--mut: #6b6257;
max-width: 1060px;
margin: 40px auto 0;
}
.agents-map .am-lead { display: flex; flex-direction: column; align-items: center; }
.agents-map .am-node { border-radius: 14px; padding: 14px 24px; text-align: center; max-width: 560px; }
.agents-map .am-node.top { background: var(--soft); border: 1px solid var(--line); }
.agents-map .am-node.dir { background: var(--ink); color: #fff; }
.agents-map .am-node strong { display: block; font-size: 1.05rem; line-height: 1.2; }
.agents-map .am-node span { font-size: .85rem; opacity: .72; }
.agents-map .am-stem { width: 2px; height: 22px; background: var(--line); }
.agents-map .am-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; margin-top: 6px; }
.agents-map .am-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-align: left; }
.agents-map .am-card .am-tag { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--o); margin-bottom: 8px; }
.agents-map .am-card h4 { margin: 0 0 5px; font-size: 1rem; line-height: 1.2; }
.agents-map .am-card p { margin: 0 0 11px; font-size: .85rem; color: var(--mut); line-height: 1.4; }
.agents-map .am-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.agents-map .am-chips span { font-size: .72rem; background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; color: var(--mut); }
.agents-map .am-cap { text-align: center; font-size: .98rem; color: var(--mut); margin: 18px auto 0; max-width: 640px; }
/* ── Banda de CTA canónico reutilizable (§6, §9, §16) ────────────────── */
.gp-cta-band {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 16px 20px;
margin-top: 44px;
padding: 24px;
border: 1.5px solid var(--bno-slack-black);
border-radius: 14px;
background: var(--bno-paper);
box-shadow: var(--bno-shadow-panel);
text-align: center;
}
.gp-cta-band p {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 1.35;
}
/* ── Mobile (la foto del hero SÍ se muestra, aporta prueba) ───────────── */
@media (max-width: 980px) {
.gp-trio { grid-template-columns: 1fr; }
.gp-hero-frame img { height: 300px; }
}
@media (max-width: 680px) {
.gp-hero-frame img { height: 260px; }
.gp-cta-band { flex-direction: column; }
.agents-map .am-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* CTA canónico (texto largo) debe envolver en móvil, no desbordar la columna */
.hero-actions .btn,
.gp-cta-band .btn,
.final-cta .btn,
.assistant-cta-row .btn {
white-space: normal;
line-height: 1.2;
max-width: 100%;
text-align: center;
}
}
/* ═══════════════════════════════════════════════════════════════════════
V2 — Rediseño AI Growth Partner (iteración 2). Estilos namespaced .gp-*
Secciones: oldmodel · diff · cases · packages · guarantee.
No afectan otras páginas. Bump del : ?v=20260716-gp-v2
═══════════════════════════════════════════════════════════════════════ */
/* ── §6 Por qué la agencia tradicional ya no funciona (.gp-oldmodel) ───── */
/* (.gp-guarantee reusa .gp-oldmodel-grid) */
.gp-oldmodel-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
.gp-oldmodel-grid > article {
display: flex;
flex-direction: column;
gap: 8px;
background: #fff;
border: 1.5px solid var(--bno-slack-black);
border-radius: var(--radius);
padding: 24px;
box-shadow: var(--bno-shadow-panel);
}
.gp-oldmodel-grid > article.risk {
border-left: 6px solid var(--bno-fiery-orange);
}
.gp-om-tag {
font-size: 12px;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--color-fg-muted);
}
.gp-oldmodel-grid > article h3 {
font-family: var(--font-display);
font-size: 23px;
line-height: 1.05;
margin: 0;
}
.gp-oldmodel-grid > article p {
font-size: 15px;
line-height: 1.45;
color: var(--color-fg-muted);
margin: 0;
}
/* ── §7 La diferencia ✕/✓ (.gp-diff) ──────────────────────────────────── */
.gp-diff-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
align-items: stretch;
}
.gp-diff-card {
display: flex;
flex-direction: column;
gap: 18px;
border: 1.5px solid var(--color-border);
border-radius: var(--radius);
padding: 24px;
box-shadow: var(--bno-shadow-panel);
}
.gp-diff-card.bad { background: rgba(235,234,232,.55); }
.gp-diff-card.good { background: #fff; border-color: var(--bno-fiery-orange); border-width: 2px; }
.gp-diff-card h3 {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 16px;
font-weight: 900;
line-height: 1.3;
margin: 0;
}
.gp-diff-mark { font-size: 18px; font-weight: 900; flex: none; }
.gp-diff-mark.x { color: #C0412C; }
.gp-diff-mark.ok { color: #2F8A5B; }
.gp-diff-mock {
display: flex;
flex-direction: column;
gap: 6px;
background: #fff;
border: 1.5px dashed rgba(0,0,0,.28);
border-radius: 10px;
padding: 16px;
}
.gp-diff-mock strong { font-size: 17px; line-height: 1.25; }
.gp-diff-mock.g strong { color: var(--bno-fiery-orange); }
.gp-diff-mock span { font-size: 13px; line-height: 1.4; color: var(--color-fg-muted); }
.gp-diff-btn {
align-self: flex-start;
margin-top: 4px;
padding: 7px 13px;
border-radius: var(--radius-pill);
background: var(--bno-slack-black);
color: #fff !important;
font-size: 12px;
font-weight: 800;
}
.gp-diff-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gp-diff-list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.45; }
.gp-diff-list.bad li::before { content: "✕"; color: #C0412C; }
.gp-diff-list.good li::before { content: "✓"; color: #2F8A5B; }
.gp-diff-list li::before { position: absolute; left: 0; font-weight: 900; }
/* ── §12 Casos de éxito (.gp-cases) ───────────────────────────────────── */
.gp-cases-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
.gp-case {
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
background: #fff;
border: 1.5px solid var(--bno-slack-black);
border-radius: var(--radius);
box-shadow: var(--bno-shadow-panel);
text-decoration: none;
color: inherit;
transition: transform .15s var(--ease-out), box-shadow .15s;
}
.gp-case:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.gp-case img { height: 44px; width: auto; object-fit: contain; object-position: left; filter: grayscale(1); opacity: .85; }
.gp-case h3 { font-family: var(--font-display); font-size: 22px; margin: 0; }
.gp-case p { font-size: 15px; color: var(--color-fg-muted); margin: 0; line-height: 1.4; }
/* Iteración 3 — highlights de resultado dentro de la tarjeta */
.gp-case-metrics {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 2px 0;
}
.gp-case-metric {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1 1 auto;
min-width: 0;
padding: 8px 12px;
background: var(--bno-soft-orange);
border: 1.5px solid var(--bno-slack-black);
border-left-width: 4px;
border-radius: var(--radius-sm, 10px);
}
.gp-case-metric b {
font-family: var(--font-display);
font-size: 19px;
line-height: 1.05;
font-weight: 900;
color: var(--bno-slack-black);
}
.gp-case-metric span {
font-size: 11px;
line-height: 1.25;
font-weight: 700;
letter-spacing: .01em;
color: var(--bno-slack-black);
opacity: .78;
}
.gp-case-link { margin-top: auto; font-size: 13px; font-weight: 900; letter-spacing: .03em; color: var(--bno-fiery-orange); }
.gp-cases-all { text-align: center; margin-top: 28px; }
.gp-cases-all a { font-weight: 900; text-decoration: underline; text-underline-offset: 4px; }
/* ── §15 Paquetes con precios (.gp-packages) ──────────────────────────── */
.gp-packages-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
.gp-pack {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border: 1.5px solid var(--bno-slack-black);
border-radius: var(--radius);
padding: 28px 24px;
box-shadow: var(--bno-shadow-panel);
}
.gp-pack.featured {
border-width: 2px;
border-color: var(--bno-fiery-orange);
box-shadow: 0 8px 28px rgba(254,131,1,.12);
}
.gp-pack-badge {
position: absolute;
top: -13px;
left: 24px;
background: var(--bno-fiery-orange);
color: #fff;
font-size: 11px;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: var(--radius-pill);
}
.gp-pack-role { font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--color-fg-muted); margin: 0 0 4px; }
.gp-pack-name { font-family: var(--font-display); font-size: 26px; margin: 0 0 8px; }
.gp-pack-price { font-size: 30px; font-weight: 900; margin: 0 0 18px; font-variant-numeric: tabular-nums; }
.gp-pack-price span { font-size: 15px; font-weight: 700; color: var(--color-fg-muted); }
.gp-pack-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.gp-pack-list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.45; }
.gp-pack-list li::before { content: "✓"; position: absolute; left: 0; color: var(--bno-fiery-orange); font-weight: 900; }
.gp-pack-neg { color: var(--color-fg-muted); }
.gp-pack-neg::before { content: "✕" !important; color: var(--color-fg-muted) !important; }
.gp-packages-foot { text-align: center; font-size: 12px; color: var(--color-fg-muted); margin: 20px 0 0; }
/* ── Responsive v2 ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.gp-cases-grid { grid-template-columns: repeat(2, 1fr); }
.gp-packages-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
.gp-oldmodel-grid,
.gp-diff-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.gp-cases-grid { grid-template-columns: 1fr; }
}