@font-face { font-family: DMF; src: url("/assets/fonts/DMF-Light.otf") format("opentype"); font-style: normal; font-weight: 100 499; font-display: swap; }

body :where(h1, h2, h3, h4, h5, h6, p, blockquote, figcaption, dd), body :where([data-cms-text], [data-field]) { white-space: pre-line; }

@font-face { font-family: DMF; src: url("/assets/fonts/DMF-Bold.otf") format("opentype"); font-style: normal; font-weight: 500 900; font-display: swap; }

:root { --dm-black: #030303; --dm-white: #fff; --dm-blue: #386ce8; --dm-coral: #f66548; --dm-pink: #ef78a6; --dm-paper: #f3d3ad; --dm-line: rgba(255, 255, 255, .42); --font-headline: "DMF", Arial, Helvetica, sans-serif; --font-body: "Inter", Arial, Helvetica, sans-serif; --section-y-lg: 96px; --section-y-md: 72px; --section-y-sm: 52px; --site-gutter: clamp(24px, 4.3vw, 56px); --content-max: 1540px; --section-rail-shift: clamp(2.4px, .43vw, 5.6px); --section-rail-x: calc(max(var(--site-gutter), calc((100vw - var(--content-max)) / 2)) - var(--section-rail-shift)); --top-strip-height: 26px; --main-nav-height: clamp(82px, 6.4vw, 108px); }

* { box-sizing: border-box; }

html, body { width: 100%; overflow-x: hidden; }

html { scrollbar-width: none; }

html::-webkit-scrollbar { display: none; }

body { margin: 0px; padding-top: calc(var(--top-strip-height) + var(--main-nav-height) + env(safe-area-inset-top, 0px)); color: var(--dm-black); background: var(--dm-white); font-family: var(--font-body); letter-spacing: 0px; transition: padding-top 0.32s; }

body.hero-chrome-hidden { padding-top: 0px; }

body.hero-chrome-hidden .top-strip, body.hero-chrome-hidden .main-nav { transform: translateY(-100%); }

.main-nav .container, .diagnosis > .container, .projects > .container, .pillars > .container, .quote-section > .container, .journey > .container, .footer > .container, .brand-logos > .container { width: min(var(--content-max), calc(100% - (var(--site-gutter) * 2))); max-width: none; padding-left: 0px; padding-right: 0px; }

h1, h2, h3, h4, h5, h6, .hero-copy, .ticker, .diagnosis h1, .pillars-title, .projects-title, .journey h2, .footer-logo { font-family: var(--font-headline); }

a { color: inherit; text-decoration: none; }

.top-strip { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 1100; min-height: var(--top-strip-height); padding-top: env(safe-area-inset-top, 0px); background: var(--dm-blue); color: rgb(255, 255, 255); font-size: 12px; transition: transform 0.32s; }

.promo-link { display: flex; min-height: 26px; align-items: center; justify-content: center; padding: 0px 28px; font-weight: 700; font-family: var(--font-body); }

.promo-link.blue { min-width: 290px; justify-content: flex-end; background: var(--dm-blue); }

.promo-arrow { position: relative; display: inline-block; width: 34px; height: 2px; background: currentcolor; flex: 0 0 auto; }

.promo-arrow::after { content: ""; position: absolute; top: 50%; right: 0px; width: 9px; height: 9px; border-top: 2px solid; border-right: 2px solid; transform: translateY(-50%) rotate(45deg); }

.promo-link.coral { background: var(--dm-coral); }

.promo-link.pink { background: var(--dm-pink); }

.brand-word { color: rgb(255, 255, 255); font-weight: 900; font-size: clamp(20px, 2.1vw, 31px); line-height: 1; font-family: var(--font-body); }

.brand-word span { opacity: 0.86; font-weight: 500; }

.brand-logo { display: block; width: auto; object-fit: contain; }

.brand-logo-header { height: clamp(40px, 3.5vw, 58px); max-width: 360px; }

.brand-logo-footer-small { height: 44px; max-width: 320px; }

.brand-logo-footer-small.footer-round-logo { width: clamp(112px, 10vw, 164px); height: clamp(96px, 9vw, 148px); max-width: none; max-height: none; object-fit: contain; object-position: center center; }

.main-nav { top: calc(var(--top-strip-height) + env(safe-area-inset-top, 0px)); left: 0px; right: 0px; z-index: 1000; background: rgb(0, 0, 0); min-height: var(--main-nav-height); transition: transform 0.32s; position: fixed !important; }

.main-nav .nav-link { color: rgb(255, 255, 255); font-size: clamp(16px, 1.18vw, 21px); font-weight: 800; padding: 26px clamp(14px, 1.2vw, 22px); font-family: var(--font-body); text-transform: uppercase; }

.main-nav .nav-link, .main-nav .nav-link:visited, .main-nav .nav-link:focus, .main-nav .nav-link:active, .main-nav .nav-link.active, .main-nav .nav-link.show { color: rgb(255, 255, 255); }

.main-nav .navbar-nav { gap: clamp(34px, 3.6vw, 70px) !important; }

.main-nav .nav-link:hover, .main-nav .nav-link:focus-visible, .nav-item-dropdown:hover > .nav-link, .nav-item-dropdown:focus-within > .nav-link { color: rgb(255, 255, 255); text-shadow: rgba(255, 255, 255, 0.18) 0px 3px 0px, rgba(0, 0, 0, 0.65) 0px 8px 16px; }

.nav-item-dropdown { position: relative; }

.nav-item-dropdown > .nav-link { position: relative; z-index: 2; background: rgb(0, 0, 0); }

.nav-dropdown-menu { position: absolute; top: 100%; left: 50%; min-width: 260px; padding: 10px 0px; background: rgb(0, 0, 0); border: 1px solid rgba(255, 255, 255, 0.28); transform: translateX(-50%) translateY(10px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s, transform 0.18s, visibility 0.18s; z-index: 1; }

.nav-item-dropdown:hover .nav-dropdown-menu, .nav-item-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0px); }

.nav-dropdown-link { display: block; padding: 13px 18px; color: rgb(255, 255, 255); font-family: var(--font-body); font-size: 14px; font-weight: 800; line-height: 1.2; text-transform: uppercase; text-decoration: none; white-space: nowrap; }

.nav-dropdown-link:hover, .nav-dropdown-link:focus { background: rgb(255, 255, 255); color: rgb(0, 0, 0); }

.contact-btn { min-width: 150px; border-radius: 5px; background: rgb(255, 255, 255); color: rgb(0, 0, 0); font-weight: 900; padding: 11px 19px; font-family: var(--font-body); font-size: clamp(15px, 1.05vw, 19px); }

.contact-btn:hover, .contact-btn:focus, .contact-btn:active { background: rgb(255, 255, 255) !important; color: rgb(0, 0, 0) !important; border-color: rgb(255, 255, 255) !important; }

.navbar-toggler { border-color: rgba(255, 255, 255, 0.45); }

.navbar-toggler-icon { filter: invert(1); }

.hero-video { position: relative; display: grid; width: 100%; max-width: 100vw; min-height: 0px; height: 100svh; aspect-ratio: auto; place-items: center; overflow: hidden; background: var(--dm-black); padding: clamp(12px, 1.8vw, 26px); }

.hero-video video, .hero-video .poster { position: absolute; inset: 50% auto auto 50%; display: block; min-width: 0px; min-height: 0px; width: min(100% - 48px, 1500px); height: auto; max-height: calc(100% - 48px); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); border-radius: clamp(14px, 1.8vw, 24px); object-fit: contain; object-position: center center; background: var(--dm-black); }

.hero-copy { position: relative; max-width: 1050px; padding: 32px; text-align: center; text-transform: uppercase; font-size: clamp(28px, 4vw, 61px); font-weight: 400; line-height: 1.16; letter-spacing: 0.08em; }

.hero-copy strong { font-weight: 950; }

.ticker { position: relative; overflow: hidden; height: clamp(42px, 4.8vw, 58px); border-top: 1px solid rgb(136, 136, 136); border-bottom: 1px solid rgb(136, 136, 136); background: rgb(0, 0, 0); color: rgb(255, 255, 255); white-space: nowrap; }

.ticker-track { position: absolute; inset: 0px auto 0px 0px; display: inline-flex; align-items: center; min-width: 200%; animation: 28s linear 0s infinite normal none running ticker; }

.ticker span { display: inline-flex; align-items: center; padding: 11px 36px; font-size: clamp(14px, 2vw, 25px); text-transform: uppercase; letter-spacing: 0.06em; }

.ticker-logo { min-width: 240px; justify-content: center; }

.ticker-logo img { display: block; width: clamp(150px, 14vw, 220px); max-height: 28px; object-fit: contain; }

.ticker b { display: inline-block; margin-left: 0.18em; font-weight: 950; }

@keyframes ticker {
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}

