/* Evoom — sistema visual 2026. PHP + HTML semântico + recursos locais. */
@font-face {
font-family: EvoomSymbols;
src: url("../fonts/evoom-symbols.woff") format("woff");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+2190-21FF, U+2713, U+2733;
}
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("../fonts/space-grotesk-variable.woff2") format("woff2");
}
@font-face {
font-family: Manrope;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/manrope-400.woff2") format("woff2");
}
@font-face {
font-family: Manrope;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/manrope-500.woff2") format("woff2");
}
@font-face {
font-family: Manrope;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/manrope-600.woff2") format("woff2");
}
@font-face {
font-family: Manrope;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/manrope-700.woff2") format("woff2");
}
:root {
color-scheme: light;
--bg: #f7f7f8;
--paper: #ffffff;
--ink: #09090b;
--dark: #111114;
--surface: #1c1c21;
--muted: #62626d;
--gray: #71717a;
--line: #e4e4e7;
--accent: #477bff;
--violet: #765bff;
--cyan: #72c9e8;
--accent-text: #5144ca;
--font: EvoomSymbols, "Manrope", sans-serif;
--display: EvoomSymbols, "Space Grotesk", sans-serif;
--radius: 5px;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--space-section: clamp(72px, 8vw, 128px);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 112px;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font: 400 15px/1.8 var(--font);
-webkit-font-smoothing: antialiased;
}
[hidden] {
display: none !important;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
select,
textarea {
font: inherit;
}
button {
cursor: pointer;
}
button:disabled {
cursor: wait;
opacity: 0.6;
}
a,
button,
input,
textarea,
select {
-webkit-tap-highlight-color: transparent;
}
button,
a {
touch-action: manipulation;
}
input,
select,
textarea {
min-width: 0;
}
img,
svg {
max-width: 100%;
}
img {
display: block;
height: auto;
}
svg {
vertical-align: middle;
}
::selection {
color: var(--paper);
background: #5144ca;
}
:focus-visible {
outline: 2px solid var(--accent-text);
outline-offset: 5px;
}
h1,
h2,
h3,
h4,
p {
margin: 0;
}
h1,
h2,
h3,
h4 {
font-family: var(--display);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.045em;
overflow-wrap: break-word;
}
h1 {
font-size: clamp(44px, 5.5vw, 80px);
}
h2 {
font-size: clamp(32px, 3.7vw, 54px);
}
h3 {
font-size: 25px;
}
h4 {
font-size: 18px;
}
p {
color: var(--muted);
margin-bottom: 20px;
}
p:last-child {
margin-bottom: 0;
}
strong {
font-weight: 600;
}
em {
font-family: inherit;
font-style: normal;
}
.wrap {
width: min(1280px, calc(100% - 112px));
margin-inline: auto;
}
.section {
padding-block: var(--space-section);
}
.eyebrow {
display: inline-flex;
gap: 10px;
align-items: center;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
line-height: 1.7;
text-transform: uppercase;
}
.eyebrow i,
.status-dot {
display: inline-block;
flex-shrink: 0;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
}
.accent {
color: var(--accent-text);
}
.muted {
color: var(--muted);
}
.brand-logo {
display: block;
width: 148px;
height: auto;
overflow: hidden;
}
.brand-symbol {
width: 80px;
height: auto;
aspect-ratio: 1552/777;
overflow: hidden;
}
.skip-link {
position: fixed;
z-index: 100;
left: 20px;
top: 12px;
padding: 12px 18px;
background: var(--ink);
color: var(--paper);
transform: translateY(-160%);
border-radius: var(--radius);
}
.skip-link:focus {
transform: translateY(0);
}
/* Navigation and controls */
.header {
height: 88px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
padding-inline: max(40px, calc((100% - 1328px) / 2));
background: #f7f7f8f5;
border-bottom: 1px solid transparent;
position: sticky;
z-index: 40;
top: 0;
transition:
border-color 0.25s,
background 0.25s;
}
.header.is-scrolled {
border-color: var(--line);
background: #fffffffa;
}
.header > a:first-child {
flex-shrink: 0;
}
.nav {
display: flex;
align-items: center;
gap: 25px;
}
.nav > a {
color: #52525b;
font-size: 12px;
white-space: nowrap;
padding: 8px 0;
position: relative;
}
.nav > a::after {
content: "";
position: absolute;
bottom: 1px;
left: 0;
width: 100%;
height: 1px;
background: var(--ink);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s var(--ease);
}
.nav > a:hover,
.nav > a[aria-current] {
color: var(--ink);
}
.nav > a:hover::after,
.nav > a[aria-current]::after {
transform: scaleX(1);
}
.header-cta {
padding: 10px 15px;
min-height: 44px;
border: 1px solid #cbcbd1;
border-radius: var(--radius);
display: flex;
gap: 26px;
align-items: center;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
transition:
background 0.2s,
border-color 0.2s;
}
.header-cta:hover {
background: var(--paper);
border-color: var(--ink);
}
.header-cta span {
font-size: 18px;
}
.menu-toggle,
.mobile-diagnostic {
display: none;
}
.button {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 30px;
min-height: 54px;
padding: 15px 21px;
background: var(--ink);
color: var(--paper);
border: 1px solid var(--ink);
border-radius: var(--radius);
font-size: 12px;
line-height: 1.6;
font-weight: 600;
transition:
background 0.25s,
border-color 0.25s,
transform 0.25s var(--ease);
}
.button > span {
font-size: 19px;
line-height: 1;
transition: transform 0.25s;
}
.button:hover {
background: #2c2c35;
border-color: #2c2c35;
}
.button:hover > span {
transform: translate(2px, -2px);
}
.button-secondary {
background: transparent;
color: var(--ink);
border-color: #cbcbd1;
}
.button-secondary:hover {
background: var(--paper);
border-color: var(--ink);
}
.text-link {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-block: 9px;
border-bottom: 1px solid #bcbcc6;
font-size: 12px;
font-weight: 600;
line-height: 1.6;
}
.text-link span {
font-size: 20px;
transition: transform 0.25s;
}
.text-link:hover span {
transform: translate(2px, -2px);
}
/* Hero: signal becomes structure */
.hero {
display: grid;
grid-template-columns: 1.3fr 1fr;
align-items: center;
gap: 64px;
padding-top: 66px;
}
.hero-copy {
min-width: 0;
padding-block: 18px;
}
.hero-copy > .eyebrow {
font-size: 9px;
letter-spacing: 0.105em;
}
.hero h1 {
font-size: clamp(58px, 5.9vw, 86px);
line-height: 1.04;
font-weight: 500;
margin: 30px 0 27px;
letter-spacing: -0.065em;
}
.hero h1 > span:not(.accent) {
color: var(--accent-text);
background: linear-gradient(105deg, #477bff 0%, #765bff 80%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-copy > p {
max-width: 500px;
font-size: 14px;
line-height: 1.9;
margin-bottom: 28px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 25px;
}
.hero-actions .text-link {
border: 0;
font-size: 11px;
gap: 14px;
}
.hero-signature {
display: flex;
align-items: center;
gap: 12px;
margin-top: 40px;
font-size: 10px;
line-height: 1.7;
color: var(--muted);
}
.hero-signature strong {
color: var(--ink);
}
.small-star {
color: var(--accent-text);
font-size: 27px;
}
.hero-art {
position: relative;
background: var(--ink);
color: var(--paper);
aspect-ratio: 1/1.14;
min-width: 0;
border-radius: 6px;
overflow: hidden;
}
.signal-heading,
.signal-footer {
position: absolute;
left: 25px;
right: 25px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
font-size: 8px;
letter-spacing: 0.1em;
color: #c2c2cc;
}
.signal-heading {
top: 24px;
}
.signal-plus {
font-size: 20px;
font-weight: 300;
}
.signal-field {
position: absolute;
inset: 48px -25px 42px;
display: grid;
place-items: center;
background: radial-gradient(ellipse at 55% 47%, #765bff12, transparent 60%);
}
.signal-svg {
width: 100%;
height: 100%;
}
.signal-node {
position: absolute;
font-size: 7px;
letter-spacing: 0.12em;
background: #111114d9;
border: 1px solid #36363f;
color: #d4d4dc;
padding: 5px 9px;
}
.node-input {
left: 11%;
bottom: 19%;
}
.node-output {
right: 8%;
top: 27%;
}
.signal-axis {
position: absolute;
bottom: 6%;
font-size: 7px;
letter-spacing: 0.16em;
color: #a1a1aa;
}
.signal-footer {
bottom: 24px;
border-top: 1px solid #2b2b32;
padding-top: 19px;
}
.signal-footer > span:first-child {
display: flex;
align-items: center;
gap: 7px;
font-size: 7px;
}
.signal-footer i {
width: 4px;
height: 4px;
background: var(--cyan);
border-radius: 50%;
}
.signal-footer .brand-symbol {
width: 40px;
opacity: 0.8;
}
.signal-footer > span:last-child {
font-size: 18px;
}
.hero-bottom {
grid-column: 1/-1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-top: 1px solid var(--line);
padding: 23px 0;
margin-top: 14px;
font-size: 8px;
color: var(--muted);
letter-spacing: 0.1em;
}
.hero-bottom > span:last-child {
display: flex;
gap: 28px;
}
.expertise-strip {
display: flex;
justify-content: space-between;
gap: 25px;
align-items: center;
padding: 26px max(56px, calc((100% - 1280px) / 2));
border-block: 1px solid var(--line);
background: var(--paper);
font-family: var(--display);
font-size: 18px;
}
.expertise-strip > span:first-child {
font: 10px var(--font);
color: var(--muted);
}
.expertise-strip b {
color: var(--gray);
font-size: 16px;
margin-left: 20px;
font-weight: 400;
}
/* Editorial composition */
.section-heading {
display: grid;
grid-template-columns: 0.62fr 1.6fr;
gap: 60px;
align-items: start;
margin-bottom: 60px;
}
.section-heading > .eyebrow {
margin-top: 9px;
max-width: 210px;
}
.section-heading h2 {
max-width: 850px;
}
.section-heading p {
margin-top: 22px;
max-width: 550px;
font-size: 14px;
}
.section-end {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 45px;
padding-top: 25px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 11px;
}
.section-end .text-link {
border: 0;
color: var(--ink);
}
.problem-bottom {
display: grid;
grid-template-columns: 0.8fr 1fr;
gap: 100px;
align-items: start;
}
.problem-bottom > p {
max-width: 440px;
font-size: 14px;
}
.problem-bottom strong {
color: var(--ink);
}
.problem-connections > div {
display: grid;
grid-template-columns: 1fr 24px 1fr;
gap: 16px;
align-items: center;
border-top: 1px solid var(--line);
padding: 24px 0;
font-size: 12px;
}
.problem-connections span {
color: var(--muted);
}
.problem-connections i {
font-style: normal;
color: var(--accent-text);
font-size: 20px;
}
.problem-connections strong {
font-weight: 500;
}
.solutions-section {
background: var(--paper);
border-block: 1px solid var(--line);
}
.solutions-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 38px;
}
.solution-card {
display: flex;
flex-direction: column;
padding: 27px 0 38px;
border-top: 1px solid #cfcfd7;
min-width: 0;
position: relative;
transition: border-color 0.25s;
}
.solution-card:hover {
border-color: var(--accent-text);
}
.card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
font-size: 9px;
letter-spacing: 0.1em;
color: var(--muted);
}
.card-arrow {
display: grid;
place-items: center;
width: 28px;
height: 28px;
font-size: 23px;
line-height: 1;
color: var(--ink);
transition:
transform 0.25s,
color 0.25s;
}
.solution-card:hover .card-arrow {
transform: translate(3px, -3px);
color: var(--accent-text);
}
.solution-card h3 {
margin: 5px 0 17px;
font-size: clamp(22px, 2vw, 28px);
letter-spacing: -0.045em;
max-width: 350px;
min-height: 64px;
}
.solution-card p {
font-size: 12px;
line-height: 1.9;
max-width: 355px;
}
.solution-card .mock-web-title {
font-size: 23px;
margin-block: 14px;
}
.solution-card .chart-bars {
height: 78px;
margin-top: 14px;
}
.solution-card .service-art {
height: 160px;
margin-block: 20px 15px;
}
.solution-eventos {
grid-column: 1/-1;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 70px;
margin-top: 28px;
padding: 34px 42px 45px;
background: var(--dark);
color: var(--paper);
border: 0;
border-radius: var(--radius);
}
.solution-eventos .card-top {
grid-column: 1/-1;
color: #a1a1aa;
}
.solution-eventos .card-arrow {
color: var(--paper);
}
.solution-eventos .service-art {
overflow: visible;
grid-column: 2;
grid-row: 2/4;
height: 230px;
margin: 0;
}
.solution-eventos h3 {
max-width: 430px;
align-self: end;
font-size: 35px;
min-height: 0;
margin-top: 28px;
}
.solution-eventos p {
color: #b7b7c2;
max-width: 450px;
}
.dual-section > .eyebrow {
margin-bottom: 35px;
}
.dual-head,
.dual-body {
display: grid;
grid-template-columns: 1fr 70px 1fr;
align-items: center;
gap: 30px;
}
.dual-head h2 {
font-size: clamp(38px, 5.5vw, 76px);
}
.dual-head h2 em {
color: var(--muted);
}
.dual-plus {
font-size: 42px;
color: var(--gray);
font-weight: 300;
text-align: center;
}
.dual-body {
margin-top: 30px;
}
.dual-body p {
margin: 0;
font-size: 13px;
}
.dual-body .brand-symbol {
width: 54px;
justify-self: center;
}
.dual-footer {
border-top: 1px solid var(--line);
margin-top: 45px;
padding-top: 26px;
color: var(--muted);
font-size: 12px;
}
.dual-footer strong {
color: var(--ink);
}
.scenario-section {
background: #f0f0f3;
}
.scenario {
display: grid;
grid-template-columns: 220px 1fr;
border-top: 1px solid #cacad3;
padding-top: 34px;
gap: 48px;
}
.scenario-tabs {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
}
.scenario-tabs button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 15px 14px;
border: 0;
border-radius: var(--radius);
background: transparent;
text-align: left;
font-size: 12px;
color: var(--muted);
transition:
background 0.2s,
color 0.2s;
}
.scenario-tabs button span {
font-size: 19px;
}
.scenario-tabs button:hover {
color: var(--ink);
background: #e7e7ec;
}
.scenario-tabs button[aria-selected="true"] {
background: var(--ink);
color: var(--paper);
}
.scenario-panel {
display: grid;
grid-template-columns: 0.9fr 1.2fr;
gap: 35px;
align-items: center;
min-width: 0;
}
.scenario-copy h3 {
font-size: 29px;
margin: 20px 0;
}
.scenario-copy p {
font-size: 13px;
}
.scenario-copy .eyebrow {
font-size: 8px;
color: var(--muted);
}
.demo-note {
display: block;
font-size: 9px;
color: var(--muted);
border-top: 1px solid #cacad3;
padding-top: 17px;
margin-top: 25px;
}
.demo-dashboard {
background: var(--paper);
border: 1px solid #d7d7df;
border-radius: 7px;
overflow: hidden;
min-width: 0;
box-shadow: 0 8px 35px #09090b04;
}
.dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 17px 22px;
border-bottom: 1px solid var(--line);
font-size: 10px;
}
.demo-badge {
font-size: 7px;
letter-spacing: 0.06em;
color: var(--muted);
}
.dashboard-content {
padding: 24px 22px 18px;
}
.dashboard-title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.dashboard-title h4 {
font-size: 17px;
}
.dashboard-row {
display: grid;
grid-template-columns: 32px 1fr auto;
align-items: center;
gap: 9px;
border-bottom: 1px solid var(--line);
padding: 16px 0;
font-size: 9px;
}
.dashboard-row > span {
color: var(--muted);
font-size: 8px;
}
.dashboard-row strong {
font-weight: 500;
line-height: 1.5;
}
.dashboard-row small {
color: var(--accent-text);
font-size: 8px;
text-align: right;
}
.dashboard-flow {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 25px;
font-size: 8px;
color: var(--muted);
}
.dashboard-flow > span {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
}
.dashboard-flow i {
font-size: 7px;
font-style: normal;
color: var(--accent-text);
}
.dashboard-flow b {
font-weight: 400;
margin-left: 4px;
}
.dashboard-foot {
font-size: 8px;
margin-top: 18px;
display: flex;
align-items: center;
gap: 7px;
}
.philosophy {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
}
.philosophy h2 .muted {
display: block;
}
.philosophy h2 {
margin: 30px 0;
}
.thinking-steps > div {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) 30px;
gap: 25px;
padding: 34px 0;
border-top: 1px solid var(--line);
}
.thinking-steps > div > span {
color: var(--muted);
font-size: 11px;
}
.thinking-steps > div > span:last-child {
font-size: 25px;
}
.thinking-steps h3 {
font-size: 30px;
margin-bottom: 13px;
}
.thinking-steps p {
font-size: 13px;
}
.projects-section {
background: var(--paper);
border-block: 1px solid var(--line);
}
.ai-section {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 100px;
}
.ai-section h2 {
font-size: clamp(31px, 3.1vw, 45px);
margin: 25px 0;
}
.ai-section p {
font-size: 13px;
}
.ai-graphic {
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 40px 25px;
position: relative;
background: radial-gradient(ellipse at center, #765bff08, transparent 65%);
overflow: hidden;
}
.ai-graphic > span {
font-size: 8px;
letter-spacing: 0.13em;
color: var(--muted);
text-align: center;
z-index: 1;
}
.ai-orbit {
width: 80%;
aspect-ratio: 1;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid #cdcdd7;
position: relative;
}
.ai-orbit::before,
.ai-orbit::after {
content: "";
position: absolute;
inset: 20%;
border: 1px solid #d9d9e4;
border-radius: 50%;
transform: rotate(55deg) scaleX(1.8);
}
.ai-orbit::after {
transform: rotate(-55deg) scaleX(1.8);
}
.ai-orbit .brand-symbol {
width: 34%;
z-index: 1;
}
.process-section {
background: var(--paper);
border-block: 1px solid var(--line);
}
.process {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 25px;
list-style: none;
padding: 0;
margin: 0;
counter-reset: step;
}
.process li {
padding-top: 20px;
border-top: 1px solid #cfcfd7;
min-width: 0;
}
.step-number {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
margin-bottom: 30px;
}
.step-number > span {
font-size: 18px;
}
.process h3 {
font-size: 21px;
letter-spacing: -0.04em;
margin-bottom: 15px;
}
.process p {
font-size: 12px;
}
.audience {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
}
.audience h2 {
margin: 28px 0;
}
.audience h2 em {
color: var(--muted);
}
.audience > div > p {
font-size: 14px;
max-width: 410px;
}
.audience-list > div {
display: grid;
grid-template-columns: 1fr 25px;
gap: 8px 16px;
padding: 23px 0;
border-top: 1px solid var(--line);
}
.audience-list h3 {
font-size: 21px;
grid-column: 1;
}
.audience-list span {
font-size: 11px;
color: var(--muted);
grid-column: 1;
}
.audience-list b {
grid-column: 2;
grid-row: 1/3;
align-self: center;
font-size: 22px;
font-weight: 400;
color: var(--gray);
}
.faq-section {
border-top: 1px solid var(--line);
}
.faq-list {
max-width: 900px;
margin-left: auto;
}
.faq-list details {
border-top: 1px solid var(--line);
}
.faq-list details:last-child {
border-bottom: 1px solid var(--line);
}
.faq-list summary {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
cursor: pointer;
padding: 26px 0;
font-family: var(--display);
font-size: 20px;
letter-spacing: -0.025em;
line-height: 1.4;
}
.faq-list summary::-webkit-details-marker {
display: none;
}
.faq-list summary > span {
font: 300 26px var(--font);
color: var(--muted);
transition: transform 0.25s;
}
.faq-list details[open] summary > span {
transform: rotate(45deg);
}
.faq-list p {
font-size: 14px;
max-width: 720px;
padding-bottom: 25px;
}
/* One visual language for service and editorial illustrations */
.service-art {
display: flex;
align-items: center;
justify-content: center;
position: relative;
min-width: 0;
overflow: hidden;
height: 200px;
}
.mock-window {
width: 83%;
max-width: 330px;
padding: 15px;
background: #f7f7fa;
border: 1px solid #cfcfd9;
border-radius: var(--radius);
transform: perspective(700px) rotateY(-9deg) rotateZ(-3deg);
}
.mock-top {
display: flex;
gap: 4px;
border-bottom: 1px solid #dcdce4;
padding-bottom: 10px;
}
.mock-top i {
width: 3px;
height: 3px;
background: #a1a1aa;
border-radius: 50%;
}
.mock-web-title {
font-family: var(--display);
font-size: 26px;
line-height: 1.08;
letter-spacing: -0.06em;
margin-block: 19px;
position: relative;
max-width: 220px;
}
.mock-web-title > span {
position: absolute;
right: 0;
top: 6px;
color: var(--accent-text);
}
.mock-rule {
width: 48%;
height: 4px;
background: #c8c8d5;
}
.mock-dashboard {
display: grid;
grid-template-columns: 28px 1fr;
gap: 18px;
background: var(--dark);
color: #b7b7c2;
padding: 18px;
border: 1px solid #42424c;
width: 83%;
max-width: 330px;
border-radius: var(--radius);
transform: perspective(700px) rotateY(8deg) rotateZ(2deg);
}
.mock-sidebar {
border-right: 1px solid #454550;
background: repeating-linear-gradient(
to bottom,
transparent 0 14px,
#454550 14px 15px,
transparent 15px 29px
);
}
.mock-dashboard > div > span {
font-size: 8px;
}
.chart-bars {
display: flex;
align-items: end;
gap: 9px;
height: 90px;
margin-top: 18px;
}
.chart-bars i {
width: 22px;
background: #54545f;
border-radius: 1px;
}
.chart-bars i:last-child {
background: #8c8cff;
}
.auto-graphic {
display: flex;
align-items: center;
width: 90%;
max-width: 310px;
}
.auto-graphic > span {
display: grid;
place-items: center;
width: 53px;
aspect-ratio: 1;
border: 1px solid #cacad6;
background: #f5f5f9;
border-radius: var(--radius);
font-size: 25px;
flex-shrink: 0;
}
.auto-graphic > span:last-child {
color: var(--accent-text);
background: #edebff;
border-color: #cfc9f7;
}
.auto-graphic > i {
flex: 1;
border-top: 1px dashed #a8a8ba;
}
.design-graphic {
position: relative;
font-family: var(--display);
font-size: 80px;
letter-spacing: -0.07em;
line-height: 1;
}
.design-graphic > span {
color: var(--accent-text);
font-size: 48px;
display: inline-block;
margin-left: 25px;
}
.design-graphic small {
display: block;
margin-top: 18px;
font: 7px var(--font);
letter-spacing: 0.15em;
}
.comms-graphic {
display: flex;
align-items: center;
gap: 50px;
width: 80%;
}
.comms-graphic > span {
font: 500 30px/1.1 var(--display);
letter-spacing: -0.045em;
}
.comms-graphic b {
color: var(--accent-text);
font-weight: 500;
}
.comms-graphic i {
font-size: 60px;
font-style: normal;
font-weight: 300;
}
.integrated-graphic {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.integrated-graphic::before,
.integrated-graphic::after {
content: "";
position: absolute;
width: 250px;
border-top: 1px solid #d1d1dd;
left: 50%;
top: 35%;
transform: translateX(-50%) rotate(32deg);
z-index: 0;
}
.integrated-graphic::after {
transform: translateX(-50%) rotate(-32deg);
}
.integrated-graphic .brand-symbol {
width: 110px;
z-index: 1;
}
.integrated-graphic > span {
font-size: 8px;
letter-spacing: 0.04em;
background: var(--paper);
position: relative;
z-index: 1;
padding: 3px 8px;
}
.graphic-label {
font-size: 7px;
letter-spacing: 0.12em;
color: var(--muted);
}
.agent-graphic {
display: flex;
flex-direction: column;
width: 90%;
max-width: 310px;
gap: 10px;
}
.agent-question,
.agent-answer {
padding: 9px 12px;
font-size: 9px;
line-height: 1.6;
border: 1px solid #d1d1dd;
border-radius: var(--radius);
}
.agent-question {
align-self: end;
background: #f3f3f7;
}
.agent-answer {
align-self: start;
display: flex;
align-items: center;
gap: 8px;
}
.agent-answer i {
font-size: 18px;
font-style: normal;
color: var(--accent-text);
}
.agent-handoff {
color: var(--muted);
font-size: 8px;
}
.voice-graphic {
display: grid;
grid-template-columns: 62px 1fr;
align-items: center;
gap: 18px;
width: 210px;
}
.voice-avatar {
height: 74px;
border: 1px solid #cacad7;
border-radius: 40px 40px 5px 5px;
background: #f2f2f8;
position: relative;
overflow: hidden;
}
.voice-avatar::before {
content: "";
position: absolute;
width: 24px;
height: 27px;
border: 1px solid #9191a5;
border-radius: 50%;
top: 12px;
left: 18px;
}
.voice-avatar span {
position: absolute;
width: 60px;
height: 50px;
border: 1px solid #9191a5;
border-radius: 50%;
left: 0;
top: 44px;
}
.voice-wave {
height: 65px;
display: flex;
gap: 5px;
align-items: center;
}
.voice-wave i {
height: 20px;
width: 5px;
border-radius: 3px;
background: #a9a9bf;
}
.voice-wave i:nth-child(2n) {
height: 39px;
}
.voice-wave i:nth-child(3n) {
height: 58px;
background: #8273de;
}
.voice-graphic .graphic-label {
grid-column: 1/-1;
text-align: center;
}
.event-ticket {
width: 88%;
max-width: 320px;
background: #f7f7fa;
color: var(--ink);
border: 1px solid #c8c8d9;
border-radius: var(--radius);
padding: 22px;
transform: rotate(-5deg);
}
.event-ticket .graphic-label {
font-size: 7px;
}
.event-ticket strong {
display: block;
font: 500 27px/1.08 var(--display);
letter-spacing: -0.045em;
position: relative;
margin: 20px 0;
}
.event-ticket strong > span {
position: absolute;
right: 0;
top: 2px;
font-size: 42px;
font-weight: 400;
color: var(--accent-text);
}
.ticket-stub {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border-top: 1px dashed #b7b7cd;
padding-top: 12px;
font-size: 7px;
letter-spacing: 0.025em;
}
.ticket-stub i {
font-size: 17px;
font-style: normal;
}
/* Events: dedicated commercial composition */
.event-spotlight {
background: var(--ink);
color: var(--paper);
padding-block: var(--space-section);
position: relative;
overflow: hidden;
}
.event-spotlight::before {
content: "";
position: absolute;
right: -20%;
top: -80%;
width: 90%;
height: 170%;
background: radial-gradient(ellipse at center, #765bff0a, transparent 65%);
pointer-events: none;
}
.event-spotlight > .wrap {
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: start;
gap: 100px;
position: relative;
}
.event-intro > .eyebrow {
color: #b7b7c2;
}
.event-intro h2 {
margin: 30px 0;
font-size: clamp(36px, 4.1vw, 60px);
}
.event-intro h2 em {
color: #a8a1ff;
}
.event-intro p {
color: #b7b7c2;
font-size: 14px;
max-width: 480px;
}
.event-intro .button {
background: var(--paper);
border-color: var(--paper);
color: var(--ink);
margin-top: 18px;
}
.event-intro .button:hover {
background: #e4e4f0;
border-color: #e4e4f0;
}
.event-intro .text-link {
display: flex;
width: fit-content;
margin-top: 22px;
border-color: #52525d;
color: #e4e4e7;
font-size: 11px;
}
.event-journey {
padding-left: 35px;
border-left: 1px solid #35353f;
}
.event-journey > .eyebrow {
color: #b7b7c2;
font-size: 9px;
}
.event-journey ol {
padding: 0;
margin: 15px 0 0;
list-style: none;
}
.event-journey li {
display: grid;
grid-template-columns: 25px 1fr;
gap: 22px;
padding: 25px 0;
border-bottom: 1px solid #35353f;
}
.event-journey li > span {
color: #a8a1ff;
font-size: 10px;
margin-top: 3px;
}
.event-journey h3 {
font-size: 22px;
letter-spacing: -0.03em;
}
.event-journey li p {
font-size: 12px;
color: #a1a1ae;
margin-top: 10px;
}
.event-scope {
color: #a1a1ae;
font-size: 10px;
margin-top: 23px;
}
/* Solutions and projects */
.page-hero {
padding-block: 92px 75px;
border-bottom: 1px solid var(--line);
}
.page-hero h1 {
max-width: 1030px;
margin: 28px 0;
}
.page-hero > p {
max-width: 660px;
font-size: 16px;
}
.page-hero > .text-link {
margin-top: 20px;
}
.legacy-anchor {
display: block;
scroll-margin-top: 112px;
}
.solution-index {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 50px;
padding-block: 45px;
}
.solution-index a {
display: grid;
grid-template-columns: 25px 1fr 25px;
align-items: center;
gap: 16px;
padding: 20px 0;
border-bottom: 1px solid var(--line);
font-size: 14px;
transition: color 0.2s;
}
.solution-index a:hover {
color: var(--accent-text);
}
.solution-index a > span {
font-size: 10px;
color: var(--muted);
}
.solution-index b {
justify-self: end;
font-size: 20px;
font-weight: 400;
}
.service-details {
padding-top: 20px;
}
.service-detail {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
border-top: 1px solid var(--line);
padding-block: 80px;
scroll-margin-top: 110px;
}
.service-detail-heading h2 {
margin: 25px 0 35px;
max-width: 480px;
}
.service-detail-heading .eyebrow {
color: var(--muted);
font-size: 9px;
}
.service-detail-heading .service-art {
background: #eeeef3;
height: 300px;
max-width: 480px;
}
.service-detail-copy h3 {
font-size: 29px;
margin-bottom: 22px;
}
.service-detail-copy > p {
font-size: 14px;
}
.service-detail-copy h4 {
font-size: 17px;
margin: 30px 0 17px;
}
.service-detail-copy ul {
list-style: none;
padding: 0;
margin: 0;
}
.service-detail-copy li {
border-top: 1px solid var(--line);
display: flex;
gap: 13px;
padding: 12px 0;
font-size: 12px;
}
.service-detail-copy li > span:first-child {
color: var(--accent-text);
}
.integration-note {
margin-block: 30px;
padding: 18px 0 18px 20px;
border-left: 2px solid #a59ae9;
}
.integration-note > span {
font-size: 11px;
font-weight: 600;
}
.integration-note p {
font-size: 12px;
margin-top: 9px;
}
.service-detail-event {
border-top: 2px solid var(--ink);
}
.service-detail-event .service-art {
background: var(--dark);
}
.portfolio-filters {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
margin-bottom: 48px;
}
.portfolio-filters button {
border: 0;
border-bottom: 1px solid transparent;
padding: 8px 0;
min-height: 44px;
background: transparent;
color: var(--muted);
font-size: 12px;
}
.portfolio-filters button[aria-pressed="true"],
.portfolio-filters button:hover {
color: var(--ink);
border-bottom-color: var(--ink);
}
.portfolio-empty {
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: center;
gap: 85px;
}
.portfolio-visual {
aspect-ratio: 1.25;
background: var(--ink);
color: var(--paper);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 35px;
position: relative;
overflow: hidden;
}
.portfolio-visual::before {
content: "";
position: absolute;
width: 70%;
aspect-ratio: 1;
border: 1px solid #36363f;
border-radius: 50%;
transform: scaleX(1.8) rotate(30deg);
top: 12%;
}
.portfolio-visual::after {
content: "";
position: absolute;
width: 70%;
aspect-ratio: 1;
border: 1px solid #36363f;
border-radius: 50%;
transform: scaleX(1.8) rotate(-30deg);
top: 12%;
}
.portfolio-visual > * {
z-index: 1;
}
.portfolio-visual .eyebrow {
font-size: 8px;
}
.portfolio-visual .brand-symbol {
width: 190px;
filter: invert(1);
}
.visual-bottom {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-size: 8px;
letter-spacing: 0.08em;
color: #a1a1ae;
}
.visual-bottom > span {
font-size: 25px;
color: var(--paper);
}
.portfolio-empty > div > h3 {
font-size: clamp(30px, 3.2vw, 45px);
margin: 24px 0;
}
.portfolio-empty > div > p {
font-size: 14px;
max-width: 450px;
}
.portfolio-empty .text-link {
margin-top: 10px;
}
.project-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 55px 35px;
}
.project-grid a {
display: block;
}
.project-cover {
width: 100%;
aspect-ratio: 1.6;
object-fit: cover;
background: #eaeaf0;
margin-bottom: 25px;
}
.project-grid h3 {
margin: 15px 0;
font-size: 29px;
}
.project-grid p {
font-size: 13px;
}
.project-note {
border-top: 1px solid var(--line);
padding-block: 65px 100px;
}
.project-note h2 {
margin: 25px 0;
}
.project-note p {
max-width: 650px;
}
.project-note .button {
margin-top: 15px;
}
/* About, process and legal */
.about-manifesto {
padding-block: 90px;
display: grid;
grid-template-columns: 0.65fr 1.25fr;
align-items: start;
gap: 110px;
}
.about-manifesto > div {
min-width: 0;
}
.about-year {
aspect-ratio: 1;
background: var(--dark);
color: var(--paper);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 30px;
}
.about-year > span {
font-size: 9px;
letter-spacing: 0.1em;
color: #b7b7c2;
}
.about-year strong {
font: 400 clamp(70px, 8vw, 115px)/1 var(--display);
letter-spacing: -0.075em;
white-space: nowrap;
}
.about-year strong span {
font-size: 0.5em;
margin-left: 8px;
color: #a8a1ff;
}
.about-manifesto h2 {
margin: 26px 0;
}
.about-manifesto p {
font-size: 14px;
}
.manifesto-band {
background: var(--ink);
color: var(--paper);
text-align: center;
padding-block: 100px;
}
.manifesto-band .brand-symbol {
display: block;
width: 76px;
margin: 0 auto 28px;
}
.manifesto-band .eyebrow {
color: #b7b7c2;
font-size: 9px;
}
.manifesto-band h2 {
font-size: clamp(37px, 5.6vw, 78px);
margin: 40px 0;
}
.manifesto-band h2 em {
color: #a8a1ff;
}
.manifesto-band p {
color: #b7b7c2;
max-width: 600px;
margin-inline: auto;
font-size: 14px;
}
.values-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 45px 75px;
}
.values-grid > div {
border-top: 1px solid var(--line);
padding-top: 25px;
display: grid;
grid-template-columns: 25px 1fr;
gap: 15px;
}
.values-grid > div > span {
grid-row: 1/3;
color: var(--accent-text);
font-size: 22px;
}
.values-grid h3 {
font-size: 25px;
}
.values-grid p {
font-size: 13px;
}
.values-grid.three {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px;
}
.values-grid.three > div {
grid-template-columns: 1fr;
}
.values-grid.three > div > span {
grid-row: auto;
}
.work-modes {
background: var(--paper);
border-block: 1px solid var(--line);
}
.mode-note {
margin-top: 55px;
padding-top: 25px;
border-top: 1px solid var(--line);
font-size: 12px;
}
.process.detailed {
display: block;
}
.process.detailed li {
display: grid;
grid-template-columns: 80px 1fr 1.2fr;
gap: 50px;
padding-block: 38px;
}
.process.detailed .step-number {
margin: 0;
}
.process.detailed h3 {
font-size: 30px;
margin: 0;
}
.process.detailed p {
font-size: 14px;
}
.legal {
max-width: 860px;
padding-block: 60px 100px;
}
.legal h2 {
font-size: 28px;
margin: 40px 0 18px;
}
.legal p {
font-size: 14px;
line-height: 1.95;
}
.legal p a {
text-decoration: underline;
text-underline-offset: 4px;
}
.not-found {
min-height: 70vh;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
padding-block: 80px;
}
.not-found h1 {
margin: 30px 0;
}
.not-found .button {
margin-top: 25px;
}
/* Contact: same workflow, more space for people */
.form-layout {
display: grid;
grid-template-columns: 0.75fr 1.25fr;
align-items: start;
gap: 100px;
padding-block: 80px 110px;
}
.form-layout aside {
position: sticky;
top: 140px;
}
.form-layout aside .eyebrow {
max-width: 280px;
font-size: 9px;
}
.form-layout aside h2 {
font-size: 36px;
margin: 28px 0;
}
.form-layout aside p {
font-size: 13px;
}
.form-layout aside > .brand-symbol {
margin-top: 50px;
width: 70px;
}
.contact-aside-links {
display: flex;
flex-direction: column;
align-items: start;
gap: 14px;
margin-top: 35px;
}
.contact-aside-links a {
font-size: 11px;
padding: 8px 0;
border-bottom: 1px solid #c5c5d1;
}
.contact-aside-links a > span {
margin-left: 15px;
}
.form-shell {
background: var(--paper);
border: 1px solid var(--line);
padding: 40px;
border-radius: 6px;
min-width: 0;
}
.form-shell h2 {
font-size: 26px;
margin-bottom: 30px;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.field {
margin-bottom: 24px;
min-width: 0;
}
.field > label,
.field > legend {
display: block;
font-size: 11px;
font-weight: 600;
margin-bottom: 9px;
}
.field > label > span {
font-size: 10px;
font-weight: 400;
color: var(--muted);
}
.field input,
.field textarea,
.field select {
width: 100%;
background: var(--paper);
color: var(--ink);
border: 1px solid #cfcfd7;
border-radius: var(--radius);
padding: 13px 14px;
min-height: 50px;
font-size: 12px;
line-height: 1.6;
transition:
border-color 0.2s,
box-shadow 0.2s;
}
.field textarea {
resize: vertical;
min-height: 150px;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
border-color: var(--accent-text);
box-shadow: 0 0 0 3px #765bff0d;
outline: none;
}
/* Keep keyboard focus distinct from the lighter pointer-focus shadow. */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
outline: 2px solid var(--accent-text);
outline-offset: 3px;
}
.field input::placeholder,
.field textarea::placeholder {
color: #777780;
}
.field [aria-invalid="true"] {
border-color: #b42336;
}
.error {
display: block;
color: #a6162a;
font-size: 11px;
line-height: 1.6;
margin-top: 8px;
}
.form-honeypot {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.challenge-field {
border: 0;
margin: 0 0 25px;
padding: 0;
}
.challenge-options {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.challenge-options label {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 13px 14px;
border: 1px solid var(--line);
border-radius: var(--radius);
font-size: 12px;
line-height: 1.6;
cursor: pointer;
transition:
border-color 0.2s,
background 0.2s;
}
.challenge-options label:has(input:checked) {
border-color: #8e81d8;
background: #f6f4ff;
}
.challenge-options input {
width: 15px;
height: 15px;
min-height: 0;
padding: 0;
flex-shrink: 0;
accent-color: var(--accent-text);
}
.challenge-options label > span {
margin-left: auto;
font-size: 18px;
color: var(--muted);
}
.consent {
display: flex;
align-items: start;
gap: 12px;
font-size: 11px;
color: var(--muted);
line-height: 1.8;
}
.consent input {
width: 16px;
height: 16px;
flex-shrink: 0;
margin: 3px 0 0;
accent-color: var(--accent-text);
}
.consent a {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.form-notice {
font-size: 10px;
color: var(--muted);
margin-top: 22px;
line-height: 1.8;
}
.form-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 28px;
}
.form-actions .button {
font-size: 11px;
}
.form-progress {
display: flex;
justify-content: space-between;
font-size: 9px;
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 14px;
}
.progress-track {
height: 2px;
background: var(--line);
margin-bottom: 34px;
}
.progress-track i {
display: block;
height: 100%;
background: var(--accent-text);
transition: width 0.3s var(--ease);
}
.review > .eyebrow {
font-size: 9px;
margin-bottom: 18px;
}
.review dl {
margin: 0;
}
.review dl > div {
display: grid;
grid-template-columns: 130px 1fr;
gap: 20px;
padding: 13px 0;
border-bottom: 1px solid var(--line);
font-size: 12px;
}
.review dt {
color: var(--muted);
font-size: 11px;
}
.review dd {
margin: 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.alternative-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 15px;
border-top: 1px solid var(--line);
padding-top: 23px;
margin-top: 28px;
}
.alternative-actions button,
.alternative-actions a {
padding: 8px 0;
background: transparent;
border: 0;
border-bottom: 1px solid #c5c5d1;
color: var(--ink);
font-size: 10px;
}
.review > small {
display: block;
margin-top: 20px;
color: var(--muted);
font-size: 10px;
}
.form-status {
margin-top: 25px;
padding: 18px;
border: 1px solid #bdb2eb;
border-radius: var(--radius);
background: #f6f4ff;
color: #433679;
font-size: 12px;
}
/* Blog and reading */
.blog-home {
padding-block: var(--space-section);
border-top: 1px solid var(--line);
}
.blog-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 45px 30px;
}
.blog-card {
display: flex;
flex-direction: column;
min-width: 0;
}
.blog-card-art {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: #eeeef3;
aspect-ratio: 1.45;
overflow: hidden;
border-radius: 3px;
}
.blog-card-art .service-art {
width: 100%;
height: 100%;
margin: 0;
transition: transform 0.45s var(--ease);
}
.blog-card:hover .blog-card-art .service-art {
transform: scale(1.035);
}
.blog-card-arrow {
position: absolute;
right: 18px;
top: 15px;
font-size: 22px;
z-index: 1;
}
.blog-card-body {
padding-top: 24px;
}
.blog-card-labels {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
}
.blog-card-labels .eyebrow {
font-size: 8px;
color: var(--muted);
}
.blog-demo {
display: inline-block;
padding: 3px 6px;
border: 1px solid #d2d2dc;
border-radius: 3px;
color: var(--muted);
font-size: 8px;
line-height: 1.6;
}
.blog-card h3 {
font-size: 27px;
margin: 17px 0 14px;
line-height: 1.2;
}
.blog-card p {
font-size: 12px;
}
.blog-card-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
color: var(--muted);
font-size: 9px;
margin-top: 22px;
}
.blog-read-link {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #d7d7e0;
margin-top: 20px;
padding-top: 14px;
font-size: 10px;
font-weight: 600;
}
.blog-read-link > span {
font-size: 18px;
transition: transform 0.2s;
}
.blog-card:hover .blog-read-link > span {
transform: translate(2px, -2px);
}
.blog-hero {
border-bottom: 0;
padding-bottom: 55px;
}
.blog-hero h1 em {
color: var(--accent-text);
}
.blog-archive {
padding-bottom: 100px;
}
.blog-demo-notice {
display: flex;
align-items: start;
gap: 15px;
padding: 20px 22px;
background: #eeeef3;
border-left: 2px solid #9d93d5;
margin-bottom: 35px;
}
.blog-demo-notice > span {
color: var(--accent-text);
font-size: 21px;
line-height: 1.5;
}
.blog-demo-notice p {
font-size: 12px;
line-height: 1.85;
}
.blog-demo-notice strong {
color: var(--ink);
font-weight: 500;
}
.blog-filters {
display: flex;
align-items: end;
gap: 20px;
padding-bottom: 35px;
margin-bottom: 40px;
border-bottom: 1px solid var(--line);
}
.blog-filters .field {
margin: 0;
flex: 1;
}
.blog-filters .blog-search {
flex: 2;
}
.blog-filters .button {
min-height: 50px;
padding-block: 12px;
}
.blog-clear {
align-self: center;
margin-top: 25px;
font-size: 11px;
white-space: nowrap;
text-decoration: underline;
text-underline-offset: 4px;
}
.blog-results-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 30px;
margin-bottom: 35px;
}
.blog-results-heading h2 {
font-size: 28px;
max-width: 680px;
}
.blog-results-heading p {
font-size: 11px;
flex-shrink: 0;
}
.blog-card-featured {
grid-column: 1/-1;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 60px;
padding-bottom: 45px;
border-bottom: 1px solid var(--line);
}
.blog-card-featured .blog-card-art {
aspect-ratio: 1.5;
}
.blog-card-featured .blog-card-body {
align-self: center;
padding: 15px 0;
}
.blog-card-featured h3 {
font-size: clamp(30px, 3.5vw, 47px);
}
.blog-card-featured p {
max-width: 500px;
font-size: 14px;
}
.blog-empty {
padding: 65px 0 30px;
}
.blog-empty h3 {
font-size: 35px;
margin: 20px 0;
}
.blog-empty .button {
margin-top: 15px;
}
.blog-pagination {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
border-top: 1px solid var(--line);
margin-top: 55px;
padding-top: 30px;
}
.blog-pagination a {
min-width: 42px;
min-height: 42px;
display: grid;
place-items: center;
padding: 5px 10px;
font-size: 12px;
border: 1px solid var(--line);
border-radius: var(--radius);
}
.blog-pagination a[aria-current] {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.blog-bottom-cta {
padding-block: 70px;
background: #ededf2;
border-top: 1px solid var(--line);
}
.blog-bottom-cta > .wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 55px;
}
.blog-bottom-cta h2 {
font-size: 37px;
margin: 20px 0 15px;
}
.blog-bottom-cta p {
font-size: 13px;
}
.blog-bottom-cta .button {
flex-shrink: 0;
}
.blog-post-header {
padding-block: 40px 0;
}
.blog-breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 55px;
font-size: 10px;
line-height: 1.6;
color: var(--muted);
}
.blog-breadcrumb a:hover {
color: var(--ink);
text-decoration: underline;
}
.blog-post-header h1 {
font-size: clamp(40px, 5vw, 72px);
max-width: 1000px;
margin: 25px 0;
}
.blog-post-excerpt {
font-size: 17px;
max-width: 810px;
}
.blog-post-meta {
display: flex;
flex-wrap: wrap;
gap: 18px;
color: var(--muted);
font-size: 10px;
margin: 30px 0;
}
.blog-post-header .blog-demo-notice {
max-width: 850px;
}
.blog-post-cover {
background: #eeeef3;
height: 350px;
overflow: hidden;
margin-top: 45px;
}
.blog-post-cover .service-art {
height: 100%;
}
.blog-post-cover .mock-window,
.blog-post-cover .mock-dashboard {
max-width: 520px;
transform: none;
}
.blog-post-cover .mock-web-title {
font-size: 42px;
max-width: none;
margin-block: 30px;
}
.blog-post-cover .mock-dashboard {
padding: 30px;
}
.blog-post-cover .chart-bars {
height: 150px;
}
.blog-post-cover .auto-graphic {
max-width: 500px;
}
.blog-post-cover .auto-graphic > span {
width: 80px;
font-size: 35px;
}
.blog-post-cover .integrated-graphic .brand-symbol {
width: 200px;
}
.blog-reading-layout {
display: grid;
grid-template-columns: 250px 1fr;
gap: 90px;
padding-block: 65px 100px;
}
.blog-contents {
position: sticky;
top: 125px;
align-self: start;
border-top: 1px solid #cacad5;
padding-top: 22px;
}
.blog-contents .eyebrow {
color: var(--muted);
font-size: 9px;
}
.blog-contents ol {
margin: 23px 0;
padding-left: 16px;
color: var(--muted);
}
.blog-contents li {
padding: 7px 0;
font-size: 11px;
}
.blog-contents a:hover {
color: var(--accent-text);
}
.blog-contents .text-link {
font-size: 10px;
width: 100%;
}
.blog-article {
max-width: 780px;
min-width: 0;
}
.blog-article section {
scroll-margin-top: 120px;
margin-bottom: 50px;
}
.blog-article h2 {
font-size: 34px;
margin-bottom: 25px;
}
.blog-article p {
font-size: 15px;
line-height: 1.95;
}
.blog-article ul {
color: var(--muted);
font-size: 14px;
padding-left: 20px;
line-height: 1.95;
}
.blog-article li {
padding: 5px 0;
}
.blog-article blockquote {
border-left: 2px solid var(--accent-text);
margin: 35px 0;
padding: 7px 0 7px 25px;
}
.blog-article blockquote p {
font-family: var(--display);
font-size: 25px;
line-height: 1.4;
color: var(--ink);
letter-spacing: -0.025em;
}
.blog-article-end {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-top: 25px;
border-top: 1px solid var(--line);
}
.blog-article-end .eyebrow {
font-size: 8px;
}
.blog-related {
background: var(--paper);
padding-block: 85px;
border-top: 1px solid var(--line);
}
/* Final invitation and footer */
.final-cta {
color: var(--paper);
background: var(--ink);
overflow: hidden;
}
.final-cta > .wrap {
position: relative;
padding-block: 90px;
}
.final-cta h2 {
font-size: clamp(52px, 7.5vw, 108px);
letter-spacing: -0.065em;
line-height: 1.03;
margin-block: 30px 45px;
position: relative;
z-index: 1;
max-width: 1060px;
}
.final-cta h2 em {
color: #a8a1ff;
}
.final-cta > .wrap > .eyebrow {
color: #b7b7c2;
font-size: 9px;
}
.final-cta > .wrap > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
position: relative;
z-index: 1;
}
.final-cta p {
color: #b7b7c2;
font-size: 13px;
margin: 0;
}
.final-cta .button {
background: var(--paper);
color: var(--ink);
border-color: var(--paper);
}
.final-cta .button:hover {
background: #e4e4f0;
border-color: #e4e4f0;
}
.cta-symbol {
position: absolute;
right: 0;
top: 20px;
font-size: 350px;
line-height: 1;
font-weight: 300;
color: #ffffff05;
pointer-events: none;
}
.footer {
color: var(--paper);
background: var(--dark);
padding: 70px max(56px, calc((100% - 1280px) / 2)) 0;
}
.footer-top {
display: grid;
grid-template-columns: 1.5fr 0.8fr 1fr 1fr;
gap: 50px;
padding-bottom: 60px;
}
.footer .brand-logo {
width: 190px;
margin-bottom: 27px;
}
.footer p {
color: #a1a1ae;
font-size: 11px;
line-height: 1.9;
}
.footer-top > div:first-child > .eyebrow {
font-size: 8px;
color: #a1a1ae;
margin-top: 25px;
}
.footer-label {
display: block;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 9px;
color: #a1a1ae;
margin-bottom: 22px;
}
.footer-top > div > a:not(:first-child),
.footer-top > div:not(:first-child) > a {
display: block;
width: fit-content;
font-size: 11px;
line-height: 1.6;
margin-top: 15px;
color: #d2d2db;
overflow-wrap: anywhere;
}
.footer-top > div > a:hover {
color: var(--paper);
text-decoration: underline;
text-underline-offset: 4px;
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
padding-block: 24px;
border-top: 1px solid #35353f;
color: #a1a1ae;
font-size: 9px;
}
.footer-bottom a:hover {
color: var(--paper);
}
/* Motion is progressive enhancement: content is visible without JS. */
@keyframes signal-drift {
0%,
100% {
transform: translateY(-3px);
}
50% {
transform: translateY(3px);
}
}
@media (prefers-reduced-motion: no-preference) {
.signal-ribbons {
animation: signal-drift 14s ease-in-out infinite;
}
[data-reveal="pending"] {
opacity: 0;
transform: translateY(15px);
}
[data-reveal="visible"] {
opacity: 1;
transform: none;
transition:
opacity 0.7s var(--ease),
transform 0.7s var(--ease);
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
}
[data-reveal] {
opacity: 1 !important;
transform: none !important;
}
}
/* Laptop and tablet */
@media (min-width: 1700px) {
.wrap {
width: min(1440px, calc(100% - 160px));
}
.header {
padding-inline: max(60px, calc((100% - 1490px) / 2));
}
.hero h1 {
font-size: 96px;
}
.expertise-strip,
.footer {
padding-inline: max(80px, calc((100% - 1440px) / 2));
}
}
@media (max-width: 1100px) {
.wrap {
width: calc(100% - 72px);
}
.header {
padding-inline: 36px;
height: 80px;
gap: 20px;
}
.header .brand-logo {
width: 125px;
}
.nav {
gap: 17px;
}
.nav > a {
font-size: 10px;
}
.header-cta {
font-size: 10px;
padding-inline: 12px;
gap: 14px;
}
.hero {
gap: 35px;
grid-template-columns: 1.2fr 1fr;
padding-top: 50px;
}
.hero h1 {
font-size: clamp(52px, 6.2vw, 68px);
}
.hero-copy > .eyebrow {
font-size: 8px;
}
.hero-copy > p {
font-size: 13px;
}
.hero-actions {
gap: 15px;
}
.hero-actions .button {
gap: 14px;
padding-inline: 16px;
font-size: 11px;
}
.hero-actions .text-link {
font-size: 10px;
gap: 10px;
}
.hero-signature {
margin-top: 28px;
}
.hero-art {
aspect-ratio: 1/1.3;
}
.signal-heading,
.signal-footer {
left: 18px;
right: 18px;
font-size: 6px;
}
.signal-heading {
top: 18px;
}
.signal-footer {
bottom: 18px;
}
.expertise-strip,
.footer {
padding-inline: 36px;
}
.expertise-strip {
font-size: 16px;
}
.expertise-strip b {
margin-left: 10px;
}
.section-heading {
gap: 35px;
grid-template-columns: 0.6fr 1.5fr;
}
.problem-bottom,
.philosophy,
.ai-section,
.audience,
.event-spotlight > .wrap,
.service-detail,
.form-layout,
.about-manifesto {
gap: 55px;
}
.solutions-grid {
gap: 0 28px;
}
.solution-card h3 {
font-size: 24px;
min-height: 83px;
}
.solution-card p {
font-size: 12px;
}
.solution-eventos {
column-gap: 35px;
padding-inline: 30px;
}
.solution-eventos h3 {
font-size: 32px;
min-height: 0;
}
.scenario {
grid-template-columns: 170px 1fr;
gap: 25px;
}
.scenario-panel {
grid-template-columns: 1fr 1.1fr;
gap: 25px;
}
.scenario-copy h3 {
font-size: 25px;
}
.dashboard-row {
grid-template-columns: 25px 1fr;
}
.dashboard-row small {
grid-column: 2;
text-align: left;
}
.dashboard-content,
.dashboard-header {
padding-inline: 15px;
}
.process {
gap: 20px;
}
.process h3 {
font-size: 18px;
}
.process p {
font-size: 11px;
}
.portfolio-empty {
gap: 50px;
}
.form-shell {
padding: 28px;
}
.form-grid {
gap: 17px;
}
.form-layout aside h2 {
font-size: 31px;
}
.blog-grid {
gap: 40px 25px;
}
.blog-card h3 {
font-size: 24px;
}
.blog-card-featured {
gap: 35px;
}
.blog-card-featured h3 {
font-size: 37px;
}
.blog-reading-layout {
grid-template-columns: 210px 1fr;
gap: 50px;
}
.blog-bottom-cta h2 {
font-size: 30px;
}
.footer-top {
gap: 30px;
grid-template-columns: 1.3fr 0.8fr 1fr 1fr;
}
}
@media (max-width: 900px) {
.menu-toggle {
display: block;
background: transparent;
border: 0;
padding: 10px 0 10px 10px;
min-height: 44px;
color: var(--ink);
font-size: 11px;
white-space: nowrap;
}
.header-cta {
margin-left: auto;
}
.nav {
position: absolute;
top: calc(100% - 1px);
left: 20px;
right: 20px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 0 0 6px 6px;
display: none;
padding: 15px 25px 25px;
box-shadow: 0 20px 30px #09090b08;
max-height: calc(100dvh - 100px);
overflow-y: auto;
}
.nav.is-open {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.nav > a {
font-size: 17px;
font-family: var(--display);
padding-block: 14px;
border-bottom: 1px solid var(--line);
}
.nav > a::after {
display: none;
}
.nav > a[aria-current] {
color: var(--accent-text);
}
.nav .mobile-diagnostic {
display: block;
border: 0;
font-family: var(--font);
font-size: 11px;
color: var(--muted);
padding-top: 20px;
}
body:not(.js-enabled) .header {
height: auto;
min-height: 80px;
padding-block: 20px;
flex-wrap: wrap;
position: relative;
}
body:not(.js-enabled) .menu-toggle {
display: none;
}
body:not(.js-enabled) .nav {
order: 5;
position: static;
display: flex;
flex-wrap: wrap;
width: 100%;
padding: 10px 0 0;
border: 0;
background: transparent;
box-shadow: none;
gap: 0 22px;
overflow: visible;
max-height: none;
}
body:not(.js-enabled) .nav > a {
font-size: 12px;
border: 0;
padding-block: 8px;
}
.hero {
grid-template-columns: 1.2fr 1fr;
gap: 25px;
}
.hero h1 {
font-size: 54px;
}
.hero-art {
aspect-ratio: 1/1.5;
}
.hero-actions {
gap: 10px;
}
.hero-actions .text-link {
padding-top: 15px;
}
.hero-signature {
font-size: 9px;
}
.hero-bottom {
margin-top: 25px;
}
.section-heading {
grid-template-columns: 1fr;
gap: 25px;
margin-bottom: 42px;
}
.section-heading > .eyebrow {
max-width: none;
margin: 0;
}
.section-heading h2 {
max-width: 700px;
}
.solutions-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.solution-card h3 {
min-height: 56px;
}
.solution-eventos h3 {
min-height: 0;
}
.scenario {
grid-template-columns: 1fr;
}
.scenario-tabs {
flex-direction: row;
flex-wrap: wrap;
gap: 6px;
padding-bottom: 15px;
}
.scenario-tabs button {
padding: 12px 15px;
gap: 20px;
}
.scenario-panel {
grid-template-columns: 1fr 1.2fr;
gap: 35px;
}
.scenario-copy h3 {
font-size: 30px;
}
.philosophy {
gap: 45px;
}
.thinking-steps > div {
padding-block: 26px;
gap: 15px;
}
.thinking-steps h3 {
font-size: 26px;
}
.event-spotlight > .wrap {
gap: 40px;
}
.event-journey {
padding-left: 25px;
}
.event-journey li {
gap: 15px;
}
.event-journey h3 {
font-size: 19px;
}
.process {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 35px;
}
.process h3 {
font-size: 22px;
}
.process p {
font-size: 12px;
}
.ai-section {
gap: 45px;
}
.audience {
gap: 45px;
}
.audience-list h3 {
font-size: 18px;
}
.page-hero h1 {
font-size: 58px;
}
.service-detail {
gap: 45px;
}
.service-detail-heading h2 {
font-size: 36px;
}
.service-detail-copy h3 {
font-size: 25px;
}
.service-detail-heading .service-art {
height: 245px;
}
.about-manifesto {
gap: 50px;
}
.about-year {
padding: 22px;
}
.about-year strong {
font-size: 75px;
}
.values-grid.three {
gap: 25px;
}
.process.detailed li {
grid-template-columns: 50px 0.8fr 1.2fr;
gap: 25px;
}
.process.detailed h3 {
font-size: 25px;
}
.form-layout {
grid-template-columns: 1fr;
gap: 50px;
}
.form-layout aside {
position: static;
max-width: 650px;
}
.form-layout aside h2 {
font-size: 36px;
}
.form-layout aside > .brand-symbol {
display: none;
}
.contact-aside-links {
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}
.form-shell {
padding: 35px;
}
.blog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blog-card-featured {
gap: 30px;
}
.blog-card-featured h3 {
font-size: 31px;
}
.blog-card-featured p {
font-size: 12px;
}
.blog-filters {
flex-wrap: wrap;
}
.blog-filters .blog-search {
flex: 1 1 50%;
}
.blog-filters .field:not(.blog-search) {
flex: 1 1 30%;
}
.blog-results-heading h2 {
font-size: 25px;
}
.blog-reading-layout {
grid-template-columns: 1fr;
gap: 50px;
}
.blog-contents {
position: static;
}
.blog-contents ol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px 25px;
}
.blog-contents .text-link {
width: fit-content;
}
.blog-bottom-cta > .wrap {
display: block;
}
.blog-bottom-cta .button {
margin-top: 30px;
}
.footer-top {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 45px 35px;
}
.footer-top > div:first-child {
grid-column: 1/-1;
}
.footer-top > div:first-child p {
display: inline-block;
}
.footer-top > div:first-child .eyebrow {
display: block;
margin-top: 15px;
}
.footer-bottom {
font-size: 8px;
gap: 20px;
}
}
/* Mobile is composed independently rather than scaled down. */
@media (max-width: 640px) {
:root {
--space-section: 68px;
}
html {
scroll-padding-top: 90px;
}
body {
font-size: 14px;
}
.wrap {
width: calc(100% - 40px);
}
h1 {
font-size: clamp(39px, 10.5vw, 62px);
}
h2 {
font-size: clamp(31px, 8.5vw, 43px);
}
h3 {
font-size: 24px;
}
.header {
height: 72px;
gap: 16px;
padding-inline: 20px;
}
.header .brand-logo {
width: 108px;
}
.header-cta {
min-height: 38px;
padding: 8px 10px;
font-size: 8px;
gap: 12px;
}
.header-cta span {
font-size: 15px;
}
.menu-toggle {
font-size: 10px;
padding-inline: 0;
}
.nav {
left: 12px;
right: 12px;
padding-inline: 20px;
max-height: calc(100dvh - 84px);
}
.nav > a {
font-size: 20px;
}
.eyebrow {
font-size: 9px;
letter-spacing: 0.08em;
gap: 8px;
}
.button {
min-height: 51px;
padding: 14px 17px;
gap: 25px;
font-size: 11px;
}
.text-link {
font-size: 11px;
}
.hero {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 30px;
padding-top: 38px;
}
.hero-copy {
padding: 0;
}
.hero-copy > .eyebrow {
font-size: 7px;
letter-spacing: 0.065em;
gap: 6px;
}
.hero h1 {
font-size: clamp(44px, 11.9vw, 72px);
margin: 25px 0 23px;
line-height: 1.055;
letter-spacing: -0.06em;
}
.hero-copy > p {
font-size: 12px;
line-height: 1.9;
max-width: 480px;
margin-bottom: 25px;
}
.hero-actions {
flex-wrap: wrap;
gap: 10px 20px;
}
.hero-actions .button {
font-size: 10px;
gap: 20px;
padding: 14px 15px;
}
.hero-actions .text-link {
font-size: 10px;
padding: 8px 0;
}
.hero-signature {
margin-top: 25px;
font-size: 8px;
gap: 10px;
}
.hero-signature .small-star {
font-size: 23px;
}
.hero-art {
aspect-ratio: 1.1;
margin-top: 4px;
border-radius: var(--radius);
}
.signal-heading {
top: 20px;
}
.signal-field {
inset: 20px -10px 25px;
}
.signal-node {
font-size: 6px;
padding: 3px 6px;
}
.signal-heading,
.signal-footer {
left: 20px;
right: 20px;
font-size: 6px;
}
.signal-axis {
font-size: 6px;
bottom: 11%;
}
.signal-footer {
bottom: 18px;
padding-top: 13px;
}
.signal-footer .brand-symbol {
width: 32px;
}
.signal-footer > span:first-child {
font-size: 6px;
}
.hero-bottom {
margin: 0;
padding-block: 19px;
font-size: 6px;
gap: 20px;
}
.hero-bottom > span:last-child {
gap: 10px;
text-align: right;
}
.expertise-strip {
padding: 22px 20px;
gap: 14px;
flex-wrap: wrap;
justify-content: space-between;
font-size: 14px;
}
.expertise-strip > span:first-child {
width: 100%;
font-size: 9px;
margin-bottom: 6px;
}
.expertise-strip b {
display: none;
}
.section-heading {
gap: 21px;
margin-bottom: 35px;
}
.section-heading p {
font-size: 12px;
margin-top: 19px;
}
.problem-bottom {
grid-template-columns: 1fr;
gap: 35px;
}
.problem-bottom > p {
font-size: 12px;
}
.problem-connections > div {
padding-block: 20px;
font-size: 10px;
gap: 10px;
grid-template-columns: 1fr 20px 1fr;
}
.problem-connections i {
font-size: 18px;
}
.solutions-grid {
grid-template-columns: 1fr;
gap: 0;
}
.solution-card {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: 0 22px;
padding-block: 24px 28px;
}
.card-top {
grid-column: 1/-1;
font-size: 8px;
margin-bottom: 22px;
}
.solution-card h3 {
grid-column: 1/-1;
grid-row: 2;
max-width: none;
min-height: 0;
font-size: 26px;
margin: 0 0 20px;
}
.solution-card p {
grid-column: 1;
grid-row: 3;
font-size: 11px;
margin: 0;
align-self: center;
}
.solution-card .service-art {
grid-column: 2;
grid-row: 3;
height: 120px;
margin: 0;
align-self: center;
}
.solution-eventos {
display: flex;
flex-direction: column;
gap: 0;
margin-top: 12px;
padding: 25px;
}
.solution-eventos > * {
flex-shrink: 0;
}
.solution-eventos h3 {
font-size: 30px;
align-self: auto;
}
.solution-eventos .service-art {
height: 205px;
width: 100%;
margin: 0 0 24px;
}
.solution-eventos p {
font-size: 11px;
}
.section-end {
flex-direction: column;
align-items: start;
margin-top: 30px;
padding-top: 22px;
gap: 13px;
font-size: 10px;
}
.dual-section > .eyebrow {
margin-bottom: 28px;
}
.dual-head,
.dual-body {
grid-template-columns: 1fr 20px 1fr;
gap: 13px;
}
.dual-head h2 {
font-size: clamp(29px, 8.5vw, 43px);
}
.dual-plus {
font-size: 24px;
}
.dual-body {
margin-top: 22px;
align-items: start;
}
.dual-body p {
font-size: 10px;
line-height: 1.8;
}
.dual-body p br {
display: none;
}
.dual-body .brand-symbol {
width: 20px;
margin-top: 6px;
}
.dual-footer {
margin-top: 28px;
padding-top: 22px;
font-size: 10px;
}
.scenario {
padding-top: 20px;
gap: 15px;
}
.scenario-tabs {
gap: 5px;
}
.scenario-tabs button {
padding: 10px;
font-size: 10px;
gap: 13px;
}
.scenario-tabs button > span {
font-size: 15px;
}
.scenario-panel {
grid-template-columns: 1fr;
gap: 28px;
}
.scenario-copy h3 {
font-size: 30px;
max-width: 450px;
margin-block: 18px;
}
.scenario-copy p {
font-size: 12px;
}
.demo-note {
margin-top: 20px;
padding-top: 15px;
font-size: 8px;
}
.dashboard-content {
padding: 22px 18px 18px;
}
.dashboard-header {
padding-inline: 18px;
}
.dashboard-row {
grid-template-columns: 26px 1fr auto;
font-size: 10px;
padding-block: 17px;
}
.dashboard-row small {
grid-column: auto;
text-align: right;
font-size: 8px;
}
.dashboard-title h4 {
font-size: 18px;
}
.dashboard-flow {
gap: 8px;
font-size: 8px;
}
.philosophy,
.ai-section,
.audience {
grid-template-columns: 1fr;
gap: 40px;
}
.philosophy h2 br {
display: none;
}
.philosophy h2 {
margin-block: 23px;
}
.thinking-steps > div {
padding-block: 25px;
gap: 16px;
grid-template-columns: 22px minmax(0, 1fr) 22px;
}
.thinking-steps h3 {
font-size: 27px;
}
.thinking-steps p {
font-size: 12px;
}
.event-spotlight > .wrap {
grid-template-columns: 1fr;
gap: 45px;
}
.event-intro h2 {
font-size: 40px;
margin-block: 25px;
}
.event-intro p {
font-size: 12px;
}
.event-intro .button {
width: 100%;
margin-top: 12px;
}
.event-intro .text-link {
font-size: 10px;
}
.event-journey {
padding: 0;
border-left: 0;
border-top: 1px solid #35353f;
padding-top: 23px;
}
.event-journey li {
padding-block: 22px;
gap: 13px;
}
.event-journey h3 {
font-size: 22px;
}
.event-journey li p {
font-size: 11px;
}
.event-scope {
font-size: 9px;
}
.ai-graphic {
aspect-ratio: 1.2;
max-width: 450px;
width: 100%;
justify-self: center;
padding: 24px 20px;
}
.ai-orbit {
width: 65%;
margin-block: 20px;
}
.ai-section h2 {
font-size: 32px;
margin-block: 23px;
}
.ai-section p {
font-size: 12px;
}
.process {
grid-template-columns: 1fr;
gap: 0;
}
.process li {
display: grid;
grid-template-columns: 35px 1fr;
gap: 12px 22px;
padding-block: 25px;
}
.step-number {
grid-column: 1;
grid-row: 1/3;
margin: 3px 0 0;
font-size: 10px;
display: block;
}
.step-number > span {
display: block;
margin-top: 12px;
font-size: 15px;
}
.process h3 {
font-size: 25px;
margin: 0;
}
.process p {
font-size: 12px;
grid-column: 2;
}
.audience h2 {
margin-block: 23px;
}
.audience > div > p {
font-size: 12px;
}
.audience-list h3 {
font-size: 21px;
}
.audience-list span {
font-size: 10px;
}
.audience-list > div {
padding-block: 22px;
}
.faq-list summary {
font-size: 18px;
padding-block: 23px;
gap: 18px;
}
.faq-list p {
font-size: 12px;
padding-bottom: 23px;
}
.mock-window {
width: 94%;
padding: 10px;
}
.mock-web-title {
font-size: 21px;
margin-block: 14px;
}
.mock-web-title > span {
display: none;
}
.mock-dashboard {
width: 98%;
padding: 12px;
gap: 10px;
grid-template-columns: 15px 1fr;
}
.mock-dashboard > div > span {
font-size: 6px;
}
.chart-bars {
gap: 5px;
height: 65px;
margin-top: 12px;
}
.chart-bars i {
width: 13px;
}
.auto-graphic > span {
width: 32px;
font-size: 20px;
}
.integrated-graphic .brand-symbol {
width: 90px;
}
.integrated-graphic > span {
font-size: 6px;
}
.agent-graphic {
width: 100%;
gap: 7px;
}
.agent-graphic .graphic-label,
.agent-handoff {
display: none;
}
.agent-question,
.agent-answer {
padding: 6px 7px;
font-size: 8px;
}
.agent-answer {
gap: 4px;
}
.agent-answer i {
font-size: 13px;
}
.voice-graphic {
width: 120px;
grid-template-columns: 39px 1fr;
gap: 10px;
}
.voice-avatar {
height: 55px;
}
.voice-avatar::before {
width: 19px;
height: 23px;
left: 9px;
top: 9px;
}
.voice-avatar span {
width: 42px;
left: -2px;
top: 36px;
}
.voice-wave {
gap: 3px;
}
.voice-wave i {
width: 4px;
}
.voice-wave i:nth-child(3n) {
height: 46px;
}
.voice-graphic .graphic-label {
display: none;
}
.event-ticket {
width: 92%;
padding: 19px;
}
.event-ticket strong {
font-size: 25px;
margin-block: 20px;
}
.ticket-stub {
font-size: 6px;
}
.page-hero {
padding-block: 55px 48px;
}
.page-hero h1 {
font-size: clamp(38px, 10.5vw, 58px);
margin-block: 24px;
letter-spacing: -0.05em;
}
.page-hero > p {
font-size: 13px;
}
.page-hero > .text-link {
font-size: 10px;
margin-top: 15px;
}
.solution-index {
grid-template-columns: 1fr;
gap: 0;
padding-block: 22px 35px;
}
.solution-index a {
font-size: 12px;
gap: 12px;
padding-block: 17px;
}
.service-details {
padding-top: 0;
}
.service-detail {
grid-template-columns: 1fr;
gap: 35px;
padding-block: 50px;
scroll-margin-top: 90px;
}
.service-detail-heading h2 {
font-size: 36px;
margin-block: 22px 25px;
}
.service-detail-heading .eyebrow {
font-size: 8px;
}
.service-detail-heading .service-art {
height: 235px;
max-width: none;
}
.service-detail-copy h3 {
font-size: 27px;
margin-bottom: 20px;
}
.service-detail-copy > p {
font-size: 12px;
}
.service-detail-copy h4 {
font-size: 18px;
}
.service-detail-copy li {
font-size: 11px;
gap: 10px;
padding-block: 13px;
}
.integration-note {
margin-block: 25px;
}
.integration-note p {
font-size: 11px;
}
.service-detail .button {
width: 100%;
}
.service-detail .mock-window,
.service-detail .mock-dashboard {
max-width: 260px;
}
.service-detail .mock-web-title {
font-size: 31px;
}
.service-detail .chart-bars {
height: 100px;
}
.service-detail .auto-graphic {
max-width: 250px;
}
.service-detail .auto-graphic > span {
width: 45px;
}
.service-detail .agent-graphic {
max-width: 260px;
}
.service-detail .agent-question,
.service-detail .agent-answer {
font-size: 10px;
padding: 12px;
}
.service-detail .agent-graphic .graphic-label,
.service-detail .agent-handoff {
display: block;
}
.service-detail .voice-graphic {
width: 175px;
grid-template-columns: 50px 1fr;
gap: 20px;
}
.service-detail .voice-avatar {
height: 65px;
}
.service-detail .voice-avatar::before {
left: 14px;
}
.service-detail .voice-avatar span {
width: 50px;
top: 40px;
left: 0;
}
.service-detail .voice-wave {
gap: 5px;
}
.service-detail .integrated-graphic .brand-symbol {
width: 150px;
}
.service-detail .event-ticket {
max-width: 270px;
}
.portfolio-page {
padding-top: 35px;
}
.portfolio-filters {
margin-bottom: 35px;
gap: 4px 18px;
}
.portfolio-filters button {
font-size: 10px;
}
.portfolio-empty {
grid-template-columns: 1fr;
gap: 35px;
}
.portfolio-visual {
aspect-ratio: 1.2;
padding: 25px;
}
.portfolio-visual .brand-symbol {
width: 140px;
}
.portfolio-visual .eyebrow {
font-size: 7px;
}
.visual-bottom {
font-size: 6px;
}
.portfolio-empty > div > h3 {
font-size: 32px;
margin-block: 22px;
}
.portfolio-empty > div > p {
font-size: 12px;
}
.project-grid {
grid-template-columns: 1fr;
gap: 35px;
}
.project-note {
padding-block: 45px 65px;
}
.project-note h2 {
margin-block: 22px;
}
.project-note p {
font-size: 12px;
}
.about-manifesto {
grid-template-columns: 1fr;
padding-block: 50px 65px;
gap: 45px;
}
.about-year {
aspect-ratio: 1.65;
padding: 25px;
}
.about-year strong {
font-size: clamp(80px, 25vw, 115px);
}
.about-year > span {
font-size: 8px;
}
.about-manifesto h2 {
margin-block: 23px;
}
.about-manifesto p {
font-size: 12px;
}
.manifesto-band {
padding-block: 65px;
}
.manifesto-band .brand-symbol {
width: 65px;
}
.manifesto-band .eyebrow {
font-size: 8px;
}
.manifesto-band h2 {
font-size: 39px;
margin-block: 30px;
}
.manifesto-band p {
font-size: 12px;
}
.values-grid,
.values-grid.three {
grid-template-columns: 1fr;
gap: 30px;
}
.values-grid > div {
gap: 12px 15px;
grid-template-columns: 20px 1fr;
}
.values-grid h3 {
font-size: 24px;
}
.values-grid p {
font-size: 12px;
}
.values-grid.three > div {
grid-template-columns: 20px 1fr;
}
.values-grid.three > div > span {
grid-row: 1/3;
}
.mode-note {
font-size: 11px;
margin-top: 35px;
}
.process.detailed li {
grid-template-columns: 30px 1fr;
gap: 13px 20px;
padding-block: 28px;
}
.process.detailed h3 {
grid-column: 2;
font-size: 27px;
}
.process.detailed p {
grid-column: 2;
font-size: 12px;
}
.process.detailed .step-number {
grid-row: 1/3;
}
.legal {
padding-block: 30px 70px;
}
.legal h2 {
font-size: 25px;
margin-block: 30px 18px;
}
.legal p {
font-size: 12px;
line-height: 1.95;
}
.not-found {
min-height: 65vh;
padding-block: 60px;
}
.form-layout {
padding-block: 45px 70px;
gap: 35px;
}
.form-layout aside h2 {
font-size: 33px;
margin-block: 22px;
}
.form-layout aside p {
font-size: 12px;
}
.form-layout aside .eyebrow {
font-size: 8px;
}
.contact-aside-links {
gap: 10px 18px;
}
.contact-aside-links a {
font-size: 10px;
}
.form-shell {
padding: 25px 20px;
}
.form-shell h2 {
font-size: 25px;
margin-bottom: 25px;
}
.form-grid {
grid-template-columns: 1fr;
gap: 0;
}
.field {
margin-bottom: 21px;
}
.field > label,
.field > legend {
font-size: 11px;
}
.field input,
.field select,
.field textarea {
font-size: 16px;
padding: 12px;
}
.field input::placeholder,
.field textarea::placeholder {
font-size: 12px;
}
.challenge-options label {
padding: 12px 10px;
font-size: 11px;
gap: 9px;
}
.challenge-options input {
width: 14px;
height: 14px;
}
.consent {
font-size: 10px;
gap: 10px;
}
.form-actions {
gap: 10px;
margin-top: 24px;
}
.form-actions .button {
font-size: 10px;
gap: 15px;
}
.review dl > div {
grid-template-columns: 1fr;
gap: 4px;
font-size: 11px;
}
.review dt {
font-size: 10px;
}
.form-notice,
.review > small {
font-size: 9px;
}
.form-status {
padding: 14px;
font-size: 11px;
}
.blog-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.blog-card-art {
aspect-ratio: 1.6;
}
.blog-card-body {
padding-top: 20px;
}
.blog-card h3 {
font-size: 29px;
margin-block: 15px;
}
.blog-card p {
font-size: 12px;
}
.blog-card-art .mock-window,
.blog-card-art .mock-dashboard {
max-width: 270px;
}
.blog-card-art .mock-web-title {
font-size: 29px;
}
.blog-card-art .chart-bars {
height: 90px;
}
.blog-card-art .auto-graphic {
max-width: 260px;
}
.blog-card-art .auto-graphic > span {
width: 44px;
}
.blog-card-art .design-graphic {
font-size: 80px;
}
.blog-card-featured {
display: flex;
gap: 0;
padding-bottom: 35px;
}
.blog-card-featured .blog-card-art {
aspect-ratio: 1.6;
}
.blog-card-featured .blog-card-body {
padding-top: 23px;
}
.blog-card-featured h3 {
font-size: 32px;
}
.blog-hero {
padding-bottom: 35px;
}
.blog-hero h1 br {
display: none;
}
.blog-archive {
padding-bottom: 65px;
}
.blog-demo-notice {
padding: 16px;
gap: 10px;
margin-bottom: 27px;
}
.blog-demo-notice p {
font-size: 10px;
}
.blog-demo-notice > span {
font-size: 17px;
}
.blog-filters {
gap: 17px;
margin-bottom: 30px;
padding-bottom: 30px;
}
.blog-filters .blog-search,
.blog-filters .field:not(.blog-search) {
flex: 1 1 100%;
}
.blog-filters input,
.blog-filters select {
font-size: 14px;
}
.blog-clear {
margin-top: 0;
font-size: 10px;
}
.blog-results-heading {
flex-direction: column;
align-items: start;
gap: 15px;
margin-bottom: 25px;
}
.blog-results-heading h2 {
font-size: 27px;
}
.blog-results-heading p {
font-size: 10px;
}
.blog-empty {
padding-top: 30px;
}
.blog-empty h3 {
font-size: 30px;
}
.blog-empty p {
font-size: 12px;
}
.blog-bottom-cta {
padding-block: 50px;
}
.blog-bottom-cta h2 {
font-size: 32px;
margin-top: 20px;
}
.blog-bottom-cta p {
font-size: 12px;
}
.blog-bottom-cta .button {
margin-top: 25px;
}
.blog-post-header {
padding-top: 30px;
}
.blog-breadcrumb {
font-size: 9px;
margin-bottom: 35px;
}
.blog-post-header h1 {
font-size: 42px;
margin-block: 22px;
}
.blog-post-excerpt {
font-size: 13px;
}
.blog-post-meta {
font-size: 9px;
gap: 10px 15px;
margin-block: 25px;
}
.blog-post-cover {
height: 240px;
margin-top: 30px;
}
.blog-post-cover .mock-window,
.blog-post-cover .mock-dashboard {
max-width: 280px;
}
.blog-post-cover .mock-web-title {
font-size: 31px;
margin-block: 24px;
}
.blog-post-cover .mock-dashboard {
padding: 18px;
}
.blog-post-cover .chart-bars {
height: 115px;
}
.blog-post-cover .auto-graphic {
max-width: 270px;
}
.blog-post-cover .auto-graphic > span {
width: 47px;
font-size: 25px;
}
.blog-post-cover .integrated-graphic .brand-symbol {
width: 160px;
}
.blog-reading-layout {
padding-block: 40px 65px;
gap: 40px;
}
.blog-contents ol {
grid-template-columns: 1fr;
margin-block: 17px;
}
.blog-contents li {
font-size: 11px;
padding-block: 5px;
}
.blog-article section {
margin-bottom: 35px;
}
.blog-article h2 {
font-size: 29px;
margin-bottom: 20px;
}
.blog-article p {
font-size: 13px;
line-height: 1.95;
}
.blog-article ul {
font-size: 12px;
}
.blog-article blockquote {
margin-block: 27px;
padding-left: 19px;
}
.blog-article blockquote p {
font-size: 23px;
}
.blog-article-end {
flex-wrap: wrap;
padding-top: 20px;
}
.blog-related {
padding-block: 60px;
}
.final-cta > .wrap {
padding-block: 65px;
}
.final-cta > .wrap > .eyebrow {
font-size: 7px;
}
.final-cta h2 {
font-size: clamp(41px, 11.1vw, 66px);
margin-block: 28px 30px;
line-height: 1.1;
letter-spacing: -0.055em;
}
.final-cta > .wrap > div {
display: flex;
flex-direction: column;
align-items: start;
gap: 25px;
}
.final-cta p {
font-size: 11px;
}
.final-cta .button {
width: 100%;
font-size: 11px;
gap: 20px;
}
.cta-symbol {
font-size: 230px;
right: -20px;
top: 35px;
}
.footer {
padding: 55px 20px 0;
}
.footer-top {
grid-template-columns: 1fr 1fr;
gap: 40px 25px;
padding-bottom: 40px;
}
.footer-top > div:first-child {
grid-column: 1/-1;
}
.footer .brand-logo {
width: 175px;
margin-bottom: 23px;
}
.footer p {
font-size: 10px;
}
.footer-top > div:first-child > .eyebrow {
font-size: 7px;
margin-top: 12px;
}
.footer-label {
font-size: 8px;
margin-bottom: 20px;
}
.footer-top > div > a:not(:first-child),
.footer-top > div:not(:first-child) > a {
font-size: 10px;
margin-top: 15px;
}
.footer-top > div:last-child {
grid-column: 1/-1;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 25px;
border-top: 1px solid #35353f;
padding-top: 25px;
}
.footer-bottom {
flex-wrap: wrap;
gap: 20px;
padding-block: 25px;
font-size: 7px;
}
.footer-bottom > span:first-child {
width: 100%;
}
.footer-bottom > span:last-child {
margin-left: auto;
}
}
@media (max-width: 380px) {
.header {
gap: 12px;
}
.header .brand-logo {
width: 88px;
}
.header-cta {
font-size: 7px;
padding-inline: 8px;
gap: 8px;
}
.menu-toggle {
font-size: 9px;
}
.hero h1 {
font-size: 41px;
}
.hero-copy > .eyebrow {
font-size: 6px;
}
.hero-actions {
gap: 7px 14px;
}
.hero-actions .button {
font-size: 9px;
gap: 12px;
padding-inline: 12px;
}
.hero-actions .text-link {
font-size: 9px;
gap: 8px;
}
.solution-card {
gap: 0 16px;
}
.solution-card h3 {
font-size: 25px;
}
.solution-eventos h3 {
font-size: 28px;
}
.solution-eventos {
padding: 22px;
}
.event-ticket {
padding: 16px;
}
.event-ticket strong {
font-size: 24px;
}
.ticket-stub {
font-size: 5px;
}
.event-intro h2 {
font-size: 35px;
}
.event-journey h3 {
font-size: 20px;
}
.dashboard-row {
grid-template-columns: 24px 1fr;
gap: 8px;
}
.dashboard-row small {
grid-column: 2;
text-align: left;
}
.dual-head h2 {
font-size: 28px;
}
.service-detail-heading h2 {
font-size: 33px;
}
.blog-card h3,
.blog-card-featured h3 {
font-size: 28px;
}
.blog-post-header h1 {
font-size: 37px;
}
.form-shell {
padding-inline: 17px;
}
.form-shell h2 {
font-size: 23px;
}
.form-actions .button {
font-size: 9px;
padding-inline: 12px;
}
.final-cta h2 {
font-size: 39px;
}
}