@keyframes str-title-enter { from { opacity: .65; translate: 0 18px; } to { opacity: 1; translate: 0 0; }}@keyframes str-detail-enter { from { opacity: .65; translate: 0 22px; } to { opacity: 1; translate: 0 0; }}@keyframes str-line-enter { from { scale: .88 1; opacity: .5; } to { scale: 1 1; opacity: 1; }}@keyframes str-answer-enter { from { opacity: .5; translate: 0 8px; } to { opacity: 1; translate: 0 0; }}@media (prefers-reduced-motion: no-preference) { main h1 { animation: str-title-enter 850ms cubic-bezier(.2,.65,.25,1) both; } main :is(.str-button, .str-home-button, .brxe-button) { transition: translate 220ms ease, background-color 220ms ease, color 220ms ease, box-shadow 220ms ease; } :is(.str-button-icon, .str-home-button-icon) { transition: translate 220ms ease, rotate 220ms ease; } :is(.str-text-link, .str-home-text-link) :is(svg, .brxe-icon) { transition: translate 220ms ease; } main :is(.str-project-card, .str-home-project-card) { transition: translate 280ms ease; } main :is(.str-project-card, .str-home-project-card) img { transition: filter 400ms ease; } main :is(summary, .tab-title) { transition: color 200ms ease, background-color 200ms ease; } main details[open] > :not(summary) { animation: str-answer-enter 280ms ease both; } main :is(input, textarea, select) { transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; } #brx-footer a { transition: color 200ms ease, translate 200ms ease; } @supports (animation-timeline: view()) { main :is(h2, h3):not(.str-reveal) { animation: str-title-enter linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; } main :is(p.brxe-text-basic, .brxe-text):not(.str-reveal):not(details *) { animation: str-title-enter linear both; animation-timeline: view(); animation-range: entry 0% cover 18%; } main :is(.str-home-image, .str-project-card, .str-home-project-card, .brxe-block:has(> h3), details):not(.str-reveal):not(.str-home-hero-brand-logos *) { animation: str-detail-enter linear both; animation-timeline: view(); animation-range: entry 0% cover 20%; } main :is(.str-home-section-label, .str-home-section-label-dark, .str-home-contact-topline, .brxe-divider) { transform-origin: left center; animation: str-line-enter linear both; animation-timeline: view(); animation-range: entry 0% cover 18%; } } @media (hover: hover) and (pointer: fine) { main :is(.str-button, .str-home-button, .brxe-button):hover { translate: 0 -3px; box-shadow: 0 7px 24px #bc925c26; } :is(.str-button, .str-home-button):hover :is(.str-button-icon, .str-home-button-icon) { translate: 3px 0; } :is(.str-text-link, .str-home-text-link):hover :is(svg, .brxe-icon) { translate: 3px -2px; } main :is(.str-project-card, .str-home-project-card):hover img { filter: brightness(1.1); } main :is(summary, .tab-title):hover { color: var(--str-accent); } #brx-footer a:hover { translate: 3px 0; } }}@media (prefers-reduced-motion: reduce) { main :is(h1, h2, h3, p.brxe-text-basic, .brxe-text, .str-home-image, .str-project-card, .str-home-project-card, details, .brxe-divider), main details[open] > :not(summary) { animation: none; translate: none; scale: none; } main :is(.str-button, .str-home-button, .brxe-button, input, textarea, select, summary, .tab-title), :is(.str-button-icon, .str-home-button-icon), #brx-footer a { transition: none; }}@keyframes str-hero-stage { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); }}@keyframes str-service-stage { from { opacity: .3; translate: 0 28px; } to { opacity: 1; translate: 0 0; }}@media (prefers-reduced-motion: no-preference) { .home .str-home-hero-title-intro { animation: str-hero-stage 800ms cubic-bezier(.16,1,.3,1) 80ms both; } .home .str-home-hero-title em { animation: str-hero-stage 900ms cubic-bezier(.16,1,.3,1) 200ms both; } .home .str-home-hero-title-ending { animation: str-hero-stage 900ms cubic-bezier(.16,1,.3,1) 340ms both; } .home .str-home-hero-description { animation: str-hero-stage 800ms cubic-bezier(.16,1,.3,1) 450ms both; } .home .str-home-hero-actions { animation: str-hero-stage 800ms cubic-bezier(.16,1,.3,1) 560ms both; } .home .str-home-hero-brand-logos > * { animation: str-hero-stage 750ms cubic-bezier(.16,1,.3,1) 650ms both; } .home .str-home-hero-brand-logos > :nth-child(2) { animation-delay: 750ms; } .home .str-home-hero-brand-logos > :nth-child(3) { animation-delay: 850ms; } .home .str-home-hero-brand-logos > :nth-child(4) { animation-delay: 950ms; } .home .str-home-hero-brand-logos > :nth-child(5) { animation-delay: 1050ms; } .home .str-home-hero-brand-logos > :nth-child(6) { animation-delay: 1150ms; } .home .str-home-hero-footer-meta { animation: str-hero-stage 800ms ease 1200ms both; } .home .str-home-service-summary, .home .str-home-faq-accordion .accordion-title-wrapper { transition: background-color 250ms ease, color 250ms ease; } .home .str-home-service-row-icon, .home .str-home-review-link svg { transition: translate 300ms ease, rotate 300ms ease; } .home :is(.str-home-experience-figure, .str-home-story-figure) img { transition: filter 500ms ease; } @supports (animation-timeline: view()) { .home main .str-home-service-list .str-home-service-row { animation: str-service-stage linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; } .str-footer-v2 .str-footer-wordmark { transform-origin: center; animation: str-line-enter linear both; animation-timeline: view(); animation-range: entry 0% cover 20%; } } @media (hover: hover) and (pointer: fine) { .home .str-home-service-summary:hover, .home .str-home-faq-accordion .accordion-title-wrapper:hover { background-color: #bc925c0d; } .home .str-home-service-summary:hover .str-home-service-row-icon { rotate: -8deg; } .home .str-home-review-link:hover svg { translate: 3px -3px; } .home :is(.str-home-experience-figure, .str-home-story-figure):hover img { filter: brightness(1.08); } }}@media (prefers-reduced-motion: reduce) { .home :is(.str-home-hero-title-intro, .str-home-hero-title em, .str-home-hero-title-ending, .str-home-hero-description, .str-home-hero-actions, .str-home-hero-footer-meta), .home .str-home-hero-brand-logos > *, .home main .str-home-service-list .str-home-service-row, .str-footer-v2 .str-footer-wordmark { animation: none; opacity: 1; translate: none; } .home :is(.str-home-service-summary, .str-home-service-row-icon, .str-home-review-link svg), .home .str-home-faq-accordion .accordion-title-wrapper, .home :is(.str-home-experience-figure, .str-home-story-figure) img { transition: none; }} html {font-size: 100%} body {font-family: "DM Sans"; font-size: var(--str-text-m); line-height: 1.65; color: var(--str-white)} h1, h2, h3, h4, h5, h6 {font-family: "Syne"; font-weight: 600; letter-spacing: -.05em; color: var(--str-white)} h1 {font-size: var(--str-heading-hero); line-height: 1.02; letter-spacing: -.065em} h2 {font-size: var(--str-heading-display); line-height: 1.04; letter-spacing: -.055em} h3 {font-size: var(--str-text-2xl); line-height: 1.15} h4 {font-size: var(--str-text-xl); line-height: 1.2} h5 {font-size: var(--str-text-l); line-height: 1.3} h6 {font-size: var(--str-text-m); line-height: 1.4} .bricks-button {font-family: "DM Sans"; font-size: 14px; line-height: 1.5; color: var(--str-ink); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; border: 1px solid var(--str-white); border-radius: 999px; transition: background .5s var(--str-ease),color .5s var(--str-ease),border-color .5s var(--str-ease); padding-top: 16px; padding-right: 24px; padding-bottom: 16px; padding-left: 24px} .bricks-button:where(:not([class*="bricks-background-"]):not([class*="bricks-color-"]):not(.outline)) {background-color: var(--str-white)} .bricks-button:where(.outline) {font-family: "DM Sans"; font-size: 14px; line-height: 1.5; color: var(--str-accent); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; background-color: rgba(0,0,0,0); border: 1px solid var(--str-accent); border-radius: 999px} .bricks-button:where(.bricks-background-primary), .bricks-button:where(.bricks-color-primary) {font-family: "DM Sans"; font-size: 14px; line-height: 1.5; color: var(--str-ink); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; border: 1px solid var(--str-white); border-radius: 999px} .bricks-button:where(.bricks-background-primary:not(.outline)) {background-color: var(--str-white)} .brxe-section {column-gap: var(--str-space-m); row-gap: var(--str-space-m); width: 100%; padding-right: 0px; padding-left: 0px} .brxe-container {column-gap: var(--str-space-m); row-gap: var(--str-space-m); width: 100%; max-width: 1440px; padding-right: 24px; padding-left: 24px} .woocommerce main.site-main {width: 100%} #brx-content.wordpress {width: 100%; max-width: 1440px} .brxe-block {column-gap: var(--str-space-m); row-gap: var(--str-space-m)} .brx-boxed {background-color: var(--str-ink)} html {background-color: var(--str-ink)} body {background: none} .brxe-container.root {width: 1440px} .brxe-container.root.stretch > .brxe-container {width: 1440px} .brxe-container.root.stretch > .brxe-div {width: 1440px} .woocommerce main.site-main {width: 1440px} #brx-content.wordpress {width: 1440px}.brxe-form .bricks-button {font-weight: 700; font-family: "DM Sans"; font-size: 14px; line-height: 1.5}@media (max-width: 991px) { h1 {font-size: clamp(3.5rem,10vw,5.75rem)} h2 {font-size: clamp(3.65rem,7.2vw,7.2rem)} .brxe-container {padding-right: 16px; padding-left: 16px}}@media (max-width: 478px) { h1 {font-size: clamp(2.9rem,12.4vw,4.5rem)} h2 {font-size: clamp(3.05rem,15.7vw,5rem)}}