.black-stage { position: relative; background-color: var(--section-bg, #000); background-image: var(--section-bg-image, none); background-size: cover; background-position: center center; background-repeat: no-repeat; color: var(--section-text, #fff); }

.black-stage.has-bg-image, .white-stage.has-bg-image, .paper-stage.has-bg-image { background-color: transparent; background-image: var(--section-bg-image); background-size: cover; background-position: center center; background-repeat: no-repeat; }

.section-rail { position: absolute; z-index: 20; top: 0px; left: calc(var(--section-rail-x) - 7px); width: 52px; height: 0px; overflow: visible; transform: none; pointer-events: none; }

.section-rail .rail-line { display: none; }

.section-rail nav { position: absolute; inset: 0px; display: block; height: 100%; }

.rail-link { position: absolute; left: 0px; display: inline-flex; align-items: center; gap: 8px; color: rgb(0, 0, 0); font-size: 12px; font-weight: 900; line-height: 1; opacity: 0.55; pointer-events: auto; transition: opacity 0.2s, transform 0.2s; }

.rail-link::after { content: ""; position: absolute; top: 16px; left: 7px; width: 1px; height: var(--rail-segment, 0); background: currentcolor; opacity: 0.72; pointer-events: none; }

.rail-link.on-dark { color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 10px; }

.rail-link.on-light span:last-child { color: rgb(141, 150, 156); }

.rail-link.on-dark span:last-child { color: rgb(255, 255, 255); }

.rail-link:hover, .rail-link.active { opacity: 1; transform: none; }

.rail-dot { display: block; width: 14px; height: 14px; flex: 0 0 14px; border: 1px solid; background: currentcolor; }

.section-mark { display: flex; align-items: center; gap: 8px; color: currentcolor; font-size: 14px; font-weight: 900; visibility: hidden; }

.section-mark::before { content: ""; width: 16px; height: 16px; background: currentcolor; }

.diagnosis { min-height: 730px; padding: clamp(62px, 6vw, 90px) 0px clamp(66px, 6vw, 86px); }

.diagnosis h1 { max-width: 1120px; text-transform: uppercase; font-size: clamp(42px, 6.25vw, 95px); font-weight: 950; line-height: 1.12; }

.diagnosis h1 mark, .pillars-title mark, .projects-title mark { display: inline-block; padding: 0.16em 0.12em 0.1em; color: rgb(255, 255, 255); background: var(--dm-blue); line-height: 1.04; vertical-align: baseline; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.diagnosis-deck { position: relative; display: block; width: min(820px, 88vw); max-width: 100%; height: auto; margin: clamp(26px, 3vw, 40px) auto 0px; transform: translateX(0px); }

.diagnosis-static-image { display: block; width: 100%; height: auto; object-fit: contain; }

.diagnosis-deck::before, .diagnosis-deck::after { content: ""; position: absolute; z-index: 1; bottom: 0px; height: 12%; background: rgb(0, 0, 0); pointer-events: none; }

.diagnosis-deck::before { left: 0px; width: 31%; }

.diagnosis-deck::after { right: 0px; width: 17%; }

.diagnosis-static-link { position: absolute; z-index: 2; top: 31%; right: 1.5%; width: 9%; height: 27%; }

.diagnosis-static-link:focus-visible { outline: rgb(255, 255, 255) solid 2px; outline-offset: 3px; }

.diagnosis-card { position: absolute; top: 12%; left: 0px; display: block; width: clamp(220px, 24vw, 345px); height: clamp(260px, 28vw, 405px); padding: 0px; background: var(--card-color, #fff); color: rgb(0, 0, 0); transform: rotate(45deg); transform-origin: center center; }

.diagnosis-card-image-media { width: clamp(268px, 27vw, 426px); height: auto; background: transparent; transform: none; filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 18px 16px); }

.diagnosis-card-image-media .diagnosis-card-image { display: block; width: 100%; height: auto; object-fit: contain; }

.diagnosis-card:first-child { margin-left: 0px; }

.diagnosis-card-1 { z-index: 1; left: 0px; top: 5%; }

.diagnosis-card-2 { z-index: 2; left: 13.6%; top: 5%; }

.diagnosis-card-3 { z-index: 3; left: 27.2%; top: 5%; }

.diagnosis-card-4 { z-index: 4; left: 40.8%; top: 5%; }

.diagnosis-card-5 { z-index: 5; left: 56.8%; top: 2%; width: clamp(285px, 31vw, 430px); height: auto; overflow: visible; }

.diagnosis-card-inner { position: absolute; inset: 18px; display: grid; align-content: space-between; gap: 12px; transform: none; }

.diagnosis-card-logo { position: absolute; top: 18px; right: 24px; display: block; width: 38px; height: 38px; margin-left: auto; }

.diagnosis-card-logo img { width: 100%; height: 100%; object-fit: contain; filter: invert(1); }

.diagnosis-card-main { display: grid; grid-template-columns: 46px minmax(0px, 1fr); gap: 12px; align-items: center; margin-top: 176px; margin-left: 2px; }

.diagnosis-card-icon { display: grid; width: 46px; height: 46px; place-items: center; background: rgb(0, 0, 0); color: rgb(255, 255, 255); font-size: 13px; font-weight: 950; }

.diagnosis-card strong { max-width: 128px; font-size: 20px; font-weight: 950; line-height: 1.08; text-transform: none; }

.diagnosis-card small { position: absolute; right: 18px; bottom: 16px; max-width: 128px; justify-self: end; font-size: 11px; font-weight: 900; line-height: 1.08; text-align: right; opacity: 1; }

.diagnosis-more-card { position: absolute; z-index: 80; left: auto; right: -31px; top: 35.7%; display: grid; width: clamp(44px, 4.2vw, 54px); height: clamp(52px, 4.9vw, 62px); place-items: center; border: 0px; color: rgb(255, 255, 255); font-size: clamp(7px, 0.58vw, 9px); font-weight: 900; line-height: 1; text-align: center; text-transform: uppercase; transform: rotate(45deg); transform-origin: center center; transition: transform 0.2s, background-color 0.2s; }

.diagnosis-more-label { position: absolute; inset: 0px; display: block; transform: rotate(-45deg); transform-origin: center center; }

.diagnosis-more-text { position: absolute; left: 43%; top: 50%; display: block; width: 48px; transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center center; line-height: 1; white-space: nowrap; text-align: center; }

.diagnosis-more-arrow { position: absolute; right: 0px; top: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8em; line-height: 1; transform: translateY(-50%); }

.diagnosis-more-card:hover, .diagnosis-more-card:focus-visible { background: transparent; transform: rotate(45deg); }

.diagnosis-visual img, .project-card img, .quote-media img { display: block; width: 100%; height: auto; }

.diagnosis-bottom { display: flex; justify-content: space-between; align-items: flex-start; font-size: 15px; font-weight: 800; line-height: 1.32; letter-spacing: 0px; word-spacing: 0.05em; text-transform: uppercase; font-family: var(--font-body); margin-top: clamp(28px, 3vw, 42px) !important; }

.diagnosis-bottom > div { font-size: 15px; font-weight: 800; line-height: 1.32; }

.diagnosis-bottom > div:first-child { flex: 0 1 640px; max-width: 640px; white-space: pre-line; }

.diagnosis-bottom > div:last-child { flex: 0 0 280px; max-width: 280px; margin-left: auto !important; }

.diagnosis-bottom .underline-link { width: 100%; min-width: 0px; font-size: 15px; font-weight: 900; line-height: 1.18; }

.arrow-link::after { content: ""; display: block; width: 1.1em; height: 1.1em; flex: 0 0 auto; margin-left: 18px; background-color: currentcolor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") center center / contain no-repeat; }

.white-stage { background-color: var(--section-bg, #fff); background-image: var(--section-bg-image, none); background-size: cover; background-position: center center; background-repeat: no-repeat; color: var(--section-text, #000); }

.underline-link { display: inline-flex; align-items: center; justify-content: space-between; min-width: min(100%, 280px); padding-bottom: 12px; border-bottom: 1px solid; color: inherit; gap: 20px; transition: color 0.2s, transform 0.2s, opacity 0.2s; }

.underline-link:hover, .underline-link:focus-visible { opacity: 0.78; transform: translateX(4px); }

.pillars { padding: clamp(48px, 5.8vw, 82px) 0px; }

.pillars.has-bg-image { background-color: transparent; background-image: var(--section-bg-image); background-size: cover; background-position: center center; background-repeat: no-repeat; }

.pillars-title { display: inline-block; max-width: 420px; padding: 24px; background: rgb(0, 0, 0); color: rgb(255, 255, 255); text-transform: uppercase; font-size: clamp(36px, 5.3vw, 72px); font-weight: 950; line-height: 1.12; }

.pillars-title mark { margin: 0.06em 0px; padding-top: 0.04em; padding-bottom: 0.1em; }

.pillar-poster { position: relative; width: min(100%, 420px); aspect-ratio: 341 / 414; overflow: hidden; background: transparent; color: rgb(255, 255, 255); font-family: var(--font-headline); text-transform: uppercase; }

.pillar-poster::before { content: ""; position: absolute; z-index: 0; inset: 0px; background: rgb(0, 0, 0); clip-path: polygon(0px 0px, 85% 0px, 85% 16%, 100% 16%, 100% 100%, 30% 100%, 30% 83%, 9% 83%, 0px 92%); }

.pillar-poster-image { display: block; width: min(100%, 420px); height: auto; object-fit: contain; }

.pillar-poster::after { content: none; }

.poster-line { position: absolute; z-index: 2; display: block; font-weight: 700; line-height: 0.9; letter-spacing: 0px; white-space: nowrap; }

.poster-line-1 { top: 7%; left: 5%; font-size: clamp(56px, 5.8vw, 86px); }

.poster-line-2 { top: 27%; right: 5%; color: rgb(255, 242, 0); font-size: clamp(46px, 5vw, 76px); }

.poster-line-3 { top: 46%; left: 5%; font-size: clamp(47px, 5vw, 74px); }

.poster-line-4 { right: 6%; bottom: 21%; color: rgb(166, 242, 43); font-size: clamp(58px, 5.8vw, 88px); }

.poster-corner { display: none; }

.poster-mini-logo { position: absolute; z-index: 3; bottom: 0px; left: 0px; display: grid; width: clamp(30px, 3.1vw, 40px); height: clamp(30px, 3.1vw, 40px); place-items: center; background: rgb(0, 0, 0); }

.poster-mini-logo img { display: block; width: 72%; height: 72%; object-fit: contain; }

.solution-droplist { border-top: 2px solid; border-bottom: 2px solid; }

.solution-item + .solution-item { border-top: 1px solid color-mix(in srgb, currentcolor 45%, transparent); }

.solution-row { display: grid; grid-template-columns: 84px 1fr 44px; gap: 18px; align-items: center; width: 100%; padding: 18px 0px; border: 0px; background: transparent; color: color-mix(in srgb, currentcolor 62%, transparent); text-transform: uppercase; font-weight: 900; font-family: var(--font-body); text-align: left; transition: background-color 0.2s, padding-left 0.2s; }

.solution-row:hover { background: rgba(0, 0, 0, 0.04); padding-left: 14px; }

.solution-row .number { font-size: 34px; }

.solution-item.active .solution-row, .solution-item.active .number, .solution-item.active .title { color: currentcolor; }

.solution-row .arrow { display: grid; justify-content: end; font-size: 34px; text-align: right; }

.solution-link { transition: transform 0.2s; }

.solution-row:hover .solution-link { transform: translate(4px, -4px); }

.solution-panel { display: grid; grid-template-columns: minmax(0px, 1.1fr) minmax(210px, 0.9fr); gap: clamp(28px, 5vw, 74px); max-height: 0px; overflow: hidden; opacity: 0; transform: translateY(-8px); transition: max-height 0.32s, opacity 0.24s, transform 0.24s, padding 0.32s; }

.solution-item.active .solution-panel { max-height: 460px; opacity: 1; transform: translateY(0px); padding: 28px 0px 34px; }

.solution-kicker { margin-bottom: 16px; color: rgb(153, 153, 153); font-size: 13px; font-weight: 900; text-transform: uppercase; }

.solution-panel-media img { display: block; height: auto; }

.solution-gallery { display: grid; grid-template-columns: minmax(94px, 118px) minmax(150px, 230px); gap: 18px; align-items: end; }

.solution-gallery-stack { display: grid; min-height: 154px; align-content: end; }

.solution-gallery-thumb, .solution-gallery-preview { overflow: hidden; border: 0px; background: transparent; padding: 0px; cursor: pointer; }

.solution-gallery-thumb { width: 112px; aspect-ratio: 1 / 1; grid-area: 1 / 1; box-shadow: rgba(0, 0, 0, 0.12) 0px 10px 18px; transition: transform 0.2s, z-index 0.2s, box-shadow 0.2s; }

.solution-gallery-thumb:nth-child(1) { z-index: 3; transform: translate(0px, 0px) rotate(-2deg); }

.solution-gallery-thumb:nth-child(2) { z-index: 2; transform: translate(18px, -20px) rotate(2deg); }

.solution-gallery-thumb:nth-child(3) { z-index: 1; transform: translate(36px, -40px) rotate(-1deg); }

.solution-gallery-thumb:hover { z-index: 5; transform: translate(10px, -26px) scale(1.04); box-shadow: rgba(0, 0, 0, 0.18) 0px 16px 26px; }

.solution-gallery-preview { width: min(100%, 230px); aspect-ratio: 1 / 1; box-shadow: rgba(0, 0, 0, 0.14) 0px 16px 26px; transition: transform 0.22s, box-shadow 0.22s; }

.solution-gallery-preview:hover { transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.18) 0px 24px 36px; }

.solution-gallery img { width: 100%; height: 100%; object-fit: cover; }

.solution-panel-copy { align-self: start; }

.solution-panel-copy p { max-width: 350px; margin-bottom: 34px; font-weight: 700; line-height: 1.35; }

.paper-stage { background-color: var(--section-bg, var(--dm-paper)); color: var(--section-text, #000); background-image: radial-gradient(rgba(0,0,0,.07) 1px, transparent 1px),
    var(--section-bg-image, none); background-size: 12px 12px, cover; background-position: 0px 0px, center center; background-repeat: repeat, no-repeat; }

.brand-logos { position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; background: rgb(23, 23, 23); color: rgb(255, 255, 255); padding: 26px 0px; z-index: 3; }

.brand-logos .container { width: 100%; max-width: none; margin: 0px; overflow: visible; }

.logo-slider-track { display: flex; width: max-content; align-items: center; gap: clamp(56px, 8vw, 140px); animation: 26s linear 0s infinite normal none running logoSlider; }

.brand-logos:hover .logo-slider-track { animation-play-state: paused; }

.brand-logos .logo-chip { display: inline-flex; height: 92px; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 320px; color: rgb(246, 246, 246); font-weight: 950; text-transform: uppercase; opacity: 0.9; font-family: var(--font-body); text-align: center; white-space: nowrap; transition: opacity 0.2s, transform 0.2s; }

.brand-logos .logo-chip:hover { opacity: 1; transform: translateY(-2px); }

.brand-logos .logo-chip img { display: block; max-width: 340px; max-height: 92px; width: auto; height: auto; object-fit: contain; }

@keyframes logoSlider {
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}

.brand-logos { padding-block: clamp(18px, 2vw, 30px); }

.logo-slider-track { gap: clamp(28px, 4vw, 64px); }

.brand-logos .logo-chip { height: clamp(92px, 8vw, 116px); min-width: clamp(240px, 21vw, 300px); }

.brand-logos .logo-chip img { max-width: clamp(280px, 26vw, 390px); max-height: clamp(92px, 8vw, 116px); }

.quote-block { display: block; color: inherit; text-decoration: none; }

.quote-block:hover, .quote-block:focus-visible { color: inherit; text-decoration: none; }

.intro-hero { position: relative; overflow: hidden; }

.intro-hero::after { content: ""; position: absolute; top: clamp(56px, 6vw, 92px); right: clamp(32px, 8vw, 128px); width: clamp(110px, 13vw, 210px); aspect-ratio: 1 / 1; background: rgb(5, 5, 5); pointer-events: none; }

.intro-hero .intro-container { position: relative; z-index: 1; }

.intro-hero h1 { font-size: clamp(46px, 5.2vw, 92px); }

.intro-hero-mark { position: relative; z-index: 2; margin-right: clamp(18px, 5vw, 74px); width: clamp(64px, 6.4vw, 96px); }

.intro-value-card small { color: rgb(0, 0, 0); }

.intro-value-card:hover, .intro-value-card:focus-within { color: rgb(255, 255, 255); }

.intro-value-card:hover small, .intro-value-card:focus-within small, .intro-value-card:hover h2, .intro-value-card:focus-within h2 { color: rgb(255, 255, 255); }

.intro-value-card:hover p, .intro-value-card:focus-within p { opacity: 0; }

.intro-value-card:hover > img, .intro-value-card:focus-within > img { opacity: 1; }

.solution-method-poster .solutions-container { max-width: 1120px; }

.solution-method-stack { gap: clamp(6px, 0.8vw, 12px); }

.solution-method-strip .content-horizontal .title { font-size: clamp(24px, 2.8vw, 44px); }

.journey-stamp { background: rgb(0, 0, 0); }

@media (max-width: 991.98px) {
  .intro-hero::after { top: 46px; right: 28px; width: 96px; }
  .intro-hero-mark { margin-right: 0px; }
}

@media (max-width: 600px) {
  .brand-logos .logo-chip { min-width: 190px; height: 76px; }
  .brand-logos .logo-chip img { max-width: 220px; max-height: 76px; }
  .intro-hero::after { top: 28px; right: 16px; width: 68px; }
  .intro-hero-mark { width: 56px; }
  .intro-hero h1 { max-width: calc(100% - 44px); font-size: clamp(36px, 10.5vw, 56px); }
  .solution-method-poster .solutions-container { width: min(100% - 28px, 520px); }
}

@media (max-width: 575.98px) {
  .featured-strip h2 { max-width: 100%; font-size: clamp(30px, 9.5vw, 42px); line-height: 1; white-space: nowrap; }
  .featured-strip-head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 28px; }
  .featured-strip-head p { position: static; width: 100%; max-width: 100%; margin: 0px; line-height: 1.35; }
}

.intro-ecosystem-logo { min-height: clamp(104px, 10vw, 148px); padding: clamp(12px, 1.4vw, 20px); }

.intro-ecosystem-logo img { max-height: clamp(92px, 10vw, 136px); }

@media (max-width: 575.98px) {
  .intro-ecosystem-logo { min-height: 112px; padding: 12px; }
  .intro-ecosystem-logo img { max-height: 96px; }
}

@media (max-width: 575.98px) {
  .featured-strip h2 { max-width: 100%; font-size: clamp(30px, 9.5vw, 42px); line-height: 1; white-space: nowrap; }
}

.projects { position: relative; padding: clamp(54px, 6vw, 88px) 0px; }

.signature-sticker { position: absolute; z-index: 5; right: clamp(30px, 5.5vw, 96px); top: clamp(-64px, -4vw, -42px); width: clamp(132px, 12.5vw, 195px); height: auto; pointer-events: none; }

.projects-title { text-transform: uppercase; font-size: clamp(48px, 6.8vw, 96px); font-weight: 950; line-height: 1.05; letter-spacing: 0px; }

.projects-title mark { padding: 0.16em 0.18em 0.12em; margin-bottom: 0.12em; line-height: 1.02; vertical-align: baseline; }

.project-slider-controls { display: inline-flex; gap: 8px; }

.dm-arrow-icon { display: block; width: 1em; height: 1em; stroke: currentcolor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

.dm-css-arrow { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; background-color: currentcolor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") center center / contain no-repeat; }

.project-slider-btn { display: grid; width: 42px; height: 42px; place-items: center; border: 0px; background: rgb(22, 22, 22); color: rgb(255, 255, 255); font-size: 28px; line-height: 1; transition: transform 0.2s, background-color 0.2s; }

.project-slider-btn:hover { transform: translateY(-2px); background: var(--dm-blue); }

.project-slider { display: grid; grid-auto-columns: calc(33.3333% - 18.6667px); grid-auto-flow: column; gap: 28px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }

.project-slider::-webkit-scrollbar { display: none; }

.project-slide { min-width: 0px; scroll-snap-align: start; }

.project-card { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: rgb(17, 17, 17); transition: transform 0.28s, box-shadow 0.28s; }

.project-card img { height: 100%; object-fit: cover; transition: transform 0.35s, filter 0.35s; }

.project-card:hover, .project-card:focus-within { transform: translateY(-8px); box-shadow: rgba(0, 0, 0, 0.16) 0px 24px 36px; }

.project-card:hover img, .project-card:focus-within img { transform: scale(1.045); filter: saturate(1.08); }

.project-card .open { position: absolute; top: 14px; right: 14px; display: grid; width: 48px; height: 48px; place-items: center; background: rgb(29, 29, 29); color: rgb(255, 255, 255); font-size: 30px; transition: transform 0.2s, background-color 0.2s; }

.project-card .open .dm-arrow-icon, .project-list-open .dm-arrow-icon { transform-origin: center center; transition: transform 0.24s; }

.project-description { position: absolute; right: 34px; bottom: 34px; left: 34px; color: rgb(255, 255, 255); font-size: 14px; font-weight: 700; line-height: 1.28; opacity: 0; transform: translateY(12px); transition: opacity 0.24s, transform 0.24s; }

.project-card:hover .project-description, .project-card:focus-within .project-description { opacity: 1; transform: translateY(0px); }

.project-card:hover .open, .project-card:focus-within .open { background: var(--dm-blue); }

.project-card:hover .open .dm-arrow-icon, .project-card:focus-within .open .dm-arrow-icon { transform: rotate(90deg); }

.project-meta { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-top: 14px; align-items: end; text-transform: uppercase; font-weight: 900; font-family: var(--font-body); }

.project-title-link { display: inline-flex; color: inherit; }

.project-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.project-tags span { border: 1px solid rgb(17, 17, 17); border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 800; }

.project-year { font-size: 34px; line-height: 0.9; text-align: right; }

.year-stack { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 0.82; font-family: DMF, Inter, sans-serif; font-weight: 700; }

.year-stack > span { display: block; }

.quote-section { padding: clamp(50px, 5.5vw, 78px) 0px; }

.quote-title { max-width: 1180px; text-transform: uppercase; font-size: clamp(22px, 2.4vw, 36px); font-weight: 950; line-height: 1.18; }

.quote-heading-row { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }

.quote-slider-controls { display: inline-flex; gap: 8px; }

.quote-slider-btn { display: grid; width: 42px; height: 42px; place-items: center; border: 0px; background: rgb(22, 22, 22); color: rgb(255, 255, 255); font-size: 28px; line-height: 1; transition: transform 0.2s, background-color 0.2s; }

.quote-slider-btn:hover { transform: translateY(-2px); background: var(--dm-blue); }

.quote-slider { display: grid; grid-auto-columns: calc(33.3333% - 18.6667px); grid-auto-flow: column; gap: 28px; overflow: auto visible; padding-top: 12px; padding-bottom: 34px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }

.quote-slider::-webkit-scrollbar { display: none; }

.quote-slide { position: relative; min-width: 0px; scroll-snap-align: start; overflow: visible; }

.quote-block { position: relative; z-index: 1; min-height: 260px; border-top: 1px solid rgb(17, 17, 17); padding-top: 28px; padding-right: 18px; transition: transform 0.22s; overflow: visible; }

.quote-block:hover, .quote-block:focus-within { z-index: 20; }

.quote-symbol { color: var(--dm-blue); font-size: 54px; font-weight: 950; line-height: 1; }

.quote-article-title { max-width: 500px; margin: 12px 0px 0px; font-size: clamp(18px, 1.55vw, 26px); font-weight: 950; line-height: 1.08; text-transform: uppercase; }

.quote-block > p { max-width: 560px; margin-top: 12px; font-size: clamp(13px, 0.95vw, 16px); line-height: 1.42; }

.quote-person { display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 8px 18px; align-items: end; margin-top: 54px; padding-right: 0px; }

.quote-person strong { grid-column: 1 / -1; }

.quote-person span { display: block; min-width: 0px; }

.quote-person span { font-size: 13px; }

.quote-date { position: static; grid-area: 2 / 2; color: rgb(153, 153, 153); font-weight: 900; white-space: nowrap; }

.quote-overlay { position: fixed; z-index: 999; top: var(--overlay-y, 34px); left: var(--overlay-x, 50%); width: min(92vw, 360px); opacity: 0; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)) scale(0.96); transition: opacity 0.16s, transform 0.16s; }

.quote-overlay img { display: block; width: 100%; height: auto; box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 34px; }

.quote-overlay-logo { position: absolute; left: -22px; bottom: -22px; display: grid; width: 56px; height: 56px; place-items: center; background: rgb(0, 0, 0); }

.quote-overlay-logo img { width: 40px; height: 40px; object-fit: contain; box-shadow: none; }

.quote-block:hover .quote-overlay, .quote-block:focus-within .quote-overlay { opacity: 1; transform: translate(-50%, calc(-100% - 16px)) scale(1); }

.quote-media img { width: auto; max-width: 100%; max-height: 320px; margin: 0px auto; object-fit: contain; }

.journey { padding: clamp(50px, 5vw, 72px) 0px; }

.journey-card { position: relative; overflow: hidden; background: rgb(0, 0, 0); color: rgb(255, 255, 255); min-height: clamp(500px, 57vw, 700px); border-radius: 8px; }

.journey-static-image { position: absolute; inset: 0px; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }

.journey-card::after { content: ""; position: absolute; z-index: 3; right: 0px; bottom: 0px; left: 0px; height: clamp(66px, 7vw, 108px); background: rgb(0, 0, 0); pointer-events: none; }

.journey h2 { position: absolute; z-index: 4; top: clamp(24px, 3.5vw, 56px); left: 50%; transform: translateX(-50%); width: min(620px, 100% - 48px); text-align: center; text-transform: uppercase; font-size: clamp(44px, 5.6vw, 82px); font-weight: 950; line-height: 1.05; }

.journey-stamp { position: absolute; z-index: 5; top: clamp(78px, 7.9vw, 112px); left: 50%; width: clamp(42px, 4.5vw, 66px); height: clamp(42px, 4.5vw, 66px); object-fit: contain; transform: translateX(22px) rotate(8deg); background: rgb(239, 120, 166); padding: 8px; }

.journey .pill-button { position: absolute; z-index: 4; top: clamp(168px, 15.5vw, 234px); left: 50%; transform: translateX(-50%); border: 1px solid rgb(255, 255, 255); border-radius: 999px; padding: 8px 18px; background: rgb(0, 0, 0); color: rgb(255, 255, 255); font-weight: 900; white-space: nowrap; }

.journey .bottom-cta { position: absolute; z-index: 5; left: 50%; bottom: clamp(10px, 1.4vw, 20px); transform: translateX(-50%); color: rgb(255, 255, 255); font-size: clamp(13px, 1.1vw, 16px); font-weight: 900; padding-top: 16px; text-transform: uppercase; }

.journey-packages { position: absolute; z-index: 2; right: 0px; bottom: clamp(74px, 7vw, 104px); left: 0px; overflow: hidden; }

.journey-pack-track { display: flex; width: max-content; align-items: end; gap: clamp(18px, 2.6vw, 44px); padding: 0px clamp(26px, 5vw, 78px); animation: 24s linear 0s infinite normal none running journeyPackages; }

.journey-card:hover .journey-pack-track { animation-play-state: paused; }

.journey-pack { display: block; flex: 0 0 auto; height: clamp(190px, 22vw, 320px); }

.journey-pack-image { width: auto; object-fit: contain; }

.journey-pack-shape { width: clamp(100px, 12vw, 180px); background: rgb(255, 255, 255); }

.pack-1 { width: clamp(180px, 21vw, 310px); clip-path: polygon(0px 35%, 31% 35%, 31% 12%, 53% 0px, 74% 12%, 74% 35%, 100% 35%, 100% 100%, 0px 100%); }

.pack-2 { width: clamp(94px, 10vw, 145px); background: rgb(166, 242, 43); clip-path: polygon(14% 0px, 86% 0px, 100% 12%, 100% 88%, 84% 100%, 16% 100%, 0px 88%, 0px 12%); }

.pack-3 { width: clamp(120px, 13vw, 175px); clip-path: polygon(0px 30%, 100% 30%, 82% 100%, 18% 100%); }

.pack-3::before { content: ""; display: block; width: 100%; height: 34%; background: rgb(88, 217, 207); }

.pack-4 { width: clamp(82px, 8vw, 126px); background: rgb(74, 169, 216); clip-path: polygon(28% 0px, 74% 0px, 100% 100%, 0px 100%); }

.pack-5 { width: clamp(165px, 18vw, 245px); background: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 32%, rgb(0, 0, 0) 32%, rgb(0, 0, 0) 36%, rgb(255, 255, 255) 36%, rgb(255, 255, 255) 64%, rgb(0, 0, 0) 64%, rgb(0, 0, 0) 68%, rgb(255, 255, 255) 68%); }

.pack-5::before { content: ""; display: block; width: 46%; aspect-ratio: 1 / 1; margin: -18% auto 0px; border-radius: 50%; background: rgb(246, 101, 72); box-shadow: rgb(255, 255, 255) -42px -8px 0px -16px; }

.pack-6 { width: clamp(92px, 10vw, 145px); clip-path: polygon(10% 0px, 90% 0px, 90% 100%, 10% 100%, 0px 28%); }

@keyframes journeyPackages {
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}

.footer { background: rgb(0, 0, 0); color: rgb(255, 255, 255); padding: clamp(54px, 5vw, 70px) 0px 28px; }

.footer a, .footer p { color: rgba(255, 255, 255, 0.78); }

@media (min-width: 992px) {
  .footer .container > .row { display: grid; grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.65fr) minmax(0px, 0.9fr) minmax(0px, 1.35fr) minmax(0px, 0.65fr); gap: clamp(22px, 2.2vw, 44px); margin-inline: 0px; }
  .footer .container > .row > * { width: auto; max-width: none; padding-inline: 0px; }
  .footer .container > .row > :nth-child(4) a { white-space: nowrap; }
}

@media (min-width: 1200px) {
  .footer .container > .row { grid-template-columns: minmax(170px, 16%) minmax(360px, 31%) minmax(190px, 16%) max-content minmax(100px, 8%); justify-content: space-between; gap: 0px; }
}

.footer-contact-row { display: grid; grid-template-columns: 28px 1fr; gap: 18px; align-items: start; margin-top: 14px; }

.footer-info-icon { position: relative; display: grid; width: 20px; height: 20px; place-items: center; margin-top: 2px; }

.footer-info-image { display: block; width: 22px; height: 22px; object-fit: contain; }

.footer-info-image::before { content: none; }

.footer-info-icon::before { content: ""; display: block; width: 20px; height: 20px; background: currentcolor; }

.icon-home { color: rgb(62, 229, 223); }

.icon-home::before { clip-path: polygon(50% 9%, 90% 36%, 90% 91%, 10% 91%, 10% 36%); }

.icon-home::after { content: ""; position: absolute; right: 4px; bottom: 4px; left: 4px; height: 8px; background: rgb(0, 0, 0); }

.icon-doc { color: rgb(255, 43, 95); }

.icon-doc::before { clip-path: polygon(9% 6%, 74% 6%, 91% 23%, 91% 94%, 9% 94%); }

.icon-doc::after { content: ""; position: absolute; inset: 5px; background: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) 0px 0px / 100% 3px no-repeat, linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) 0px 6px / 100% 3px no-repeat, linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) 0px 12px / 100% 3px no-repeat; }

.icon-star { color: rgb(200, 243, 55); }

.icon-star::before { clip-path: polygon(43% 0px, 57% 0px, 57% 33%, 86% 11%, 96% 21%, 68% 48%, 100% 48%, 100% 62%, 66% 62%, 89% 89%, 79% 100%, 50% 72%, 21% 100%, 11% 89%, 34% 62%, 0px 62%, 0px 48%, 32% 48%, 4% 21%, 14% 11%, 43% 33%); }

.footer-logo { width: 100vw; margin-top: 12px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 4px 0px; font-size: clamp(56px, 12.5vw, 260px); font-weight: 950; line-height: 0.8; text-align: center; }

.footer-logo img { display: block; width: min(80%, 1620px); height: auto; margin: 0px auto; }

.footer-socials { display: inline-flex; gap: 12px; }

.footer-socials a { display: grid; width: 18px; height: 18px; place-items: center; background: rgb(255, 255, 255); color: rgb(0, 0, 0); font-weight: 900; line-height: 1; }

.footer-socials img { display: block; width: 100%; height: 100%; object-fit: contain; }

.footer-socials a:first-child { background: rgb(59, 115, 255); color: rgb(0, 0, 0); }

.detail-page { min-height: 100vh; background: rgb(0, 0, 0); color: rgb(255, 255, 255); }

.detail-shell { width: min(960px, 100% - 48px); margin: 0px auto; padding: clamp(72px, 10vw, 140px) 0px; }

.detail-shell h1 { margin: 28px 0px 18px; text-transform: uppercase; font-family: var(--font-headline); font-size: clamp(48px, 9vw, 120px); line-height: 1; }

.detail-shell p { max-width: 620px; color: rgba(255, 255, 255, 0.78); font-size: 18px; }

.detail-back { display: inline-flex; padding-bottom: 8px; border-bottom: 1px solid; color: rgb(255, 255, 255); font-weight: 800; }

.solution-page { background: var(--dm-paper); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.solution-page h1, .solution-page h2, .solution-page h3, .solution-page .solutions-eyebrow, .solution-page .solution-method-main strong, .solution-page .solution-method-strip strong, .solution-page .solution-method-main h2, .solution-page .solution-method-strip .strip-title { font-family: var(--font-headline); letter-spacing: 0px; }

.solution-page .main-nav .nav-link.active { color: rgb(255, 255, 255); text-shadow: rgba(255, 255, 255, 0.18) 0px 3px 0px, rgba(0, 0, 0, 0.65) 0px 8px 16px; }

.solutions-container { width: min(var(--content-max), calc(100% - (var(--site-gutter) * 2))); margin: 0px auto; }

.solutions-eyebrow { color: var(--dm-blue); font-size: 13px; font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; }

.solutions-breadcrumb { display: flex; gap: 10px; align-items: center; margin-bottom: clamp(42px, 5vw, 78px); color: rgba(255, 255, 255, 0.62); font-size: 13px; font-weight: 800; text-transform: uppercase; }

.solutions-breadcrumb a:hover { color: rgb(255, 255, 255); }

.solutions-breadcrumb strong { color: rgb(255, 255, 255); }

.solutions-hero { position: relative; overflow: hidden; background: rgb(5, 5, 5); color: rgb(255, 255, 255); padding: clamp(72px, 8vw, 132px) 0px clamp(72px, 8vw, 124px); }

.solution-pdf-hero { background: rgb(255, 255, 255); color: rgb(0, 0, 0); padding: clamp(72px, 8vw, 116px) 0px clamp(64px, 7vw, 100px); }

.solution-pdf-hero::after { display: none; }

.solution-pdf-hero .solutions-hero-grid { grid-template-columns: minmax(0px, 1fr) auto; align-items: end; }

.solution-pdf-hero .solutions-container { width: min(1320px, calc(100% - (var(--site-gutter) * 2))); }

.solution-pdf-hero .solutions-eyebrow { color: rgb(156, 163, 170); font-size: clamp(16px, 1.4vw, 24px); letter-spacing: 0px; }

.solution-pdf-hero h1 { max-width: 1180px; font-family: var(--font-headline); font-size: clamp(38px, 4.6vw, 78px); font-weight: 400; line-height: 1.1; text-transform: uppercase; }

.solution-pdf-hero h1 span { display: block; white-space: nowrap; font-weight: 400; }

.solution-pdf-hero h1 span:nth-child(2) { font-weight: 800; }

.solution-hero-logo { display: grid; width: clamp(58px, 5vw, 86px); aspect-ratio: 1 / 1; place-items: center; background: rgb(0, 0, 0); }

.solution-hero-logo img { width: 72%; height: 72%; object-fit: contain; }

.solutions-hero::after { content: ""; position: absolute; top: -25%; right: -12%; width: min(54vw, 820px); aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(circle, rgba(56, 108, 232, 0.42), transparent 64%); pointer-events: none; }

.solutions-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0px, 1.15fr) minmax(320px, 0.85fr); gap: clamp(36px, 6vw, 96px); align-items: end; }

