:root {
--ink:#17161d;
--muted:#65636e;
--violet:#6943db;
--light:#f7f7fa;
--line:#dedee6;
--white:#fff;
--radius:5px
}
* {
box-sizing:border-box
}
html {
scroll-behavior:smooth;
scroll-padding-top:110px
}
body {
margin:0;
color:var(--ink);
background:var(--light);
font-family:Arial,Helvetica,sans-serif;
-webkit-font-smoothing:antialiased
}
a {
color:inherit;
text-decoration:none
}
button {
font:inherit
}
img {
display:block;
max-width:100%
}
button,a,summary {
-webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible {
outline:3px solid var(--violet);
outline-offset:6px
}
.skip {
position:fixed;
top:-100px;
left:20px;
padding:14px;
background:white;
z-index:100
}
.skip:focus {
top:10px
}
.section {
padding-left:max(5.25vw,24px);
padding-right:max(5.25vw,24px)
}
.header {
height:98px;
display:flex;
align-items:center;
justify-content:space-between;
gap:34px;
padding:0 5.25vw;
border-bottom:1px solid var(--line);
background:rgba(247,247,250,.96);
position:sticky;
top:0;
z-index:30;
backdrop-filter:blur(16px)
}
.wordmark {
font-weight:900;
letter-spacing:-3.5px;
font-size:47px;
line-height:1
}
.wordmark img {
width:142px;
height:auto
}
.desktop-nav {
display:flex;
gap:30px;
align-items:center;
margin-left:auto
}
.desktop-nav a {
font-size:14px;
font-weight:500;
padding:10px 0;
position:relative
}
.desktop-nav a:after {
content:'';
position:absolute;
bottom:3px;
left:0;
width:0;
height:2px;
background:var(--violet);
transition:width .2s
}
.desktop-nav a:hover:after,.desktop-nav a[aria-current]:after {
width:100%
}
.header-actions {
display:flex;
gap:24px;
align-items:center
}
.language {
font-size:13px;
color:var(--muted)
}
.button {
display:inline-flex;
gap:32px;
align-items:center;
justify-content:space-between;
padding:19px 24px;
background:var(--ink);
color:#fff;
border:1px solid transparent;
border-radius:var(--radius);
font-size:14px;
font-weight:600;
min-height:52px;
transition:background .2s,transform .2s
}
.button:hover {
background:var(--violet);
transform:translateY(-2px)
}
.button.small {
padding:13px 18px;
gap:24px;
min-height:44px
}
.button.light {
background:white;
color:var(--ink)
}
.button.light:hover {
background:#e7defe
}
.button span,.text-link span,.card-link span {
font-size:20px;
font-weight:400
}
.text-link {
font-size:14px;
display:inline-flex;
gap:24px;
align-items:center;
border-bottom:1px solid var(--ink);
padding-bottom:8px;
font-weight:600
}
.text-link:hover {
color:var(--violet);
border-color:var(--violet)
}
.menu-toggle {
display:none;
width:44px;
height:44px;
border:0;
background:none;
padding:10px;
cursor:pointer
}
.menu-toggle span {
display:block;
height:2px;
background:var(--ink);
margin:6px 0
}
.mobile-nav {
position:absolute;
top:100%;
left:0;
right:0;
background:var(--light);
border-bottom:1px solid var(--line);
padding:20px 24px
}
.mobile-nav:not([hidden]) {
display:grid
}
.mobile-nav a {
padding:15px 0;
border-bottom:1px solid var(--line);
font-size:20px
}
.eyebrow {
font-size:12px;
line-height:1.5;
letter-spacing:1.8px;
font-weight:600;
margin:0 0 24px
}
.hero {
display:grid;
grid-template-columns:1.08fr 1fr;
gap:3.8vw;
padding-top:66px;
padding-bottom:68px;
align-items:center
}
.hero h1 {
font-size:clamp(60px,6.15vw,104px);
letter-spacing:-.066em;
line-height:1.025;
margin:0 0 28px;
font-weight:500
}
.hero .eyebrow {
margin-bottom:28px
}
em {
font-style:normal;
color:var(--violet)
}
.lead {
font-size:18px;
line-height:1.65;
color:var(--muted);
max-width:520px
}
.hero .lead {
max-width:460px;
margin-bottom:30px
}
.hero-actions {
display:flex;
align-items:center;
gap:28px
}
.hero-art {
margin:0;
position:relative;
background:#0a0a10;
align-self:stretch;
min-height:560px;
overflow:hidden;
border-radius:var(--radius)
}
.hero-art img {
width:100%;
height:100%;
object-fit:cover;
position:absolute;
object-position:55% 50%
}
.hero-art figcaption {
position:absolute;
left:30px;
right:30px;
bottom:28px;
display:flex;
align-items:end;
justify-content:space-between;
gap:20px;
color:#ebe5ff;
font-size:12px;
line-height:1.65;
letter-spacing:1.5px
}
.art-index {
color:#b2aaca
}
.proof {
display:grid;
grid-template-columns:1.3fr 1.1fr 1fr 1fr;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding-top:30px;
padding-bottom:30px;
gap:32px
}
.proof>p {
font-size:16px;
line-height:1.55;
margin:0;
color:var(--muted);
align-self:center
}
.proof>p strong {
font-weight:500;
color:var(--ink)
}
.proof>div {
display:flex;
flex-direction:column;
justify-content:center;
gap:6px;
padding-left:30px;
border-left:1px solid var(--line)
}
.proof>div>strong {
font-size:30px;
letter-spacing:-1.3px;
font-weight:500
}
.proof>div>strong span {
color:var(--violet)
}
.proof>div>span {
font-size:12px;
line-height:1.5;
color:var(--muted);
max-width:175px
}
.expertise-section,.work-section,.product-section {
padding-top:104px;
padding-bottom:104px
}
.section-heading {
display:flex;
justify-content:space-between;
align-items:end;
gap:50px;
margin-bottom:52px
}
h2 {
font-weight:500;
font-size:clamp(34px,3.45vw,56px);
line-height:1.13;
letter-spacing:-.047em;
margin:0
}
h3 {
font-weight:500;
font-size:26px;
line-height:1.2;
letter-spacing:-.025em;
margin:0
}
.section-heading>p {
font-size:16px;
line-height:1.65;
color:var(--muted);
max-width:330px;
margin:0
}
.section-heading>.text-link {
white-space:nowrap;
margin-bottom:5px
}
.services {
display:grid;
grid-template-columns:repeat(3,1fr);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line)
}
.service-card {
padding:33px 34px 28px 0;
position:relative;
min-height:340px;
display:flex;
flex-direction:column;
transition:background .2s
}
.service-card+.service-card {
border-left:1px solid var(--line);
padding-left:34px
}
.number {
font-size:13px;
color:var(--violet);
letter-spacing:1px
}
.service-card h3 {
font-size:34px;
margin:30px 0 20px
}
.service-card p {
font-size:16px;
color:var(--muted);
line-height:1.6;
margin:0 0 28px;
max-width:250px
}
.service-card:hover h3 {
color:var(--violet)
}
.card-link {
display:flex;
justify-content:space-between;
align-items:center;
font-size:13px;
margin-top:auto
}
.work-section {
background:#efeff4
}
.featured-work {
display:grid;
grid-template-columns:1.08fr 1fr;
gap:6vw;
align-items:center
}
.media-panel {
background:#2d2252;
color:#f3edff;
border-radius:var(--radius);
padding:28px;
min-height:420px;
display:flex;
flex-direction:column;
position:relative;
overflow:hidden
}
.panel-top {
display:flex;
justify-content:space-between;
gap:20px;
font-size:12px;
letter-spacing:1.3px;
color:#bfb0e3;
border-bottom:1px solid #665282;
padding-bottom:19px
}
.media-title {
font-size:clamp(30px,3vw,48px);
font-weight:500;
line-height:1.05;
letter-spacing:-2px;
margin:38px 0
}
.workflow {
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:32px
}
.workflow div {
border:1px solid #796099;
border-radius:3px;
padding:13px 11px;
font-size:12px;
flex:1;
min-width:0
}
.workflow div span {
display:block;
color:#bc9aef;
font-size:12px;
margin-bottom:12px
}
.workflow b {
color:#a086c9;
font-weight:400
}
.panel-bottom {
border-top:1px solid #665282;
padding-top:20px;
margin-top:auto;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px
}
.panel-bottom span {
font-size:12px;
letter-spacing:1.2px;
max-width:180px;
line-height:1.5
}
.panel-bottom strong {
font-size:25px;
letter-spacing:-1px;
font-weight:400
}
.tags {
display:flex;
flex-wrap:wrap;
gap:9px;
margin-bottom:30px
}
.tags span {
font-size:12px;
letter-spacing:1px;
border:1px solid #ccc9d5;
padding:6px 9px;
border-radius:2px
}
.work-copy h3 {
font-size:34px;
line-height:1.2
}
.work-copy>p {
color:var(--muted);
font-size:16px;
line-height:1.7;
max-width:410px;
margin:23px 0
}
.work-copy .text-link {
margin-top:30px
}
.work-stat {
display:flex;
align-items:center;
gap:20px;
margin-top:30px
}
.work-stat strong {
font-size:29px;
font-weight:500;
letter-spacing:-1px
}
.work-stat span {
font-size:12px;
line-height:1.5;
color:var(--muted);
max-width:130px
}
.principle {
display:grid;
grid-template-columns:1.1fr 1fr;
gap:8vw;
padding-top:112px;
padding-bottom:112px
}
.principle>div>p:not(.eyebrow) {
color:var(--muted);
font-size:17px;
line-height:1.7;
max-width:410px;
margin:25px 0
}
.principle .text-link {
margin-top:12px
}
.principle-list {
padding-top:10px
}
.principle-list>div {
position:relative;
padding:26px 0 26px 48px;
border-top:1px solid var(--line)
}
.principle-list>div>span {
position:absolute;
left:0;
top:30px;
color:var(--violet);
font-size:12px
}
.principle-list h3 {
font-size:25px
}
.principle-list p {
font-size:16px;
color:var(--muted);
line-height:1.6;
max-width:350px;
margin:15px 0 0
}
.product-section {
border-top:1px solid var(--line)
}
.product-feature {
display:grid;
grid-template-columns:1fr 1fr;
background:#e9e6f3;
border-radius:var(--radius);
overflow:hidden
}
.product-copy {
padding:50px
}
.product-name {
font-weight:700;
letter-spacing:-1.5px;
font-size:30px;
display:block;
margin-bottom:43px
}
.product-name>span {
font-size:12px;
vertical-align:top;
letter-spacing:0
}
.product-copy h3 {
font-size:36px
}
.product-copy>p {
font-size:16px;
line-height:1.7;
max-width:400px;
color:#5f586f;
margin:22px 0 28px
}
.knowledge-flow {
padding:50px;
background:#e0dced;
display:flex;
flex-direction:column;
justify-content:center
}
.knowledge-flow .eyebrow {
font-size:12px;
line-height:1.7;
color:#655a7b;
max-width:270px
}
.knowledge-flow>div {
border-top:1px solid #b9afce;
padding:22px 0 22px 35px;
position:relative
}
.knowledge-flow>div>span {
position:absolute;
left:0;
font-size:12px;
color:var(--violet);
top:26px
}
.knowledge-flow strong {
display:block;
font-size:24px;
font-weight:500;
letter-spacing:-.6px
}
.knowledge-flow small {
display:block;
font-size:14px;
color:#655a7b;
margin-top:9px;
line-height:1.5
}
.company-strip {
padding-top:60px;
padding-bottom:100px;
display:grid;
grid-template-columns:1.1fr 1fr;
gap:8vw;
align-items:end
}
.company-strip p:not(.eyebrow) {
font-size:17px;
color:var(--muted);
line-height:1.7;
max-width:440px;
margin-top:0
}
.company-strip .text-link {
margin-top:15px
}
.cta {
background:#6943db;
color:white;
padding-top:80px;
padding-bottom:85px;
display:grid;
grid-template-columns:1.1fr 1fr;
gap:8vw;
align-items:end
}
.cta .eyebrow {
color:#e0d5ff
}
.cta h2 {
font-size:clamp(48px,5.5vw,80px);
letter-spacing:-.055em
}
.cta>div>p:not(.eyebrow) {
font-size:17px;
line-height:1.6;
color:#eee7ff;
margin:0 0 26px
}
footer {
padding:56px 5.25vw 25px;
background:#17161d;
color:#f0eef5
}
.footer-top {
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:40px;
padding-bottom:56px
}
.footer-top .wordmark {
font-size:58px;
align-self:start
}
.footer-top .wordmark img {
filter:invert(1);
width:160px
}
.footer-top>p {
font-size:22px;
line-height:1.45;
margin:0;
color:#c7c2d3
}
.footer-links {
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
font-size:14px
}
.footer-links a:hover {
color:#b09bec
}
.footer-bottom {
border-top:1px solid #37323f;
padding-top:23px;
display:flex;
gap:30px;
font-size:12px;
color:#aaa4b7
}
.footer-bottom>span:first-child {
margin-right:auto
}
.page-head {
padding-top:88px;
padding-bottom:82px;
border-bottom:1px solid var(--line)
}
.page-head h1 {
font-weight:500;
font-size:clamp(48px,5.9vw,90px);
letter-spacing:-.059em;
line-height:1.07;
margin:0 0 30px;
max-width:1100px
}
.page-head .lead {
max-width:610px;
margin-bottom:0
}
.expertise-detail {
display:grid;
grid-template-columns:1fr 1fr;
gap:8vw;
padding-top:88px;
padding-bottom:88px;
border-bottom:1px solid var(--line)
}
.expertise-detail>div>p:not(.eyebrow) {
font-size:17px;
line-height:1.7;
color:var(--muted)
}
.lined-list {
list-style:none;
padding:0;
margin:28px 0 34px
}
.lined-list li {
padding:17px 0;
border-bottom:1px solid var(--line);
font-size:16px;
line-height:1.55
}
.lined-list li:first-child {
border-top:1px solid var(--line)
}
.approach {
padding-top:100px;
padding-bottom:100px;
background:#efeff4
}
.process-row {
border-top:1px solid #cfccd8
}
.process-row:last-child {
border-bottom:1px solid #cfccd8
}
.process-row summary {
list-style:none;
display:flex;
gap:40px;
align-items:center;
padding:25px 0;
cursor:pointer
}
.process-row summary::-webkit-details-marker {
display:none
}
.process-row summary>span {
font-size:12px;
color:var(--violet)
}
.process-row summary h3 {
font-size:30px
}
.process-row summary>b {
margin-left:auto;
font-size:30px;
font-weight:400;
transition:transform .2s
}
.process-row[open] summary>b {
transform:rotate(45deg)
}
.process-body {
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
margin-left:58px;
padding:0 0 25px
}
.process-body p {
color:var(--muted);
font-size:16px;
line-height:1.6;
margin:0
}
.process-output>span {
display:block;
font-size:12px;
letter-spacing:1.4px;
color:var(--violet);
margin-bottom:10px
}
.work-list {
padding-top:80px;
padding-bottom:80px
}
.compact-section {
padding-top:60px;
padding-bottom:100px
}
.case-banner {
padding-top:60px;
padding-bottom:60px
}
.case-banner .media-panel {
max-width:100%;
min-height:430px
}
.case-banner .workflow {
max-width:650px
}
.case-banner .media-title {
font-size:54px
}
.case-facts {
display:grid;
grid-template-columns:repeat(3,1fr);
padding-top:32px;
padding-bottom:32px;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
gap:20px
}
.case-facts div>span {
display:block;
font-size:12px;
letter-spacing:1.3px;
color:var(--muted);
margin-bottom:12px
}
.case-facts strong {
font-size:20px;
font-weight:500
}
.article {
max-width:900px;
margin:auto;
padding-top:72px;
padding-bottom:100px
}
.article h2 {
font-size:35px;
margin:50px 0 20px
}
.article h2:first-child {
margin-top:0
}
.article h3 {
font-size:25px;
margin:35px 0 15px
}
.article p {
font-size:18px;
line-height:1.85;
color:#5d5967
}
.article-callout {
background:#eae5f5;
border-left:3px solid var(--violet);
padding:25px 30px;
margin:35px 0
}
.article-callout h3 {
margin-top:0
}
.article-callout p {
margin-bottom:0
}
.source-note {
font-size:13px!important;
line-height:1.65!important;
color:var(--muted);
margin-top:35px
}
.product-statement {
min-height:430px;
background:#241b3b;
color:#b6a3da;
padding:50px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:35px
}
.product-statement>span {
font-size:12px;
letter-spacing:1.7px;
line-height:1.8
}
.product-statement>strong {
font-size:clamp(32px,3.6vw,56px);
letter-spacing:-2px;
font-weight:400;
color:#f0eaff;
line-height:1.1
}
.skill-overview {
display:grid;
grid-template-columns:1fr 1fr;
gap:7vw;
padding-top:85px;
padding-bottom:85px;
align-items:center
}
.skill-overview p {
color:var(--muted);
font-size:17px;
line-height:1.7
}
.step-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
padding-bottom:70px
}
.step-grid>div {
border-top:1px solid var(--line);
padding-top:25px
}
.step-grid h3 {
margin:30px 0 18px
}
.step-grid p {
font-size:16px;
line-height:1.7;
color:var(--muted)
}
.company-story,.company-values,.company-profile {
display:grid;
grid-template-columns:1.1fr 1fr;
gap:8vw;
padding-top:85px;
padding-bottom:85px
}
.company-story p:not(.eyebrow),.company-values p:not(.eyebrow) {
font-size:17px;
line-height:1.75;
color:var(--muted);
margin-top:0
}
.team-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
padding-bottom:90px
}
.portrait {
aspect-ratio:5/5.5;
background:#e8e8ec;
overflow:hidden;
margin-bottom:25px
}
.portrait img {
width:100%;
height:100%;
object-fit:cover;
object-position:50% 20%
}
.team-card .role {
font-size:12px;
letter-spacing:1.5px;
color:var(--violet);
display:block;
margin-bottom:12px
}
.team-card h3 {
font-size:26px
}
.team-card p {
font-size:15px;
line-height:1.7;
color:var(--muted);
max-width:340px
}
.company-values {
background:#eeebf4
}
.company-values h3 {
margin-bottom:15px
}
.company-values p+h3 {
margin-top:32px
}
.company-profile dl {
margin:0
}
.company-profile dl>div {
display:grid;
grid-template-columns:110px 1fr;
gap:20px;
border-top:1px solid var(--line);
padding:20px 0;
font-size:15px;
line-height:1.65
}
.company-profile dt {
color:var(--muted)
}
.company-profile dd {
margin:0
}
.insights-list {
padding-top:40px;
padding-bottom:100px
}
.insight-row {
display:grid;
grid-template-columns:1fr 2.2fr 1.3fr 40px;
gap:35px;
align-items:start;
border-bottom:1px solid var(--line);
padding:42px 0
}
.insight-row>.eyebrow {
font-size:12px;
line-height:1.8;
color:var(--violet)
}
.insight-row h2 {
font-size:30px
}
.insight-row p {
font-size:15px;
line-height:1.7;
color:var(--muted);
margin:0
}
.round-arrow {
font-size:25px;
text-align:right
}
.insight-row:hover h2 {
color:var(--violet)
}
.contact-layout {
display:grid;
grid-template-columns:1.1fr 1fr;
gap:8vw;
padding-top:70px;
padding-bottom:100px
}
.contact-card {
background:#e9e4f4;
padding:45px
}
.contact-card h2 {
font-size:42px
}
.contact-card>p:not(.eyebrow) {
font-size:17px;
line-height:1.7;
color:#5b526c;
max-width:420px;
margin:27px 0
}
.contact-card .contact-note {
font-size:13px!important;
max-width:300px!important
}
.contact-guide {
padding-top:12px
}
.contact-guide>p {
font-size:16px;
line-height:1.7;
color:var(--muted)
}
.contact-location {
margin-top:45px;
padding-top:30px;
border-top:1px solid var(--line)
}
.contact-location>p:not(.eyebrow) {
font-size:16px;
line-height:1.7;
color:var(--muted)
}
@media(min-width:1600px) {
.section {
padding-left:max(5.25vw,calc((100vw - 1440px)/2));
padding-right:max(5.25vw,calc((100vw - 1440px)/2))
}
.hero-art {
min-height:620px
}
}
@media(max-width:1100px) {
.header {
gap:22px
}
.desktop-nav {
gap:20px
}
.header-actions {
gap:16px
}
.hero h1 {
font-size:6.6vw
}
.hero-art {
min-height:510px
}
.hero-actions {
gap:20px
}
.hero-actions .text-link {
font-size:13px;
gap:10px
}
.proof {
gap:20px
}
.proof>div {
padding-left:20px
}
.proof>div>strong {
font-size:27px
}
.product-copy,.knowledge-flow,.product-statement {
padding:35px
}
.insight-row {
grid-template-columns:1fr 2fr 35px
}
.insight-row>p {
grid-column:2
}
.insight-row>.round-arrow {
grid-column:3;
grid-row:1
}
.wordmark img {
width:125px
}
.work-copy h3 {
font-size:29px
}
.workflow {
gap:6px
}
.workflow div {
font-size:12px;
padding:12px 8px
}
}
@media(max-width:850px) {
.desktop-nav {
display:none
}
.header {
height:80px;
padding:0 24px
}
.header-actions {
margin-left:auto
}
.menu-toggle {
display:block
}
.hero {
gap:30px
}
.hero h1 {
font-size:7vw
}
.hero-art {
min-height:455px
}
.hero-actions {
align-items:start;
flex-direction:column;
gap:22px
}
.hero .lead {
font-size:16px
}
.proof {
grid-template-columns:1fr 1fr;
row-gap:25px
}
.proof>div:nth-child(3) {
border-left:0;
padding-left:0
}
.service-card {
padding-right:20px
}
.service-card+.service-card {
padding-left:20px
}
.service-card h3 {
font-size:28px
}
.section-heading {
gap:30px
}
.section-heading>p {
max-width:250px
}
.featured-work {
gap:35px
}
.media-panel {
padding:22px;
min-height:370px
}
.media-title {
font-size:34px
}
.panel-top {
font-size:12px
}
.panel-bottom {
align-items:start;
flex-direction:column;
gap:12px
}
.workflow {
flex-wrap:wrap
}
.workflow b {
display:none
}
.workflow div {
min-width:60px
}
.work-copy h3 {
font-size:28px
}
.work-stat {
align-items:start;
flex-direction:column;
gap:8px
}
.product-copy h3 {
font-size:30px
}
.product-name {
margin-bottom:30px
}
.principle,.company-strip,.cta {
gap:45px
}
.step-grid {
grid-template-columns:1fr 1fr
}
.team-grid {
gap:20px
}
.team-card h3 {
font-size:23px
}
.company-profile dl>div {
grid-template-columns:1fr;
gap:8px
}
.contact-layout {
gap:35px
}
.contact-card {
padding:30px
}
.contact-card h2 {
font-size:35px
}
.insight-row h2 {
font-size:27px
}
}
@media(max-width:620px) {
html {
scroll-padding-top:88px
}
.section {
padding-left:24px;
padding-right:24px
}
.header {
height:76px;
gap:14px
}
.wordmark img {
width:110px
}
.header-actions {
gap:15px
}
.header .button.small {
font-size:12px;
padding:10px 13px;
gap:13px;
min-height:40px
}
.header .language {
display:none
}
.hero {
grid-template-columns:1fr;
padding-top:45px;
padding-bottom:38px;
gap:34px
}
.hero h1 {
font-size:clamp(54px,12.6vw,78px);
letter-spacing:-.06em;
line-height:1.04
}
.hero .eyebrow {
font-size:12px;
margin-bottom:22px;
letter-spacing:1.5px
}
.hero .lead {
font-size:17px;
max-width:450px;
margin-bottom:25px
}
.hero-actions {
flex-direction:row;
align-items:center;
gap:22px
}
.hero-actions .button {
padding:16px 18px;
gap:23px;
font-size:13px
}
.hero-art {
min-height:0;
aspect-ratio:1.16
}
.hero-art img {
object-position:50% 50%
}
.hero-art figcaption {
left:22px;
right:22px;
bottom:20px;
font-size:12px
}
.proof {
padding-top:25px;
padding-bottom:25px;
gap:22px
}
.proof>p {
font-size:14px
}
.proof>div {
padding-left:20px
}
.proof>div>strong {
font-size:25px;
letter-spacing:-1px
}
.proof>div>span {
font-size:12px;
max-width:145px
}
.eyebrow {
font-size:12px;
letter-spacing:1.5px;
margin-bottom:20px
}
h2 {
font-size:35px;
letter-spacing:-1.5px
}
.section-heading {
align-items:start;
flex-direction:column;
gap:24px;
margin-bottom:34px
}
.section-heading>p {
font-size:16px;
max-width:100%
}
.section-heading>p br {
display:none
}
.expertise-section,.work-section,.product-section {
padding-top:64px;
padding-bottom:64px
}
.services {
grid-template-columns:1fr
}
.service-card,.service-card+.service-card {
padding:25px 0;
min-height:0;
border-left:0
}
.service-card+.service-card {
border-top:1px solid var(--line)
}
.service-card h3 {
font-size:32px;
margin:18px 0 15px
}
.service-card h3 br {
display:none
}
.service-card p {
max-width:85%;
font-size:16px;
margin-bottom:22px
}
.service-card .card-link {
position:absolute;
bottom:26px;
right:0;
font-size:0
}
.service-card .card-link span {
font-size:24px
}
.featured-work {
grid-template-columns:1fr;
gap:30px
}
.media-panel {
min-height:350px;
padding:24px
}
.media-title {
font-size:36px;
margin:30px 0
}
.panel-top {
font-size:12px
}
.panel-bottom {
flex-direction:row;
align-items:center;
gap:15px
}
.panel-bottom>span {
font-size:8px;
max-width:150px
}
.panel-bottom strong {
font-size:24px;
white-space:nowrap
}
.workflow {
gap:8px
}
.workflow div {
font-size:12px;
min-width:0
}
.tags {
margin-bottom:22px
}
.work-copy h3 {
font-size:31px
}
.work-copy>p {
font-size:16px;
margin:20px 0
}
.work-stat {
flex-direction:row;
align-items:center;
gap:22px
}
.work-stat strong {
font-size:26px
}
.work-copy .text-link {
margin-top:25px
}
.principle {
grid-template-columns:1fr;
padding-top:65px;
padding-bottom:60px;
gap:35px
}
.principle h2 {
font-size:39px
}
.principle>div>p:not(.eyebrow) {
font-size:16px
}
.principle-list {
padding-top:0
}
.principle-list>div {
padding:24px 0 24px 40px
}
.principle-list h3 {
font-size:24px
}
.product-feature {
grid-template-columns:1fr
}
.product-copy {
padding:30px 26px 35px
}
.product-name {
font-size:28px;
margin-bottom:28px
}
.product-copy h3 {
font-size:32px
}
.knowledge-flow {
padding:30px 26px 20px
}
.knowledge-flow strong {
font-size:22px
}
.knowledge-flow .eyebrow {
font-size:12px
}
.company-strip {
grid-template-columns:1fr;
padding-top:10px;
padding-bottom:64px;
gap:25px
}
.company-strip>div>p {
font-size:16px
}
.cta {
grid-template-columns:1fr;
padding-top:55px;
padding-bottom:55px;
gap:30px
}
.cta h2 {
font-size:49px
}
.cta>div>p:not(.eyebrow) {
font-size:16px
}
footer {
padding:40px 24px 24px
}
.footer-top {
grid-template-columns:1fr 1fr;
gap:32px;
padding-bottom:36px
}
.footer-top .wordmark img {
width:130px
}
.footer-top>p {
font-size:18px
}
.footer-links {
grid-column:1/-1;
grid-template-columns:1fr 1fr;
gap:18px;
font-size:14px
}
.footer-bottom {
flex-wrap:wrap;
gap:18px;
font-size:12px
}
.footer-bottom>span:first-child {
margin-right:0
}
.footer-bottom>span:nth-child(2) {
margin-left:auto
}
.footer-bottom>a:first-of-type {
flex-basis:50%
}
.page-head {
padding-top:54px;
padding-bottom:48px
}
.page-head h1 {
font-size:44px;
letter-spacing:-2.2px;
overflow-wrap:break-word
}
.page-head .lead {
font-size:17px
}
.expertise-detail {
grid-template-columns:1fr;
padding-top:55px;
padding-bottom:55px;
gap:30px
}
.expertise-detail h2 br {
display:none
}
.expertise-detail h3 {
font-size:25px
}
.expertise-detail>div>p:not(.eyebrow) {
font-size:16px
}
.lined-list li {
font-size:15px;
padding:15px 0
}
.approach {
padding-top:60px;
padding-bottom:60px
}
.process-row summary {
gap:25px;
padding:23px 0
}
.process-row summary h3 {
font-size:27px
}
.process-body {
grid-template-columns:1fr;
gap:20px;
margin-left:39px
}
.work-list {
padding-top:45px;
padding-bottom:45px
}
.compact-section {
padding-top:30px;
padding-bottom:65px
}
.compact-section>.lead {
font-size:16px
}
.case-banner {
padding-top:35px;
padding-bottom:35px
}
.case-banner .media-panel {
min-height:350px
}
.case-banner .media-title {
font-size:36px
}
.case-facts {
grid-template-columns:1fr;
gap:24px;
padding-top:25px;
padding-bottom:25px
}
.case-facts strong {
font-size:20px
}
.case-facts div>span {
margin-bottom:8px
}
.article {
padding-top:45px;
padding-bottom:65px
}
.article h2 {
font-size:30px;
margin-top:35px
}
.article h3 {
font-size:24px
}
.article p {
font-size:17px
}
.article-callout {
padding:22px;
margin:28px 0
}
.product-statement {
min-height:330px;
padding:30px
}
.product-statement>strong {
font-size:42px;
letter-spacing:-1.8px
}
.product-statement>span {
font-size:12px
}
.skill-overview {
grid-template-columns:1fr;
padding-top:40px;
padding-bottom:55px;
gap:35px
}
.skill-overview p {
font-size:16px
}
.step-grid {
gap:25px;
padding-bottom:25px
}
.step-grid h3 {
font-size:23px;
margin-top:22px
}
.step-grid p {
font-size:15px
}
.company-story,.company-values,.company-profile {
grid-template-columns:1fr;
padding-top:55px;
padding-bottom:55px;
gap:30px
}
.company-story p:not(.eyebrow),.company-values p:not(.eyebrow) {
font-size:16px
}
.team-grid {
grid-template-columns:1fr;
gap:38px;
padding-bottom:55px
}
.portrait {
aspect-ratio:5/5.1;
max-height:480px
}
.portrait img {
object-position:50% 20%
}
.team-card h3 {
font-size:28px
}
.team-card p {
max-width:100%;
font-size:16px
}
.company-profile dl>div {
grid-template-columns:100px 1fr;
gap:15px;
font-size:14px
}
.insights-list {
padding-top:10px;
padding-bottom:60px
}
.insight-row {
grid-template-columns:1fr 25px;
gap:15px;
padding:32px 0
}
.insight-row>.eyebrow {
grid-column:1;
margin:0
}
.insight-row h2 {
grid-column:1;
grid-row:2;
font-size:28px
}
.insight-row>p {
grid-column:1;
grid-row:3
}
.insight-row>.round-arrow {
grid-column:2;
grid-row:2
}
.contact-layout {
grid-template-columns:1fr;
padding-top:35px;
padding-bottom:65px;
gap:35px
}
.contact-card {
padding:30px 25px
}
.contact-card h2 {
font-size:36px
}
.contact-card>p:not(.eyebrow) {
font-size:16px
}
.contact-guide {
padding-top:0
}
}
@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto
}
*,*:before,*:after {
transition:none!important;
animation:none!important
}
}