:root{--acid:#FFE800;--ink:#24292b;--paper:#f3f1eb;--muted:#737a7c;--line:rgba(36,41,43,.17);--display:'Funnel Display',sans-serif;--body:'Plus Jakarta Sans',sans-serif;--shell:min(1240px,calc(100vw - 64px))}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.58}a{color:inherit}img{display:block;max-width:100%}.shell{width:var(--shell);margin-inline:auto}.site-header{position:sticky;top:0;z-index:10;background:var(--ink);color:#fff;border-bottom:1px solid rgba(255,255,255,.15)}.header-inner{height:76px;display:flex;align-items:center;gap:30px}.brand{margin-right:auto}.brand img{width:158px}.header-inner nav{display:flex;gap:25px}.header-inner nav a{font-size:.69rem;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;color:rgba(255,255,255,.7)}.header-inner nav a:hover{color:var(--acid)}.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;background:var(--acid);color:var(--ink);padding:13px 17px;text-decoration:none;text-transform:uppercase;font-size:.69rem;letter-spacing:.08em;font-weight:800}.case-hero{background:var(--ink);color:#fff;padding:110px 0 85px}.breadcrumbs{display:flex;gap:8px;list-style:none;font-size:.63rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.48);margin-bottom:45px}.breadcrumbs a{text-decoration:none}.kicker{font-size:.64rem;text-transform:uppercase;letter-spacing:.13em;color:var(--acid);margin-bottom:18px}.case-hero h1{font-family:var(--display);font-size:clamp(3.2rem,6vw,6.5rem);font-weight:600;line-height:.96;letter-spacing:-.045em;max-width:980px}.case-hero h1 em{font-style:normal;color:var(--acid)}.lead{font-size:clamp(1.02rem,1.5vw,1.25rem);color:rgba(255,255,255,.69);max-width:750px;margin-top:28px}.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.16);margin-top:65px;padding-top:22px}.facts div{padding-right:24px}.facts dt{font-size:.57rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.43)}.facts dd{font-family:var(--display);font-size:1.05rem;margin-top:5px}.case-main{padding:90px 0 120px}.cover{width:100%;max-height:740px;object-fit:cover;background:#ddd}.story{max-width:850px;margin:90px auto}.story section{display:grid;grid-template-columns:170px 1fr;gap:45px;padding:32px 0;border-top:1px solid var(--line)}.story h2{font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;padding-top:5px}.story p{font-family:var(--display);font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.38;color:#555d5f}.story mark{background:var(--acid);padding:0 .1em}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px}.gallery img{width:100%;height:580px;object-fit:cover;background:#ddd}.gallery img:nth-child(3n){grid-column:1/-1;height:auto;max-height:850px}.next-case{margin-top:80px;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;text-decoration:none}.next-case span{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.next-case strong{font-family:var(--display);font-size:1.8rem}.cta{background:var(--acid);padding:85px 0}.cta .shell{display:flex;justify-content:space-between;align-items:end;gap:45px}.cta h2{font-family:var(--display);font-size:clamp(2.5rem,4.5vw,4.8rem);line-height:1;max-width:840px}.cta .button{background:var(--ink);color:#fff;flex:0 0 auto}.footer{background:#171d1e;color:#fff;padding:55px 0 22px}.footer-top{display:flex;justify-content:space-between;align-items:start;gap:40px;padding-bottom:42px}.footer img{width:175px}.footer nav{display:flex;gap:22px}.footer nav a{font-size:.7rem;text-decoration:none}.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:19px;display:flex;justify-content:space-between;color:rgba(255,255,255,.45);font-size:.57rem;text-transform:uppercase;letter-spacing:.07em}.wa-float{position:fixed;right:20px;bottom:20px;width:54px;height:54px;border-radius:50%;background:var(--acid);display:grid;place-items:center;z-index:20;box-shadow:0 10px 25px rgba(0,0,0,.25)}.wa-float img{width:27px}@media(max-width:800px){:root{--shell:min(100% - 40px,700px)}.header-inner nav{display:none}.case-hero{padding:80px 0 65px}.facts{grid-template-columns:1fr 1fr;gap:25px}.story section{grid-template-columns:1fr;gap:12px}.gallery img{height:55vw}.cta .shell{align-items:flex-start;flex-direction:column}.footer nav{display:none}}@media(max-width:520px){:root{--shell:calc(100% - 32px)}.header-inner{height:66px}.brand img{width:135px}.header-inner>.button{font-size:0;width:43px;height:43px;padding:0}.header-inner>.button span{font-size:1rem}.case-hero h1{font-size:3rem}.facts{grid-template-columns:1fr}.case-main{padding:55px 0 80px}.story{margin:60px auto}.gallery{grid-template-columns:1fr}.gallery img,.gallery img:nth-child(3n){grid-column:auto;height:auto;max-height:none}.next-case{align-items:flex-start;flex-direction:column;gap:10px}.footer-bottom{flex-direction:column;gap:12px}}
.case-menu-toggle{
display: none;
width: 44px;
height: 44px;
padding: 10px;
background: none;
border: 1px solid rgba(255,255,255,.18);
}
.case-menu-toggle span:not(.sr-only){
display: block;
width: 100%;
height: 2px;
margin: 6px 0;
background: #fff;
}
.case-hero .kicker,.case-hero h1,.case-hero .lead,.case-hero .facts{
animation: caseEnter .85s cubic-bezier(.22,1,.36,1) both;
}
.case-hero h1{animation-delay: .08s}
.case-hero .lead{animation-delay: .16s}
.case-hero .facts{animation-delay: .24s}
.cover{animation: caseCover .95s .12s cubic-bezier(.22,1,.36,1) both}
@keyframes caseEnter{from{opacity: 0;transform: translateY(38px)}to{opacity: 1;transform: none}}
@keyframes caseCover{from{opacity: 0;transform: scale(.975)}to{opacity: 1;transform: none}}
@media (min-width: 801px){:root{--shell: min(1660px,calc(100vw - 48px))}}
@media (max-width: 900px){.case-menu-toggle{display: block;margin-left: auto}.header-inner{gap: 12px}}
@media (prefers-reduced-motion: reduce){.case-hero .kicker,.case-hero h1,.case-hero .lead,.case-hero .facts,.cover{animation: none}}
:root{--ui-acid:#FFE800;--ui-ink:#1a1b1d;--ui-line:rgba(255,255,255,.15);--ui-body:'Plus Jakarta Sans',sans-serif;--ui-display:'Funnel Display',sans-serif}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.mobile-menu-toggle{position:relative;z-index:1002}
.mobile-header-shortcut{display:none}
.mobile-menu-toggle span:not(.sr-only){transform-origin:center;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .2s ease}
.mobile-menu-toggle[aria-expanded=true] span:not(.sr-only):first-child{transform:translateY(3.5px) rotate(45deg)}
.mobile-menu-toggle[aria-expanded=true] span:not(.sr-only):nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.services-dropdown{position:relative;display:flex;align-items:center}.services-trigger{display:flex;align-items:center;gap:7px;border:0;background:none;color:rgba(255,255,255,.72);font:inherit;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:color .2s ease}.services-trigger:hover,.services-trigger:focus-visible,.services-trigger[aria-expanded=true]{color:var(--ui-acid)}.services-trigger-icon{display:inline-block;font-size:.85em;transition:transform .25s cubic-bezier(.22,1,.36,1)}.services-trigger[aria-expanded=true] .services-trigger-icon{transform:rotate(180deg)}.services-dropdown-panel{position:absolute;top:calc(100% + 18px);left:50%;z-index:1300;width:260px;padding:10px;background:#171d1e;border:1px solid rgba(255,255,255,.15);box-shadow:0 18px 50px rgba(0,0,0,.28);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-10px);transition:opacity .22s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility .22s}.services-dropdown-panel::before{content:"";position:absolute;inset:-19px 0 auto;height:19px}.services-dropdown-panel a{display:flex!important;align-items:center;justify-content:space-between;width:100%;padding:12px 13px!important;color:rgba(255,255,255,.76)!important;font-family:var(--ui-body)!important;font-size:.74rem!important;line-height:1.25!important;letter-spacing:.02em!important;text-align:left!important;text-decoration:none;text-transform:none!important;border-bottom:1px solid rgba(255,255,255,.08);transition:color .2s ease,background .2s ease,transform .2s ease!important}.services-dropdown-panel a:last-child{border-bottom:0}.services-dropdown-panel a::after{content:"↗";color:var(--ui-acid)}.services-dropdown-panel a:hover,.services-dropdown-panel a:focus-visible{color:#fff!important;background:rgba(255,255,255,.06);transform:translateX(3px)!important}.services-dropdown:hover .services-dropdown-panel,.services-dropdown:focus-within .services-dropdown-panel,.services-dropdown.open .services-dropdown-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
body.shared-menu-open,html.shared-menu-open{overflow:visible}
.shared-footer{background:var(--ui-ink);color:#fff;padding:72px 0 24px;border-top:3px solid var(--ui-acid)}
.shared-footer-shell{width:min(1660px,calc(100vw - 48px));margin-inline:auto}
.shared-footer-top{display:grid;grid-template-columns:minmax(250px,1.35fr) minmax(120px,.72fr) minmax(165px,1fr) minmax(190px,1fr) minmax(150px,.78fr);gap:clamp(26px,3vw,58px);align-items:start;padding-bottom:56px}
.shared-footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:24px}.shared-footer-logo{width:190px;height:auto}.shared-footer-copy{font-family:var(--ui-display);font-size:1.12rem;line-height:1.42;color:rgba(255,255,255,.67);max-width:390px;margin:0}
.shared-footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.shared-footer-links strong{margin-bottom:8px;color:var(--ui-acid);font-family:var(--ui-body);font-size:.61rem;letter-spacing:.13em;text-transform:uppercase}.shared-footer-links a{position:relative;font-family:var(--ui-body);font-size:.75rem;line-height:1.45;text-decoration:none;color:rgba(255,255,255,.76);transition:color .22s ease,transform .22s ease}.shared-footer-links a::after{content:'↗';display:inline-block;margin-left:7px;color:var(--ui-acid);opacity:0;transform:translate(-4px,3px);transition:opacity .22s ease,transform .22s ease}.shared-footer-links a:hover{color:#fff;transform:translateX(3px)}.shared-footer-links a:hover::after{opacity:1;transform:none}
.shared-footer-bottom{display:flex;justify-content:space-between;gap:24px;padding-top:22px;border-top:1px solid var(--ui-line);font-family:var(--ui-body);font-size:.58rem;line-height:1.6;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.48)}.shared-footer-bottom a{color:inherit;text-decoration:none}.shared-footer-bottom a:hover{color:var(--ui-acid)}
.wa-float{isolation:isolate;animation:wa-float 3.4s ease-in-out infinite}.wa-float::before{content:'';position:absolute;z-index:-1;inset:-1px;border:2px solid rgba(255,249,29,.68);border-radius:50%;animation:wa-ring 2.7s ease-out infinite;pointer-events:none}.wa-float:hover{animation-play-state:paused;transform:translateY(-4px) scale(1.06)}
@keyframes wa-float{0%,100%{transform:translateY(0) rotate(0)}48%{transform:translateY(-6px) rotate(-2deg)}56%{transform:translateY(-6px) rotate(2deg)}}
@keyframes wa-ring{0%{opacity:.8;transform:scale(.82)}75%,100%{opacity:0;transform:scale(1.55)}}
.cookie-banner{position:fixed;z-index:3000;left:50%;bottom:18px;width:min(720px,calc(100vw - 32px));padding:18px 20px;background:rgba(11,14,15,.97);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 55px rgba(0,0,0,.42);transform:translate(-50%,calc(100% + 45px));opacity:0;transition:transform .48s cubic-bezier(.22,1,.36,1),opacity .3s ease;backdrop-filter:blur(14px)}
.cookie-banner.visible{transform:translate(-50%,0);opacity:1}.cookie-banner p{font-family:var(--ui-body);font-size:.75rem;line-height:1.55;color:rgba(255,255,255,.83)}.cookie-banner a{color:var(--ui-acid);font-weight:700}.cookie-actions{display:flex;gap:10px;margin-top:13px}.cookie-actions button{border:1px solid rgba(255,255,255,.25);padding:9px 15px;font-family:var(--ui-body);font-size:.68rem;font-weight:800;cursor:pointer}.cookie-accept{background:var(--ui-acid);border-color:var(--ui-acid)!important;color:#15191a}.cookie-reject{background:#4c5051;color:#fff}
@media(max-width:1100px) and (min-width:901px){.shared-footer-top{grid-template-columns:1.25fr 1fr 1fr;gap:38px 34px}}
@media(max-width:900px){
.site-header,.header{z-index:1200!important}
.site-header{position:fixed!important;inset:0 0 auto!important}
.brand,.header-logo,.header-actions,.header-cta,.header-inner>.button{position:relative;z-index:1002}
.header-nav{position:relative;z-index:1001!important}
.mobile-header-shortcut{display:none!important}
.mobile-menu-toggle{order:3;margin-left:auto;flex:0 0 44px}
[data-mobile-nav]{position:fixed!important;z-index:1000!important;inset:0!important;min-height:100dvh!important;margin:0!important;padding:clamp(105px,16vh,145px) 32px 45px!important;display:flex!important;flex-direction:column!important;align-items:flex-end!important;justify-content:flex-start!important;gap:14px!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch;touch-action:pan-y!important;background:rgba(28,34,36,.985)!important;list-style:none!important;text-align:right!important;clip-path:inset(0 0 100% 0)!important;opacity:0!important;transform:translateY(-16px)!important;pointer-events:none!important;transition:clip-path .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),opacity .25s ease!important}
[data-mobile-nav].open{clip-path:inset(0)!important;opacity:1!important;transform:none!important;pointer-events:auto!important}
[data-mobile-nav] a{display:block!important;width:100%!important;text-align:right!important;font-family:var(--ui-display)!important;font-size:1.35rem!important;font-weight:500!important;line-height:1.1!important;letter-spacing:-.02em!important;text-transform:none!important;text-decoration:none!important;color:rgba(255,255,255,.78)!important;padding:9px 0!important;opacity:0;transform:translateY(20px);transition:color .2s ease,opacity .38s ease,transform .45s cubic-bezier(.22,1,.36,1)!important}
[data-mobile-nav].open a{opacity:1;transform:none}[data-mobile-nav].open a:nth-child(1){transition-delay:.08s!important}[data-mobile-nav].open a:nth-child(2){transition-delay:.13s!important}[data-mobile-nav].open a:nth-child(3){transition-delay:.18s!important}[data-mobile-nav].open a:nth-child(4){transition-delay:.23s!important}[data-mobile-nav].open a:nth-child(5){transition-delay:.28s!important}[data-mobile-nav].open a:nth-child(6){transition-delay:.33s!important}
[data-mobile-nav] a:hover,[data-mobile-nav] a:focus-visible{color:var(--ui-acid)!important;transform:translateX(-7px)!important}
[data-mobile-nav] .services-dropdown{display:flex!important;width:100%!important;flex-direction:column!important;align-items:flex-end!important}[data-mobile-nav] .services-trigger{display:flex!important;justify-content:flex-end;width:100%!important;padding:9px 0!important;color:rgba(255,255,255,.78)!important;font-family:var(--ui-display)!important;font-size:1.35rem!important;font-weight:500!important;line-height:1.1!important;letter-spacing:-.02em!important;text-transform:none!important;opacity:0;transform:translateY(20px);transition:color .2s ease,opacity .38s ease,transform .45s cubic-bezier(.22,1,.36,1)!important}[data-mobile-nav].open .services-trigger{opacity:1;transform:none;transition-delay:.23s!important}[data-mobile-nav] .services-dropdown-panel{position:static!important;width:100%!important;max-height:0;padding:0!important;background:transparent;border:0;border-right:1px solid rgba(255,249,29,.45);box-shadow:none;opacity:1;visibility:visible;overflow:hidden;pointer-events:none;transform:none!important;transition:max-height .38s cubic-bezier(.22,1,.36,1),padding .3s ease!important}[data-mobile-nav] .services-dropdown.open .services-dropdown-panel{max-height:260px;padding:3px 14px 9px 0!important;pointer-events:auto}[data-mobile-nav] .services-dropdown-panel::before{display:none}[data-mobile-nav] .services-dropdown-panel a{padding:9px 0!important;color:rgba(255,255,255,.6)!important;font-family:var(--ui-body)!important;font-size:.86rem!important;font-weight:500!important;letter-spacing:.01em!important;text-align:right!important;border-bottom:0;opacity:1!important;transform:none!important;transition:color .2s ease!important}[data-mobile-nav] .services-dropdown-panel a:hover,[data-mobile-nav] .services-dropdown-panel a:focus-visible{color:var(--ui-acid)!important;background:transparent;transform:none!important}
.shared-footer{padding:58px 0 22px}.shared-footer-shell{width:calc(100% - 32px)}.shared-footer-top{grid-template-columns:1.35fr 1fr;gap:34px 28px;padding-bottom:42px}.shared-footer-copy{font-size:1rem}.shared-footer-links{align-items:flex-start}.shared-footer-bottom{flex-direction:column;gap:12px}
}
@media(max-width:620px){.cookie-banner{bottom:10px;padding:15px}.cookie-banner p{font-size:.7rem}.cookie-actions button{flex:1}.shared-footer-logo{width:160px}.shared-footer-top{grid-template-columns:1fr;gap:28px}.shared-footer-links strong{margin-bottom:3px}}
@media(prefers-reduced-motion:reduce){.mobile-menu-toggle span,.cookie-banner,[data-mobile-nav],[data-mobile-nav] a,.services-dropdown-panel,.services-trigger,.services-trigger-icon,.shared-footer-links a{transition:none!important}.wa-float,.wa-float::before{animation:none!important}}
@media(max-width:900px){[data-mobile-nav] .industries-dropdown.open .services-dropdown-panel{max-height:390px}}
:root{
--vr-acid: var(--acid, #FFE800);
--vr-ink: var(--ink, #24292b);
--vr-paper: var(--paper, #f3f1eb);
--vr-paper-2: var(--paper-2, #e9e6de);
--vr-line: var(--line, rgba(36, 41, 43, .17));
--vr-shell: var(--shell, min(1660px, calc(100vw - 48px)));
--vr-section-space: 130px;
--vr-radius-xl: 11px;
--vr-radius-card: 8px;
--vr-radius-control: 6px;
--vr-gap: clamp(18px, 2vw, 30px);
--vr-shadow: 0 18px 48px rgba(18, 24, 25, .10);
--vr-shadow-hover: 0 28px 68px rgba(18, 24, 25, .16);
--vr-shadow-dark: 0 24px 64px rgba(0, 0, 0, .27);
--vr-line-soft: color-mix(in srgb, var(--vr-line) 55%, transparent);
--vr-surface: rgba(255, 255, 255, .78);
}
a, button, summary, input, select, textarea{-webkit-tap-highlight-color: transparent}
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
outline: 3px solid var(--vr-acid);
outline-offset: 4px;
}
.prose a:not(.button), .legal-block a, .story a, .semantic-expansion a:not(.button),
.semantic-industry-section a:not(.button){
text-decoration-thickness: 1px;
text-underline-offset: .22em;
transition: color .2s ease, text-decoration-color .2s ease;
}
.prose a:not(.button):hover, .legal-block a:hover, .story a:hover{
text-decoration-color: var(--vr-acid);
}
.button, .submit-button, .service-more, .button-header, .btn{
border-radius: var(--vr-radius-control) !important;
transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease,
background-color .25s ease, color .25s ease !important;
}
.button:hover, .submit-button:hover, .service-more:hover, .btn:hover{
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(18, 24, 25, .14);
}
.case-grid, .portfolio-grid{
gap: var(--vr-gap) !important;
border: 0 !important;
background: transparent !important;
}
.case-card, .portfolio-item, .portfolio-item-inner, .portfolio-tile{
border: 0 !important;
border-radius: var(--vr-radius-card) !important;
overflow: hidden !important;
box-shadow: var(--vr-shadow);
isolation: isolate;
transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease !important;
}
.portfolio-item-inner{
border-radius: inherit !important;
box-shadow: none;
}
.work .case-card, .system-section .case-card{box-shadow: var(--vr-shadow-dark)}
.case-card:hover, .portfolio-item:hover, .portfolio-tile:hover{
transform: translateY(-7px);
box-shadow: var(--vr-shadow-hover);
}
.case-card img, .portfolio-item img, .portfolio-tile img{
transition: transform .7s cubic-bezier(.22,1,.36,1), filter .45s ease !important;
}
.case-card:hover img, .portfolio-item:hover img, .portfolio-tile:hover img{
transform: scale(1.045);
}
.portfolio-filter, .filter-button{
border-radius: 999px !important;
border-color: var(--vr-line-soft) !important;
}
.strategic-grid, .system-steps, .service-links, .semantic-industry-grid,
.semantic-card-grid, .method-list, .service-rows{
gap: var(--vr-gap) !important;
border: 0 !important;
background: transparent !important;
}
.strategy-card, .system-step, .service-link, .semantic-industry-card,
.semantic-card, .service-row{
border: 0 !important;
border-radius: var(--vr-radius-card) !important;
overflow: hidden;
box-shadow: var(--vr-shadow);
transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease,
background-color .3s ease !important;
}
.strategy-card:hover, .system-step:hover, .service-link:hover,
.semantic-industry-card:hover, .semantic-card:hover, .service-row:hover{
transform: translateY(-5px);
box-shadow: var(--vr-shadow-hover);
}
.system-step{box-shadow: var(--vr-shadow-dark)}
.service-links{grid-template-columns: repeat(4, minmax(0, 1fr))}
.services-band{border-top: 0 !important}
.semantic-expansion, .semantic-industry-section{border-block: 0 !important}
.method-list{
display: grid;
padding: 0 !important;
}
.method-list li, .method-list li:nth-child(n){
border: 0 !important;
border-radius: var(--vr-radius-card);
background: rgba(255, 255, 255, .045);
box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
}
.logo-grid{
gap: clamp(10px, 1.25vw, 18px) !important;
border: 0 !important;
background: transparent !important;
}
.logo-grid figure{
border: 1px solid var(--vr-line-soft) !important;
border-radius: 8px;
background: rgba(255, 255, 255, .45);
box-shadow: 0 10px 28px rgba(18, 24, 25, .055);
overflow: hidden;
}
.faq-list, .svc-list, .check-list{
display: grid !important;
gap: 12px !important;
border: 0 !important;
background: transparent !important;
}
.faq-list details, .faq-item{
border: 0 !important;
border-radius: 8px;
background: var(--vr-surface);
box-shadow: 0 10px 28px rgba(18, 24, 25, .065);
overflow: hidden;
}
.faq-list summary{padding-inline: 22px !important}
.faq-list details p{padding-inline: 22px 55px !important}
.svc-list li, .check-list li{
border: 0 !important;
border-radius: 12px;
background: rgba(255, 255, 255, .62);
padding: 14px 18px 14px 34px !important;
}
.system-section .check-list li{background: rgba(255,255,255,.055)}
.contact-form{
border: 0 !important;
border-radius: var(--vr-radius-card) !important;
box-shadow: var(--vr-shadow-dark);
}
.contact-form{background: rgba(255, 255, 255, .035) !important}
.contact-form input, .contact-form select, .contact-form textarea{
border-radius: var(--vr-radius-control) !important;
border-color: rgba(127, 137, 140, .28) !important;
transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
border-color: var(--acid, #FFE800) !important;
box-shadow: 0 0 0 4px rgba(255, 242, 0, .12);
}
.cover, .gallery img{
border-radius: var(--vr-radius-card);
}
.gallery{gap: var(--vr-gap) !important}
.story{
display: grid;
gap: 18px;
}
.story section{
border: 0 !important;
border-radius: var(--vr-radius-card);
background: rgba(255, 255, 255, .62);
box-shadow: 0 12px 34px rgba(18, 24, 25, .065);
padding: clamp(26px, 3vw, 46px) !important;
}
.next-case{
border: 0 !important;
border-radius: var(--vr-radius-card);
box-shadow: var(--vr-shadow);
overflow: hidden;
}
.legal-nav{
gap: 8px;
border-top: 0 !important;
}
.legal-nav a, .legal-nav button{
border: 0 !important;
border-radius: 10px;
padding: 14px 16px !important;
background: rgba(255, 255, 255, .48) !important;
}
.legal-nav a:hover, .legal-nav button:hover{background: #fff !important}
.legal-block{
border: 0 !important;
border-radius: var(--vr-radius-card);
box-shadow: var(--vr-shadow);
}
.cookies-table{
border-collapse: separate !important;
border-spacing: 7px !important;
}
.cookies-table th, .cookies-table td{
border: 0 !important;
border-radius: 10px;
background: rgba(240, 238, 233, .72);
}
@media (max-width: 1100px){
.service-links{grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 620px){
:root{
--vr-radius-xl: 9px;
--vr-radius-card: 7px;
--vr-gap: 16px;
}
.case-card:hover, .portfolio-item:hover, .portfolio-tile:hover,
.strategy-card:hover, .system-step:hover, .service-link:hover,
.semantic-industry-card:hover, .semantic-card:hover, .service-row:hover{
transform: none;
}
.service-links{grid-template-columns: 1fr}
.method-list li, .method-list li:nth-child(n){min-height: 190px}
.story section{padding: 24px 20px !important}
.faq-list summary{padding: 20px 18px !important}
.faq-list details p{padding: 0 48px 22px 18px !important}
}
@media (prefers-reduced-motion: reduce){
.case-card, .portfolio-item, .portfolio-tile, .strategy-card, .system-step,
.service-link, .semantic-industry-card, .semantic-card, .service-row,
.case-card img, .portfolio-item img, .portfolio-tile img{
transition: none !important;
transform: none !important;
}
}
:root{
--shell: min(1660px, calc(100vw - 48px));
}
.shell,
.wrap{
width: min(1660px, calc(100vw - 48px)) !important;
}
.header-inner{
width: var(--shell) !important;
max-width: none !important;
margin-inline: auto !important;
}
.header .header-inner,
.site-header .header-inner{
min-height: 72px !important;
}
.header-logo img,
.brand img{
width: 174px !important;
height: auto !important;
}
.nav-list,
.main-nav,
.site-header nav{
gap: clamp(18px, 1.6vw, 28px) !important;
}
.nav-list a,
.main-nav a,
.site-header nav > a,
.services-trigger,
.industries-trigger{
font-size: .7rem !important;
line-height: 1 !important;
letter-spacing: .08em !important;
}
.retail-feature{
border: 0 !important;
border-radius: var(--vr-radius-xl) !important;
box-shadow: var(--vr-shadow);
isolation: isolate;
overflow: hidden;
}
.industry-card-grid{
gap: var(--vr-gap) !important;
border: 0 !important;
background: transparent !important;
}
.industry-card-grid a{
border: 0 !important;
border-radius: var(--vr-radius-card) !important;
background: rgba(255, 255, 255, .72) !important;
box-shadow: var(--vr-shadow);
overflow: hidden;
transition: transform .32s cubic-bezier(.2, .8, .2, 1),
box-shadow .32s ease,
background-color .24s ease,
color .24s ease;
}
.logo-grid{
gap: 0 !important;
border: 0 !important;
background: transparent !important;
}
.logo-grid figure{
border: 0 !important;
border-left: 1px solid var(--line, rgba(20, 26, 27, .16)) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.logo-grid figure:first-child{border-left: 0 !important}
@media (hover: hover) and (min-width: 761px){
.industry-card-grid a:hover,
.industry-card-grid a:focus-visible,
.method-list li:hover,
.method-list li:focus-within{
background: var(--acid, #FFE800) !important;
color: #151a1b !important;
transform: translateY(-5px);
box-shadow: var(--vr-shadow-hover);
}
.industry-card-grid a:hover::before,
.industry-card-grid a:focus-visible::before{
background: #151a1b !important;
}
}
.faq-list details::details-content,
.faq-item::details-content{
block-size: 0;
opacity: 0;
overflow: hidden;
transition: block-size .38s cubic-bezier(.2, .8, .2, 1),
content-visibility .38s allow-discrete,
opacity .24s ease;
}
.faq-list details[open]::details-content,
.faq-item[open]::details-content{
block-size: auto;
opacity: 1;
}
.faq-list details[open] > :not(summary),
.faq-item[open] > :not(summary){
animation: vr-faq-answer-in .34s cubic-bezier(.2, .8, .2, 1) both;
}
.faq-list summary::after,
.faq-item summary::after{
transition: transform .28s ease, color .2s ease;
}
.faq-list details[open] summary::after,
.faq-item[open] summary::after{
transform: rotate(45deg);
}
@keyframes vr-faq-answer-in{
from{opacity: 0;transform: translateY(-8px)}
to{opacity: 1;transform: translateY(0)}
}
.service-cover{
border-radius: var(--vr-radius-xl) !important;
box-shadow: var(--vr-shadow);
overflow: hidden !important;
}
.service-cover video,
.service-cover img,
.service-cover picture{
display: block;
border-radius: inherit !important;
}
.page-hero-media{
padding: 0 !important;
border: 0 !important;
border-radius: var(--vr-radius-xl) !important;
overflow: hidden !important;
box-shadow: var(--vr-shadow) !important;
background: var(--vr-surface) !important;
}
.page-hero-media video,
.page-hero-media img{
display: block;
width: 100%;
border-radius: inherit !important;
}
.page-hero-media .cropmark{
display: none !important;
}
.svc-list li{
padding-left: 50px !important;
}
.svc-list li::before{
content: "" !important;
position: absolute !important;
left: 20px !important;
top: 50% !important;
width: 15px !important;
height: 2px !important;
background: var(--acid, #FFE800) !important;
transform: translateY(-50%) !important;
}
.faq-item summary{
padding: 22px 58px 22px 24px !important;
}
.faq-item summary::after{right: 24px !important}
.faq-item p{
padding: 0 58px 26px 24px !important;
}
main .next-case{
width: min(100%, 760px) !important;
margin-left: 0 !important;
margin-right: auto !important;
padding: 24px clamp(22px, 2.5vw, 36px) !important;
}
.case-main .next-case{
width: min(100%, 960px) !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 30px clamp(24px, 3vw, 44px) !important;
}
.industry-hero h1{
max-width: 13ch;
font-size: clamp(3rem, 4.9vw, 5.5rem) !important;
line-height: .94 !important;
}
.semantic-industry-section h2,
.semantic-industry-intro h2{
font-size: clamp(2.6rem, 4vw, 4.5rem) !important;
line-height: .98 !important;
}
@media (max-width: 900px){
:root{--shell: calc(100% - 40px)}
.shell,
.wrap{
width: calc(100% - 40px) !important;
}
.header .header-inner,
.site-header .header-inner{
min-height: 64px !important;
height: 64px !important;
}
.header-logo img,
.brand img{
width: 138px !important;
}
.nav-list{
top: 64px !important;
min-height: calc(100dvh - 64px);
padding: clamp(55px, 12vh, 100px) 32px 45px !important;
gap: 15px !important;
transform: translateY(-18px) !important;
clip-path: inset(0 0 100% 0);
opacity: 0;
transition: clip-path .38s cubic-bezier(.22, 1, .36, 1),
transform .38s cubic-bezier(.22, 1, .36, 1),
opacity .24s ease !important;
}
.nav-list.open{
transform: none !important;
clip-path: inset(0);
opacity: 1;
}
.nav-list a{
font-size: 1.38rem !important;
line-height: 1.15 !important;
letter-spacing: 0 !important;
opacity: 0;
transform: translateY(14px);
transition: opacity .28s ease, transform .34s cubic-bezier(.22, 1, .36, 1);
}
.nav-list.open a{opacity: 1;transform: none}
.nav-list.open li:nth-child(1) a{transition-delay: .08s}
.nav-list.open li:nth-child(2) a{transition-delay: .12s}
.nav-list.open li:nth-child(3) a{transition-delay: .16s}
.nav-list.open li:nth-child(4) a{transition-delay: .20s}
.nav-list.open li:nth-child(5) a{transition-delay: .24s}
.nav-list.open li:nth-child(6) a{transition-delay: .28s}
.industry-hero h1{
max-width: 14ch;
font-size: clamp(2.35rem, 9vw, 3.35rem) !important;
}
.semantic-industry-section h2,
.semantic-industry-intro h2{
font-size: clamp(2.15rem, 8vw, 3rem) !important;
}
}
@media (max-width: 620px){
:root{--shell: calc(100% - 32px)}
.shell,
.wrap{
width: calc(100% - 32px) !important;
}
.industry-card-grid{gap: 14px !important}
.industry-card-grid a{min-height: 168px !important}
.faq-item summary{padding: 20px 50px 20px 18px !important}
.faq-item summary::after{right: 18px !important}
.faq-item p{padding: 0 44px 22px 18px !important}
main .next-case,
.case-main .next-case{
width: 100% !important;
padding: 22px 20px !important;
}
}
@media (prefers-reduced-motion: reduce){
.faq-list details::details-content,
.faq-item::details-content,
.faq-list details[open] > :not(summary),
.faq-item[open] > :not(summary){
animation: none !important;
transition: none !important;
}
}
:root{
--t-d1: clamp(2.3rem, 1rem + 5vw, 5.25rem);
--t-d2: clamp(1.7rem, 1.05rem + 2.4vw, 3.6rem);
--t-d3: clamp(1.25rem, 1rem + .9vw, 1.92rem);
--t-d4: clamp(1rem, .9rem + .38vw, 1.26rem);
--t-lead: clamp(.9rem, .83rem + .3vw, 1.1rem);
--t-body: clamp(.9rem, .88rem + .12vw, .96rem);
--t-small: clamp(.81rem, .78rem + .13vw, .86rem);
--t-meta: clamp(.64rem, .62rem + .1vw, .68rem);
--lh-d1: .94;--lh-d2: .99;--lh-d3: 1.08;--lh-d4: 1.18;
--lh-lead: 1.6;--lh-body: 1.7;
--ls-d1: -.045em;--ls-d2: -.04em;--ls-d3: -.03em;
--ls-meta: .13em;
--u-shell: min(1660px, calc(100vw - 48px));
--u-section: clamp(64px, 6.8vw, 108px);
--u-block: clamp(36px, 3.7vw, 58px);
--u-card-pad: clamp(24px, 2.6vw, 42px);
--u-tile-pad: clamp(20px, 1.8vw, 28px);
--u-gap: clamp(15px, 1.6vw, 24px);
--u-measure: 68ch;
--u-header: 72px;
--brand-acid: #FFE800;
--acid: var(--brand-acid);
--ink: #24292b;
--ink-2: #303638;
--ink-deep: #1a1d1e;
--paper: #f3f1eb;
--paper-2: #eeebe4;
--surface: #ffffff;
--surface-2: #faf8f3;
--text-2: #555c5e;
--muted: #777e80;
--line: rgba(36, 41, 43, .17);
--line-dark: rgba(255, 255, 255, .14);
--white: #ffffff;
--font-display: 'Funnel Display', sans-serif;
--font-body: 'Plus Jakarta Sans', sans-serif;
--display: var(--font-display);
--body: var(--font-body);
--ui-acid: var(--acid);
--ui-ink: var(--ink-deep);
--ui-line: var(--line-dark);
--ui-display: var(--font-display);
--ui-body: var(--font-body);
--coral: #ff6b5e;
--violet: #8067ff;
--cyan: #52c7c8;
--blue: #5e79ff;
--amber: #ff8f42;
}
html{scroll-padding-top: calc(var(--u-header) + 18px)}
:root main :is(h1,h2,h3,h4) :is(em,i,mark,span,b,u,strong,small),
.section-heading h2 span,
.semantic-industry-section .section-heading h2 span,
.system-grid h2 span,
.related-heading h2 span,
.cta-inner h2 span,
.industry-hero h1 em,
.page-title mark,
.section-title mark,
.section-light .section-title mark,
.prose h2 mark,
.cta-band h2 mark{
color: inherit !important;
background: transparent !important;
font-style: normal !important;
font-weight: inherit !important;
font-size: inherit !important;
letter-spacing: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
padding: 0 !important;
-webkit-text-fill-color: currentColor;
}
:root main h1,
:root .industry-hero h1,
:root .page-hero h1,
:root .case-hero h1,
:root .hero h1{
font-family: var(--display, "Funnel Display", sans-serif);
font-size: var(--t-d1) !important;
font-weight: 600;
line-height: var(--lh-d1) !important;
letter-spacing: var(--ls-d1);
max-width: 20ch;
text-wrap: balance;
}
:root main h2,
:root .section-heading h2,
:root .section-intro h2,
:root .system-grid h2,
:root .related-heading h2,
:root .cta-inner h2,
:root .semantic-industry-section h2,
:root .semantic-expansion > h2,
:root .cta-band h2,
:root .section-title{
font-family: var(--display, "Funnel Display", sans-serif);
font-size: var(--t-d2) !important;
font-weight: 600;
line-height: var(--lh-d2) !important;
letter-spacing: var(--ls-d2);
max-width: 22ch;
text-wrap: balance;
}
:root main h3,
:root .strategy-card h3,
:root .semantic-industry-card h3,
:root .semantic-card h3{
font-family: var(--display, "Funnel Display", sans-serif);
font-size: var(--t-d3) !important;
font-weight: 600;
line-height: var(--lh-d3) !important;
letter-spacing: var(--ls-d3);
max-width: 26ch;
}
:root .statement{
font-family: var(--display, "Funnel Display", sans-serif);
font-size: var(--t-d3) !important;
font-weight: 500;
line-height: 1.3 !important;
letter-spacing: var(--ls-d3);
max-width: 34ch;
}
:root .case-card h3,
:root .system-step strong,
:root .service-link strong,
:root .faq-item summary,
:root .faq-list summary,
:root .story > section > h3,
:root .pillars h3,
:root main .next-case strong{
font-family: var(--display, "Funnel Display", sans-serif);
font-size: var(--t-d4) !important;
font-weight: 600;
line-height: var(--lh-d4) !important;
letter-spacing: -.02em;
max-width: none;
}
:root .hero-lead,
:root .page-lead,
:root .section-heading .intro,
:root .section-intro > div > p,
:root .semantic-intro,
:root .case-hero .lead,
:root .cta-inner > div > p:not(.eyebrow),
:root .cta-lead{
font-family: var(--body, "Plus Jakarta Sans", sans-serif);
font-size: var(--t-lead) !important;
font-weight: 400;
line-height: var(--lh-lead) !important;
letter-spacing: 0;
max-width: var(--u-measure);
}
:root .strategy-card p,
:root .semantic-industry-card p,
:root .semantic-card p,
:root .system-copy > p,
:root .faq-item p,
:root .faq-list details p,
:root .check-list li,
:root .svc-list li,
:root .semantic-related{
font-family: var(--body, "Plus Jakarta Sans", sans-serif);
font-size: var(--t-body);
line-height: var(--lh-body);
letter-spacing: 0;
max-width: var(--u-measure);
}
:root .eyebrow,
:root .kicker,
:root .card-label,
:root .breadcrumbs,
:root .breadcrumb,
:root .mono,
:root .semantic-kicker,
:root .case-card small,
:root .service-link small,
:root .system-step b,
:root .story > section > span,
:root .pillars span,
:root .facts dt,
:root .case-meta{
font-family: var(--body, "Plus Jakarta Sans", sans-serif);
font-size: var(--t-meta) !important;
font-weight: 700;
line-height: 1.2;
letter-spacing: var(--ls-meta);
text-transform: uppercase;
}
:root .industry-card-grid a strong{
font-size: var(--t-d4) !important;
line-height: var(--lh-d4);
}
:root .service-row .service-body p,
:root .facts dd,
:root .shared-footer-copy{font-size: var(--t-body) !important}
:root .metrics-grid strong{
font-size: clamp(1.5rem, .95rem + 2.35vw, 2.25rem) !important;
}
:root .shell,
:root .wrap,
:root .shared-footer-shell{
width: var(--u-shell) !important;
max-width: none !important;
margin-inline: auto;
}
:root main > .section,
:root main > .section-pad,
:root main > .services-band,
:root main > .cta-band,
:root main > .cta{
padding-block: var(--u-section) !important;
}
:root .section .section-heading{
display: grid;
grid-template-columns: minmax(140px, .34fr) 1.66fr;
gap: clamp(28px, 4.6vw, 104px);
align-items: start;
margin-bottom: 0;
}
:root .section .section-heading > .eyebrow{margin-bottom: 0}
:root .section .section-heading .intro{margin: clamp(20px, 2vw, 30px) 0 0}
:root .section > .shell > .section-heading + *,
:root .section > .shell > .related-heading + *,
:root .section > .shell > .semantic-industry-grid + .semantic-related{
margin-top: var(--u-block) !important;
}
:root .section > .shell > .related-heading{margin-bottom: 0}
:root .services-band > .shell > .eyebrow{margin-bottom: clamp(24px, 2.4vw, 34px)}
:root .strategy-card,
:root .semantic-industry-card,
:root .semantic-card{
padding: var(--u-card-pad) !important;
}
:root .system-step,
:root .service-link{
padding: var(--u-tile-pad) !important;
}
:root .strategy-card > :last-child,
:root .semantic-industry-card > :last-child,
:root .semantic-card > :last-child{margin-bottom: 0}
:root .strategic-grid,
:root .semantic-industry-grid,
:root .semantic-card-grid,
:root .case-grid,
:root .system-steps,
:root .service-links{
gap: var(--u-gap) !important;
}
:root .check-list,
:root .svc-list{
display: grid;
gap: 10px;
margin: clamp(22px, 2.2vw, 32px) 0;
padding: 0;
list-style: none;
}
:root .check-list li,
:root .svc-list li{
position: relative;
padding: 14px 18px 14px 42px !important;
border: 0 !important;
border-radius: 12px;
background: rgba(255,255,255,.62);
}
:root .check-list li::before,
:root .svc-list li::before{
content: "" !important;
position: absolute !important;
left: 20px !important;
top: 1.15em !important;
width: 12px !important;
height: 2px !important;
background: var(--card-accent, var(--section-accent)) !important;
color: transparent !important;
transform: none !important;
}
:root .system-section .check-list li,
:root .system-section .svc-list li{background: rgba(255,255,255,.055)}
.industry-hero-media video{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: var(--ink);
}
:root .industry-hero,
:root .hero{align-items: end}
:root .industry-hero-content,
:root .hero-inner{
align-self: end;
padding-block: clamp(90px, 11vh, 140px) clamp(48px, 6vh, 82px) !important;
}
:root .industry-hero-media::after,
:root .hero-wash{
background: linear-gradient(180deg,
rgba(9, 13, 14, .13) 0%,
rgba(9, 13, 14, .14) 26%,
rgba(9, 13, 14, .55) 54%,
rgba(9, 13, 14, .84) 100%) !important;
}
.semantic-related{
margin: 0;
color: #555d5f;
}
.semantic-related a{
color: inherit;
font-weight: 700;
text-decoration-thickness: 1px;
text-underline-offset: .22em;
text-decoration-color: var(--section-accent);
}
:root .shell.faq-grid,
:root .faq-grid{
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
gap: clamp(38px, 5.5vw, 110px);
align-items: start;
}
:root .shell.faq-grid > .section-heading{display: block}
:root .shell.faq-grid > .section-heading > .eyebrow{margin-bottom: 24px}
:root .shell.faq-grid > .section-heading .intro{margin: clamp(18px, 1.8vw, 26px) 0 0}
:root .section > .shell.faq-grid > .section-heading + *{margin-top: 0 !important}
:root .faq-list{
display: grid;
gap: 12px;
border-top: 0;
}
:root .faq-list > details,
:root .faq-item{
border: 0 !important;
border-radius: var(--vr-radius-card, 22px);
background: var(--vr-surface, rgba(255,255,255,.78));
box-shadow: 0 10px 28px rgba(18,24,25,.065);
overflow: hidden;
}
:root .faq-list summary,
:root .faq-item summary{
display: grid;
grid-template-columns: minmax(0, 1fr) 30px;
gap: 22px;
align-items: center;
padding: 22px 24px !important;
cursor: pointer;
list-style: none;
}
:root .faq-list summary::-webkit-details-marker,
:root .faq-item summary::-webkit-details-marker{display: none}
:root .faq-list summary > span,
:root .faq-item summary > span{
display: block;
font-family: var(--body, "Plus Jakarta Sans", sans-serif);
font-size: 1.05rem;
font-weight: 400;
line-height: 1;
text-align: right;
color: #6b7375;
transform-origin: center;
transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
:root .faq-list details[open] summary > span,
:root .faq-item[open] summary > span{transform: rotate(45deg)}
:root .faq-list details p,
:root .faq-item p{
margin: 0;
padding: 0 24px 26px !important;
max-width: var(--u-measure);
color: #5f6769;
}
.section.section-alt{background: #f7f6f3}
:root .case-hero{padding-block: var(--u-section) !important}
:root .case-main{padding-block: var(--u-section) !important}
:root .cover{margin-bottom: var(--u-block)}
:root .case-story{
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
gap: clamp(38px, 5.5vw, 110px);
align-items: start;
margin-bottom: var(--u-block);
}
:root .case-story-head .eyebrow{margin-bottom: 24px}
:root .story{
display: block;
max-width: none;
margin: 0;
border-top: 1px solid var(--line);
}
:root .story > section{
display: grid;
grid-template-columns: 54px minmax(0, .62fr) minmax(0, 1fr);
gap: clamp(18px, 1.8vw, 26px);
align-items: start;
padding: 26px 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--line) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
transform: none !important;
}
:root .story > section > span{padding-top: 5px}
:root .story > section > p{
margin: 0;
font-family: var(--body, "Plus Jakarta Sans", sans-serif);
font-size: var(--t-body) !important;
line-height: var(--lh-body) !important;
letter-spacing: 0;
color: var(--text-2);
max-width: 52ch;
}
:root .gallery{gap: var(--u-gap) !important}
:root main .next-case{margin-top: var(--u-block)}
:root .facts{margin-top: var(--u-block)}
:root main > .legal-hero{padding-block: var(--u-section) !important}
:root main > .legal-layout{padding-block: var(--u-section) !important}
:root .legal-hero-grid{
display: block;
}
:root .legal-hero-grid > .eyebrow{margin: 0 0 24px}
:root .legal-layout{
display: grid;
grid-template-columns: minmax(200px, .28fr) minmax(0, 1.72fr);
gap: clamp(28px, 4.6vw, 104px);
align-items: start;
}
:root .legal-stack{gap: var(--u-gap)}
:root .legal-block{padding: var(--u-card-pad) !important}
:root .legal-block h2{margin: 0 0 clamp(24px, 2.4vw, 34px)}
:root .legal-block h3{
font-family: var(--display, "Funnel Display", sans-serif);
font-size: var(--t-d4) !important;
font-weight: 600;
line-height: var(--lh-d4) !important;
letter-spacing: -.02em;
margin: clamp(28px, 2.8vw, 40px) 0 12px;
}
:root .legal-intro{
font-family: var(--body, "Plus Jakarta Sans", sans-serif);
font-size: var(--t-lead) !important;
line-height: var(--lh-lead) !important;
max-width: var(--u-measure);
}
:root .legal-block p,
:root .legal-block li{
font-size: var(--t-body);
line-height: var(--lh-body);
max-width: var(--u-measure);
}
:root .metrics-grid > div:first-child{
border-left: 1px solid rgba(36, 41, 43, .28);
padding-left: 36px;
}
:root .hero,
:root .industry-hero,
:root .case-hero,
:root .legal-hero,
:root .page-hero,
:root .system-section,
:root .section.system-section{background-color: var(--ink)}
:root .system-step{background-color: var(--ink-2) !important}
:root .site-header{background-color: color-mix(in srgb, var(--ink-deep) 97%, transparent)}
:root .shared-footer{background-color: var(--ink-deep)}
:root .semantic-industry-section,
:root .section.section-alt{background-color: var(--paper-2)}
:root .strategy-card,
:root .semantic-industry-card,
:root .semantic-card{background-color: var(--surface-2) !important}
:root .strategy-card:nth-child(2n),
:root .semantic-industry-card:nth-child(2n),
:root .semantic-card:nth-child(2n){background-color: var(--surface) !important}
:root .faq-list > details,
:root .faq-item,
:root .legal-block{background-color: var(--surface) !important}
:root .check-list li,
:root .svc-list li{background-color: var(--surface-2) !important}
:root .system-section .check-list li,
:root .system-section .svc-list li{background-color: rgba(255, 255, 255, .06) !important}
:root .strategy-card p,
:root .semantic-industry-card p,
:root .semantic-card p,
:root .semantic-intro,
:root .semantic-related,
:root .section-heading .intro,
:root .faq-list details p,
:root .faq-item p,
:root .legal-block p,
:root .legal-block li,
:root .check-list li,
:root .svc-list li,
:root .cta-lead{color: var(--text-2)}
:root .card-label,
:root .service-link small,
:root .case-card small,
:root .pillars p,
:root .pillars span,
:root .story > section > span{color: var(--muted)}
:root .story > section > p{color: var(--text-2)}
:root .eyebrow{
display: flex;
align-items: center;
gap: 12px;
}
:root .eyebrow::before{
content: "";
flex: 0 0 30px;
width: 30px;
height: 2px;
background: var(--acid);
}
:root .cta-inner{
display: grid;
grid-template-columns: 1.4fr .6fr;
gap: 40px;
align-items: end;
}
:root .cta-inner > div > p:not(.eyebrow){margin: 26px 0 0;max-width: 620px}
:root .cta-inner .eyebrow{margin: 0 0 24px !important}
:root .cta-inner .button{
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 32px;
min-height: 54px;
padding: 0 22px;
border: 1px solid transparent;
border-radius: var(--vr-radius-control, 13px);
font-family: var(--body, "Plus Jakarta Sans", sans-serif);
font-size: .68rem;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
text-decoration: none;
transition: transform .28s cubic-bezier(.22, 1, .36, 1),
box-shadow .28s ease, background-color .25s ease, color .25s ease;
}
:root .cta-inner .button::after{content: "↗"}
:root .cta-inner .button:hover{
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(18, 24, 25, .18);
}
:root .cta-band .button{
background: var(--surface) !important;
border-color: var(--surface) !important;
color: var(--ink) !important;
}
:root .cta-band .button:hover,
:root .cta-band .button:focus-visible{
background: var(--ink) !important;
border-color: var(--ink) !important;
color: var(--surface) !important;
}
:root .cta-band-acid{
background: var(--acid);
color: var(--ink);
}
:root .cta-band-acid .eyebrow{color: var(--ink)}
:root .cta-band-acid .eyebrow::before{background: var(--ink)}
:root .cta-band-acid h2{color: var(--ink)}
:root .cta-band-acid .cta-inner > div > p:not(.eyebrow){color: #4b5254}
:root .cta-band-acid .button{
background: var(--ink) !important;
border-color: var(--ink) !important;
color: var(--surface) !important;
}
:root .cta-band-acid .button:hover,
:root .cta-band-acid .button:focus-visible{
background: var(--surface) !important;
border-color: var(--surface) !important;
color: var(--ink) !important;
}
:root .site-header{
position: sticky;
top: 0;
z-index: 1200;
padding: 0 !important;
color: #fff;
border-bottom: 1px solid var(--line-dark);
backdrop-filter: blur(16px);
}
:root .site-header .header-inner{
min-height: var(--u-header) !important;
height: var(--u-header) !important;
display: flex;
align-items: center;
gap: clamp(18px, 2vw, 32px);
}
:root .site-header .brand{margin-right: auto}
:root .site-header .mobile-menu-toggle{
display: none;
position: relative;
z-index: 1002;
width: 44px;
height: 44px;
padding: 12px;
flex-direction: column;
justify-content: center;
gap: 7px;
border: 1px solid var(--line-dark);
border-radius: 10px;
background: transparent;
cursor: pointer;
}
:root .site-header .mobile-menu-toggle span:not(.sr-only){
display: block;
width: 100%;
height: 2px;
margin: 0;
border-radius: 2px;
background: #fff;
}
:root .site-header .mobile-menu-toggle[aria-expanded="true"] span:not(.sr-only):first-child{
transform: translateY(4.5px) rotate(45deg) !important;
}
:root .site-header .mobile-menu-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(2){
transform: translateY(-4.5px) rotate(-45deg) !important;
}
@media(min-width:901px){
:root .site-header .main-nav,
:root .site-header nav[data-mobile-nav]{
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: clamp(18px, 1.6vw, 28px) !important;
}
:root .site-header .main-nav > a,
:root .site-header nav[data-mobile-nav] > a,
:root .site-header .services-trigger{
display: block;
padding: 0;
font-family: var(--body, "Plus Jakarta Sans", sans-serif) !important;
font-size: .7rem !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
white-space: nowrap;
}
:root .site-header .services-trigger{
display: flex;
align-items: center;
gap: 7px;
border: 0;
background: none;
cursor: pointer;
}
}
:root .hero{
height: auto;
min-height: calc(100svh - var(--u-header));
}
:root .hero-inner{padding-top: 0}
:root .main-nav > a,
:root .site-header nav > a,
:root .main-nav .services-dropdown{position: relative}
:root .main-nav > a::after,
:root .site-header nav > a::after,
:root .main-nav .services-dropdown::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -9px;
height: 2px;
background: var(--acid);
transform: scaleX(0);
transform-origin: left center;
transition: transform .3s cubic-bezier(.22, 1, .36, 1);
pointer-events: none;
}
:root .main-nav > a[aria-current="page"],
:root .site-header nav > a[aria-current="page"],
:root .services-dropdown[data-current] > .services-trigger{
color: var(--acid) !important;
}
:root .main-nav > a[aria-current="page"]::after,
:root .site-header nav > a[aria-current="page"]::after,
:root .main-nav .services-dropdown[data-current]::after{transform: scaleX(1)}
:root .shared-footer{
padding: clamp(58px, 6vw, 76px) 0 24px !important;
border-top: 3px solid var(--acid);
}
:root .shared-footer-top{
display: grid !important;
grid-template-columns:
minmax(0, 1.35fr) minmax(0, .7fr) minmax(0, 1fr)
minmax(0, 1.05fr) minmax(0, .85fr) !important;
gap: clamp(26px, 3vw, 58px) !important;
align-items: start !important;
padding-bottom: clamp(42px, 4.5vw, 56px) !important;
}
:root .shared-footer-bottom{
display: flex !important;
justify-content: space-between !important;
gap: 24px;
padding-top: 22px;
border-top: 1px solid var(--line-dark);
}
:root .shared-footer-copy{max-width: 390px}
:root .wa-float{
position: fixed !important;
right: 22px !important;
bottom: 22px !important;
z-index: 1600 !important;
width: 56px !important;
height: 56px !important;
display: grid !important;
place-items: center !important;
border-radius: 50% !important;
background: var(--acid) !important;
color: var(--ink) !important;
font-size: 0 !important;
text-decoration: none !important;
box-shadow: 0 12px 28px rgba(0, 0, 0, .25) !important;
}
:root .wa-float img{
display: block !important;
width: 28px !important;
height: 28px !important;
}
:root .hero-copy{
margin-left: 0 !important;
max-width: none;
}
:root .hero .eyebrow{margin: 0 0 24px}
:root .hero .hero-lead{margin: 30px 0 0}
:root .hero .hero-actions{margin-top: clamp(30px, 3.4vw, 44px)}
:root .eyebrow{margin-bottom: 24px}
:root .services-dropdown-panel a[aria-current="page"]{
color: var(--acid) !important;
background: rgba(255, 249, 29, .09);
}
@media(min-width:901px){
:root .site-header .services-trigger:hover,
:root .services-dropdown:hover > .services-trigger,
:root .services-dropdown:focus-within > .services-trigger{color: #fff}
:root .services-dropdown:hover .services-trigger-icon,
:root .services-dropdown:focus-within .services-trigger-icon,
:root .services-dropdown.open .services-trigger-icon{transform: rotate(180deg)}
:root .main-nav .services-dropdown{
--drop-pad: calc((var(--u-header) - 12px) / 2);
padding-block: var(--drop-pad);
margin-block: calc(-1 * var(--drop-pad));
}
:root .main-nav .services-dropdown::after{bottom: calc(var(--drop-pad) - 9px)}
:root .services-dropdown-panel{
top: calc(100% + 10px);
left: auto;
right: 0;
width: max-content;
min-width: 250px;
max-width: min(330px, calc(100vw - 48px));
padding: 8px;
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 8px;
background: color-mix(in srgb, var(--ink-deep) 84%, transparent);
backdrop-filter: blur(24px) saturate(1.6);
box-shadow: 0 28px 70px rgba(0, 0, 0, .48),
0 4px 14px rgba(0, 0, 0, .28);
transform: translateY(-8px) scale(.97);
transform-origin: top right;
transition: opacity .24s ease,
transform .42s cubic-bezier(.22, 1, .36, 1),
visibility .24s;
}
:root .services-dropdown-panel::before{inset: -11px 0 auto;height: 11px}
:root .services-dropdown-panel a{
gap: 14px;
padding: 11px 14px !important;
border-bottom: 0;
border-radius: 12px;
color: rgba(255, 255, 255, .72) !important;
opacity: 0;
transform: translateY(-7px);
transition: color .2s ease,
background-color .2s ease,
opacity .3s ease,
transform .42s cubic-bezier(.22, 1, .36, 1) !important;
}
:root .services-dropdown-panel a:nth-child(1){--i: 0}
:root .services-dropdown-panel a:nth-child(2){--i: 1}
:root .services-dropdown-panel a:nth-child(3){--i: 2}
:root .services-dropdown-panel a:nth-child(4){--i: 3}
:root .services-dropdown-panel a:nth-child(5){--i: 4}
:root .services-dropdown-panel a:nth-child(6){--i: 5}
:root .services-dropdown-panel a::after{
opacity: 0;
transform: translate(-5px, 4px);
transition: opacity .2s ease,
transform .32s cubic-bezier(.22, 1, .36, 1);
}
:root .services-dropdown-panel a:hover,
:root .services-dropdown-panel a:focus-visible{
color: #fff !important;
background: rgba(255, 255, 255, .08);
transform: none !important;
}
:root .services-dropdown-panel a:hover::after,
:root .services-dropdown-panel a:focus-visible::after,
:root .services-dropdown-panel a[aria-current="page"]::after{
opacity: 1;
transform: none;
}
:root .services-dropdown:hover .services-dropdown-panel,
:root .services-dropdown:focus-within .services-dropdown-panel,
:root .services-dropdown.open .services-dropdown-panel{
transform: none;
}
:root .services-dropdown:hover .services-dropdown-panel a,
:root .services-dropdown:focus-within .services-dropdown-panel a,
:root .services-dropdown.open .services-dropdown-panel a{
opacity: 1;
transform: none;
transition-delay: calc(var(--i, 0) * 32ms);
}
@media(prefers-reduced-motion:reduce){
:root .services-dropdown-panel,
:root .services-dropdown-panel a,
:root .services-dropdown-panel a::after{
transform: none !important;
transition: none !important;
}
:root .services-dropdown-panel a{opacity: 1}
:root .services-dropdown-panel a::after{opacity: 1}
}
}
@media(max-width:1100px){
:root .section .section-heading,
:root .story > section,
:root .legal-hero-grid{grid-template-columns: 1fr;gap: 26px}
:root .shell.faq-grid,
:root .faq-grid,
:root .case-story{grid-template-columns: 1fr;gap: clamp(30px, 4vw, 48px)}
:root .legal-layout{grid-template-columns: 1fr;gap: 34px}
:root .story > section{grid-template-columns: 46px minmax(0, .8fr) minmax(0, 1fr)}
:root .shared-footer-top{
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 38px 34px !important;
}
}
@media(max-width:900px){
:root{--u-shell: calc(100% - 40px);--u-header: 64px}
:root .site-header .mobile-menu-toggle{
display: flex;
order: 3;
margin-left: auto;
flex: 0 0 44px;
}
:root .hero{
height: auto;
min-height: 100svh;
padding: 0 !important;
}
:root [data-mobile-nav] > a,
:root [data-mobile-nav] .services-trigger{
font-family: var(--ui-display, "Funnel Display", sans-serif) !important;
font-size: 1.22rem !important;
font-weight: 500 !important;
line-height: 1.15 !important;
letter-spacing: -.02em !important;
text-transform: none !important;
}
:root [data-mobile-nav] .services-dropdown-panel a{
font-family: var(--ui-body, "Plus Jakarta Sans", sans-serif) !important;
font-size: .8rem !important;
font-weight: 500 !important;
line-height: 1.4 !important;
letter-spacing: .01em !important;
text-transform: none !important;
}
:root .main-nav > a::after,
:root .site-header nav > a::after,
:root .main-nav .services-dropdown::after{display: none}
:root .story > section{grid-template-columns: 40px minmax(0, 1fr)}
:root .story > section > p{grid-column: 2;max-width: none}
:root .industry-hero-media::after,
:root .portfolio-hero::before,
:root .hero-wash{
background: linear-gradient(180deg,
rgba(9, 13, 14, .14) 0%,
rgba(9, 13, 14, .18) 24%,
rgba(9, 13, 14, .62) 50%,
rgba(9, 13, 14, .88) 100%) !important;
}
:root .shared-footer-top{
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important;
gap: 34px 28px !important;
}
:root .shared-footer-bottom{flex-direction: column !important;gap: 12px}
:root .cta-inner{grid-template-columns: 1fr;gap: 32px}
:root .cta-inner .button{justify-self: start}
:root .metrics-grid > div:nth-child(3){
border-left: 1px solid rgba(36, 41, 43, .28);
padding-left: 36px;
}
:root main h1,
:root .industry-hero h1,
:root .page-hero h1,
:root .case-hero h1,
:root .hero h1{max-width: 16ch}
:root main h2,
:root .section-heading h2,
:root .section-intro h2,
:root .system-grid h2,
:root .related-heading h2,
:root .cta-inner h2,
:root .semantic-industry-section h2,
:root .semantic-expansion > h2,
:root .cta-band h2,
:root .section-title{max-width: 20ch}
}
@media(max-width:760px){
:root main h1,
:root .industry-hero h1,
:root .hero h1,
:root .case-hero h1,
:root .legal-hero h1{
font-size: clamp(2rem, 1.24rem + 3.27vw, 2.5rem) !important;
line-height: .98 !important;
letter-spacing: -.04em;
max-width: none;
}
:root .method-list .method-item{
min-height: 0 !important;
padding: 0 !important;
overflow: hidden;
}
:root .method-list .method-trigger{
padding: 20px 18px !important;
grid-template-columns: 62px 1fr 24px;
}
:root .method-list .method-item > p{
max-height: 0;
padding: 0 18px 0 92px !important;
}
:root .method-list .method-item.open > p{
max-height: 220px;
padding-bottom: 20px !important;
}
:root .hero-brk{display: none}
:root .retail-feature{margin-inline: 0 !important}
}
@media(max-width:620px){
:root{--u-shell: calc(100% - 32px)}
:root .faq-list summary,
:root .faq-item summary{padding: 20px 18px !important;gap: 16px}
:root .faq-list details p,
:root .faq-item p{padding: 0 18px 22px !important}
:root .metrics-grid > div:first-child,
:root .metrics-grid > div:nth-child(3){padding-left: 15px}
:root .shared-footer-top{grid-template-columns: 1fr !important;gap: 28px !important}
:root .wa-float{
right: 15px !important;
bottom: 15px !important;
width: 50px !important;
height: 50px !important;
}
:root .wa-float img{width: 25px !important;height: 25px !important}
}
@media(min-width:901px){
:root .industry-hero,
:root .hero{align-items: center}
:root .industry-hero-content,
:root .hero-inner{
align-self: center;
padding-block: clamp(80px, 9vh, 120px) !important;
}
:root .industry-hero h1,
:root .hero h1,
:root .case-hero h1,
:root .legal-hero h1{
overflow-wrap: normal;
word-break: normal;
hyphens: manual;
text-wrap: wrap;
}
:root .industry-hero h1{max-width: 13.79ch}
:root .industry-hero .hero-lead,
:root .hero .hero-lead,
:root .case-hero .lead,
:root .legal-hero .legal-intro{max-width: min(42vw, 62ch)}
:root .hero h1{max-width: 15.7ch}
:root .industry-hero-media::after,
:root .hero-wash{
background: linear-gradient(90deg,
rgba(9, 13, 14, .92) 0%,
rgba(9, 13, 14, .60) 30%,
rgba(9, 13, 14, .16) 60%,
rgba(9, 13, 14, .04) 100%) !important;
}
}
:root .work .case-card{
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: clamp(360px, 27vw, 470px);
padding: clamp(22px, 2.2vw, 32px) !important;
background: var(--ink);
overflow: hidden !important;
isolation: isolate;
}
:root .work .case-grid .case-card:nth-child(1),
:root .work .case-grid .case-card:nth-child(6),
:root .work .case-grid .case-card:nth-child(11),
:root .work .case-grid .case-card:nth-child(16),
:root .work .case-grid .case-card:nth-child(21){
min-height: clamp(400px, 31vw, 540px);
}
:root .work .case-card img{
position: absolute;
inset: 0;
z-index: 0;
width: 100% !important;
height: 100% !important;
max-width: none;
margin: 0 !important;
aspect-ratio: auto !important;
object-fit: cover;
filter: none !important;
transform: scale(1.015);
transition: transform 1.05s cubic-bezier(.22, 1, .36, 1) !important;
}
:root .work .case-card::before{
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg,
rgba(8, 11, 12, 0) 38%,
rgba(8, 11, 12, .48) 66%,
rgba(8, 11, 12, .88) 100%);
transition: opacity .5s ease;
}
:root .work .case-card > *{position: relative;z-index: 2}
:root .work .case-card p{
color: rgba(255, 255, 255, .74);
min-height: 0;
}
:root .work .case-card i{z-index: 3}
@media(hover:hover){
:root .work .case-card:hover img{transform: scale(1.075)}
:root .work .case-card:hover::before{opacity: .82}
:root .work .case-card:hover{background: var(--ink);transform: none}
}
:root .case-grid .case-card{
min-height: clamp(380px, 32vw, 560px);
}
:root .case-card img{filter: none !important}
:root .case-card::after{
background: linear-gradient(180deg,
rgba(8, 11, 12, 0) 40%,
rgba(8, 11, 12, .48) 68%,
rgba(8, 11, 12, .9) 100%);
transition: opacity .5s ease;
}
@media(hover:hover){
:root .case-grid .case-card:hover img{transform: scale(1.075)}
:root .case-grid .case-card:hover::after{opacity: .85}
}
:root .gallery img{
height: clamp(420px, 42vw, 660px);
transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
@media(hover:hover){
:root .gallery img:hover{transform: scale(1.03)}
}
:root .cover{
max-height: clamp(520px, 56vw, 820px);
}
:root .site-header{
transition: background-color .35s ease,
border-color .35s ease,
backdrop-filter .35s ease;
}
:root .site-header:not(.is-scrolled){
background: transparent;
border-bottom-color: transparent;
backdrop-filter: none;
}
:root .site-header.is-scrolled{
background: color-mix(in srgb, var(--ink-deep) 80%, transparent);
border-bottom-color: rgba(255, 255, 255, .10);
backdrop-filter: blur(20px) saturate(1.5);
}
:root .site-header:has([data-mobile-nav].open),
:root .site-header.nav-open{
background: var(--ink-deep) !important;
backdrop-filter: none !important;
}
:root .reveal{opacity: 1;transform: none}
html.anim-ready .reveal{
opacity: 0;
transform: translateY(28px);
transition: opacity .75s cubic-bezier(.22, 1, .36, 1),
transform .85s cubic-bezier(.22, 1, .36, 1);
}
html.anim-ready .reveal.visible{opacity: 1;transform: none}
html.anim-ready [data-stagger] > *{opacity: 0}
html.anim-ready [data-stagger].in > *{
opacity: 1;
animation: gt-rise .8s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms) both;
}
@keyframes gt-rise{
from{opacity: 0;transform: translateY(24px) scale(.988)}
to{opacity: 1;transform: none}
}
html.anim-ready .case-grid[data-stagger].in > *,
html.anim-ready .gallery[data-stagger].in > *{
animation-name: gt-rise-strong;
animation-duration: .95s;
}
@keyframes gt-rise-strong{
from{opacity: 0;transform: translateY(40px) scale(.972)}
to{opacity: 1;transform: none}
}
@media(prefers-reduced-motion:reduce){
html.anim-ready .reveal,
html.anim-ready [data-stagger] > *{
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
}
:root .site-header{transition: none}
}
:root .site-header{
position: fixed;
inset: 0 0 auto;
}
:root .hero,
:root .industry-hero{
min-height: 100svh;
}
:root .work{overflow-x: clip}
:root .work .case-grid{
--gal-inset: clamp(23px, 23px + (100vw - 1710px) * .09, 60px);
width: auto;
max-width: none;
margin-inline: calc(50% - 50vw + var(--gal-inset));
}
body{--section-accent: var(--accent, var(--acid))}
:root .semantic-industry-section{--section-accent: inherit}
:root .service-link[href*="packaging.html"]{--card-accent: var(--cyan)}
:root .service-link[href*="branding.html"]{--card-accent: var(--coral)}
:root .service-link[href*="3d.html"]{--card-accent: var(--violet)}
:root .service-link[href*="interactivo.html"]{--card-accent: var(--blue)}
:root .strategy-card,
:root .system-step,
:root .service-link{position: relative}
:root .strategy-card::before,
:root .system-step::before,
:root .service-link::before{
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--card-accent, var(--section-accent));
transform: scaleX(.22);
transform-origin: left center;
transition: transform .35s cubic-bezier(.22, 1, .36, 1);
pointer-events: none;
}
@media(hover:hover){
:root .strategy-card:hover::before,
:root .system-step:hover::before,
:root .service-link:hover::before{transform: scaleX(1)}
}
:root .card-label{
display: flex;
align-items: center;
gap: 10px;
color: var(--text-2);
}
:root .card-label::before{
content: "";
flex: 0 0 18px;
width: 18px;
height: 2px;
background: var(--card-accent, var(--section-accent));
}
:root .check-list li::before,
:root .svc-list li::before{
top: calc(16px + (1.45em - 7px) / 2) !important;
width: 7px !important;
height: 7px !important;
border-radius: 2px !important;
background: var(--card-accent, var(--section-accent)) !important;
}
:root .faq-list > details,
:root .faq-item{position: relative}
:root .faq-list > details::before,
:root .faq-item::before{
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--section-accent);
transform: scaleY(0);
transform-origin: top center;
transition: transform .35s cubic-bezier(.22, 1, .36, 1);
pointer-events: none;
}
:root .faq-list > details[open]::before,
:root .faq-item[open]::before{transform: scaleY(1)}
@media(hover:hover){
:root .faq-list > details:hover::before,
:root .faq-item:hover::before{transform: scaleY(1)}
}
:root .system-step b{
display: flex;
align-items: center;
gap: 10px;
color: var(--section-accent);
}
:root .system-step b::before{
content: "";
flex: 0 0 18px;
width: 18px;
height: 2px;
background: var(--section-accent);
}
:root .strategy-card .button{
background: var(--section-accent) !important;
border-color: var(--section-accent) !important;
color: var(--ink) !important;
}
:root .strategy-card .button:hover,
:root .strategy-card .button:focus-visible{
background: var(--ink) !important;
border-color: var(--ink) !important;
color: var(--surface) !important;
}
:root .service-link small{
color: var(--text-2);
font-weight: 700;
}
:root .semantic-related a{text-decoration-color: var(--section-accent)}
:root .semantic-industry-card:nth-child(4n+1){--card-accent: var(--acid)}
:root .semantic-industry-card:nth-child(4n+2){--card-accent: var(--cyan)}
:root .semantic-industry-card:nth-child(4n+3){--card-accent: var(--coral)}
:root .semantic-industry-card:nth-child(4n+4){--card-accent: var(--violet)}
@media(prefers-reduced-motion:reduce){
:root .strategy-card::before,
:root .system-step::before,
:root .service-link::before,
:root .faq-list > details::before,
:root .faq-item::before{transition: none}
}
:root body,
:root .about,
:root .clients,
:root .home-industries,
:root .services,
:root .page-industry .industry-hero-sequence > .section,
:root .section-alt,
:root .semantic-industry-section{
background-image: url("../images/background-grain.webp");
background-blend-mode: overlay;
background-attachment: fixed;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
:root .work,
:root .method,
:root .case-hero,
:root .page-service main > .industry-hero + .section,
:root .system-section{--tex-base: var(--ink)}
:root .contact{--tex-base: #171b1c}
:root .shared-footer{--tex-base: var(--ink-deep)}
:root .work,
:root .method,
:root .case-hero,
:root .page-service main > .industry-hero + .section,
:root .system-section,
:root .contact,
:root .shared-footer{
background-image:
linear-gradient(color-mix(in srgb, var(--tex-base) 65%, transparent),
color-mix(in srgb, var(--tex-base) 65%, transparent)),
url("../images/background-grain.webp");
background-blend-mode: normal, soft-light;
background-attachment: fixed;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
:root .about-media.scroll-video{
contain: none;
}
:root .scroll-video-sticky::after{
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background-image:
linear-gradient(rgba(255, 255, 255, .88), rgba(255, 255, 255, .88)),
url("../images/background-grain.webp");
background-attachment: scroll;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
mix-blend-mode: darken;
}
@media print{
:root .scroll-video-sticky::after{display: none}
}
@media print{
:root body,
:root .about,
:root .clients,
:root .home-industries,
:root .services,
:root .page-industry .industry-hero-sequence > .section,
:root .section-alt,
:root .semantic-industry-section,
:root .work,
:root .method,
:root .page-service main > .industry-hero + .section,
:root .system-section,
:root .contact,
:root .shared-footer{background-image: none}
}
:root .industry-hero-media::before{
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: .13;
background-image:
linear-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .18) 1px, transparent 1px);
background-size: 80px 80px;
-webkit-mask-image: linear-gradient(90deg, #000, transparent 72%);
mask-image: linear-gradient(90deg, #000, transparent 72%);
}
:root .about.section-pad{padding-bottom: 0 !important}
:root .scroll-video-fallback{
object-fit: contain;
object-position: center;
filter: none;
}
@media(max-width:620px){
:root .scroll-video-fallback{
object-fit: cover;
object-position: center center;
}
}
@media(max-width:520px){
:root .facts{
grid-template-columns: 1fr 1fr;
gap: 22px 16px;
}
:root .facts div{padding-right: 8px}
}
@keyframes industry-hero-zoom{
from{transform: scale(1.025)}
to{transform: scale(1.07)}
}
:root .page-industry .industry-hero-sequence > .industry-hero{
position: sticky;
top: 0;
z-index: 0;
isolation: isolate;
}
:root .page-industry .industry-hero-media img{
animation: industry-hero-zoom 20s cubic-bezier(.2,.55,.25,1) both;
transform-origin: center center;
will-change: transform;
}
:root .page-industry .industry-hero-sequence > .section{
position: relative;
z-index: 1;
background-color: var(--paper);
box-shadow: 0 -22px 44px rgba(9,13,14,.08);
}
@media(prefers-reduced-motion:reduce){
:root .page-industry .industry-hero-sequence > .industry-hero{
position: relative;
top: auto;
}
:root .page-industry .industry-hero-media img{
animation: none;
transform: none;
will-change: auto;
}
}
:root .about .pillars p,
:root .about .market-note{
font-size: var(--t-body) !important;
line-height: var(--lh-body);
}
:root .about-media.scroll-video{
--scroll-video-travel: clamp(1400px, 220svh, 2200px);
position: relative;
height: calc(100svh - var(--u-header) + var(--scroll-video-travel));
min-height: 0;
overflow: visible;
isolation: auto;
background: #eeece8;
}
:root .scroll-video-sticky{
position: sticky;
top: var(--u-header);
height: calc(100svh - var(--u-header));
overflow: hidden;
isolation: isolate;
contain: paint;
background: #eeece8;
will-change: transform;
}
:root .scroll-video.is-static{
height: calc(100svh - var(--u-header));
}
:root .scroll-video.is-static .scroll-video-sticky{
position: relative;
top: auto;
will-change: auto;
}
@media (max-width: 620px){
:root .about-media.scroll-video{
--scroll-video-travel: clamp(1200px, 190svh, 1800px);
}
}
@media (prefers-reduced-motion: reduce){
:root .about-media.scroll-video{
height: calc(100svh - var(--u-header));
}
:root .scroll-video-sticky{
position: relative;
top: auto;
will-change: auto;
}
}
@media print{
:root .about-media.scroll-video,
:root .scroll-video-sticky{
height: auto;
min-height: 480px;
position: relative;
top: auto;
}
}
:root .facts.facts-compact{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
:root .gallery .case-media{
position: relative;
overflow: hidden;
background: #e8e5df;
border-radius: var(--vr-radius-card, 22px);
}
:root .gallery .case-media video{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
background: #e8e5df;
border-radius: inherit;
}
:root .gallery .case-media-square{
height: clamp(420px, 42vw, 660px);
aspect-ratio: auto;
}
:root .gallery .case-media-wide{
grid-column: 1 / -1;
aspect-ratio: 16 / 9;
}
@media (max-width: 520px){
:root .facts.facts-compact{
grid-template-columns: 1fr;
}
:root .gallery .case-media-wide{
grid-column: auto;
}
}
:root .interactive-video-showcase{
margin-top: clamp(64px, 7vw, 112px);
padding-top: clamp(48px, 5vw, 80px);
border-top: 1px solid rgba(255,255,255,.14);
}
:root .interactive-video-heading{
display: grid;
grid-template-columns: minmax(180px, .75fr) minmax(0, 1.55fr);
gap: clamp(32px, 5vw, 88px);
align-items: start;
margin-bottom: clamp(34px, 4vw, 58px);
}
:root .interactive-video-heading h2{
max-width: 820px;
margin: 0 0 18px;
color: #fff;
font-family: var(--display);
font-size: clamp(2rem, 3.35vw, 4rem);
line-height: 1.02;
letter-spacing: -.045em;
}
:root .interactive-video-heading p:not(.eyebrow){
max-width: 760px;
margin: 0;
color: rgba(255,255,255,.68);
line-height: 1.65;
}
:root .interactive-video-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(24px, 3vw, 42px);
}
:root .interactive-video-card{
overflow: hidden;
background: rgba(255,255,255,.075);
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--vr-radius-card, 22px);
}
:root .interactive-video-thumb{
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
aspect-ratio: 16 / 9;
border: 0;
background: #111719;
cursor: pointer;
}
:root .interactive-video-thumb img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .55s ease, filter .35s ease;
}
:root .interactive-video-thumb::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(5,9,10,.38));
pointer-events: none;
}
:root .interactive-video-thumb:hover img,
:root .interactive-video-thumb:focus-visible img{
transform: scale(1.025);
filter: brightness(.9);
}
:root .interactive-video-thumb:focus-visible{
outline: 3px solid var(--acid, #FFE800);
outline-offset: 4px;
z-index: 1;
}
:root .interactive-play{
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
display: grid;
place-items: center;
width: clamp(58px, 5vw, 76px);
height: clamp(58px, 5vw, 76px);
padding-left: 4px;
border-radius: 50%;
color: #171c1e;
background: var(--acid, #FFE800);
box-shadow: 0 18px 44px rgba(0,0,0,.34);
transform: translate(-50%, -50%);
transition: transform .25s ease;
}
:root .interactive-video-thumb:hover .interactive-play{
transform: translate(-50%, -50%) scale(1.08);
}
:root .interactive-video-copy{
padding: clamp(22px, 2.5vw, 34px);
}
:root .interactive-video-meta{
margin: 0 0 12px;
color: var(--acid, #FFE800);
font-size: .72rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
}
:root .interactive-video-copy h3{
margin: 0 0 12px;
color: #fff;
font-family: var(--display);
font-size: clamp(1.35rem, 2vw, 2rem);
line-height: 1.08;
letter-spacing: -.025em;
}
:root .interactive-video-copy > p:not(.interactive-video-meta){
margin: 0;
color: rgba(255,255,255,.68);
line-height: 1.65;
}
:root .interactive-video-modal[hidden]{
display: none !important;
}
:root .interactive-video-modal{
position: fixed;
z-index: 10000;
inset: 0;
display: grid;
place-items: center;
padding: clamp(18px, 4vw, 60px);
background: rgba(4, 7, 8, .94);
}
:root .interactive-video-dialog{
position: relative;
width: min(1180px, 100%);
overflow: hidden;
background: #111719;
border: 1px solid rgba(255,255,255,.16);
border-radius: var(--vr-radius-card, 22px);
box-shadow: 0 32px 100px rgba(0,0,0,.56);
}
:root .interactive-video-dialog.is-portrait{
width: min(480px, calc((100vh - 150px) * .5625), 100%);
}
:root .interactive-video-close{
position: absolute;
z-index: 3;
top: 14px;
right: 14px;
display: grid;
place-items: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
padding: 0 0 4px;
border: 1px solid rgba(255,255,255,.3);
border-radius: 50%;
color: #fff;
background: rgba(10,14,15,.72);
backdrop-filter: blur(8px);
font-size: 2rem;
line-height: 1;
cursor: pointer;
}
:root .interactive-video-close:hover,
:root .interactive-video-close:focus-visible{
color: #111719;
background: var(--acid, #FFE800);
border-color: var(--acid, #FFE800);
}
:root .interactive-video-dialog video{
display: block;
width: 100%;
max-height: calc(100vh - 150px);
aspect-ratio: 16 / 9;
background: #000;
}
:root .interactive-video-dialog.is-portrait video{
aspect-ratio: 9 / 16;
object-fit: contain;
}
:root body.interactive-modal-open{
overflow: hidden;
}
@media (max-width: 760px){
:root .interactive-video-heading,
:root .interactive-video-grid{
grid-template-columns: 1fr;
}
:root .interactive-video-heading{
gap: 20px;
}
:root .interactive-video-modal{
padding: 12px;
}
:root .interactive-video-dialog video{
max-height: calc(100vh - 100px);
}
}
@media (prefers-reduced-motion: reduce){
:root .interactive-video-thumb img,
:root .interactive-play{
transition: none;
}
}
:root .ia-motion-showcase .interactive-video-grid{
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(18px, 2vw, 28px);
}
:root .ia-motion-showcase .interactive-video-thumb{
aspect-ratio: 9 / 16;
}
:root .ia-motion-showcase .interactive-video-copy{
padding: 16px clamp(16px, 1.6vw, 22px) 20px;
}
:root .ia-motion-showcase .interactive-video-copy h3{
font-size: clamp(1.2rem, 1.55vw, 1.55rem);
}
@media (max-width: 1100px){
:root .ia-motion-showcase .interactive-video-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px){
:root .ia-motion-showcase .interactive-video-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
:root .ia-motion-showcase .interactive-video-copy{
padding: 12px 12px 16px;
}
:root .ia-motion-showcase .interactive-video-meta{
margin: 0;
font-size: .56rem;
line-height: 1.35;
letter-spacing: .07em;
}
:root .ia-motion-showcase .interactive-play{
width: 48px;
height: 48px;
font-size: .8rem;
box-shadow: 0 10px 24px rgba(0,0,0,.34);
}
}
:root{
--space-topic: clamp(28px, 3vw, 48px);
--space-section: clamp(82px, 8vw, 130px);
--space-major: clamp(110px, 11vw, 170px);
}
:root .section-pad{padding-block: var(--space-section)}
:root .home-featured-grid{
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
grid-auto-flow: row !important;
}
:root .home-featured-grid .case-card,
:root .home-featured-grid .case-card:nth-child(n){grid-column: span 1 !important}
:root .home-featured-grid .case-card:nth-child(6n + 1),
:root .home-featured-grid .case-card:nth-child(6n),
:root .home-featured-grid .case-card:nth-last-child(2),
:root .home-featured-grid .case-card:last-child{grid-column: span 2 !important}
:root .work .home-featured-grid .case-card:nth-child(n){
min-height: clamp(410px, 31vw, 540px);
}
:root .home-featured-grid .case-card img,
:root .home-featured-grid .case-card:nth-child(n) img{aspect-ratio: 1 / 1 !important}
:root .portfolio-full-cta{display: flex;justify-content: center;margin-top: var(--space-topic)}
:root .portfolio-hero{
position: relative;
isolation: isolate;
display: flex;
align-items: center;
min-height: clamp(660px, 78vh, 860px);
overflow: hidden;
padding-top: clamp(150px, 13vw, 210px);
padding-bottom: clamp(72px, 7vw, 110px);
background: var(--ink);
color: #fff;
}
:root .portfolio-hero-media,
:root .portfolio-hero::before,
:root .portfolio-hero::after{
position: absolute;
inset: 0;
}
:root .portfolio-hero-media{z-index: 0}
:root .portfolio-hero-media img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.015);
}
:root .portfolio-hero::before{
content: "";
z-index: 1;
background:
linear-gradient(90deg, rgba(10,14,15,.91) 0%, rgba(10,14,15,.76) 42%, rgba(10,14,15,.34) 72%, rgba(10,14,15,.18) 100%),
linear-gradient(180deg, rgba(10,14,15,.56) 0%, transparent 34%, rgba(10,14,15,.34) 100%);
}
:root .portfolio-hero::after{
content: "";
z-index: 2;
background: url("../images/background-grain.webp") center / cover fixed no-repeat;
mix-blend-mode: soft-light;
opacity: .22;
pointer-events: none;
}
:root .portfolio-hero-content{
position: relative;
z-index: 3;
}
:root .portfolio-hero h1{
max-width: 1080px;
margin-top: 22px;
font-family: var(--display);
font-size: clamp(2.8rem, 5.4vw, 5.6rem);
font-weight: 600;
line-height: .94;
letter-spacing: -.055em;
color: #fff;
text-shadow: 0 3px 30px rgba(0,0,0,.34);
}
:root .portfolio-lead{
max-width: 880px;
margin-top: 32px;
color: rgba(255,255,255,.82);
font-size: clamp(1rem, 1.35vw, 1.25rem);
line-height: 1.7;
}
:root .portfolio-hero .eyebrow{color: rgba(255,255,255,.72)}
:root .portfolio-hero .eyebrow span{color: var(--acid)}
:root .portfolio-work{
--tex-base: var(--ink);
padding-top: clamp(76px, 7vw, 112px);
background-color: var(--ink);
color: #fff;
}
:root .portfolio-case-grid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-flow: row;
gap: var(--vr-gap, 24px);
--gal-inset: clamp(23px, 23px + (100vw - 1710px) * .09, 60px);
width: auto;
max-width: none;
margin-inline: calc(50% - 50vw + var(--gal-inset));
background: transparent;
border: 0;
}
:root .portfolio-case-grid .case-card:nth-child(6n + 1),
:root .portfolio-case-grid .case-card:nth-child(6n){
grid-column: span 2;
}
:root .portfolio-case-grid .case-card:nth-last-child(2),
:root .portfolio-case-grid .case-card:last-child{
grid-column: span 2;
}
:root .portfolio-case-grid .case-card{
min-height: clamp(410px, 31vw, 540px);
}
:root .portfolio-case-grid .case-card img{aspect-ratio: 1 / 1}
:root .shared-footer-group{min-width: 0}
:root .shared-footer-group summary{display: none}
:root .shared-footer-group > .shared-footer-links{display: flex !important}
@media (min-width: 1101px){
:root .shared-footer-brand{grid-column: 1}
:root .shared-footer-group:nth-of-type(3){grid-column: 2;grid-row: 1}
:root .shared-footer-group:nth-of-type(1){grid-column: 3;grid-row: 1}
:root .shared-footer-group:nth-of-type(2){grid-column: 4;grid-row: 1}
:root .shared-footer-contact{grid-column: 5;grid-row: 1}
}
@media (max-width: 1199px) and (min-width: 768px){
:root .portfolio-case-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
:root .portfolio-case-grid .case-card:nth-child(n){grid-column: span 1}
:root .home-featured-grid{grid-template-columns: repeat(2, minmax(0, 1fr)) !important}
:root .home-featured-grid .case-card:nth-child(n){grid-column: span 1 !important}
}
@media (max-width: 767px){
:root{
--space-topic: 28px;
--space-section: 68px;
--space-major: 92px;
}
:root .section-pad{padding-block: var(--space-section)}
:root .home-featured-grid,
:root .portfolio-case-grid{grid-template-columns: minmax(0, 1fr) !important}
:root .home-featured-grid .case-card,
:root .portfolio-case-grid .case-card{min-height: 0}
:root .portfolio-case-grid .case-card:nth-child(n){grid-column: span 1}
:root .work .home-featured-grid .case-card:nth-child(n),
:root .work .portfolio-case-grid .case-card:nth-child(n){
grid-column: span 1 !important;
min-height: 0;
aspect-ratio: 1 / 1;
}
:root .portfolio-hero{
min-height: 720px;
padding-top: 128px;
padding-bottom: 58px;
}
:root .portfolio-hero-media img{object-position: 42% center}
:root .portfolio-hero::before{
background:
linear-gradient(90deg, rgba(10,14,15,.88), rgba(10,14,15,.56)),
linear-gradient(180deg, rgba(10,14,15,.52) 0%, rgba(10,14,15,.14) 34%, rgba(10,14,15,.72) 100%);
}
:root .portfolio-hero h1{font-size: clamp(2.8rem, 13vw, 4.1rem)}
:root .portfolio-lead{margin-top: 24px;font-size: .98rem}
:root .portfolio-work{padding-top: 58px}
:root body:not(.page-portfolio) .services .service-rows{
display: flex;
grid-template-columns: none;
gap: 12px;
margin-inline: -16px;
padding-inline: 16px;
padding-top: 12px;
padding-bottom: 28px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: 16px;
overscroll-behavior-inline: contain;
scrollbar-width: none;
border-inline: 0;
background: transparent;
}
:root body:not(.page-portfolio) .services .service-rows::-webkit-scrollbar{display: none}
:root body:not(.page-portfolio) .services .service-row{
flex: 0 0 86%;
min-height: 390px;
padding: 30px 24px;
scroll-snap-align: start;
border: 1px solid var(--line);
background: #f5f3ee;
}
:root .industry-card-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
:root .industry-card-grid a,
:root .industry-card-grid a:nth-child(2n),
:root .industry-card-grid a:nth-last-child(-n+2){
min-height: 106px;
padding: 16px;
border-right: 1px solid #d2d0ca;
border-bottom: 1px solid #d2d0ca;
}
:root .industry-card-grid a:nth-child(2n){border-right: 0}
:root .industry-card-grid a:nth-last-child(-n+2){border-bottom: 0}
:root .industry-card-grid strong{font-size: 1rem;line-height: 1.15}
:root .service-links{grid-template-columns: repeat(2, minmax(0, 1fr)) !important;gap: 1px}
:root .service-links .service-link{min-height: 118px;padding: 20px 16px}
:root .service-links .service-link strong{font-size: 1rem;line-height: 1.2}
:root .cta-band.section{padding-block: 48px !important}
:root .cta-band .cta-inner{gap: 22px}
:root .cta-band h2{font-size: clamp(2rem, 9.5vw, 2.8rem)}
:root .cta-band p{margin-top: 14px}
:root .shared-footer{padding-top: 48px}
:root .shared-footer-top{display: flex;flex-direction: column;gap: 0;padding-bottom: 34px}
:root .shared-footer-brand{margin-bottom: 28px}
:root .shared-footer-contact{order: 2;margin-bottom: 25px}
:root .shared-footer-group{order: 3;width: 100%;border-top: 1px solid var(--ui-line)}
:root .shared-footer-group:last-of-type{border-bottom: 1px solid var(--ui-line)}
:root .shared-footer-group summary{
display: flex;
align-items: center;
justify-content: space-between;
padding: 17px 0;
color: var(--ui-acid);
font-family: var(--ui-body);
font-size: .64rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
cursor: pointer;
list-style: none;
}
:root .shared-footer-group summary::-webkit-details-marker{display: none}
:root .shared-footer-group summary span{font-size: 1rem;transition: transform .2s ease}
:root .shared-footer-group[open] summary span{transform: rotate(45deg)}
:root .shared-footer-group:not([open]) > .shared-footer-links{display: none !important}
:root .shared-footer-group[open] > .shared-footer-links{display: flex !important;padding: 0 0 18px}
}
@media (max-width: 900px){
:root .portfolio-hero{
min-height: 100svh;
align-items: end;
padding-top: 145px;
padding-bottom: 50px;
}
}
:root .services{background-color: #eeece8}
@media (max-width: 900px){
:root body:not(.page-portfolio) .services .service-rows{
overflow-y: hidden;
border-top: 0;
}
}
@media (max-width: 900px){
:root .system-steps{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px !important;
}
:root .system-step{min-height: 0}
}
@media (max-width: 767px){
:root .system-step{padding: 16px 14px !important}
:root .system-step b{
margin-bottom: 14px;
gap: 7px;
font-size: .62rem;
}
:root .system-step b::before{
flex-basis: 12px;
width: 12px;
}
:root .system-step strong{
margin-bottom: 6px;
font-size: 1.02rem;
line-height: 1.2;
}
:root .system-step p{
font-size: .76rem;
line-height: 1.45;
}
}
@media (max-width: 900px){
:root .semantic-industry-grid,
:root .case-grid:not(.home-featured-grid):not(.portfolio-case-grid){
display: flex !important;
grid-template-columns: none !important;
grid-auto-flow: row !important;
gap: 12px !important;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
scroll-snap-type: x mandatory;
margin-inline: -16px;
padding-inline: 16px;
scroll-padding-inline: 16px;
padding-top: 12px;
padding-bottom: 28px;
scrollbar-width: none;
border: 0;
background: transparent;
}
:root .semantic-industry-grid::-webkit-scrollbar,
:root .case-grid:not(.home-featured-grid):not(.portfolio-case-grid)::-webkit-scrollbar{
display: none;
}
:root .semantic-industry-grid > .semantic-industry-card{
flex: 0 0 86%;
scroll-snap-align: start;
}
:root .case-grid:not(.home-featured-grid):not(.portfolio-case-grid) > .case-card{
flex: 0 0 80%;
min-height: 340px;
scroll-snap-align: start;
}
:root .related-heading{
display: grid;
gap: 16px;
margin-bottom: 24px;
}
}
@media (min-width: 768px) and (max-width: 900px){
:root .semantic-industry-grid,
:root .case-grid:not(.home-featured-grid):not(.portfolio-case-grid){
margin-inline: -20px;
padding-inline: 20px;
scroll-padding-inline: 20px;
}
}
:root .ia-motion-showcase .interactive-video-copy{display: none}
:root .ia-motion-showcase .interactive-video-card{
background: transparent;
border: 0;
}
:root .ia-motion-showcase [data-video-crop="1"]{overflow: hidden}
:root .ia-motion-showcase [data-video-crop="1"] img{
transform: scale(1.0257);
}
:root .ia-motion-showcase [data-video-crop="1"]:hover img,
:root .ia-motion-showcase [data-video-crop="1"]:focus-visible img{
transform: scale(1.0513);
}
:root .interactive-video-dialog.is-cropped{overflow: hidden}
:root .interactive-video-dialog.is-cropped video{
transform: scale(1.0257);
}
@media (prefers-reduced-motion: reduce){
:root .ia-motion-showcase [data-video-crop="1"]:hover img,
:root .ia-motion-showcase [data-video-crop="1"]:focus-visible img{
transform: scale(1.0257);
}
}
@media (max-width: 900px){
:root main > .legal-hero{
margin-top: -62px;
padding-top: 110px !important;
}
}
html.anim-ready :is(.hero, .industry-hero, .portfolio-hero,
.legal-hero, .case-hero) .reveal{
opacity: 1;
transform: none;
transition: none;
}
:root .industry-card-grid a::after{
content: "";
position: absolute;
right: 14px;
top: 14px;
width: 50px;
height: 50px;
background: center / contain no-repeat;
opacity: .14;
pointer-events: none;
transition: opacity .3s ease, transform .3s ease;
}
@media (min-width: 621px) and (max-width: 767px){
:root .industry-card-grid a::after{top: 10px}
}
@media (min-width: 1360px){
:root .industry-card-grid a::after{
right: 18px;
top: 18px;
width: 62px;
height: 62px;
}
}
:root .industry-card-grid a:nth-child(1)::after{background-image: url("../images/industries/01.webp")}
:root .industry-card-grid a:nth-child(2)::after{background-image: url("../images/industries/02.webp")}
:root .industry-card-grid a:nth-child(3)::after{background-image: url("../images/industries/03.webp")}
:root .industry-card-grid a:nth-child(4)::after{background-image: url("../images/industries/04.webp")}
:root .industry-card-grid a:nth-child(5)::after{background-image: url("../images/industries/05.webp")}
:root .industry-card-grid a:nth-child(6)::after{background-image: url("../images/industries/06.webp")}
@media (hover: hover){
:root .industry-card-grid a:hover::after{
opacity: .26;
transform: scale(1.07);
}
}
@media (max-width: 559px){
:root .industry-card-grid a::after{
right: 13px;
top: 13px;
width: 72px;
height: 72px;
opacity: .17;
}
}
@media (prefers-reduced-motion: reduce){
:root .industry-card-grid a::after{transition: none}
:root .industry-card-grid a:hover::after{transform: none}
}
:root .page-service main > .industry-hero + .section{
background-color: var(--ink);
color: #fff;
}
:root .page-service main > .industry-hero + .section .section-heading h2,
:root .page-service main > .industry-hero + .section .strategy-card h3{color: #fff}
:root .page-service main > .industry-hero + .section .section-heading h2 span,
:root .page-service main > .industry-hero + .section .section-heading h2 em{color: rgba(255, 255, 255, .48)}
:root .page-service main > .industry-hero + .section .eyebrow{color: rgba(255, 255, 255, .63)}
:root .page-service main > .industry-hero + .section .section-heading .intro{color: rgba(255, 255, 255, .72)}
:root .page-service main > .industry-hero + .section .strategy-card{
background-color: rgba(255, 255, 255, .045) !important;
}
:root .page-service main > .industry-hero + .section .strategy-card:nth-child(2n){
background-color: rgba(255, 255, 255, .075) !important;
}
:root .page-service main > .industry-hero + .section .strategy-card .card-label{color: rgba(255, 255, 255, .5)}
:root .page-service main > .industry-hero + .section .strategy-card p{color: rgba(255, 255, 255, .72)}
:root .page-service main > .industry-hero + .section .check-list li,
:root .page-service main > .industry-hero + .section .svc-list li{
background-color: rgba(255, 255, 255, .07) !important;
color: rgba(255, 255, 255, .78);
}
:root .page-service main > .industry-hero + .section .strategic-grid{
background-color: rgba(255, 255, 255, .13);
border-color: rgba(255, 255, 255, .13);
}
:root .interactive-play{
width: clamp(52px, 4.4vw, 66px);
height: clamp(52px, 4.4vw, 66px);
padding: 0;
border: 1.5px solid rgba(255, 255, 255, .85);
color: transparent;
font-size: 0;
background: rgba(12, 16, 17, .3);
backdrop-filter: blur(7px);
box-shadow: 0 10px 30px rgba(0, 0, 0, .26);
transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
:root .interactive-play::before{
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 0;
height: 0;
transform: translateX(1.5px);
border-style: solid;
border-width: 7.5px 0 7.5px 13px;
border-color: transparent transparent transparent #fff;
transition: border-color .25s ease;
}
:root .interactive-video-thumb:hover .interactive-play,
:root .interactive-video-thumb:focus-visible .interactive-play{
background: rgba(255, 255, 255, .94);
border-color: rgba(255, 255, 255, .94);
}
:root .interactive-video-thumb:hover .interactive-play::before,
:root .interactive-video-thumb:focus-visible .interactive-play::before{
border-left-color: #171c1e;
}
:root .interactive-video-close{
width: 40px;
height: 40px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .28);
color: transparent;
font-size: 0;
background: rgba(10, 14, 15, .55);
transition: background .25s ease, border-color .25s ease;
}
:root .interactive-video-close::before,
:root .interactive-video-close::after{
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 15px;
height: 1.5px;
border-radius: 2px;
background: rgba(255, 255, 255, .92);
transition: background .25s ease;
}
:root .interactive-video-close::before{transform: rotate(45deg)}
:root .interactive-video-close::after{transform: rotate(-45deg)}
:root .interactive-video-close:hover,
:root .interactive-video-close:focus-visible{
color: transparent;
background: rgba(255, 255, 255, .16);
border-color: rgba(255, 255, 255, .7);
}
:root .interactive-video-close:hover::before,
:root .interactive-video-close:hover::after,
:root .interactive-video-close:focus-visible::before,
:root .interactive-video-close:focus-visible::after{background: #fff}
@media (prefers-reduced-motion: reduce){
:root .interactive-play,
:root .interactive-play::before,
:root .interactive-video-close,
:root .interactive-video-close::before,
:root .interactive-video-close::after{transition: none}
}
@media (max-width: 767px){
:root .work .portfolio-case-grid{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px;
}
:root .work .portfolio-case-grid .case-card:nth-child(n){
grid-column: span 1 !important;
min-height: 0;
aspect-ratio: 1 / 1;
padding: 18px;
}
:root .work .portfolio-case-grid .case-card:nth-child(5n + 1){
grid-column: span 2 !important;
aspect-ratio: 4 / 3;
padding: 22px;
}
}
@media (max-width: 559px){
:root .work .portfolio-case-grid .case-card:nth-child(n){padding: 13px}
:root .work .portfolio-case-grid .case-card:nth-child(5n + 1){padding: 22px}
:root .work .portfolio-case-grid .case-card:not(:nth-child(5n + 1)) p,
:root .work .portfolio-case-grid .case-card:not(:nth-child(5n + 1)) i{
display: none;
}
:root .work .portfolio-case-grid .case-card:not(:nth-child(5n + 1)) .case-meta{
font-size: .5rem !important;
letter-spacing: .07em;
line-height: 1.25;
}
:root .work .portfolio-case-grid .case-card:not(:nth-child(5n + 1)) h3{
margin: 5px 0 0 !important;
font-size: 1rem !important;
line-height: 1.12 !important;
}
:root .work .portfolio-case-grid .case-card:not(:nth-child(5n + 1))::before{
background: linear-gradient(180deg,
rgba(8, 11, 12, 0) 24%,
rgba(8, 11, 12, .52) 58%,
rgba(8, 11, 12, .9) 100%);
}
}
:root .page-service main > .industry-hero + .section{
padding-bottom: 0 !important;
}
:root .page-service main > .industry-hero + .section > .shell::after{
content: "";
display: block;
height: 0;
margin-top: var(--u-section);
border-top: 1px solid rgba(255, 255, 255, .14);
}
:root .system-step{
background-color: rgba(255, 255, 255, .045) !important;
}
:root :is(.page-service, .page-industry) .services-band .service-link,
:root :is(.page-service, .page-industry) .semantic-industry-section .semantic-industry-card,
:root .page-industry main > .industry-hero + .section .strategy-card,
:root .page-industry .industry-hero-sequence > .section .strategy-card,
:root :is(.page-service, .page-industry) .faq-list > details,
:root :is(.page-service, .page-industry) .faq-item,
:root main > .services .service-row,
:root main > .home-industries .industry-card-grid > a,
:root main > .faq .faq-list > details{
background-color: transparent !important;
border: 0 !important;
box-shadow: var(--vr-shadow, 0 18px 48px rgba(18, 24, 25, .1));
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
:root :is(.page-service, .page-industry) .semantic-industry-section .semantic-industry-card{
background-color: rgba(255, 255, 255, .55) !important;
-webkit-backdrop-filter: blur(7px) saturate(1.08);
backdrop-filter: blur(7px) saturate(1.08);
}
@media (hover:hover){
:root :is(.page-service, .page-industry) .services-band .service-link:hover,
:root :is(.page-service, .page-industry) .semantic-industry-section .semantic-industry-card:hover,
:root .page-industry main > .industry-hero + .section .strategy-card:hover,
:root .page-industry .industry-hero-sequence > .section .strategy-card:hover,
:root :is(.page-service, .page-industry) .faq-list > details:hover,
:root :is(.page-service, .page-industry) .faq-item:hover,
:root main > .services .service-row:hover,
:root main > .faq .faq-list > details:hover{
background-color: #fff !important;
}
}
@media (prefers-reduced-transparency: reduce){
:root :is(.page-service, .page-industry) .services-band .service-link,
:root :is(.page-service, .page-industry) .semantic-industry-section .semantic-industry-card,
:root .page-industry main > .industry-hero + .section .strategy-card,
:root .page-industry .industry-hero-sequence > .section .strategy-card,
:root :is(.page-service, .page-industry) .faq-list > details,
:root :is(.page-service, .page-industry) .faq-item,
:root main > .services .service-row,
:root main > .home-industries .industry-card-grid > a,
:root main > .faq .faq-list > details{
background-color: #f8f7f3 !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
:root main > .home-industries .industry-card-grid > a::before{
right: 0;
width: auto;
transform: scaleX(.22);
transform-origin: left center;
transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
@media (hover:hover) and (min-width:761px){
:root main > .home-industries .industry-card-grid > a:hover,
:root main > .home-industries .industry-card-grid > a:focus-visible{
background-color: #fff !important;
color: var(--ink, #24292b) !important;
transform: translateY(-5px);
box-shadow: var(--vr-shadow-hover, 0 28px 68px rgba(18, 24, 25, .16));
}
:root main > .home-industries .industry-card-grid > a:hover::before,
:root main > .home-industries .industry-card-grid > a:focus-visible::before{
background: var(--card-accent, var(--acid)) !important;
transform: scaleX(1);
}
}
@media (prefers-reduced-motion:reduce){
:root main > .home-industries .industry-card-grid > a::before{
transition: none;
}
}