.solutions-hero h1, .solutions-section h2, .solutions-cta h2 { font-family: var(--font-headline); font-weight: 950; letter-spacing: 0px; text-transform: uppercase; }

.solutions-hero h1 { max-width: 880px; margin: 18px 0px 0px; font-size: clamp(56px, 8vw, 128px); line-height: 0.96; }

body.solution-page .solution-pdf-hero h1 { max-width: 1180px; font-family: var(--font-headline); font-size: clamp(38px, 4.5vw, 76px); font-weight: 400; line-height: 1.13; text-transform: uppercase; }

body.solution-page .solution-pdf-hero h1 span { display: block; font-family: inherit; white-space: nowrap; }

body.solution-page .solution-pdf-hero h1 span:first-child { font-weight: 400; }

body.solution-page .solution-pdf-hero h1 span:nth-child(2) { font-weight: 800; }

.solutions-hero-copy p { margin: 0px; color: rgba(255, 255, 255, 0.76); font-size: clamp(16px, 1.2vw, 20px); font-weight: 700; line-height: 1.55; }

.solutions-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.solutions-hero-media, .solutions-section-media, .solutions-cta-media { position: relative; z-index: 1; margin: clamp(30px, 5vw, 70px) 0px 0px; }

.solutions-hero-media img, .solutions-section-media img, .solutions-cta-media img { display: block; width: 100%; max-height: min(58vh, 620px); object-fit: cover; }

.solutions-hero-media img { border: 1px solid rgba(255, 255, 255, 0.18); }

.solutions-section-media img { border: 1px solid rgba(0, 0, 0, 0.12); }

.solutions-section-media.invert img, .solutions-cta-media img { border-color: rgba(255, 255, 255, 0.18); }

.solutions-btn { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid; border-radius: 999px; padding: 10px 20px; color: inherit; font-weight: 950; text-transform: uppercase; transition: transform 0.2s, background-color 0.2s, color 0.2s; }

.solutions-btn:hover, .solutions-btn:focus-visible { transform: translateY(-2px); }

.solutions-btn.primary { border-color: rgb(255, 255, 255); background: rgb(255, 255, 255); color: rgb(0, 0, 0); }

.solutions-btn.light { border-color: rgb(255, 255, 255); background: rgb(255, 255, 255); color: rgb(0, 0, 0); }

.solutions-manifesto { padding: clamp(54px, 6vw, 92px) 0px; background-image: radial-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1px); background-size: 12px 12px; }

.solutions-manifesto blockquote { max-width: 1180px; margin: 0px; font-family: var(--font-headline); font-size: clamp(28px, 4.2vw, 66px); font-weight: 900; line-height: 1.08; text-transform: uppercase; }

.solution-pdf-intro { padding: clamp(70px, 7vw, 116px) 0px clamp(76px, 8vw, 132px); background: rgb(255, 255, 255); color: rgb(76, 76, 76); text-align: center; }

.solution-pdf-intro .solutions-container { max-width: 1220px; }

.solution-pdf-lead, .solution-pdf-statement { max-width: 1080px; margin: 0px auto; font-size: clamp(20px, 2.1vw, 34px); font-weight: 500; line-height: 1.18; text-transform: uppercase; }

.solution-pdf-photo { width: min(100%, 710px); margin: clamp(28px, 4vw, 48px) auto; }

.solution-pdf-photo img { display: block; width: 100%; aspect-ratio: 16 / 7.2; object-fit: cover; }

.solution-method-poster { overflow: hidden visible; min-height: min(760px, calc(100vh - var(--main-nav-height))); padding: clamp(44px, 5.2vw, 82px) 0px clamp(28px, 4vw, 56px); background: rgb(255, 255, 255); color: rgb(0, 0, 0); }

.solution-method-stack { --motion-ease: cubic-bezier(.65, 0, .35, 1); --motion-dur: .65s; display: flex; align-items: stretch; gap: clamp(4px, 0.5vw, 8px); width: 100%; height: clamp(420px, 62vh, 600px); min-height: 420px; }

.solution-method-strip { position: relative; flex: 1 1 0px; min-width: 0px; overflow: hidden; border-radius: clamp(8px, 0.8vw, 12px); border: 0px; color: rgb(0, 0, 0); cursor: pointer; text-align: left; outline: none; transition: flex-grow var(--motion-dur) var(--motion-ease); }

.solution-method-strip:focus-visible { box-shadow: rgb(0, 0, 0) 0px 0px 0px 3px, rgba(255, 255, 255, 0.9) 0px 0px 0px 6px; }

.solution-method-strip.is-active { flex-grow: 5; }

.solution-method-strip[data-color="light"] { background: rgb(231, 231, 229); }

.solution-method-strip[data-color="orange"] { background: rgb(240, 96, 62); }

.solution-method-strip[data-color="blue"] { background: rgb(76, 110, 245); }

.solution-method-strip[data-color="pink"] { background: rgb(244, 114, 168); }

.panel-inner { position: absolute; inset: 0px; display: flex; flex-direction: column; padding: 26px; }

.graphic { position: absolute; z-index: 2; top: 66px; left: 50%; width: 42px; height: 42px; margin-left: -21px; color: rgb(15, 17, 21); opacity: 0.92; transition: top var(--motion-dur) var(--motion-ease),
    left var(--motion-dur) var(--motion-ease),
    width var(--motion-dur) var(--motion-ease),
    height var(--motion-dur) var(--motion-ease),
    margin-left var(--motion-dur) var(--motion-ease),
    opacity .35s var(--motion-ease); }

.graphic svg { display: block; width: 100%; height: 100%; overflow: visible; }

.graphic img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; }

.solution-method-strip.is-active .graphic { top: 24px; left: 24px; width: calc(100% - 48px); height: 54%; margin-left: 0px; opacity: 1; }

.rings { transform-origin: 60px 60px; }

.solution-method-strip.is-active .rings { animation: 14s linear 0s infinite normal none running methodSpin; }

@keyframes methodSpin {
  100% { transform: rotate(360deg); }
}

.core-dot { transform-origin: 60px 60px; transform-box: fill-box; }

.solution-method-strip.is-active .core-dot { animation: 1.8s ease-in-out 0s infinite normal none running methodPulse; }

@keyframes methodPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.4); }
}

.m, .tip, .node { transform-box: fill-box; transform-origin: center center; }

.solution-method-strip.is-active .m, .solution-method-strip.is-active .tip, .solution-method-strip.is-active .node { animation: methodPopIn .5s var(--motion-ease) backwards; }

.solution-method-strip.is-active .m1, .solution-method-strip.is-active .n1 { animation-delay: 0.02s; }

.solution-method-strip.is-active .m2, .solution-method-strip.is-active .n2 { animation-delay: 0.09s; }

.solution-method-strip.is-active .m3, .solution-method-strip.is-active .n3 { animation-delay: 0.16s; }

.solution-method-strip.is-active .m4 { animation-delay: 0.23s; }

@keyframes methodPopIn {
  0% { transform: scale(0.65); opacity: 0.35; }
  100% { transform: scale(1); opacity: 1; }
}

.solution-method-strip .arrow { position: absolute; top: 22px; right: 22px; z-index: 4; display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; color: rgb(15, 17, 21); transition: transform var(--motion-dur) var(--motion-ease),
    left var(--motion-dur) var(--motion-ease),
    right var(--motion-dur) var(--motion-ease); }

.solution-method-strip .arrow svg { display: block; width: 16px; height: 16px; }

.solution-method-strip.is-active .arrow { right: auto; left: 22px; transform: rotate(-135deg); }

.num { position: relative; z-index: 3; margin-top: auto; color: rgb(15, 17, 21); font-family: var(--font-headline); font-size: 52px; font-weight: 950; line-height: 1; transition: opacity .3s var(--motion-ease); }

.solution-method-strip.is-active .num { opacity: 0; }

.label-vertical { position: absolute; inset: 150px 0px 96px; z-index: 3; display: flex; align-items: center; justify-content: center; color: rgb(15, 17, 21); font-family: var(--font-headline); font-size: 13px; font-weight: 950; letter-spacing: 0px; line-height: 1; text-transform: uppercase; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg) rotateX(0deg); transform-origin: center center; opacity: 1; transition: opacity var(--motion-dur) var(--motion-ease),
    transform var(--motion-dur) var(--motion-ease); }

.solution-method-strip.is-active .label-vertical { opacity: 0; pointer-events: none; transform: rotate(180deg) rotateX(90deg); }

.content-horizontal { position: absolute; right: 28px; bottom: 26px; left: 28px; z-index: 3; display: block; color: rgb(15, 17, 21); opacity: 0; transform: rotateX(-90deg); transform-origin: left bottom; transition: opacity var(--motion-dur) var(--motion-ease),
    transform var(--motion-dur) var(--motion-ease); }

.solution-method-strip.is-active .content-horizontal { opacity: 1; transform: rotateX(0deg); transition-delay: 0.12s; }

.content-horizontal .idx { display: block; margin-bottom: 12px; font-family: var(--font-headline); font-size: 40px; font-weight: 950; line-height: 1; }

.content-horizontal .title { display: block; margin-bottom: 9px; font-family: var(--font-headline); font-size: clamp(18px, 1.4vw, 24px); font-weight: 950; line-height: 1; text-transform: uppercase; }

.content-horizontal .desc { display: block; max-width: 520px; color: rgba(15, 17, 21, 0.78); font-size: clamp(13px, 0.9vw, 15px); font-weight: 600; line-height: 1.55; }

.motion-link { display: inline-flex; gap: 16px; margin-top: 22px; padding-bottom: 10px; border-bottom: 2px solid rgb(15, 17, 21); color: rgb(15, 17, 21); font-size: 13px; font-weight: 900; line-height: 1; text-transform: uppercase; }

.intro-container { width: min(100%, 1536px); padding-inline: clamp(42px, 8.2vw, 126px); margin: 0px auto; }

.intro-hero { min-height: clamp(300px, 30vw, 460px); padding: clamp(60px, 7vw, 106px) 0px clamp(54px, 6vw, 92px); background: rgb(255, 255, 255); color: rgb(0, 0, 0); }

.intro-hero .intro-container { display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: clamp(32px, 6vw, 112px); align-items: center; }

.intro-hero-copy { min-width: 0px; }

.intro-kicker, .intro-section-label { color: rgb(161, 166, 173); font-size: clamp(13px, 0.95vw, 16px); font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; }

.intro-hero h1 { max-width: 980px; margin: 14px 0px 0px; padding-block: 0.06em 0.12em; font-family: var(--font-body); font-size: clamp(46px, 5.3vw, 96px); font-weight: 500; line-height: 1.12; letter-spacing: 0px; overflow: visible; text-wrap: balance; text-transform: none; }

.intro-hero h1 span { display: block; max-width: 100%; }

.intro-hero h1 span:last-child { font-weight: 900; }

.intro-hero p { max-width: 680px; margin: 22px 0px 0px; font-size: clamp(17px, 1.3vw, 24px); font-weight: 800; line-height: 1.35; text-transform: uppercase; }

.intro-hero-mark { display: block; width: clamp(56px, 5.4vw, 84px); aspect-ratio: 1 / 1; object-fit: contain; padding: 0.28em; background: rgb(0, 0, 0); }

.intro-thought { overflow: hidden; background: rgb(5, 5, 5); color: rgb(255, 255, 255); }

.intro-thought .intro-container { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(300px, 44%); align-items: stretch; min-height: clamp(156px, 13vw, 210px); padding-inline: 0px; }

.intro-thought img { width: 100%; height: 100%; min-height: clamp(156px, 13vw, 210px); object-fit: cover; filter: grayscale(1); }

.intro-thought h2 { display: grid; place-items: center; margin: 0px; padding: clamp(28px, 3vw, 48px) clamp(34px, 5vw, 82px); background: rgb(5, 5, 5); font-family: var(--font-headline); font-size: clamp(34px, 4.8vw, 78px); font-weight: 950; line-height: 1.08; overflow: visible; text-wrap: balance; text-transform: uppercase; }

.intro-beliefs { padding: clamp(34px, 4vw, 58px) 0px clamp(54px, 6vw, 92px); background: rgb(255, 255, 255); color: rgb(0, 0, 0); }

.intro-belief-grid { display: grid; gap: 0px; }

.intro-belief-grid article { display: grid; grid-template-columns: 72px minmax(180px, 0.7fr) minmax(0px, 1fr); gap: clamp(24px, 5vw, 90px); align-items: start; padding: clamp(28px, 4vw, 54px) 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.42); }

.intro-belief-grid article:first-child { padding-top: 0px; }

.intro-belief-grid article > span { color: rgb(154, 160, 168); font-size: 13px; font-weight: 900; }

.intro-belief-grid h2 { margin: 0px; font-size: clamp(18px, 1.2vw, 24px); font-weight: 950; line-height: 1.14; text-transform: uppercase; }

.intro-belief-grid p { max-width: 620px; margin: 0px; font-size: clamp(13px, 0.9vw, 16px); font-weight: 650; line-height: 1.42; }

.intro-values { background: rgb(255, 255, 255); color: rgb(0, 0, 0); }

.intro-values .intro-container { width: 100%; max-width: none; padding-inline: 0px; }

.intro-section-label { display: none; }

.intro-value-grid { display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); }

.intro-value-card { position: relative; display: grid; min-height: clamp(390px, 43vw, 660px); align-content: space-between; padding: clamp(24px, 2.8vw, 54px) clamp(22px, 2.1vw, 44px); overflow: hidden; background: var(--value-bg, #fff); color: rgb(0, 0, 0); }

.intro-value-card small { display: block; margin-bottom: 8px; color: rgba(0, 0, 0, 0.55); font-size: clamp(10px, 0.72vw, 13px); font-weight: 900; text-transform: uppercase; }

.intro-value-card h2 { margin: 0px; padding-block: 0.06em 0.1em; font-size: clamp(22px, 2.35vw, 44px); font-weight: 950; line-height: 1.08; overflow: visible; text-wrap: balance; text-transform: uppercase; }

.intro-value-card > img { position: absolute; inset: 0px; width: 100%; height: 100%; margin: 0px; object-fit: cover; filter: grayscale(1); opacity: 0; transition: opacity 0.22s; }

.intro-value-card > div { position: relative; z-index: 1; }

.intro-value-card span { display: block; margin-bottom: 14px; font-family: var(--font-headline); font-size: clamp(56px, 7vw, 118px); font-weight: 950; line-height: 0.75; }

.intro-value-card p { max-width: 220px; margin: 0px; font-size: clamp(11px, 0.75vw, 14px); font-weight: 750; line-height: 1.28; }

.intro-empathy { display: grid; place-items: center; min-height: clamp(560px, 55vw, 880px); padding: clamp(32px, 4vw, 64px) 24px; background: rgb(255, 255, 255); color: rgb(0, 0, 0); }

.intro-empathy-media { margin: 0px; width: min(860px, 100%); }

.intro-empathy-media img { display: block; width: 100%; height: auto; object-fit: contain; }

.intro-ecosystem { padding: clamp(58px, 6vw, 96px) 0px clamp(70px, 7vw, 116px); background: rgb(240, 235, 229); color: rgb(0, 0, 0); text-align: center; }

.intro-ecosystem h2 { margin: 0px 0px 8px; font-size: clamp(16px, 1.35vw, 24px); font-weight: 950; line-height: 1.05; text-transform: uppercase; }

.intro-ecosystem p { max-width: 980px; margin: 0px auto clamp(44px, 5vw, 78px); color: rgba(0, 0, 0, 0.72); font-size: clamp(14px, 1.05vw, 18px); font-weight: 700; line-height: 1.4; text-transform: uppercase; }

.intro-ecosystem-logos { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: clamp(14px, 2vw, 32px); align-items: stretch; }

.intro-ecosystem-logo { display: flex; min-width: 0px; min-height: clamp(150px, 15vw, 230px); margin: 0px; padding: clamp(16px, 2vw, 28px); align-items: center; justify-content: center; background: transparent; }

.intro-ecosystem-logo img { display: block; width: 100%; height: 100%; max-height: 174px; object-fit: contain; }

.intro-team { padding: clamp(80px, 9vw, 140px) 0px clamp(88px, 10vw, 160px); background: rgb(255, 255, 255); color: rgb(0, 0, 0); }

.intro-team-head { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(280px, 34%); gap: clamp(28px, 6vw, 104px); align-items: end; margin-bottom: clamp(38px, 5vw, 76px); }

.intro-team-head h2 { margin: 0px; font-family: var(--font-headline); font-size: clamp(44px, 6.2vw, 112px); font-weight: 950; line-height: 0.9; text-transform: uppercase; }

.intro-team-head h2 span { display: table; margin-bottom: 10px; padding: 0px 12px; background: rgb(88, 217, 207); }

.intro-team-head p { margin: 0px; font-size: clamp(13px, 0.92vw, 16px); font-weight: 800; line-height: 1.35; text-transform: uppercase; }

.intro-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: clamp(20px, 2vw, 34px); }

.intro-team-card { position: relative; display: block; min-height: clamp(320px, 31vw, 520px); overflow: hidden; background: rgb(22, 22, 22); color: rgb(255, 255, 255); text-decoration: none; }

.intro-team-card img { width: 100%; height: 100%; object-fit: cover; }

.intro-team-card > span { position: absolute; top: 0px; right: 0px; display: grid; width: clamp(52px, 5vw, 78px); aspect-ratio: 1 / 1; place-items: center; background: rgba(0, 0, 0, 0.82); color: rgb(255, 255, 255); font-size: clamp(32px, 4vw, 58px); line-height: 1; }

.intro-team-card div { position: absolute; inset: auto 0px 0px; padding: clamp(18px, 2vw, 32px); background: linear-gradient(transparent, rgba(0, 0, 0, 0.88)); }

.intro-team-card strong { display: block; margin-bottom: 10px; font-family: var(--font-headline); font-size: clamp(28px, 3.4vw, 58px); line-height: 0.8; }

.intro-team-card h3 { margin: 0px 0px 8px; font-size: clamp(13px, 1vw, 17px); font-weight: 950; line-height: 1.1; text-transform: uppercase; }

.intro-team-card p { margin: 0px; color: rgba(255, 255, 255, 0.82); font-size: 13px; font-weight: 650; line-height: 1.35; }

.brand-identity-page .intro-hero { min-height: clamp(260px, 26vw, 420px); padding: clamp(46px, 5.4vw, 88px) 0px clamp(38px, 4.6vw, 72px); }

.brand-identity-page .intro-hero::after { content: none; }

.brand-identity-page .intro-hero .intro-container { position: relative; display: block; }

.brand-identity-page .intro-hero-copy { padding-right: clamp(92px, 12vw, 180px); }

.brand-identity-page .intro-hero-mark { position: absolute; top: 50%; right: 2%; width: clamp(56px, 6vw, 86px); margin: 0px; padding: 0px; background: transparent; transform: translateY(-50%); }

.brand-identity-page .intro-hero h1 { max-width: 780px; font-size: clamp(42px, 4.2vw, 78px); }

.brand-identity-page .intro-hero p { max-width: 900px; font-size: clamp(14px, 1vw, 18px); font-weight: 800; line-height: 1.42; }

.brand-identity-content { background: rgb(241, 216, 191); color: rgb(0, 0, 0); }

.brand-identity-handoff { --brand-handoff-rail-x: calc(var(--section-rail-shift) * -1); width: min(var(--content-max), calc(100% - (var(--site-gutter) * 2))); margin: 0px auto; overflow: visible; background: rgb(255, 255, 255); }

.brand-handoff-section { position: relative; width: 100%; margin: 0px; }

.brand-handoff-frame { position: relative; width: 100%; margin: 0px; overflow: hidden; line-height: 0; }

.brand-frame-rail { position: absolute; z-index: 2; top: 0px; bottom: 0px; left: var(--brand-handoff-rail-x); width: 1px; background: rgb(17, 17, 17); color: rgb(17, 17, 17); line-height: normal; }

.brand-handoff-lockup .brand-frame-rail { background: rgb(255, 255, 255); color: rgb(255, 255, 255); }

.brand-frame-rail-marker { position: absolute; top: 20%; left: 50%; width: clamp(10px, 1.1vw, 16px); aspect-ratio: 1 / 1; background: currentcolor; transform: translate(-50%, -50%); }

.brand-frame-rail-label { position: absolute; top: calc(20% - 0.65em); left: clamp(12px, 1.3vw, 20px); color: rgb(155, 155, 155); font-family: var(--font-body); font-size: clamp(11px, 1.05vw, 16px); font-weight: 800; white-space: nowrap; }

.brand-handoff-frame > img.brand-handoff-main { display: block; width: 100%; height: auto; }

.brand-handoff-motion { position: absolute; left: 43.75%; top: 46.4%; width: 12.5%; height: 26.2%; object-fit: cover; }

.brand-handoff-caption { margin: 0px; background: rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: var(--font-body); font-size: clamp(14px, 1.55vw, 24px); font-weight: 800; line-height: 1.28; text-transform: uppercase; letter-spacing: 0px; }

.brand-handoff-dot { display: grid; grid-template-columns: 6.5% minmax(0px, 1fr); grid-template-rows: auto 1fr; aspect-ratio: 1440 / 697; padding: 4.8% 4.5% 4% 0px; background: rgb(255, 255, 255); line-height: normal; }

.brand-dot-rail { position: absolute; z-index: 2; top: 0px; bottom: 0px; left: var(--brand-handoff-rail-x); width: 1px; height: auto; background: rgb(17, 17, 17); }

.brand-dot-rail::before, .brand-dot-rail::after { position: absolute; left: 50%; width: clamp(10px, 1.1vw, 16px); aspect-ratio: 1 / 1; background: rgb(17, 17, 17); content: ""; transform: translate(-50%, -50%); }

.brand-dot-rail::before { top: 4%; }

.brand-dot-rail::after { top: 96%; }

.brand-dot-rail-label { position: absolute; left: clamp(12px, 1.3vw, 20px); color: rgb(155, 155, 155); font-family: var(--font-body); font-size: clamp(11px, 1.05vw, 16px); font-weight: 800; white-space: nowrap; }

.brand-dot-rail-label-top { top: calc(4% - 0.65em); }

.brand-dot-rail-label-bottom { top: calc(96% - 0.65em); }

.brand-handoff-dot .brand-handoff-caption { grid-area: 1 / 2; padding: 0px 1.5%; }

.brand-dot-visual { position: relative; grid-area: 2 / 2; width: min(54%, 620px); margin: 0px; place-self: center; line-height: 0; }

.brand-dot-visual .brand-handoff-main { display: block; width: 100%; height: auto; }

.brand-dot-visual .brand-handoff-motion { left: 33.27%; top: 0px; width: 33.46%; height: 100%; }

@media (max-width: 700px) {
  .brand-identity-page .intro-hero { min-height: 0px; padding: 40px 0px 108px; }
  .brand-identity-page .intro-hero-copy { padding-right: 0px; }
  .brand-identity-page .intro-hero-mark { top: auto; right: 0px; bottom: 30px; width: 54px; transform: none; }
  .brand-handoff-motion { left: 43.7%; width: 12.6%; }
  .brand-handoff-dot { grid-template-columns: 30px minmax(0px, 1fr); grid-template-rows: auto auto; min-height: 390px; aspect-ratio: auto; padding: 24px 14px 30px 0px; }
  .brand-handoff-dot .brand-handoff-caption { padding: 0px 0px 0px 12px; font-size: 13px; line-height: 1.38; }
  .brand-dot-visual { width: 88%; margin-top: 30px; }
  .brand-dot-visual .brand-handoff-motion { left: 33.27%; width: 33.46%; }
}

.brand-lockup { display: grid; min-height: clamp(260px, 32vw, 510px); place-items: center; background: rgb(5, 5, 5); color: rgb(255, 255, 255); text-align: center; }

.brand-lockup-mark { position: relative; display: inline-grid; place-items: center; }

.brand-lockup-mark > span { font-size: clamp(58px, 10vw, 178px); font-weight: 500; letter-spacing: -0.035em; line-height: 0.82; }

.brand-lockup-mark > span span { font-weight: 900; }

.brand-lockup-mark img { position: absolute; left: clamp(16px, 4vw, 76px); top: 50%; width: clamp(58px, 7vw, 118px); transform: translateY(-45%) rotate(-10deg); }

.brand-lockup-mark small { position: absolute; right: clamp(0px, 1vw, 24px); bottom: clamp(-18px, -1vw, -6px); color: rgba(255, 255, 255, 0.9); font-size: clamp(11px, 0.95vw, 18px); font-weight: 800; line-height: 1.05; text-align: left; text-transform: uppercase; }

.brand-lockup-image { display: block; width: min(100%, 1120px); max-height: clamp(220px, 30vw, 460px); object-fit: contain; }

.brand-moodboard, .brand-campaign-grid, .brand-application-grid { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: 0px; padding: clamp(30px, 4.8vw, 78px) clamp(30px, 8vw, 126px); background: radial-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px) 0px 0px / 18px 18px, rgb(240, 213, 185); }

.brand-moodboard-single { display: block; width: 100%; background: rgb(240, 213, 185); overflow: hidden; }

.brand-moodboard-single img { display: block; width: 100%; height: auto; object-fit: contain; }

.brand-moodboard img, .brand-campaign-grid img, .brand-application-grid img, .brand-image-slot { width: 100%; min-height: clamp(180px, 22vw, 360px); object-fit: cover; }

.brand-moodboard img:nth-child(3n+1), .brand-campaign-grid img:nth-child(3n+1), .brand-application-grid img:nth-child(4n+1), .brand-moodboard .brand-image-slot:nth-child(3n+1), .brand-campaign-grid .brand-image-slot:nth-child(3n+1), .brand-application-grid .brand-image-slot:nth-child(4n+1) { grid-column: span 5; }

.brand-moodboard img:nth-child(3n+2), .brand-campaign-grid img:nth-child(3n+2), .brand-application-grid img:nth-child(4n+2), .brand-moodboard .brand-image-slot:nth-child(3n+2), .brand-campaign-grid .brand-image-slot:nth-child(3n+2), .brand-application-grid .brand-image-slot:nth-child(4n+2) { grid-column: span 4; }

.brand-moodboard img:nth-child(3n), .brand-campaign-grid img:nth-child(3n), .brand-application-grid img:nth-child(4n+3), .brand-application-grid img:nth-child(4n), .brand-moodboard .brand-image-slot:nth-child(3n), .brand-campaign-grid .brand-image-slot:nth-child(3n), .brand-application-grid .brand-image-slot:nth-child(4n+3), .brand-application-grid .brand-image-slot:nth-child(4n) { grid-column: span 3; }

.brand-moodboard-collage { position: relative; display: grid; grid-template-columns: minmax(70px, 0.9fr) minmax(120px, 1.1fr) minmax(210px, 1.65fr) minmax(120px, 1.05fr) minmax(90px, 0.95fr); align-items: center; min-height: clamp(330px, 42vw, 560px); padding: clamp(44px, 6vw, 92px) clamp(26px, 7vw, 108px); overflow: hidden; }

.brand-moodboard-collage::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 30%, rgba(255, 255, 255, 0.14)); pointer-events: none; }

.brand-collage-media, .brand-collage-color, .brand-collage-poster { position: relative; z-index: 1; }

.brand-collage-media > img, .brand-collage-media > .brand-image-slot, .brand-collage-poster-media > img, .brand-collage-poster-media > .brand-image-slot { display: block; width: 100%; height: 100%; min-height: 0px; object-fit: cover; }

.brand-collage-side { height: clamp(170px, 20vw, 300px); box-shadow: rgba(0, 0, 0, 0.12) 0px 18px 28px; }

.brand-collage-side-left { grid-area: 1 / 1 / auto / 3; width: 72%; justify-self: start; transform: translateX(-18%); }

.brand-collage-side-right { grid-area: 1 / 4 / auto / 5; height: clamp(190px, 23vw, 330px); transform: translateX(-6%); }

.brand-collage-color { height: clamp(180px, 23vw, 330px); }

.brand-collage-lime { grid-area: 1 / 2 / auto / 3; background: rgb(168, 241, 42); transform: translateX(-20%); }

.brand-collage-cyan { grid-area: 1 / 5 / auto / 6; background: rgb(85, 212, 202); transform: translateX(-36%); }

.brand-collage-poster { grid-area: 1 / 3 / auto / 4; align-self: center; min-height: clamp(260px, 34vw, 470px); padding: clamp(18px, 1.4vw, 26px) clamp(18px, 1.4vw, 26px) clamp(72px, 7vw, 104px); background: rgb(3, 3, 3); color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.24) 0px 24px 45px; }

.brand-collage-poster-media { height: clamp(190px, 25vw, 350px); overflow: hidden; background: rgb(17, 17, 17); }

.brand-collage-poster-media .brand-image-slot { color: rgba(255, 255, 255, 0.82); border-color: rgba(255, 255, 255, 0.16); background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)), rgb(21, 21, 21); }

.brand-collage-poster-caption { position: absolute; left: clamp(18px, 1.4vw, 26px); right: clamp(18px, 1.4vw, 26px); bottom: clamp(16px, 1.6vw, 26px); display: flex; align-items: end; justify-content: space-between; gap: 16px; }

.brand-collage-poster-caption strong { font-size: clamp(28px, 4.2vw, 66px); font-weight: 500; letter-spacing: -0.04em; line-height: 0.82; }

.brand-collage-poster-caption strong span { font-weight: 950; }

.brand-collage-poster-caption small { max-width: 180px; font-size: clamp(7px, 0.7vw, 12px); font-weight: 900; line-height: 1.05; text-align: right; text-transform: uppercase; }

.brand-collage-tiny { z-index: 2; width: clamp(48px, 6vw, 86px); height: clamp(84px, 12vw, 150px); box-shadow: rgba(0, 0, 0, 0.14) 0px 12px 24px; }

.brand-collage-tiny-left { grid-area: 1 / 1 / auto / 2; place-self: end start; transform: translate(-40%, 12%); }

.brand-collage-tiny-right { grid-area: 1 / 5 / auto / 6; place-self: end; transform: translate(24%, 10%); }

.brand-collage-sticker { position: absolute; z-index: 3; top: clamp(34px, 5vw, 78px); left: 62%; display: grid; place-items: center; width: clamp(58px, 6.5vw, 108px); aspect-ratio: 1 / 1; background: rgb(240, 122, 178); clip-path: polygon(50% 0px, 61% 22%, 85% 15%, 78% 39%, 100% 50%, 78% 61%, 85% 85%, 61% 78%, 50% 100%, 39% 78%, 15% 85%, 22% 61%, 0px 50%, 22% 39%, 15% 15%, 39% 22%); color: rgb(0, 0, 0); font-size: clamp(8px, 0.8vw, 13px); font-weight: 950; line-height: 0.9; text-align: center; text-transform: uppercase; transform: rotate(-12deg); }

.brand-image-slot { position: relative; display: grid; place-items: center; min-height: clamp(210px, 24vw, 390px); border: 1px solid rgba(0, 0, 0, 0.12); background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.45)), repeating-linear-gradient(45deg, transparent 0px, transparent 14px, rgba(0, 0, 0, 0.04) 14px, rgba(0, 0, 0, 0.04) 16px); color: rgba(0, 0, 0, 0.52); font-size: clamp(11px, 0.9vw, 14px); font-weight: 950; line-height: 1; text-align: center; text-transform: uppercase; }

.brand-image-slot img { width: clamp(34px, 4vw, 62px); min-height: 0px; margin-bottom: 8px; object-fit: contain; }

.brand-moodboard .brand-image-slot img, .brand-campaign-grid .brand-image-slot img, .brand-application-grid .brand-image-slot img { width: clamp(34px, 4vw, 62px); min-height: 0px; object-fit: contain; }

.brand-identity-dot, .brand-about { padding: clamp(34px, 4vw, 62px) 0px; background: rgb(255, 255, 255); border-top: 1px solid rgba(0, 0, 0, 0.18); }

.brand-identity-dot > span, .brand-mascot-copy > span, .brand-about > span { display: inline-block; margin-bottom: 14px; color: rgb(143, 150, 158); font-size: clamp(12px, 0.84vw, 14px); font-weight: 900; text-transform: uppercase; }

.brand-identity-dot h2, .brand-mascot h2, .brand-about h2 { max-width: 1040px; margin: 0px 0px 18px; font-family: var(--font-body); font-size: clamp(34px, 4.8vw, 84px); font-weight: 950; line-height: 0.94; letter-spacing: 0px; }

.brand-identity-dot p, .brand-mascot p, .brand-about p { max-width: 1080px; margin: 0px; font-size: clamp(12px, 0.82vw, 15px); font-weight: 900; line-height: 1.28; text-transform: uppercase; }

.brand-system-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 44px); }

.brand-system-list strong, .brand-personality b { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 14px; border: 2px solid rgb(17, 17, 17); border-radius: 999px; font-size: clamp(12px, 0.86vw, 15px); font-weight: 900; line-height: 1; text-transform: uppercase; }

.brand-system-image { display: block; width: min(100%, 880px); max-height: clamp(220px, 30vw, 460px); margin-top: clamp(28px, 4vw, 64px); object-fit: contain; }

.brand-system-placeholder { display: grid; place-items: center; min-height: clamp(160px, 18vw, 260px); background: rgb(53, 108, 244); }

.brand-system-placeholder .brand-image-slot { width: min(320px, 78%); min-height: clamp(90px, 10vw, 145px); color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.82); }

.brand-mascot { background: rgb(85, 168, 255); color: rgb(255, 255, 255); }

.brand-mascot-inner { display: grid; grid-template-columns: minmax(180px, 0.72fr) minmax(0px, 1.28fr); gap: clamp(28px, 6vw, 110px); align-items: center; min-height: clamp(460px, 52vw, 760px); padding-block: clamp(48px, 6vw, 96px); }

.brand-mascot-visual { display: grid; place-items: center; min-height: clamp(220px, 28vw, 430px); }

.brand-mascot-visual img { width: min(100%, 430px); max-height: clamp(180px, 30vw, 480px); object-fit: contain; }

.brand-mascot-placeholder { display: grid; place-items: center; width: min(360px, 80%); aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(circle at 50% 48%, rgb(18, 52, 206) 0px, rgb(18, 52, 206) 42%, rgb(0, 16, 94) 43%, rgb(0, 16, 94) 65%, transparent 66%), radial-gradient(rgb(255, 242, 0) 0px, rgb(255, 242, 0) 54%, transparent 56%); }

.brand-mascot-placeholder img { width: clamp(72px, 9vw, 132px); }

.brand-mascot-copy > span, .brand-mascot small { color: rgba(255, 255, 255, 0.82); }

.brand-mascot-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: clamp(18px, 2vw, 34px); margin-top: clamp(22px, 3vw, 42px); }

.brand-mascot small, .brand-personality small { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 900; text-transform: uppercase; }

.brand-personality { margin-top: clamp(26px, 3vw, 46px); }

.brand-personality div { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }

.brand-personality b { border-color: rgb(255, 255, 255); }

.brand-turnaround-wrap { padding-block: clamp(44px, 5vw, 78px); background: rgb(255, 255, 255); text-align: center; }

.brand-turnaround-wrap h2 { margin: 0px auto clamp(24px, 3vw, 44px); font-family: var(--font-headline); font-size: clamp(42px, 5.4vw, 88px); font-weight: 950; line-height: 0.85; text-transform: uppercase; }

.brand-turnaround { display: block; width: min(100%, 1180px); margin: 0px auto; object-fit: contain; }

.brand-turnaround-placeholder { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: clamp(12px, 2vw, 28px); }

.brand-turnaround-placeholder .brand-image-slot { min-height: clamp(140px, 14vw, 210px); border-style: dashed; }

.brand-mission { position: relative; display: grid; place-items: center; min-height: clamp(320px, 38vw, 590px); background: rgb(255, 242, 0); padding: clamp(42px, 6vw, 88px) clamp(42px, 8.2vw, 126px); text-align: center; overflow: hidden; }

.brand-campaign-grid { background: rgb(34, 34, 34); }

.brand-campaign-grid .brand-image-slot { color: rgba(255, 255, 255, 0.82); border-color: rgba(255, 255, 255, 0.16); background: linear-gradient(135deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.5)), repeating-linear-gradient(45deg, transparent 0px, transparent 14px, rgba(255, 255, 255, 0.06) 14px, rgba(255, 255, 255, 0.06) 16px); }

.brand-application-grid { padding-top: 0px; }

.brand-mission p { position: relative; z-index: 1; max-width: 1180px; margin: 0px; font-family: var(--font-headline); font-size: clamp(34px, 5.3vw, 92px); font-weight: 950; line-height: 0.94; text-transform: uppercase; }

.brand-mission-cta { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin-top: clamp(22px, 3vw, 44px); padding: 10px 22px; border: 2px solid rgb(0, 0, 0); border-radius: 999px; color: rgb(0, 0, 0); font-weight: 950; line-height: 1; text-decoration: none; text-transform: uppercase; }

.brand-mission-cta:hover { background: rgb(0, 0, 0); color: rgb(255, 255, 255); }

.brand-mission-image { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; opacity: 0.22; }

.brand-signature-sticker { position: absolute; top: clamp(18px, 3vw, 44px); left: clamp(28px, 7vw, 116px); z-index: 2; width: clamp(72px, 10vw, 160px); object-fit: contain; transform: rotate(-9deg); }

.brand-single-media, .brand-media-stack { display: block; width: 100%; background: rgb(255, 255, 255); }

.brand-single-media { overflow: hidden; }

.brand-single-media img, .brand-media-stack img { display: block; width: 100%; height: auto; min-height: 0px; object-fit: contain; }

.brand-media-stack { background: rgb(255, 255, 255); }

.brand-media-stack .brand-single-media + .brand-single-media { margin-top: 0px; }

.brand-lockup { padding: 0px; background: rgb(0, 0, 0); }

.brand-lockup-image { width: 100%; max-width: none; max-height: none; margin: 0px; object-fit: contain; }

.brand-identity-dot { padding-bottom: 0px; }

.brand-identity-dot .brand-single-media { margin-top: clamp(28px, 4vw, 64px); }

.brand-identity-dot .brand-system-image, .brand-identity-dot .brand-identity-media { width: 100%; max-width: none; max-height: none; }

.brand-mascot { background: rgb(91, 168, 244); }

.brand-mascot .intro-container { width: 100%; max-width: none; padding: 0px; }

.brand-mascot-motion { position: relative; background: rgb(91, 168, 244); }

.brand-mascot-motion img { transition: opacity 0.32s, transform 0.42s; }

.brand-mascot-motion img.is-hidden { display: none; }

.brand-mascot-motion.is-clicked img.is-active { animation: 0.48s ease 0s 1 normal none running brandMotionPop; }

.brand-motion-next { position: absolute; right: clamp(36px, 6.5vw, 116px); bottom: clamp(36px, 7vw, 110px); z-index: 2; display: grid; width: clamp(58px, 5.2vw, 86px); aspect-ratio: 1 / 1; place-items: center; border: 2px solid rgb(255, 255, 255); border-radius: 999px; background: rgba(0, 0, 0, 0.18); color: rgb(255, 255, 255); font-size: clamp(28px, 3.2vw, 52px); font-weight: 900; line-height: 1; cursor: pointer; transition: transform 0.2s, background 0.2s; }

.brand-motion-next:hover, .brand-motion-next:focus-visible { background: rgb(0, 0, 0); transform: translate(3px, -3px); }

.brand-turnaround-wrap { width: 100%; max-width: none; padding: 0px; }

.brand-turnaround-wrap .brand-turnaround { width: 100%; max-width: none; margin: 0px; }

.brand-campaign-grid, .brand-application-grid { display: block; padding: 0px; background: rgb(255, 255, 255); }

.brand-campaign-grid img, .brand-application-grid img { width: 100%; min-height: 0px; object-fit: contain; }

.brand-mission { display: block; min-height: 0px; padding: 0px; background: rgb(255, 255, 255); text-align: initial; }

.brand-mission .brand-mission-image { position: static; inset: auto; width: 100%; height: auto; opacity: 1; }

.brand-mission .brand-mission-image img { width: 100%; height: auto; object-fit: contain; }

@keyframes brandMotionPop {
  0% { transform: translateX(0px); }
  45% { transform: translateX(-18px) scale(1.01); }
  100% { transform: translateX(0px); }
}

.solutions-section { padding: clamp(64px, 7vw, 116px) 0px; background: rgb(255, 255, 255); }

.solutions-section.white-stage { background: var(--section-bg, #fff); color: var(--section-text, #000); }

.solutions-section.paper-stage { background-color: var(--section-bg, var(--dm-paper)); color: var(--section-text, #000); background-image: radial-gradient(rgba(0,0,0,.07) 1px, transparent 1px),
    var(--section-bg-image, none); background-size: 12px 12px, cover; background-position: 0px 0px, center center; background-repeat: repeat, no-repeat; }

.solutions-section.alt { background: rgb(246, 246, 246); }

.solutions-hero .section-mark, .solutions-manifesto .section-mark, .solutions-section .section-mark, .solutions-process .section-mark, .solutions-cta .section-mark { margin-bottom: clamp(24px, 3vw, 42px); }

.solutions-section-head { display: grid; grid-template-columns: minmax(0px, 0.92fr) minmax(300px, 0.78fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(34px, 5vw, 72px); }

.solutions-section-head.compact { grid-template-columns: 1fr; max-width: 820px; }

.solutions-section-head h2 { grid-column: 1; margin: 8px 0px 0px; font-size: clamp(42px, 6vw, 92px); line-height: 0.98; }

.solutions-section-head p { grid-column: 2; margin: 0px; color: rgb(85, 85, 85); font-size: clamp(15px, 1.05vw, 18px); font-weight: 700; line-height: 1.5; }

.solutions-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); border: 1px solid rgb(216, 216, 216); border-radius: 16px; overflow: hidden; }

.solutions-compare-card { min-height: 270px; padding: clamp(28px, 4vw, 54px); background: rgb(255, 255, 255); }

.solutions-card-image { display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0px 0px 24px; object-fit: cover; }

.solutions-compare-card.dark { background: rgb(5, 5, 5); color: rgb(255, 255, 255); }

.solutions-compare-card span { display: block; margin-bottom: 18px; color: rgb(136, 136, 136); font-size: 12px; font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; }

.solutions-compare-card.dark span { color: var(--dm-blue); }

.solutions-compare-card h3 { margin: 0px 0px 16px; font-family: var(--font-headline); font-size: clamp(34px, 4.2vw, 64px); font-weight: 950; line-height: 1; text-transform: uppercase; }

.solutions-compare-card p { max-width: 620px; margin: 0px; color: rgb(85, 85, 85); font-weight: 700; line-height: 1.55; }

.solutions-compare-card.dark p { color: rgba(255, 255, 255, 0.74); }

.solutions-method-flow { position: relative; display: grid; gap: 0px; max-width: 1120px; margin: 0px auto; }

.solutions-method-flow::before { content: ""; position: absolute; top: 38px; bottom: 38px; left: 44px; width: 2px; background: linear-gradient(180deg, var(--dm-blue), var(--dm-pink)); opacity: 0.38; }

.solutions-method-node { position: relative; display: grid; grid-template-columns: 90px minmax(0px, 1fr); gap: clamp(18px, 3vw, 42px); padding: clamp(20px, 3vw, 38px) 0px; }

.solutions-method-mark { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 10px; }

.solutions-method-mark span { display: grid; width: 64px; height: 64px; place-items: center; border: 2px solid var(--dm-blue); border-radius: 50%; background: rgb(255, 255, 255); color: var(--dm-blue); font-family: var(--font-headline); font-size: 26px; font-weight: 950; }

.solutions-method-node.center .solutions-method-mark span { background: var(--dm-blue); color: rgb(255, 255, 255); box-shadow: rgba(56, 108, 232, 0.28) 0px 10px 24px; }

.solutions-method-mark small { max-width: 84px; color: rgb(119, 119, 119); font-size: 10px; font-weight: 900; line-height: 1.2; text-align: center; text-transform: uppercase; }

.solutions-method-body { max-width: 760px; padding-top: 4px; }

.solutions-method-image { display: block; width: min(100%, 520px); aspect-ratio: 16 / 10; margin: 0px 0px 18px; object-fit: cover; }

.solutions-method-body h3 { margin: 0px 0px 10px; font-family: var(--font-headline); font-size: clamp(28px, 3.6vw, 54px); font-weight: 950; line-height: 1; text-transform: uppercase; }

.solutions-method-body p { margin: 0px; color: rgb(85, 85, 85); font-size: clamp(15px, 1vw, 18px); font-weight: 700; line-height: 1.55; }

.solutions-process { padding: clamp(54px, 6vw, 92px) 0px; background: rgb(5, 5, 5); color: rgb(255, 255, 255); }

.solutions-process .solutions-section-head { margin-bottom: clamp(28px, 4vw, 58px); }

.solutions-process-row { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.28); border-bottom: 1px solid rgba(255, 255, 255, 0.28); }

.solutions-process-row article { position: relative; min-height: 170px; padding: clamp(24px, 3vw, 42px); border-right: 1px solid rgba(255, 255, 255, 0.18); }

.solutions-process-row article:last-child { border-right: 0px; }

.solutions-process-row article:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -11px; color: rgb(255, 255, 255); font-size: 24px; transform: translateY(-50%); }

.solutions-process-row span { display: block; margin-bottom: 28px; color: var(--dm-blue); font-family: var(--font-headline); font-size: 44px; font-weight: 950; line-height: 1; }

.solutions-process-row strong { font-size: clamp(18px, 1.55vw, 25px); line-height: 1.12; text-transform: uppercase; }

.solutions-pillar-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: clamp(18px, 2vw, 30px); }

.solutions-pillar-card { display: flex; min-height: 390px; flex-direction: column; border: 1px solid rgb(17, 17, 17); border-radius: 8px; padding: clamp(24px, 3vw, 42px); background: rgb(255, 255, 255); color: rgb(0, 0, 0); transition: transform 0.24s, background-color 0.24s, color 0.24s; }

.solutions-pillar-card:hover, .solutions-pillar-card:focus-visible { background: rgb(5, 5, 5); color: rgb(255, 255, 255); transform: translateY(-8px); }

.solutions-pillar-card span { color: var(--dm-blue); font-family: var(--font-headline); font-size: 42px; font-weight: 950; line-height: 1; }

.solutions-pillar-card h3 { margin: auto 0px 18px; font-family: var(--font-headline); font-size: clamp(30px, 4vw, 58px); font-weight: 950; line-height: 1.02; text-transform: uppercase; }

.solutions-pillar-card p { margin: 0px 0px 24px; font-weight: 750; line-height: 1.45; }

.solutions-pillar-card em { font-style: normal; color: rgb(119, 119, 119); font-size: 12px; font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; }

.solutions-pillar-card:hover em { color: rgba(255, 255, 255, 0.58); }

.solutions-cta { padding: clamp(70px, 8vw, 126px) 0px; background: rgb(5, 5, 5); color: rgb(255, 255, 255); text-align: center; }

.solutions-cta h2 { max-width: 920px; margin: 0px auto 22px; font-size: clamp(44px, 7vw, 108px); line-height: 0.98; }

.solutions-cta p { max-width: 760px; margin: 0px auto 34px; color: rgba(255, 255, 255, 0.72); font-size: clamp(15px, 1.1vw, 18px); font-weight: 700; line-height: 1.55; }

@media (max-width: 991.98px) {
  .solutions-hero-grid, .solutions-section-head, .solutions-section-head p { grid-template-columns: 1fr; grid-column: auto; }
  .solution-method-stack { flex-direction: column; gap: 8px; height: auto; min-height: 0px; }
  .solution-method-strip { height: clamp(64px, 16vw, 78px); border-radius: 10px; flex: 0 0 auto !important; }
  .solution-method-strip.is-active { height: auto; min-height: clamp(360px, 88vw, 440px); }
  .graphic { top: 16px; left: 16px; width: 36px; height: 36px; margin-left: 0px; }
  .solution-method-strip.is-active .graphic { top: 20px; left: 20px; width: calc(100% - 40px); height: clamp(120px, 34vw, 150px); }
  .label-vertical { inset: 0px 80px 0px 64px; font-size: 10px; justify-content: flex-start; writing-mode: horizontal-tb; transform: none; }
  .solution-method-strip.is-active .label-vertical { transform: none; }
  .num { position: absolute; top: 50%; right: 20px; margin-top: 0px; font-size: 30px; transform: translateY(-50%); }
  .solution-method-strip .arrow, .solution-method-strip.is-active .arrow { display: none; top: 18px; right: 18px; left: auto; transform: rotate(-135deg); }
  .content-horizontal { position: relative; inset: auto; margin-top: clamp(158px, 45vw, 190px); }
  .solutions-compare-grid, .solutions-pillar-grid, .intro-hero .intro-container, .intro-thought .intro-container, .intro-team-head, .intro-team-grid { grid-template-columns: 1fr; }
  .brand-mascot-inner { grid-template-columns: 1fr; }
  .brand-moodboard img, .brand-campaign-grid img, .brand-application-grid img, .brand-moodboard .brand-image-slot, .brand-campaign-grid .brand-image-slot, .brand-application-grid .brand-image-slot { grid-column: span 6 !important; }
  .brand-moodboard-collage { grid-template-columns: repeat(6, minmax(0px, 1fr)); min-height: clamp(360px, 56vw, 620px); }
  .brand-collage-side-left { grid-column: 1 / 3; width: 100%; transform: translateX(-8%); }
  .brand-collage-lime { grid-column: 2 / 4; transform: translateX(0px); }
  .brand-collage-poster { grid-column: 3 / 5; }
  .brand-collage-side-right { grid-column: 5 / 7; }
  .brand-collage-cyan { grid-column: 5 / 7; transform: translateX(12%); }
  .intro-hero-mark { justify-self: start; }
  .intro-belief-grid article { grid-template-columns: 64px 1fr; gap: 14px 28px; }
  .intro-belief-grid article p { grid-column: 2; }
  .intro-value-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .intro-value-card { min-height: 360px; }
  .intro-empathy-media { width: min(760px, 100%); }
  .brand-mascot-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .solutions-process-row { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .solutions-process-row article:nth-child(2) { border-right: 0px; }
}

@media (max-width: 575.98px) {
  .intro-container { padding-inline: 24px; }
  .solutions-breadcrumb { margin-bottom: 34px; }
  .solutions-hero { padding: 56px 0px 64px; }
  .solutions-hero h1 { font-size: clamp(42px, 15vw, 62px); }
  .solution-pdf-hero .solutions-hero-grid { grid-template-columns: minmax(0px, 1fr) 54px; gap: 18px; }
  .solution-pdf-hero h1 { font-size: clamp(32px, 9vw, 48px); }
  body.solution-page .solution-pdf-hero h1 span { white-space: normal; overflow-wrap: anywhere; }
  .solution-pdf-lead, .solution-pdf-statement { font-size: clamp(18px, 5.6vw, 26px); }
  .intro-hero { min-height: 0px; padding: 56px 0px 68px; }
  .intro-hero h1 { font-size: clamp(42px, 13vw, 64px); }
  .intro-thought h2 { justify-content: start; padding-inline: 24px; font-size: clamp(34px, 12vw, 56px); }
  .intro-belief-grid article { grid-template-columns: 1fr; }
  .intro-belief-grid article p { grid-column: auto; }
  .intro-value-grid { grid-template-columns: 1fr; }
  .intro-value-card { min-height: 340px; }
  .intro-empathy { min-height: 0px; padding: 28px 16px; }
  .intro-empathy-media { width: 100%; }
  .intro-ecosystem-logos { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 14px; }
  .intro-ecosystem-logo { min-height: 160px; padding: 18px; }
  .intro-team-card { min-height: 300px; }
  .brand-lockup-mark > span { font-size: clamp(48px, 15vw, 86px); }
  .brand-lockup-mark img { left: 4px; width: clamp(46px, 14vw, 64px); }
  .brand-lockup-mark small { position: static; margin-top: 10px; text-align: center; }
  .brand-moodboard, .brand-campaign-grid, .brand-application-grid, .brand-mission { padding-inline: 24px; }
  .brand-moodboard img, .brand-campaign-grid img, .brand-application-grid img, .brand-moodboard .brand-image-slot, .brand-campaign-grid .brand-image-slot, .brand-application-grid .brand-image-slot { min-height: 220px; grid-column: 1 / -1 !important; }
  .brand-moodboard-collage { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); min-height: 0px; padding: 36px 24px; }
  .brand-collage-side-left { grid-column: 1 / 3; width: 100%; transform: none; }
  .brand-collage-lime { grid-column: 2 / 5; height: 120px; transform: translateY(18px); }
  .brand-collage-poster { grid-column: 1 / -1; margin-top: -18px; min-height: 0px; }
  .brand-collage-side-right, .brand-collage-cyan, .brand-collage-tiny-left, .brand-collage-tiny-right { display: none; }
  .brand-collage-sticker { top: 28px; right: 26px; left: auto; }
  .brand-mascot-inner { min-height: 0px; }
  .brand-mascot-grid { grid-template-columns: 1fr; }
  .brand-turnaround-placeholder { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .brand-mission p { font-size: clamp(28px, 10vw, 44px); }
  .solutions-actions { display: grid; }
  .solutions-manifesto blockquote { font-size: clamp(26px, 10vw, 40px); }
  .solutions-method-node { grid-template-columns: 62px minmax(0px, 1fr); }
  .solutions-method-flow::before { left: 31px; }
  .solutions-method-mark span { width: 50px; height: 50px; font-size: 22px; }
  .solutions-process-row { grid-template-columns: 1fr; }
  .solutions-process-row article, .solutions-process-row article:nth-child(2) { border-right: 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
  .solutions-process-row article:not(:last-child)::after { content: "↓"; top: auto; right: 50%; bottom: -16px; transform: translateX(50%); }
}

.project-page { background: var(--dm-paper); }

.project-page .main-nav .nav-link.active { color: rgb(255, 255, 255); text-shadow: rgba(255, 255, 255, 0.18) 0px 3px 0px, rgba(0, 0, 0, 0.65) 0px 8px 16px; }

.project-hero { position: relative; display: grid; height: 100svh; place-items: center; overflow: hidden; background: var(--dm-black); padding: clamp(12px, 1.8vw, 26px); }

.project-hero video, .project-hero img { position: absolute; inset: 0px; display: block; min-width: 0px; min-height: 0px; width: auto; height: auto; border-radius: clamp(14px, 1.8vw, 24px); object-fit: contain; background: var(--dm-black); }

@media (min-width: 992px) {
  .hero-video, .project-hero { height: 900px; max-width: 1920px; margin-inline: auto; }
  .hero-video { height: 900px; aspect-ratio: auto; }
}

.project-archive { padding: clamp(42px, 5vw, 70px) 0px clamp(48px, 5vw, 76px); }

.project-archive-shell { width: min(1720px, calc(100% - (var(--site-gutter) * 2))); margin: 0px auto; }

@media (min-width: 992px) {
  .project-archive-shell { zoom: 1; }
}

.project-category-tabs { position: relative; z-index: 3; display: flex; align-items: end; gap: 0px; width: 100%; min-height: clamp(62px, 5vw, 78px); padding-inline: 0px; overflow-x: auto; scrollbar-width: none; }

.project-category-tabs::-webkit-scrollbar { display: none; }

.project-tab-color-line { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr)); flex: 0 0 5px; width: 100%; height: 5px; min-height: 5px; overflow: hidden; opacity: 1; visibility: visible; pointer-events: none; }

.project-tab-color-line span { display: block; width: 100%; height: 5px; min-width: 0px; background: var(--tab-color); opacity: 1; visibility: visible; }

.project-tab { display: inline-flex; flex: 1 1 0px; min-width: max-content; min-height: clamp(42px, 3.5vw, 56px); align-items: center; justify-content: center; padding-inline: clamp(14px, 1.35vw, 24px); border: 0px; border-radius: 14px 14px 0px 0px; background: var(--tab-color); color: rgb(0, 0, 0); font-size: clamp(13px, 0.96vw, 17px); font-weight: 950; text-transform: uppercase; transform: none; transition: min-height 0.24s, filter 120ms, box-shadow 120ms; }

.project-tab:first-child { color: rgb(255, 255, 255); }

.project-tab.active, .project-tab:focus-visible { position: relative; z-index: 2; min-height: clamp(62px, 5vw, 78px); filter: none; }

.project-tab:hover { filter: brightness(0.96); }

.project-tab:active { filter: brightness(0.9); }

.project-board { position: relative; z-index: 2; overflow: hidden; border-radius: 0px 0px clamp(34px, 4vw, 62px) clamp(34px, 4vw, 62px); background: var(--project-board-color, #070707); color: var(--project-board-ink, #fff); padding: clamp(36px, 3.8vw, 58px) clamp(10px, 1.2vw, 20px) clamp(30px, 3.4vw, 48px); transition: background-color 0.32s, color 0.32s; }

.project-board::before { content: ""; position: absolute; inset: 0px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--project-board-ink, #fff) 10%, transparent) 0 1px, transparent 1px 88px); pointer-events: none; }

.project-board-head { position: relative; z-index: 1; display: grid; place-items: center; gap: 12px; margin-bottom: clamp(20px, 2.2vw, 32px); text-align: center; }

.project-board-head h1 { margin: 0px; color: var(--project-board-ink, #fff); font-family: var(--font-headline); font-size: clamp(40px, 4.4vw, 68px); font-weight: 950; line-height: 0.95; text-transform: uppercase; }

.project-board-head p { max-width: 760px; margin: 0px; color: color-mix(in srgb, var(--project-board-ink, #fff) 82%, transparent); font-size: clamp(11px, 0.78vw, 14px); font-weight: 800; line-height: 1.3; text-transform: uppercase; }

.project-list-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: clamp(14px, 1.2vw, 18px); width: 100%; margin-inline: auto; padding: clamp(18px, 2vw, 28px); border-radius: clamp(24px, 2.8vw, 40px); background: color-mix(in srgb, var(--project-board-color, #070707) 12%, #f3eee8); color: rgb(0, 0, 0); }

.project-list-card { min-width: 0px; }

.project-list-card-featured { grid-column: span 2; }

.project-list-card[hidden] { display: none; }

.project-list-image { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: rgb(23, 23, 23); }

.project-list-card-featured .project-list-image { aspect-ratio: 16 / 9; }

.project-list-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.34s, filter 0.34s; }

.project-list-image:hover img, .project-list-image:focus-visible img { transform: scale(1.045); filter: saturate(1.08); }

.project-list-open { position: absolute; top: 10px; right: 10px; display: grid; width: clamp(34px, 2.6vw, 44px); height: clamp(34px, 2.6vw, 44px); place-items: center; background: rgb(22, 22, 22); color: rgb(255, 255, 255); font-size: clamp(21px, 1.7vw, 28px); line-height: 1; transition: transform 0.2s, background-color 0.2s; }

.project-list-image:hover .project-list-open, .project-list-image:focus-visible .project-list-open { background: var(--dm-blue); }

.project-list-image:hover .project-list-open .dm-arrow-icon, .project-list-image:focus-visible .project-list-open .dm-arrow-icon { transform: rotate(90deg); }

.project-list-band { position: absolute; right: 0px; bottom: 0px; left: 0px; display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; background: var(--project-accent, var(--dm-pink)); color: rgb(0, 0, 0); font-weight: 950; font-size: clamp(10px, 0.78vw, 13px); text-transform: uppercase; opacity: 1; transform: none; transition: opacity 0.22s, transform 0.22s; }

@media (hover: hover) and (pointer: fine) {
  .project-list-band { opacity: 0; transform: translateY(100%); }
  .project-list-image:hover .project-list-band, .project-list-image:focus-visible .project-list-band, .project-list-image:focus-within .project-list-band { opacity: 1; transform: translateY(0px); }
}

.project-list-band strong, .project-list-band em { font-style: normal; line-height: 1.05; }

.project-list-meta { display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 8px; margin-top: 8px; align-items: start; }

.project-list-meta h3 { margin: 0px 0px 4px; font-family: var(--font-headline); font-size: clamp(16px, 1.2vw, 21px); font-weight: 950; line-height: 1; text-transform: uppercase; }

.project-list-meta p { max-width: 560px; margin: 0px; display: -webkit-box; overflow: hidden; font-size: clamp(10px, 0.72vw, 12px); font-weight: 650; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.project-list-card .project-tags { gap: 4px; margin-top: 6px; }

.project-list-card .project-tags span { padding: 3px 7px; font-size: 9px; }

.project-list-card .project-year { font-size: clamp(20px, 1.7vw, 27px); }

.project-pagination { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: clamp(20px, 2.2vw, 32px); color: var(--project-board-ink, #000); font-weight: 800; }

.project-pagination button { display: grid; width: 36px; height: 36px; place-items: center; border: 0px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-size: 22px; line-height: 1; }

.project-pagination button:disabled { cursor: default; opacity: 0.35; }

.project-pagination .project-page-number { background: transparent; color: var(--project-board-ink, #000); font-size: 14px; }

.project-pagination .project-page-number.active { background: var(--project-board-ink, #000); color: var(--project-board-color, #fff); }

.project-page-gap { min-width: 18px; text-align: center; }

.featured-strip { overflow: hidden; background: rgb(5, 5, 5); color: rgb(255, 255, 255); padding: clamp(42px, 5vw, 72px) 0px; }

.featured-strip .container { width: min(var(--content-max), calc(100% - (var(--site-gutter) * 2))); max-width: none; padding-left: 0px; padding-right: 0px; }

.featured-strip-head { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(260px, 430px); gap: clamp(28px, 5vw, 70px); align-items: start; margin-bottom: clamp(24px, 3vw, 42px); }

.featured-strip h2 { margin: 0px; font-family: var(--font-headline); font-size: clamp(44px, 6.8vw, 106px); font-weight: 950; line-height: 0.95; text-transform: uppercase; }

.featured-strip p { margin: 0px; font-size: clamp(13px, 0.95vw, 16px); font-weight: 850; line-height: 1.25; text-transform: uppercase; }

.featured-track { display: flex; width: max-content; gap: clamp(18px, 2.2vw, 34px); animation: 300s linear 0s infinite normal none running featuredProjectSlider; }

.featured-track:has(.featured-thumb:hover, .featured-thumb:focus-visible) { animation-play-state: paused; }

.featured-thumb { display: block; width: clamp(150px, 15vw, 260px); aspect-ratio: 1 / 1; overflow: hidden; background: rgb(23, 23, 23); }

.featured-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.28s; }

.featured-thumb:hover img, .featured-thumb:focus-visible img { transform: scale(1.05); }

@keyframes featuredProjectSlider {
  0% { transform: translateX(0px); }
  100% { transform: translateX(-33.333%); }
}

.project-detail { background: rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: var(--font-body); }

.project-detail-intro, .project-detail-end { width: min(var(--content-max), calc(100% - (var(--site-gutter) * 2))); margin-right: auto; margin-left: auto; }

.project-detail-intro { position: relative; display: flex; min-height: clamp(600px, 70vh, 760px); flex-direction: column; padding: clamp(48px, 5vw, 78px) 0px clamp(64px, 6vw, 92px); }

.project-detail-intro-grid { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(360px, 430px); justify-content: space-between; gap: clamp(64px, 8vw, 150px); align-items: start; }

.project-detail-title { min-width: 0px; }

.project-detail-title h1 { max-width: 940px; margin: 0px; font-family: var(--font-headline); font-size: clamp(64px, 5.7vw, 96px); font-weight: 700; line-height: 1; text-transform: uppercase; }

.project-detail-meta { display: grid; gap: 52px; }

.project-detail-meta-group h2 { margin: 0px 0px 18px; font-family: var(--font-headline); font-size: clamp(32px, 2.2vw, 42px); font-weight: 700; line-height: 1.1; text-transform: uppercase; }

.project-detail-meta-group p { display: grid; min-width: 0px; grid-template-columns: 48px minmax(0px, 1fr); gap: 14px; align-items: start; margin: 0px; font-family: var(--font-body); font-size: clamp(17px, 1.15vw, 20px); font-weight: 400; line-height: 1.55; }

.project-detail-meta-icon { display: grid; width: 48px; height: 48px; place-items: center; color: rgb(0, 0, 0); font-size: 19px; line-height: 1; margin-top: 1px; }

.project-detail-meta-icon-client { background: rgb(255, 95, 63); }

.project-detail-meta-icon-scope { background: rgb(61, 112, 234); }

.project-detail-scroll-cue { position: absolute; bottom: 88px; left: 0px; display: inline-flex; width: 76px; height: 76px; align-items: center; justify-content: center; align-self: flex-start; color: rgb(255, 95, 63); font-family: var(--font-body); font-size: 78px; font-weight: 400; line-height: 1; text-decoration: none; transform: none; transition: transform 0.22s; }

.project-detail-scroll-cue:hover, .project-detail-scroll-cue:focus-visible { color: rgb(255, 95, 63); transform: translateY(6px); }

.project-detail-media-stack { width: min(var(--content-max), calc(100% - (var(--site-gutter) * 2))); margin: 0px auto; background: rgb(0, 0, 0); }

.project-detail-media-item { display: block; width: 100%; height: auto; margin: 0px; object-fit: contain; background: rgb(0, 0, 0); }

.project-detail-end { padding: clamp(72px, 8vw, 112px) 10px clamp(72px, 8vw, 120px); }

.project-detail-back { display: inline-flex; margin-bottom: 28px; color: rgb(0, 0, 0); font-family: var(--font-body); font-weight: 900; text-decoration: none; text-transform: uppercase; }

.project-detail-back:hover, .project-detail-back:focus-visible { color: var(--project-detail-accent, var(--dm-pink)); }

.project-detail-cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; background: rgb(0, 0, 0); color: rgb(255, 255, 255); padding: clamp(28px, 4vw, 56px); }

.project-detail-cta span { color: var(--project-detail-accent, var(--dm-pink)); font-family: var(--font-body); font-weight: 950; text-transform: uppercase; }

.project-detail-cta h2 { max-width: 860px; margin: 10px 0px 0px; font-family: var(--font-headline); font-size: clamp(36px, 5vw, 82px); font-weight: 950; line-height: 0.95; text-transform: uppercase; }

.project-detail-cta-button { flex: 0 0 auto; border-radius: 999px; background: rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: var(--font-body); padding: 14px 26px; font-weight: 950; text-decoration: none; white-space: nowrap; }

.project-detail-cta-button:hover, .project-detail-cta-button:focus-visible { background: var(--project-detail-accent, var(--dm-pink)); color: rgb(0, 0, 0); }

.project-detail-next { display: flex; justify-content: space-between; gap: 20px; margin-top: 36px; border-top: 1px solid rgb(0, 0, 0); padding-top: 20px; color: rgb(0, 0, 0); font-family: var(--font-body); font-weight: 950; text-decoration: none; text-transform: uppercase; }

.project-detail-next:hover, .project-detail-next:focus-visible { color: var(--project-detail-accent, var(--dm-pink)); }

@media (max-width: 991.98px) {
  .project-hero { height: auto; max-height: none; aspect-ratio: 16 / 9; }
  .project-board { border-radius: 42px; }
  .project-list-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .project-list-card-featured { grid-column: span 2; }
  .project-list-card:nth-child(1), .project-list-card:nth-child(2), .project-list-card:nth-child(n+3) { grid-column: span 1; }
  .featured-strip-head { grid-template-columns: 1fr; }
  .project-detail-intro { min-height: auto; }
  .project-detail-intro-grid { grid-template-columns: minmax(0px, 1.35fr) minmax(230px, 0.65fr); gap: 42px; }
  .project-detail-scroll-cue { position: static; margin-top: 32px; }
  .project-detail-cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 767.98px) {
  .project-hero video, .project-hero img { object-fit: contain; }
  .project-detail-intro, .project-detail-end { width: calc(100% - 32px); }
  .project-detail-intro { padding-top: 52px; }
  .project-detail-intro-grid { grid-template-columns: 1fr; gap: 48px; }
  .project-detail-title h1 { font-size: clamp(36px, 9.5vw, 44px); }
  .project-detail-meta { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 20px; }
  .project-detail-meta-group h2 { font-size: 24px; }
  .project-detail-meta-group p { grid-template-columns: 36px minmax(0px, 1fr); gap: 10px; font-size: 15px; }
  .project-detail-meta-icon { width: 34px; height: 34px; }
  .project-detail-scroll-cue { width: 58px; height: 58px; margin-top: 24px; font-size: 60px; }
  .project-detail-media-stack { width: 100%; }
}

.home-page .hero-video { width: 100%; max-width: none; height: calc(100svh - clamp(42px, 4.8vw, 58px)); min-height: 0px; padding: clamp(12px, 1.8vw, 26px); background: var(--dm-black); }

.home-page .hero-video video, .home-page .hero-video .poster { inset: 50% auto auto 50%; width: min(100% - 48px, 1500px); height: auto; max-width: calc(100% - 48px); max-height: calc(100% - 48px); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); border-radius: clamp(14px, 1.8vw, 24px); object-fit: contain; object-position: center center; background: var(--dm-black); }

@media (max-width: 767.98px) {
  .home-page .hero-video { height: calc(100svh - clamp(42px, 4.8vw, 58px)); padding: 0px; }
  .home-page .hero-video video, .home-page .hero-video .poster { inset: 0px auto 0px 50%; width: 118%; height: 100%; max-width: none; max-height: none; aspect-ratio: auto; transform: translateX(-50%); border-radius: 0px; object-fit: cover; }
}

.intro-ecosystem-logo { min-height: clamp(104px, 10vw, 148px); padding: clamp(12px, 1.4vw, 20px); }

.intro-ecosystem-logo img { max-height: clamp(92px, 10vw, 136px); }

@media (max-width: 575.98px) {
  .intro-ecosystem-logo { min-height: 112px; padding: 12px; }
  .intro-ecosystem-logo img { max-height: 96px; }
}

@media (max-width: 575.98px) {
  .featured-strip h2 { max-width: 100%; font-size: clamp(30px, 9.5vw, 42px); line-height: 1; white-space: nowrap; }
}

.brand-identity-content > .intro-container, .brand-identity-content > .brand-lockup, .brand-identity-content > .brand-mascot, .brand-identity-content > .brand-mission, .brand-identity-content > .brand-identity-dot, .brand-identity-content > .brand-about, .brand-identity-content > .brand-single-media, .brand-identity-content > .brand-media-stack, .brand-identity-content > .brand-turnaround-wrap { width: min(var(--content-max), calc(100% - (var(--site-gutter) * 2))); margin-inline: auto; }

.brand-identity-content > .brand-lockup, .brand-identity-content > .brand-mascot, .brand-identity-content > .brand-mission, .brand-identity-content > .brand-media-stack { width: 100%; }

.brand-identity-content .brand-single-media img, .brand-identity-content .brand-media-stack img, .brand-identity-content .brand-lockup-image, .brand-identity-content .brand-system-image, .brand-identity-content .brand-identity-media, .brand-identity-content .brand-turnaround { max-width: min(100%, var(--content-max)); max-height: none; object-fit: contain; }

.brand-identity-content .brand-single-media, .brand-identity-content .brand-media-stack { margin-inline: auto; }

@media (max-width: 575.98px) {
  .project-hero { height: auto; }
  .project-archive-shell { width: calc(100% - 22px); }
  .project-category-tabs { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 0px; min-height: 0px; width: 100%; padding-inline: 0px; overflow: visible; }
  .project-tab { position: relative; isolation: isolate; flex: 0 0 auto; width: 100%; min-width: 0px; min-height: 64px; justify-content: flex-start; align-items: flex-start; padding-block: 10px; border-radius: 18px 18px 6px 6px; font-size: 13px; filter: drop-shadow(rgba(0, 0, 0, 0.14) 0px 4px 0px); transition: min-height 0.28s, margin-top 0.28s, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), filter 0.28s; }
  .project-tab::before { content: ""; position: absolute; top: -24px; left: 22px; z-index: 0; width: 104px; height: 36px; border-radius: 12px 12px 0px 0px; background: var(--tab-color); }
  .project-tab-label { position: absolute; top: -14px; left: 28px; right: auto; z-index: 20; display: block; line-height: 1.1; }
  .project-tab:nth-child(2n)::before { left: auto; right: 22px; }
  .project-tab:first-child { min-height: 64px; padding-top: 10px; }
  .project-tab:first-child .project-tab-label { top: -14px; }
  .project-tab:nth-child(2n+1) { justify-content: flex-start; padding-left: 28px; padding-right: 28px; }
  .project-tab:nth-child(2n) { justify-content: flex-end; padding-left: 28px; padding-right: 28px; text-align: right; }
  .project-tab + .project-tab { margin-top: -18px; }
  .project-tab:nth-child(1) { z-index: 1; }
  .project-tab:nth-child(2) { z-index: 2; }
  .project-tab:nth-child(3) { z-index: 3; }
  .project-tab:nth-child(4) { z-index: 4; }
  .project-tab:nth-child(5) { z-index: 5; }
  .project-tab:nth-child(6) { z-index: 6; }
  .project-tab:last-child { border-radius: 14px 14px 0px 0px; }
  .project-tab.active, .project-tab:focus-visible { transform: none; outline: 0px; border-radius: 18px 18px 6px 6px; filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 7px 0px) drop-shadow(rgba(0, 0, 0, 0.12) 0px 12px 16px); }
  .project-tab.active::before, .project-tab:focus-visible::before { transform: translateY(-4px); border-radius: 12px 12px 0px 0px; }
  .project-tab.active .project-tab-label, .project-tab:focus-visible .project-tab-label { transform: translateY(-4px); }
  .project-tab-color-line { display: none; }
  .project-board { margin-top: 0px; border-radius: 0px 0px 28px 28px; padding: 34px 12px 24px; background: var(--project-board-color, #070707); color: var(--project-board-ink, #fff); }
  .project-board-head { margin-bottom: 30px; }
  .project-board-head h1 { font-size: clamp(38px, 14vw, 58px); }
  .project-list-grid { grid-template-columns: 1fr; gap: 24px; padding: 18px; border-radius: 26px; }
  .project-list-card:nth-child(1), .project-list-card:nth-child(2), .project-list-card:nth-child(n+3) { grid-column: auto; }
  .project-list-card-featured { grid-column: auto; }
  .project-list-image { aspect-ratio: 16 / 9; }
  .project-list-meta { grid-template-columns: 1fr auto; }
  .project-year { font-size: 28px; }
  .project-pagination { gap: 12px; }
  .featured-strip { padding: 42px 0px; }
  .featured-thumb { width: 150px; }
  .project-detail-meta { grid-template-columns: 1fr; }
}

@media (max-width: 1199.98px) {
  .section-rail { display: none; }
}

@media (max-width: 991.98px) {
  :root { --top-strip-height: 30px; --main-nav-height: 72px; --site-gutter: 24px; }
  .top-strip { grid-template-columns: minmax(72px, 1fr) minmax(170px, auto) minmax(140px, auto); height: var(--top-strip-height); min-height: var(--top-strip-height); overflow: hidden; display: grid !important; }
  .promo-link, .promo-link.blue { width: 100%; min-width: 0px; min-height: var(--top-strip-height); white-space: nowrap; }
  .promo-link.blue { justify-content: center; }
  .main-nav { min-height: var(--main-nav-height); padding: 0px; }
  .main-nav .container { position: relative; min-height: var(--main-nav-height); align-items: center; max-width: none; min-width: 0px; }
  .main-nav .navbar-collapse { position: absolute; top: 100%; left: calc(var(--site-gutter) * -1); width: calc(100% + (var(--site-gutter) * 2)); max-height: calc(100svh - var(--top-strip-height) - var(--main-nav-height)); overflow: hidden auto; overscroll-behavior: contain; padding: 12px var(--site-gutter) 28px; background: rgb(0, 0, 0); border-top: 1px solid rgba(255, 255, 255, 0.2); box-shadow: rgba(0, 0, 0, 0.28) 0px 18px 32px; }
  .main-nav .navbar-nav { width: 100%; min-width: 0px; margin: 0px !important; gap: 0px !important; }
  .main-nav .nav-item, .main-nav .nav-item-dropdown { width: 100%; min-width: 0px; }
  .main-nav .nav-link { width: 100%; padding: 13px 0px; font-size: 16px; line-height: 1.2; }
  .nav-dropdown-menu, .nav-item-dropdown:hover .nav-dropdown-menu, .nav-item-dropdown:focus-within .nav-dropdown-menu { position: static; inset: auto; width: 100%; max-width: 100%; min-width: 0px; padding: 0px 0px 10px 16px; background: transparent; border: 0px; opacity: 1; visibility: visible; pointer-events: auto; transition: none; transform: none !important; }
  .nav-dropdown-link { width: 100%; max-width: 100%; padding: 8px 0px; font-size: 13px; color: rgba(255, 255, 255, 0.78); white-space: normal; overflow-wrap: anywhere; }
  .nav-dropdown-link:hover, .nav-dropdown-link:focus { background: transparent; color: rgb(255, 255, 255); }
  .main-nav .contact-btn { width: 100%; margin-top: 10px; }
  .navbar-toggler { width: 48px; height: 42px; padding: 7px 9px; }
  .hero-video { height: auto; max-height: none; aspect-ratio: 16 / 9; }
  .solution-row { grid-template-columns: 58px 1fr 32px; }
  .solution-row .number, .solution-row .arrow { font-size: 25px; }
  .solution-panel { grid-template-columns: 1fr; gap: 22px; }
  .solution-item.active .solution-panel { max-height: 540px; }
  .project-card { aspect-ratio: 5 / 6; }
  .project-slider { grid-auto-columns: calc(50% - 14px); }
  .quote-media img { max-height: 280px; }
  .quote-slider { grid-auto-columns: calc(50% - 14px); }
  .footer { padding-top: 50px; }
  .footer .container > .row { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 34px 28px; margin: 0px; }
  .footer .container > .row > * { width: auto; max-width: none; padding: 0px; }
  .footer .container > .row > :first-child, .footer .container > .row > :nth-child(2) { grid-column: 1 / -1; }
  .footer .container > .row > :first-child { display: flex; justify-content: center; }
  .footer .brand-logo-footer-small { margin-bottom: 0px !important; }
  .footer-logo { margin-top: 20px; padding: 10px 0px; }
}

@media (max-width: 767.98px) {
  .top-strip { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .promo-link.promo-icon-only, .promo-link.blue[href=""] { display: none; }
  .solution-droplist { overflow-anchor: none; }
  .solution-row { scroll-margin-top: calc(var(--top-strip-height) + var(--main-nav-height) + 16px); }
  .solution-panel { display: none; max-height: none; opacity: 1; transform: none; transition: none; }
  .solution-item.active .solution-panel { display: grid; max-height: none; padding: 26px 0px 30px; animation: 0.28s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal both running solution-panel-mobile-reveal; }
  .hero-video { height: auto; max-height: none; aspect-ratio: 16 / 9; }
  .hero-video video, .hero-video .poster { top: 50%; left: 50%; width: calc(100% - 24px); height: auto; max-height: calc(100% - 24px); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); object-fit: contain; }
}

@keyframes solution-panel-mobile-reveal {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0px); }
}

@media (prefers-reduced-motion: reduce) {
  .solution-item.active .solution-panel { animation: auto ease 0s 1 normal none running none; }
}

@media (max-width: 575.98px) {
  :root { --top-strip-height: 32px; --main-nav-height: 64px; --site-gutter: 20px; }
  .top-strip { grid-template-columns: repeat(2, minmax(0px, 1fr)); height: var(--top-strip-height); min-height: var(--top-strip-height); overflow: hidden; display: grid !important; }
  .promo-link.blue { min-width: 0px; }
  .promo-link.promo-icon-only, .promo-link.blue[href=""] { display: none; }
  .promo-link { min-width: 0px; min-height: var(--top-strip-height); width: 100%; padding: 0px 10px; font-size: 10px; line-height: 1.1; text-align: center; white-space: nowrap; }
  .promo-link.blue { padding: 0px 8px; }
  .promo-link.blue .promo-arrow { width: 24px; }
  .main-nav .container { min-height: var(--main-nav-height); }
  .hero-copy { font-size: 27px; letter-spacing: 0.04em; }
  .hero-video { height: auto; }
  .brand-logo-header { height: 27px; max-width: 180px; }
  .diagnosis { min-height: auto; padding: 48px 0px 56px; }
  .diagnosis h1 { font-size: clamp(38px, 12vw, 54px); line-height: 1.16; }
  .diagnosis h1 mark { margin-top: 0.04em; }
  .diagnosis-deck { width: 100%; max-width: 100%; height: auto; min-height: 0px; margin-top: 34px; padding-right: 0px; transform: none; }
  .diagnosis-card { margin: 0px; }
  .diagnosis-card:first-child { margin-top: 0px; }
  .diagnosis-more-card { width: 72px; height: 72px; margin: -24px 0px 0px; font-size: 9px; }
  .diagnosis-bottom { margin-top: 24px !important; }
  .pillars, .projects, .quote-section, .journey { padding-top: 48px; padding-bottom: 48px; }
  .brand-logos { padding: 22px 0px; }
  .project-card { aspect-ratio: 1 / 1; }
  .project-slider { grid-auto-columns: 86%; gap: 18px; }
  .project-slider-controls { margin-top: 8px; }
  .signature-sticker { top: auto; right: 18px; bottom: -34px; width: 118px; }
  .project-meta { margin-top: 12px; }
  .quote-title { margin-bottom: 34px !important; }
  .quote-heading-row { grid-template-columns: 1fr; margin-bottom: 30px !important; }
  .quote-slider { grid-auto-columns: 86%; gap: 18px; padding-top: 50px; }
  .quote-block { min-height: auto; padding-top: 22px; }
  .quote-overlay { width: min(88%, 260px); }
  .quote-media img { max-height: 240px; }
  .pillars-title { width: 100%; }
  .pillars-title, .projects-title { line-height: 1.15; }
  .journey h2 { top: 34px; font-size: clamp(34px, 11vw, 48px); }
  .journey .bottom-cta { right: auto; left: 50%; bottom: 34px; transform: translateX(-50%); }
  .journey .pill-button { top: 150px; }
  .journey-card { min-height: 520px; }
  .journey-stamp { top: 88px; }
  .journey-packages { bottom: 92px; }
  .journey-pack { height: 210px; }
  .footer { padding: 42px 0px 22px; }
  .footer .container > .row { gap: 30px 22px; }
  .footer .container > .row > :nth-child(5) { grid-column: 1 / -1; }
  .footer h3 { margin-bottom: 12px; font-size: 13px; }
  .footer a, .footer p { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
  .footer-contact-row { grid-template-columns: 24px minmax(0px, 1fr); gap: 12px; margin-top: 12px; }
  .footer-logo { margin-top: 16px; padding: 8px 0px; }
  .footer-logo img { width: 100%; }
  .footer .container > .d-flex { align-items: flex-start; flex-direction: column; gap: 10px; }
  .footer-socials { margin-top: 2px; }
}

.project-load-error { min-height: 100vh; padding: 48px clamp(20px, 5vw, 80px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; background: rgb(0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, sans-serif; }

.project-load-error strong { font-size: clamp(22px, 3vw, 40px); }

.project-load-retry { margin-top: 10px; padding: 12px 22px; border: 1px solid rgb(255, 255, 255); border-radius: 4px; background: rgb(255, 255, 255); color: rgb(0, 0, 0); font: 700 15px / 1 Inter, sans-serif; cursor: pointer; }

.project-load-retry:hover, .project-load-retry:focus-visible { background: rgb(59, 110, 234); color: rgb(255, 255, 255); }

@media (max-width: 767.98px) {
  .project-archive-shell { overflow: visible; border-radius: 0px; background: transparent; }
  .project-tab { min-height: 82px; padding: 0px; border-radius: 0px; background: transparent; filter: none; overflow: visible; cursor: pointer; }
  .project-tab::before { display: none; }
  .project-tab-ear { position: absolute; top: 0px; left: 20px; z-index: 2; display: flex; width: 136px; height: 46px; align-items: center; justify-content: center; border-radius: 16px 16px 0px 0px; background: var(--tab-color); color: rgb(0, 0, 0); pointer-events: none; transition: none; }
  .project-tab:nth-child(2n) .project-tab-ear { right: 20px; left: auto; }
  .project-tab-body { position: absolute; inset: 24px 0px 0px; z-index: 1; display: block; border-radius: 18px 18px 6px 6px; background: var(--tab-color); box-shadow: none; }
  .project-tab + .project-tab { margin-top: -28px; }
  .project-tab-label { position: static; display: block; width: 100%; margin: 0px; line-height: 1; text-align: center; white-space: nowrap; }
  .project-tab:first-child { min-height: 112px; }
  .project-tab:first-child .project-tab-ear, .project-tab:first-child .project-tab-body { background: rgb(0, 0, 0); }
  .project-tab:first-child .project-tab-label { color: rgb(255, 255, 255); }
  .project-tab:first-child, .project-tab.active, .project-tab:focus-visible { min-height: 82px; padding: 0px; transform: none; outline: 0px; border-radius: 0px; filter: none; }
  .project-tab:nth-child(2n+1), .project-tab:nth-child(2n) { justify-content: initial; padding: 0px; text-align: initial; }
  .project-tab:hover .project-tab-ear, .project-tab:active .project-tab-ear, .project-tab.active .project-tab-ear, .project-tab:focus-visible .project-tab-ear { transform: none; filter: none; }
}

.hero-video video, .hero-video .poster, .project-hero video, .project-hero img { inset: clamp(12px, 1.8vw, 26px) auto 0px 50%; width: auto; height: calc(100% - clamp(12px, 1.8vw, 26px)); max-width: calc(100% - (2 * clamp(12px, 1.8vw, 26px))); max-height: none; aspect-ratio: 16 / 9; transform: translateX(-50%); }

@media (max-width: 767.98px) {
  .hero-video video, .hero-video .poster, .project-hero video, .project-hero img { top: 12px; height: calc(100% - 12px); max-width: calc(100% - 24px); }
}

@media (min-width: 768px) {
  .home-page .hero-video, .project-page .project-hero { width: 100%; max-width: none; height: calc(100svh - clamp(42px, 4.8vw, 58px)); min-height: 0px; padding: clamp(12px, 1.8vw, 26px) clamp(12px, 1.8vw, 26px) 0px; background: var(--dm-black); }
  .home-page .hero-video video, .home-page .hero-video .poster, .project-page .project-hero video, .project-page .project-hero img { inset: clamp(12px, 1.8vw, 26px) auto 0px 50%; width: auto; height: calc(100% - clamp(12px, 1.8vw, 26px)); max-width: calc(100% - (2 * clamp(12px, 1.8vw, 26px))); max-height: none; aspect-ratio: 16 / 9; transform: translateX(-50%); border-radius: clamp(14px, 1.8vw, 24px); object-fit: contain; object-position: center center; background: var(--dm-black); }
}

@media (max-width: 767.98px) {
  .home-page .hero-video, .project-page .project-hero { width: 100%; height: auto; min-height: 0px; padding: 0px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dm-black); }
  .home-page .hero-video video, .home-page .hero-video .poster, .project-page .project-hero video, .project-page .project-hero img { inset: 0px; width: 100%; height: 100%; max-width: none; max-height: none; transform: none; border-radius: 0px; object-fit: contain; object-position: center center; background: var(--dm-black); }
}