@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../assets/vendor/fonts/instrument-sans-latin-variable.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../assets/vendor/fonts/inter-latin-variable.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/vendor/fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/vendor/fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); } :root { --black: #050505; --black-soft: #0a0a0a; --surface: #101010; --surface-raised: #161616; --white: #f3f3ef; --white-pure: #ffffff; --silver: #b8b8b2; --gray: #7b7b76; --gray-dark: #454542; --line: rgba(255, 255, 255, 0.14); --line-soft: rgba(255, 255, 255, 0.075); --overlay: rgba(0, 0, 0, 0.32); --page-gutter: clamp(20px, 3vw, 52px); --section-space: clamp(96px, 14vw, 220px); --content-max: 1680px; --header-h: 72px; --radius-xs: 8px; --radius-sm: 14px; --radius-md: 22px; --radius-lg: 32px; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-smooth: cubic-bezier(0.51, 0, 0.08, 1); --duration-fast: 220ms; --duration-medium: 480ms; --duration-slow: 900ms; --font-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --z-header: 100; --z-menu: 200; --z-viewer: 400; --z-cursor: 900; --z-loader: 1000; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--gray-dark) var(--black); } body { min-height: 100svh; background: var(--black); color: var(--white); font-family: var(--font-body); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } body.is-locked { overflow: hidden; } html.is-loading, html.is-loading body { overflow: hidden !important; } img, video, svg, canvas, iframe { display: block; max-width: 100%; } img, video { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; } ::selection { background: var(--white); color: var(--black); } :focus-visible { outline: 1.5px solid var(--white); outline-offset: 3px; border-radius: 2px; } .skip-link { position: fixed; top: 10px; left: 10px; z-index: calc(var(--z-loader) + 1); padding: 12px 18px; background: var(--white); color: var(--black); font-family: var(--font-mono); font-size: 12px; border-radius: var(--radius-xs); transform: translateY(-200%); transition: transform var(--duration-fast) var(--ease-out-quart); } .skip-link:focus-visible { transform: none; } html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; } :root { color-scheme: dark; --page: #11110f; --surface: #191917; --surface-soft: #20201d; --ink: #f3f0e8; --muted: #aaa79e; --quiet: #77756e; --line: rgba(243, 240, 232, .13); --accent: #ef785c; --accent-soft: rgba(239, 120, 92, .13); --gutter: clamp(22px, 5vw, 76px); --max: 1360px; --display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; --body: "Inter", "Helvetica Neue", Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; } html { scroll-behavior: smooth; scroll-padding-top: 90px; background: var(--page); } body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } body, button, a { -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } button { color: inherit; font: inherit; } ::selection { color: #11110f; background: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .page-shell { width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; } .skip-link { position: fixed; z-index: 999; top: 12px; left: 12px; padding: 12px 16px; border-radius: 8px; background: var(--ink); color: var(--page); transform: translateY(-160%); } .skip-link:focus { transform: none; } .site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(255,255,255,.055); background: rgba(17,17,15,.88); backdrop-filter: blur(18px); } .header-inner { width: min(100% - var(--gutter) * 2, var(--max)); min-height: 76px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; } .brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; } .brand-mark { display: grid; place-items: center; width: 38px; aspect-ratio: 1; border: 1px solid rgba(239,120,92,.55); border-radius: 50%; color: var(--accent); font: 500 11px var(--mono); letter-spacing: -.08em; } .brand-name { font: 500 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; } .site-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); color: var(--muted); font-size: 13px; } .site-nav a, .mobile-menu a { transition: color .2s ease; } .site-nav a:hover, .mobile-menu a:hover { color: var(--ink); } .site-nav .nav-resume { padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); } .nav-resume span { margin-left: 5px; color: var(--accent); } .menu-button { display: none; align-items: center; gap: 9px; padding: 10px 0 10px 12px; border: 0; background: transparent; color: var(--ink); font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; } .menu-button__icon { display: grid; gap: 5px; width: 20px; } .menu-button__icon i { display: block; height: 1px; background: currentColor; transition: transform .2s ease; } .menu-button[aria-expanded="true"] .menu-button__icon i:first-child { transform: translateY(3px) rotate(45deg); } .menu-button[aria-expanded="true"] .menu-button__icon i:last-child { transform: translateY(-3px) rotate(-45deg); } .mobile-menu { display: none; } .mobile-menu[hidden] { display: none; } .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); isolation: isolate; } .hero::before { position: absolute; z-index: -1; inset: 0; content: ""; opacity: .14; background: linear-gradient(90deg, transparent 49.9%, rgba(255,255,255,.12) 50%, transparent 50.1%), linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 1px 100%, 100% 92px; mask-image: linear-gradient(to bottom, black, transparent 92%); } .hero::after { position: absolute; z-index: -1; content: ""; width: min(70vw, 860px); aspect-ratio: 1; right: -25vw; top: -32vw; border-radius: 50%; background: radial-gradient(circle, rgba(239,120,92,.13), transparent 68%); filter: blur(12px); } .hero-layout { min-height: min(700px, calc(100svh - 76px)); padding-block: clamp(70px, 7.5vw, 108px) 44px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(330px, .72fr); align-items: center; gap: clamp(40px, 7vw, 90px); } .eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 25px; color: var(--muted); font: 10px var(--mono); letter-spacing: .19em; text-transform: uppercase; } .eyebrow > span:not(.eyebrow-dot) { color: var(--accent); } .eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px rgba(239,120,92,.7); } .hero h1 { max-width: 820px; margin: 0; font: 500 clamp(58px, 5.6vw, 82px)/.98 var(--display); letter-spacing: -.065em; text-wrap: balance; } .hero h1 span, .about-copy h2 span, .footer-main h2 span { color: var(--accent); } .hero-lead { max-width: 600px; margin: 26px 0 0; color: #c2bfb6; font-size: clamp(16px, 1.55vw, 19px); line-height: 1.7; text-wrap: pretty; } .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 33px; } .button { display: inline-flex; min-height: 49px; align-items: center; justify-content: center; gap: 20px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; font: 11px var(--mono); letter-spacing: .06em; transition: transform .2s ease, background .2s ease, border-color .2s ease; } .button:hover { transform: translateY(-2px); border-color: rgba(239,120,92,.55); } .button--primary { border-color: var(--accent); background: var(--accent); color: #181310; } .button--primary:hover { background: #ff8b70; } .button--quiet { color: var(--ink); } .button span { font-size: 15px; } .hero-facts { display: flex; flex-wrap: wrap; gap: 12px 23px; margin-top: 48px; color: var(--quiet); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; } .hero-facts span { display: inline-flex; gap: 7px; align-items: baseline; } .hero-facts b { color: var(--muted); font-weight: 400; } .builder-card { align-self: center; padding: clamp(23px, 3vw, 38px); border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015) 54%), #151513; box-shadow: 0 32px 100px rgba(0,0,0,.24); transform: rotate(1deg); } .builder-card__top, .builder-card__bottom, .flow-visual__top, .flow-visual__foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; color: var(--quiet); font: 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; } .builder-card__index { color: var(--accent); } .builder-card__statement { max-width: 370px; margin: 30px 0 38px; font: 400 clamp(25px, 2.5vw, 34px)/1.18 var(--display); letter-spacing: -.035em; } .builder-flow { display: grid; gap: 0; } .builder-flow__node { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 15px 0; border-top: 1px solid var(--line); } .builder-flow__node > span { color: var(--accent); font: 10px var(--mono); } .builder-flow__node b { font-size: 13px; font-weight: 500; } .builder-flow__node small { color: var(--quiet); font: 9px var(--mono); } .builder-flow > i { width: 1px; height: 15px; margin-left: 21px; background: linear-gradient(var(--accent), transparent); } .builder-flow__node--active b { color: var(--accent); } .builder-card__bottom { padding-top: 20px; border-top: 1px solid var(--line); } .builder-card__bottom span:last-child { color: var(--accent); font-size: 15px; } .hero-bottom { display: flex; justify-content: space-between; gap: 20px; padding-block: 15px 19px; color: var(--quiet); font: 9px var(--mono); letter-spacing: .13em; text-transform: uppercase; } .hero-bottom a { color: var(--muted); } .hero-bottom a span { margin-left: 8px; color: var(--accent); } .section { padding-block: clamp(90px, 11vw, 156px); } .projects-section { background: #141412; } .section-heading { display: grid; grid-template-columns: 1fr minmax(260px, .48fr); align-items: end; gap: 40px; margin-bottom: 47px; } .section-heading .eyebrow, .about-copy .eyebrow { margin-bottom: 22px; } .section-heading h2, .about-copy h2, .footer-main h2 { margin: 0; font: 500 clamp(38px, 5.6vw, 70px)/1.02 var(--display); letter-spacing: -.055em; text-wrap: balance; } .section-intro { max-width: 430px; margin: 0 0 4px; color: var(--muted); font-size: 14px; line-height: 1.75; } .featured-case { display: grid; grid-template-columns: minmax(250px, .82fr) minmax(430px, 1.18fr); gap: clamp(34px, 6vw, 86px); align-items: center; padding: clamp(25px, 4vw, 52px); border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(125deg, rgba(239,120,92,.06), transparent 42%), #191917; } .case-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--muted); font: 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; } .case-kicker__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .featured-case h3 { max-width: 480px; margin: 0; font: 500 clamp(35px, 4vw, 52px)/1.02 var(--display); letter-spacing: -.05em; text-wrap: balance; } .featured-case__copy > p:not(.case-note) { max-width: 500px; margin: 21px 0 0; color: #bcb9b0; font-size: 14px; line-height: 1.8; } .tag-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; } .tag-list span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 9px var(--mono); } .case-note { margin: 24px 0 0; color: var(--quiet); font: 9px/1.6 var(--mono); letter-spacing: .04em; } .flow-visual { padding: 20px; border: 1px solid rgba(255,255,255,.11); border-radius: 11px; background: #11110f; box-shadow: 0 16px 44px rgba(0,0,0,.18); } .flow-visual__top { padding: 0 2px 17px; border-bottom: 1px solid var(--line); font-size: 8px; } .flow-visual__top span:last-child { color: var(--accent); } .flow-visual__list { display: grid; } .flow-step { position: relative; display: grid; grid-template-columns: 27px 31px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 58px; border-bottom: 1px solid rgba(255,255,255,.075); } .flow-step__number { color: var(--quiet); font: 8px var(--mono); } .flow-step__icon { display: grid; place-items: center; width: 28px; aspect-ratio: 1; border: 1px solid rgba(239,120,92,.28); border-radius: 8px; color: var(--accent); font-size: 14px; } .flow-step b { display: block; font-size: 11px; font-weight: 500; } .flow-step small { display: block; margin-top: 2px; color: var(--quiet); font: 8px var(--mono); } .flow-step__state { color: var(--quiet); font: 7px var(--mono); letter-spacing: .08em; } .flow-visual__foot { padding-top: 18px; font-size: 7px; } .flow-visual__foot > span:last-child { color: var(--accent); } .flow-visual__line { flex: 1; max-width: 80px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); } .project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; } .project-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .22s ease, transform .22s ease; } .project-card:hover { border-color: rgba(239,120,92,.32); transform: translateY(-3px); } .project-art { position: relative; display: flex; min-height: 290px; align-items: center; justify-content: center; overflow: hidden; background-color: #21211e; } .project-art::before { position: absolute; content: ""; inset: 0; opacity: .5; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, black, transparent 92%); } .art-label { position: absolute; z-index: 2; top: 19px; left: 21px; color: rgba(243,240,232,.65); font: 8px var(--mono); letter-spacing: .14em; } .project-card__body { padding: 24px clamp(21px, 3vw, 32px) 28px; } .project-meta { display: flex; justify-content: space-between; gap: 14px; color: var(--quiet); font: 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; } .project-card h3 { margin: 14px 0 9px; font: 500 29px/1.08 var(--display); letter-spacing: -.04em; } .project-card__body > p:not(.project-stage) { max-width: 58ch; margin: 0; color: #b7b4ab; font-size: 13px; line-height: 1.75; } .project-stage { margin: 15px 0 0; color: var(--quiet); font: 9px/1.6 var(--mono); } .text-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; color: var(--ink); font: 10px var(--mono); letter-spacing: .04em; } .text-link span { color: var(--accent); font-size: 14px; transition: transform .2s ease; } .text-link:hover span { transform: translate(3px, -2px); } .art-controllist { background: radial-gradient(ellipse at 68% 43%, rgba(68,119,107,.24), transparent 43%), linear-gradient(140deg, #18201e, #1b1b18 70%); } .ticket-card { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; width: min(72%, 350px); min-height: 150px; padding: 18px; border: 1px solid rgba(237,238,225,.2); border-radius: 10px; background: rgba(239,240,231,.95); color: #17201d; box-shadow: 0 18px 50px rgba(0,0,0,.23); transform: rotate(-4deg); } .ticket-card__top, .ticket-card__bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; color: #58625c; font: 7px var(--mono); letter-spacing: .12em; } .ticket-card__top b { color: #195d48; font-size: 12px; } .ticket-card__qr { display: grid; grid-template-columns: repeat(3, 13px); grid-template-rows: repeat(3, 13px); gap: 3px; align-self: center; padding: 7px; background: #fff; } .ticket-card__qr i { background: #17201d; } .ticket-card__qr i:nth-child(2), .ticket-card__qr i:nth-child(4), .ticket-card__qr i:nth-child(9) { opacity: .18; } .art-orbit { position: absolute; border: 1px solid rgba(239,240,231,.13); border-radius: 50%; } .art-orbit--one { width: 280px; aspect-ratio: 1; } .art-orbit--two { width: 390px; aspect-ratio: 1; } .art-app--suma { background: radial-gradient(ellipse at 50% 52%, rgba(114,106,244,.2), transparent 52%), #191927; } .art-app--mercurio { background: radial-gradient(ellipse at 50% 57%, rgba(59,198,98,.16), transparent 54%), #121715; } .phone-frame { position: absolute; bottom: -52px; height: calc(100% + 42px); max-height: 400px; padding: 5px; overflow: hidden; border: 1px solid rgba(255,255,255,.24); border-bottom: 0; border-radius: 24px 24px 0 0; background: #080909; box-shadow: 0 12px 70px rgba(0,0,0,.45); transition: transform .3s ease; } .project-card:hover .phone-frame { transform: translateY(-5px); } .phone-frame img { display: block; height: 100%; width: auto; border-radius: 19px 19px 0 0; object-fit: cover; object-position: top; } .art-app .art-label { color: rgba(243,240,232,.72); } .art-tv { min-height: 305px; background: radial-gradient(ellipse at 51% 65%, rgba(125,139,145,.12), transparent 50%), #171715; } .tv-screen { position: absolute; top: 65px; left: 11%; width: 70%; height: 185px; padding: 15px; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; background: linear-gradient(145deg, #242622, #10110f 80%); box-shadow: 0 17px 55px rgba(0,0,0,.55); } .tv-screen::after { position: absolute; content: ""; top: 100%; left: 49%; width: 2px; height: 17px; background: #676861; box-shadow: -29px 18px 0 -0.4px #676861, 29px 18px 0 -0.4px #676861; } .tv-screen__top { display: flex; justify-content: space-between; color: var(--ink); font: 8px var(--mono); letter-spacing: .1em; } .tv-screen__top b { color: var(--accent); font-size: 12px; } .tv-screen__top span { color: var(--quiet); font-size: 6px; } .tv-screen__tiles { display: flex; gap: 9px; margin-top: 27px; } .tv-screen__tiles i { display: grid; place-items: center; width: 42px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; background: rgba(255,255,255,.06); color: var(--muted); font: 9px var(--mono); font-style: normal; } .tv-screen__tiles i:first-child { color: #191512; background: var(--accent); } .tv-screen__bar { width: 68%; height: 5px; margin-top: 19px; border-radius: 99px; background: linear-gradient(90deg, rgba(239,120,92,.75) 34%, rgba(255,255,255,.08) 34%); } .remote-card { position: absolute; right: 9%; bottom: 29px; display: grid; grid-template-columns: repeat(3, 27px); grid-template-rows: 20px repeat(2, 27px); gap: 6px; padding: 11px; border: 1px solid rgba(255,255,255,.17); border-radius: 12px; background: rgba(29,30,28,.94); box-shadow: 0 12px 32px rgba(0,0,0,.5); transform: rotate(5deg); } .remote-card > span { grid-column: 1 / -1; color: var(--quiet); font: 6px var(--mono); letter-spacing: .1em; } .remote-card > b, .remote-card > i { display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; color: var(--ink); font-style: normal; font-size: 11px; } .remote-card > b { color: var(--accent); } .art-modus { color: var(--ink); background: radial-gradient(ellipse at 64% 55%, rgba(206,146,64,.15), transparent 53%), #1c1a17; } .modus-wordmark { position: relative; z-index: 1; font: 500 clamp(64px, 9vw, 98px)/.9 var(--display); letter-spacing: -.1em; } .modus-wordmark span { padding-inline: 8px; color: var(--accent); font: 300 .68em var(--body); } .modus-caption { position: absolute; z-index: 1; bottom: 28px; display: flex; align-items: center; gap: 10px; color: var(--muted); font: 7px var(--mono); letter-spacing: .12em; } .modus-caption i { width: 3px; height: 3px; border-radius: 50%; background: var(--accent); } .modus-block { position: absolute; width: 90px; height: 130px; border: 1px solid rgba(255,255,255,.1); border-radius: 80px; transform: rotate(32deg); } .modus-block--a { left: 14%; top: 21%; } .modus-block--b { right: 14%; bottom: 17%; width: 70px; height: 110px; transform: rotate(-35deg); } .art-paulo { color: #211b18; background: radial-gradient(ellipse at 80% 40%, rgba(93,65,48,.1), transparent 38%), #d3c7b8; } .art-paulo::before { opacity: .17; background-image: linear-gradient(rgba(33,27,24,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(33,27,24,.18) 1px, transparent 1px); } .art-paulo .art-label { color: rgba(33,27,24,.63); } .paulo-headline { position: absolute; z-index: 1; left: 13%; top: 32%; font: 500 clamp(42px, 6vw, 70px)/.82 var(--display); letter-spacing: -.07em; } .paulo-headline em { color: #8f432f; font-style: normal; } .paulo-rule { position: absolute; left: 13%; bottom: 20%; width: 65%; height: 1px; background: rgba(33,27,24,.35); } .paulo-signature { position: absolute; left: 13%; bottom: 11%; color: rgba(33,27,24,.66); font: 8px var(--mono); letter-spacing: .15em; } .paulo-number { position: absolute; right: 10%; bottom: 11%; color: rgba(33,27,24,.56); font: 8px var(--mono); } .about-section { border-top: 1px solid var(--line); } .about-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr); align-items: center; gap: clamp(48px, 10vw, 150px); } .about-copy h2 { font-size: clamp(42px, 6vw, 76px); } .about-copy > p:not(.eyebrow) { max-width: 600px; margin: 25px 0 0; color: var(--muted); font-size: 14px; line-height: 1.85; } .about-panel { padding: 25px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .about-panel__header { display: flex; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--line); color: var(--quiet); font: 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; } .about-panel__header span:last-child { color: var(--accent); } .about-row { display: flex; flex-direction: column; gap: 5px; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .about-row span { color: var(--quiet); font: 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; } .about-row b { font-size: 13px; font-weight: 500; } .about-resume { margin-top: 24px; } .site-footer { border-top: 1px solid var(--line); background: #151513; } .footer-main { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding-block: clamp(70px, 9vw, 122px); } .footer-main .eyebrow { margin-bottom: 20px; } .footer-main h2 { font-size: clamp(45px, 6vw, 76px); } .footer-contact { display: grid; gap: 14px; min-width: min(100%, 310px); } .footer-contact a { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--muted); font: 11px var(--mono); } .footer-contact a:hover { color: var(--ink); } .footer-contact span { color: var(--accent); } .footer-contact .footer-email { color: var(--ink); font: 500 15px var(--body); } .footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-block: 17px; border-top: 1px solid var(--line); color: var(--quiet); font: 8px var(--mono); letter-spacing: .06em; } .footer-legal > span:nth-child(2) { margin-left: auto; } .privacy-button { padding: 0; border: 0; background: transparent; color: var(--quiet); font: inherit; cursor: pointer; } .privacy-button:hover { color: var(--ink); } .privacy-consent { position: fixed; z-index: 50; inset: auto var(--gutter) 18px auto; width: min(430px, calc(100vw - 2 * var(--gutter))); padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #1d1d1a; box-shadow: 0 18px 64px rgba(0,0,0,.42); } .privacy-consent[hidden] { display: none; } .privacy-consent p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; } .privacy-consent div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .privacy-consent button { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font: 9px var(--mono); cursor: pointer; } .privacy-consent button:last-child { border-color: var(--accent); background: var(--accent); color: var(--page); } .privacy-consent > a { display: inline-block; margin-top: 13px; color: var(--quiet); font-size: 10px; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 1000px) { .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr); gap: 44px; } .builder-flow__node { grid-template-columns: 28px 1fr; } .builder-flow__node small { grid-column: 2; margin-top: -5px; } .featured-case { grid-template-columns: 1fr; } .flow-visual { max-width: 700px; } .about-layout { gap: 54px; } } @media (max-width: 760px) { :root { --gutter: 22px; } .header-inner { min-height: 66px; } .site-nav { display: none; } .menu-button { display: inline-flex; } .mobile-menu:not([hidden]) { position: absolute; top: calc(100% + 1px); left: 0; right: 0; display: grid; padding: 8px var(--gutter) 18px; border-bottom: 1px solid var(--line); background: #11110f; box-shadow: 0 22px 42px rgba(0,0,0,.28); } .mobile-menu a { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: var(--muted); font-size: 14px; } .mobile-menu a:last-child { color: var(--ink); } .mobile-menu a span { color: var(--accent); font: 9px var(--mono); } .hero-layout { min-height: 0; grid-template-columns: 1fr; gap: 54px; padding-block: 83px 42px; } .hero h1 { max-width: 630px; font-size: clamp(54px, 12vw, 82px); } .hero-lead { max-width: 600px; margin-top: 22px; } .hero-facts { gap: 9px 15px; margin-top: 35px; } .builder-card { max-width: 560px; transform: none; } .builder-card__statement { max-width: 460px; } .builder-flow__node { grid-template-columns: 36px 1fr auto; } .builder-flow__node small { grid-column: auto; margin: 0; } .hero-bottom { padding-block: 14px 17px; font-size: 7px; } .section { padding-block: 82px; } .section-heading { grid-template-columns: 1fr; gap: 18px; margin-bottom: 34px; } .section-heading h2 { max-width: 650px; } .section-intro { max-width: 560px; } .featured-case { gap: 30px; padding: 23px; } .project-grid { gap: 13px; } .project-art { min-height: 250px; } .project-card__body { padding: 20px 20px 23px; } .project-card h3 { font-size: 25px; } .about-layout { grid-template-columns: 1fr; gap: 34px; } .about-panel { max-width: 620px; } .footer-main { align-items: start; flex-direction: column; } .footer-contact { width: min(100%, 420px); } .footer-legal > span:nth-child(2) { margin-left: 0; } } @media (max-width: 560px) { .brand-name { font-size: 10px; letter-spacing: .1em; } .hero-layout { padding-top: 67px; gap: 43px; } .hero h1 { font-size: clamp(49px, 12.8vw, 68px); } .eyebrow { gap: 9px; font-size: 8px; letter-spacing: .14em; } .hero-actions { gap: 9px; } .button { min-height: 46px; padding-inline: 15px; font-size: 9px; } .hero-facts { display: grid; grid-template-columns: 1fr 1fr; } .hero-facts span:last-child { grid-column: 1 / -1; } .builder-card { padding: 21px; } .builder-card__statement { margin-block: 25px 29px; font-size: 26px; } .builder-flow__node { grid-template-columns: 28px 1fr; gap: 9px; } .builder-flow__node small { grid-column: 2; margin-top: -5px; } .hero-bottom { align-items: start; } .hero-bottom a { text-align: right; } .section-heading h2, .about-copy h2 { font-size: 42px; } .featured-case { padding: 19px; } .featured-case h3 { font-size: 37px; } .featured-case__copy > p:not(.case-note) { font-size: 13px; } .flow-visual { padding: 14px; } .flow-step { grid-template-columns: 19px 26px minmax(0,1fr); gap: 7px; min-height: 57px; } .flow-step__state { display: none; } .flow-step b { font-size: 10px; } .flow-step small { font-size: 7px; } .project-grid { grid-template-columns: 1fr; gap: 13px; } .project-art { min-height: 260px; } .project-card__body { padding: 20px 20px 24px; } .project-card h3 { font-size: 27px; } .about-panel { padding: 20px; } .footer-main { padding-block: 68px; } .footer-main h2 { font-size: 48px; } .footer-legal { flex-direction: column; align-items: flex-start; gap: 11px; } .privacy-consent { inset: auto 14px 14px; width: auto; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../assets/vendor/fonts/editorial/space-grotesk-latin-variable.woff2") format("woff2"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../assets/vendor/fonts/editorial/dm-sans-latin-variable.woff2") format("woff2"); } @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/vendor/fonts/editorial/instrument-serif-latin-normal.woff2") format("woff2"); } @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/vendor/fonts/editorial/instrument-serif-latin-italic.woff2") format("woff2"); } :root { color-scheme: light; --page: #F3F0E9; --surface: #FBF9F4; --surface-soft: #EAE6DE; --ink: #141414; --muted: #67645E; --quiet: #918D85; --line: rgba(20, 20, 20, .15); --accent: #FF5538; --accent-soft: rgba(255, 85, 56, .13); --lilac: #D8C9FF; --gutter: clamp(20px, 5.2vw, 82px); --max: 1440px; --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; --editorial: "Instrument Serif", Georgia, serif; --body: "DM Sans", "Helvetica Neue", Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; } html { background: var(--page); } body { background: var(--page); color: var(--ink); font-family: var(--body); } ::selection { color: var(--page); background: var(--accent); } .site-header { border-bottom-color: rgba(20, 20, 20, .12); background: rgba(243, 240, 233, .92); backdrop-filter: blur(14px); } .header-inner { min-height: 68px; gap: 20px; } .brand { gap: 0; } .brand-mark { width: auto; border: 0; border-radius: 0; color: var(--ink); font: 700 20px/.9 var(--display); letter-spacing: -.09em; } .brand-mark span { color: var(--accent); } .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .site-nav { gap: clamp(15px, 2.4vw, 34px); color: var(--ink); font-size: 12px; } .site-nav a:hover, .mobile-menu a:hover { color: var(--accent); } .site-nav .nav-resume { padding: 8px 0; border: 0; border-radius: 0; } .header-location { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font: 9px var(--mono); white-space: nowrap; } .header-location > span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .header-location i { color: var(--quiet); font-style: normal; } .menu-button { color: var(--ink); } .mobile-menu { border-top-color: var(--line); background: var(--page); } .mobile-menu a { border-bottom-color: var(--line); color: var(--ink); } .hero { min-height: 0; border-bottom-color: var(--line); background: var(--page); color: var(--ink); } .hero::before { opacity: .32; background: linear-gradient(90deg, transparent calc(var(--gutter) + 1px), rgba(20, 20, 20, .12) calc(var(--gutter) + 1px), rgba(20, 20, 20, .12) calc(var(--gutter) + 2px), transparent calc(var(--gutter) + 2px)), linear-gradient(rgba(20, 20, 20, .035) 1px, transparent 1px); background-size: 100% 100%, 100% 86px; mask-image: linear-gradient(to bottom, black, transparent 94%); } .hero::after { right: -12vw; top: -17vw; width: min(48vw, 680px); background: radial-gradient(circle, rgba(255, 85, 56, .09), transparent 69%); filter: blur(8px); } .hero-layout { min-height: min(610px, 68svh); padding-block: clamp(24px, 3vw, 42px) 12px; grid-template-columns: minmax(0, 1.18fr) minmax(250px, .48fr); align-items: center; gap: clamp(28px, 5.5vw, 84px); } .hero-copy { max-width: 930px; } .hero-meta { display: flex; justify-content: space-between; gap: 18px; margin-bottom: clamp(30px, 3vw, 42px); color: var(--muted); font: 9px var(--mono); letter-spacing: .11em; text-transform: uppercase; } .hero-meta span:first-child { color: var(--ink); } .hero-meta span:last-child { text-align: right; } .hero h1 { max-width: 920px; font: 700 clamp(58px, 7.1vw, 108px)/.86 var(--display); letter-spacing: -.075em; text-transform: uppercase; text-wrap: balance; } .hero h1 .hero-accent { color: var(--accent); } .hero h1 .hero-final { color: var(--ink); } .hero-subtitle { margin: 18px 0 0; font: 400 clamp(18px, 1.8vw, 25px)/1.28 var(--body); letter-spacing: -.03em; } .hero-editorial { max-width: 650px; margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; text-wrap: pretty; } .hero-editorial em { color: var(--ink); font: italic 29px/1 var(--editorial); white-space: nowrap; } .hero-actions { gap: 17px; margin-top: 25px; } .hero .button { min-height: 42px; font: 500 10px var(--body); letter-spacing: 0; } .hero .button--primary { border-color: var(--ink); background: var(--ink); color: var(--page); } .hero .button--primary:hover { border-color: var(--accent); background: var(--accent); color: var(--ink); } .hero .button--quiet { padding-inline: 4px; border-color: transparent; color: var(--muted); } .hero .button span { color: var(--accent); } .hero-facts { display: flex; flex-wrap: wrap; gap: 9px 22px; margin-top: 23px; color: var(--muted); font: 9px var(--mono); letter-spacing: .04em; } .hero-facts span { padding: 0; border: 0; } .hero-facts b { color: var(--ink); font-weight: 500; } .hero-art { position: relative; display: grid; min-height: 420px; align-content: center; justify-items: start; padding-left: clamp(0px, 1.4vw, 18px); } .hero-art__symbol { display: block; width: clamp(185px, 17vw, 240px); height: auto; transform: rotate(-4deg); } .hero-art__list { position: absolute; right: 0; bottom: 17%; display: grid; width: 92px; gap: 7px; color: var(--muted); font: 7px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; } .hero-art__scroll { position: absolute; right: 0; bottom: 0; display: grid; justify-items: start; gap: 7px; color: var(--muted); font: 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; } .hero-art__scroll i { width: 1px; height: 30px; margin-left: 2px; background: var(--ink); } .hero-bottom { padding-block: 11px 17px; color: var(--quiet); font-size: 8px; } .hero-bottom a { color: var(--ink); } .projects-section, .site-footer { --ink: #F3F0E9; --muted: #AAA79E; --quiet: #77756E; --line: rgba(243, 240, 233, .15); --surface: #191917; color: var(--ink); } .projects-section { background: #141414; } .site-footer { background: #141414; } @media (max-width: 1060px) { .header-location { display: none; } .hero-layout { grid-template-columns: minmax(0, 1.15fr) minmax(190px, .45fr); gap: 24px; } .hero h1 { font-size: clamp(58px, 7.7vw, 82px); } .hero-art { min-height: 340px; } .hero-art__symbol { width: 190px; } } @media (max-width: 760px) { .header-inner { min-height: 64px; } .hero-layout { grid-template-columns: minmax(0, 1fr); } .hero-copy { min-width: 0; } .hero-layout { min-height: 0; padding-block: 37px 16px; grid-template-columns: minmax(0, 1fr); gap: 20px; } .hero-meta { margin-bottom: 34px; font-size: 8px; } .hero h1 { max-width: 100%; font-size: clamp(50px, 10.3vw, 76px); line-height: .9; } .hero-subtitle { margin-top: 16px; } .hero-editorial { max-width: 570px; font-size: 13px; } .hero-editorial em { font-size: 26px; } .hero-art { min-height: 125px; grid-template-columns: auto 1fr; justify-items: start; align-items: center; } .hero-art__symbol { width: clamp(104px, 24vw, 148px); } .hero-art__list { position: static; grid-template-columns: repeat(2, max-content); gap: 6px 13px; margin-left: 26px; font-size: 7px; } .hero-art__scroll { display: none; } .hero-bottom { padding-block: 10px 14px; } } @media (max-width: 480px) { .site-nav { display: none; } .menu-button { display: inline-flex; } .hero-layout { padding-top: 28px; } .hero-meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; margin-bottom: 31px; letter-spacing: .08em; } .hero-meta span:last-child { text-align: left; } .hero h1 { font-size: clamp(42px, 11.2vw, 50px); letter-spacing: -.078em; } .hero h1 .hero-final { display: block; width: min(100%, 305px); } .hero-subtitle { max-width: 320px; font-size: 17px; } .hero-editorial { max-width: 350px; font-size: 12px; line-height: 1.6; } .hero-editorial em { display: block; margin-bottom: 3px; font-size: 25px; } .hero-actions { align-items: flex-start; flex-direction: column; gap: 6px; margin-top: 19px; } .hero .button--quiet { min-height: 36px; } .hero-facts { gap: 7px 12px; margin-top: 16px; font-size: 8px; } .hero-art { min-height: 95px; grid-template-columns: 92px minmax(0, 1fr); column-gap: 16px; } .hero-art__symbol { width: 92px; } .hero-art__list { width: 100%; max-width: none; grid-template-columns: repeat(2, max-content); gap: 5px 9px; margin-left: 0; font-size: 6px; } .hero-bottom { align-items: center; font-size: 7px; letter-spacing: .08em; } .hero-bottom span { max-width: 155px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero *, .site-header * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } .projects-section { --case-paper: #F3F0E9; --case-ink: #F3F0E9; --case-muted: #A8A49D; --case-line: rgba(243, 240, 233, .18); padding-block: clamp(74px, 8.5vw, 118px) clamp(88px, 10vw, 142px); color: var(--case-ink); background: #141414; } .projects-layout { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); } .section-index { display: flex; align-items: flex-start; flex-direction: column; gap: 9px; padding-top: 6px; border-right: 1px solid var(--case-line); color: var(--case-ink); font: 11px/1.35 var(--mono); letter-spacing: .08em; } .section-index > span { font-size: 15px; } .section-index small { color: var(--case-muted); font: 8px/1.55 var(--mono); letter-spacing: .09em; } .projects-main { min-width: 0; } .selected-work-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .48fr); align-items: end; gap: clamp(25px, 4vw, 62px); margin-bottom: 34px; } .selected-work-heading .eyebrow { margin-bottom: 14px; font-size: 8px; } .selected-work-heading h2 { margin: 0; font: 600 clamp(34px, 4.1vw, 58px)/.99 var(--display); letter-spacing: -.065em; text-wrap: balance; } .selected-work-heading h2 em { color: var(--case-muted); font-family: var(--editorial); font-weight: 400; } .selected-work-heading .section-intro { max-width: 370px; margin: 0 0 3px; color: #B4B1A9; font-size: 12px; line-height: 1.7; } .selected-project-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; align-items: stretch; } .work-card { min-width: 0; overflow: hidden; border: 1px solid rgba(243, 240, 233, .16); border-radius: 14px; background: linear-gradient(150deg, rgba(255,255,255,.045), transparent 45%), #191917; transition: border-color .25s ease, transform .3s cubic-bezier(.2,.75,.25,1), box-shadow .3s ease; } .work-card:hover, .work-card:focus-within { transform: translateY(-5px); border-color: rgba(255, 85, 56, .58); box-shadow: 0 22px 50px rgba(0,0,0,.25); } .work-visual { position: relative; display: grid; min-height: 255px; aspect-ratio: 1.04 / 1; overflow: hidden; place-items: center; isolation: isolate; } .work-visual::after { position: absolute; z-index: -1; inset: 0; content: ""; border-bottom: 1px solid rgba(255,255,255,.12); pointer-events: none; } .work-visual__badge { position: absolute; z-index: 3; right: 12px; bottom: 11px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; background: rgba(20,20,20,.72); color: #F3F0E9; font: 7px var(--mono); letter-spacing: .075em; text-transform: uppercase; backdrop-filter: blur(10px); } .work-visual--loreal { align-content: space-between; padding: 16px 14px 12px; background: radial-gradient(ellipse at 50% 40%, rgba(44,91,173,.23), transparent 59%), linear-gradient(135deg, #101722, #172238 52%, #10141b); } .work-visual--loreal::before { position: absolute; z-index: -1; inset: 10px; content: ""; border: 1px solid rgba(220,230,248,.11); border-radius: 8px; } .work-visual__top, .work-visual__foot { display: flex; width: 100%; justify-content: space-between; gap: 8px; color: #9DAFCB; font: 7px/1.3 var(--mono); letter-spacing: .08em; } .work-visual__top span:last-child { color: #E2D6C3; } .work-visual__foot { color: #78879D; font-size: 6px; } .network-flow { display: flex; width: 100%; align-items: stretch; flex-direction: column; gap: 3px; padding: 12px 0; } .network-flow > i { display: block; width: 1px; height: 7px; margin-left: 14px; background: linear-gradient(#8297BC, #FF5538); } .network-node { display: grid; min-height: 32px; grid-template-columns: 25px minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid rgba(214,225,242,.19); border-radius: 7px; background: rgba(8,14,23,.56); } .network-node small { color: #FF8068; font: 7px var(--mono); } .network-node b { color: #F3F0E9; font: 500 10px var(--body); } .network-node span { color: #A6B1C1; font: 7px var(--mono); text-align: right; } .network-node--accent { border-color: rgba(255,85,56,.6); background: rgba(255,85,56,.11); } .work-visual--suma { background: radial-gradient(ellipse at 54% 49%, rgba(216,201,255,.98), rgba(216,201,255,.84) 43%, transparent 75%), linear-gradient(145deg, #9D7BE6, #E5D9FF 56%, #B49CE9); } .work-visual--suma::before { position: absolute; z-index: -1; inset: 12px; content: ""; border: 1px solid rgba(255,255,255,.62); border-radius: 9px; } .suma-sculpture { position: absolute; z-index: 0; inset: -17% -26% -15% 10%; opacity: .9; transform: rotate(17deg); } .suma-sculpture img { display: block; width: 100%; height: 100%; object-fit: contain; } .phone-mockup { position: relative; z-index: 1; overflow: hidden; border: 5px solid #121212; border-radius: 29px; background: #121212; box-shadow: 0 24px 48px rgba(15,12,28,.32), 0 3px 0 rgba(255,255,255,.3) inset; aspect-ratio: 689 / 1500; } .phone-mockup > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 23px; } .phone-mockup__island { position: absolute; z-index: 2; top: 5px; left: 50%; width: 33%; height: 13px; border-radius: 99px; background: #060606; transform: translateX(-50%); pointer-events: none; } .phone-mockup--suma { width: 41%; max-height: 82%; transform: rotate(-5deg) translateY(3%); } .work-visual--casa { background: radial-gradient(ellipse at 63% 47%, #521A25, #151216 68%); } .work-visual--casa::before { position: absolute; z-index: -1; inset: 11px; content: ""; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; } .tv-mockup { position: absolute; top: 20%; left: 7%; width: 85%; overflow: hidden; padding: 4px; border: 1px solid rgba(255,255,255,.32); border-radius: 6px; background: #050505; box-shadow: 0 16px 36px rgba(0,0,0,.42); transform: perspective(800px) rotateY(-7deg) rotateX(2deg); } .tv-mockup img { display: block; width: 100%; height: auto; border-radius: 3px; } .phone-mockup--remote { position: absolute; right: 6%; bottom: 5%; width: 27%; border-width: 4px; border-radius: 18px; transform: rotate(7deg); } .phone-mockup--remote > img { border-radius: 14px; } .work-card__body { display: flex; min-height: 276px; align-items: flex-start; flex-direction: column; padding: 17px 16px 16px; } .work-kicker { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 11px; color: #BDB9AF; font: 7px var(--mono); letter-spacing: .09em; text-transform: uppercase; } .work-kicker > span { color: #FF8068; } .work-card h3 { margin: 0; color: #F3F0E9; font: 600 clamp(19px, 1.55vw, 24px)/1.08 var(--display); letter-spacing: -.045em; } .work-problem, .work-contribution { margin: 13px 0 0; color: #B9B6AF; font-size: 11px; line-height: 1.6; text-wrap: pretty; } .work-contribution { margin-top: 8px; color: #E4E0D8; } .work-problem b, .work-contribution b { display: block; margin-bottom: 3px; color: #FF8068; font: 7px var(--mono); letter-spacing: .1em; text-transform: uppercase; } .text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; color: #F3F0E9; font-size: 10px; font-weight: 500; transition: color .2s ease, gap .2s ease; } .text-link span { color: #FF8068; } .text-link:hover { gap: 12px; color: #FF8068; } .work-status { margin: 9px 0 0; color: #A8A49D; font: 8px/1.5 var(--mono); } .work-disclosure { width: 100%; margin-top: auto; padding-top: 14px; color: #E4E0D8; } .work-disclosure summary { display: flex; justify-content: space-between; gap: 10px; cursor: pointer; color: #F3F0E9; font-size: 10px; list-style: none; } .work-disclosure summary::-webkit-details-marker { display: none; } .work-disclosure summary span { color: #FF8068; } .work-disclosure[open] summary { padding-bottom: 9px; } .work-disclosure ol { display: grid; gap: 6px; margin: 0; padding-left: 17px; color: #BBB8B0; font-size: 9px; line-height: 1.5; } .work-disclosure > p { margin: 9px 0 0; color: #8F8C85; font: 7px/1.5 var(--mono); } .archive-preview { margin-top: clamp(68px, 9vw, 122px); padding-top: 28px; border-top: 1px solid var(--case-line); } .archive-preview__heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 24px; } .archive-preview__heading .eyebrow { margin: 0 0 10px; font-size: 8px; } .archive-preview__heading h3 { margin: 0; font: 600 clamp(29px, 3.2vw, 43px)/1 var(--display); letter-spacing: -.06em; } .archive-preview__heading > p { max-width: 320px; margin: 0 0 2px; color: #A8A49D; font-size: 11px; line-height: 1.65; } .archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .archive-card { min-width: 0; overflow: hidden; border: 1px solid rgba(243, 240, 233, .16); border-radius: 11px; background: #191917; transition: border-color .24s ease, transform .26s ease, box-shadow .26s ease; } .archive-card:hover, .archive-card:focus-within { transform: translateY(-4px); border-color: rgba(255,85,56,.52); box-shadow: 0 16px 36px rgba(0,0,0,.24); } .archive-card__visual { position: relative; display: grid; height: clamp(150px, 15vw, 218px); overflow: hidden; place-items: center; background: #20201f; } .archive-card__visual::after { position: absolute; inset: 28% 0 0; content: ""; background: linear-gradient(transparent, rgba(0,0,0,.55)); pointer-events: none; } .archive-card__visual > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.75,.25,1); } .archive-card:hover .archive-card__visual > img { transform: scale(1.045); } .archive-card__visual > span { position: absolute; z-index: 1; right: 11px; bottom: 10px; left: 11px; color: #F3F0E9; font: 7px var(--mono); letter-spacing: .09em; text-transform: uppercase; } .archive-card__visual--modus { background: radial-gradient(ellipse at 52% 42%, #292929, #0B0B0B 72%); } .archive-card__visual--modus::after { display: none; } .archive-card__visual--modus > img { width: 58%; height: auto; max-height: 58%; object-fit: contain; } .archive-card--mercurio .archive-card__visual { background: linear-gradient(145deg, #111C19, #07100D); } .archive-card--mercurio .archive-card__visual > img { width: auto; max-width: 100%; object-fit: contain; } .archive-card--paulo .archive-card__visual { background: #071A43; } .archive-card--paulo .archive-card__visual > img { object-fit: contain; } .archive-card__body { display: flex; min-height: 219px; align-items: flex-start; flex-direction: column; padding: 14px; } .archive-card__type { margin: 0 0 8px; color: #FF8068; font: 7px var(--mono); letter-spacing: .08em; } .archive-card h4 { margin: 0; color: #F3F0E9; font: 600 19px/1.1 var(--display); letter-spacing: -.04em; } .archive-card__body > p:not(.archive-card__type) { margin: 10px 0 0; color: #B9B6AF; font-size: 9px; line-height: 1.55; } .archive-card__body > p:not(.archive-card__type) b { display: block; margin-bottom: 2px; color: #E8E3DA; font: 7px var(--mono); letter-spacing: .08em; text-transform: uppercase; } .archive-card .text-link { font-size: 9px; } .archive-footnote { margin: 17px 0 0; color: #85827B; font: 8px/1.65 var(--mono); } .suma-story { --ink: #17141D; --muted: #4C4758; --quiet: #706A7A; --line: rgba(23,20,29,.17); position: relative; overflow: hidden; padding-block: clamp(82px, 9vw, 128px); background: radial-gradient(ellipse at 63% 48%, rgba(255,255,255,.6), transparent 47%), linear-gradient(111deg, #D8C9FF, #ECE5FA 58%, #C7B3F2); color: var(--ink); } .suma-story::before { position: absolute; inset: 0; content: ""; opacity: .18; background: linear-gradient(90deg, transparent 0 9.4%, rgba(23,20,29,.4) 9.45%, transparent 9.5%), linear-gradient(rgba(23,20,29,.12) 1px, transparent 1px); background-size: 100% 100%, 100% 72px; mask-image: linear-gradient(to right, #000, transparent 90%); pointer-events: none; } .suma-story__layout { position: relative; display: grid; grid-template-columns: 78px minmax(280px, .78fr) minmax(320px, 1.22fr); align-items: center; gap: clamp(22px, 3vw, 44px); } .section-index--light { color: var(--ink); border-right-color: rgba(23,20,29,.24); } .section-index--light small { color: #625C6D; } .suma-story__copy { position: relative; z-index: 2; max-width: 470px; } .suma-story__copy .eyebrow { margin-bottom: 15px; color: #544E60; font-size: 8px; } .suma-story__copy .eyebrow > span { color: #59458D; } .suma-story__copy h2 { margin: 0; font: 700 clamp(57px, 7vw, 94px)/.85 var(--display); letter-spacing: -.09em; text-transform: uppercase; } .suma-story__lead { margin: 12px 0 17px; font: 500 clamp(20px, 2.1vw, 28px)/1.15 var(--display); letter-spacing: -.045em; } .suma-story__lead em { color: #5E408F; font: italic 400 1.1em/1 var(--editorial); } .suma-story__copy > p:not(.eyebrow, .suma-story__lead) { max-width: 420px; margin: 0; color: #514C5A; font-size: 11px; line-height: 1.75; } .suma-story__steps { display: grid; gap: 0; margin-top: 23px; } .suma-story__steps > div { display: grid; grid-template-columns: 28px 95px minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 10px 0; border-top: 1px solid rgba(23,20,29,.17); } .suma-story__steps span { color: #6553CA; font: 9px var(--mono); } .suma-story__steps b { font: 600 11px var(--display); } .suma-story__steps small { color: #625C6D; font-size: 8px; line-height: 1.45; } .suma-story__actions { display: flex; align-items: flex-start; flex-direction: column; gap: 9px; margin-top: 18px; } .suma-story__actions .suma-case-button { min-height: 39px; border-color: #17141D; background: #17141D; color: #F3F0E9; font-size: 9px; } .suma-story__actions .suma-case-button:hover { border-color: #6553CA; background: #6553CA; color: #fff; } .suma-story__actions .suma-case-button span { color: #C8B2FF; } .suma-story__note { color: #625C6D; font: 7px/1.5 var(--mono); } .suma-story__scene { position: relative; display: grid; min-height: 500px; place-items: center; isolation: isolate; } .suma-story__scene::before { position: absolute; z-index: -1; width: min(85%, 520px); aspect-ratio: 1; border-radius: 50%; content: ""; background: radial-gradient(circle, rgba(255,255,255,.6), rgba(255,255,255,.06) 69%, transparent 70%); } .suma-story__sculpture { position: absolute; z-index: -1; inset: -19% -12% -15% 9%; width: 100%; height: 135%; object-fit: contain; opacity: .94; transform: rotate(14deg); } .phone-mockup--story { position: absolute; width: clamp(174px, 20vw, 254px); box-shadow: 0 31px 70px rgba(43,30,68,.35), 0 0 0 1px rgba(255,255,255,.7); } .phone-mockup--back { top: 10%; left: 15%; transform: rotate(-10deg); } .phone-mockup--front { right: 10%; bottom: 8%; transform: rotate(8deg); } .suma-story__caption { position: absolute; right: 0; bottom: 1%; color: #5D566B; font: 7px var(--mono); letter-spacing: .1em; } .case-dialog { position: fixed; top: 50%; left: 50%; right: auto; bottom: auto; width: min(820px, calc(100vw - 32px)); max-width: none; max-height: min(92svh, 920px); margin: 0; overflow: auto; padding: 0; border: 1px solid rgba(243,240,233,.22); border-radius: 18px; background: #171715; color: #F3F0E9; box-shadow: 0 32px 100px rgba(0,0,0,.52); transform: translate(-50%, -50%); } .case-dialog[open] { animation: case-dialog-in .24s cubic-bezier(.2,.75,.25,1) both; } .case-dialog::backdrop { background: rgba(8,8,8,.78); backdrop-filter: blur(8px); } .case-dialog__frame { position: relative; min-height: 440px; padding: clamp(24px, 4vw, 46px); } .case-dialog__close { position: sticky; z-index: 5; top: 0; display: flex; align-items: center; gap: 12px; margin: -7px -4px 14px auto; padding: 6px 0 8px 12px; border: 0; background: transparent; color: #C9C5BC; font: 9px var(--mono); cursor: pointer; } .case-dialog__close span { display: grid; width: 27px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(243,240,233,.25); border-radius: 50%; color: #FF8068; font: 17px/1 var(--body); } .case-dialog__panel[hidden] { display: none; } .case-dialog__panel .eyebrow { margin-bottom: 12px; color: #AAA79E; font-size: 8px; } .case-dialog__panel h2 { margin: 0; font: 600 clamp(30px, 5vw, 52px)/.98 var(--display); letter-spacing: -.06em; } .case-dialog__intro { max-width: 560px; margin: 12px 0 22px; color: #B5B1A9; font-size: 12px; line-height: 1.7; } .screen-gallery { display: grid; justify-items: center; gap: 18px; } .screen-gallery__stage { display: grid; width: 100%; min-height: 220px; max-height: 61svh; place-items: center; } .screen-gallery__stage .phone-mockup { height: min(55svh, 550px); width: auto; max-width: min(60vw, 290px); aspect-ratio: 689 / 1500; } .screen-gallery__stage--wide { min-height: 210px; height: min(53vw, 440px); max-height: 55svh; padding: 14px; border: 1px solid rgba(243,240,233,.13); border-radius: 12px; background: radial-gradient(ellipse at 50% 0, rgba(255,85,56,.12), transparent 62%), #0D0D0D; } .screen-gallery__device { display: grid; width: 100%; height: 100%; margin: 0; place-items: center; } .screen-gallery__device img { display: block; width: 100%; max-height: 100%; object-fit: contain; border-radius: 5px; box-shadow: 0 16px 44px rgba(0,0,0,.35); } .screen-gallery__stage--wide[data-gallery-format="portrait"] { height: min(62svh, 650px); max-height: 62svh; } .screen-gallery__stage--wide[data-gallery-format="portrait"] .screen-gallery__device { width: auto; max-width: 52vw; padding: 5px; overflow: hidden; border: 1px solid #56514F; border-radius: 26px; background: #080808; } .screen-gallery__stage--wide[data-gallery-format="portrait"] img { width: auto; height: 100%; max-width: 100%; border-radius: 21px; object-fit: contain; } .screen-gallery__controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; } .screen-gallery__controls button { min-height: 35px; padding: 0 13px; border: 1px solid rgba(243,240,233,.24); border-radius: 999px; background: transparent; color: #C7C3BB; font: 9px var(--mono); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .screen-gallery__controls button[aria-pressed="true"] { border-color: #FF5538; background: #FF5538; color: #171715; } .screen-gallery__controls button:hover { border-color: #FF8068; } @keyframes case-dialog-in { from { opacity: 0; transform: translate(-50%, -48%) scale(.985); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @media (max-width: 1120px) { .projects-layout, .suma-story__layout { grid-template-columns: 58px minmax(0, 1fr); } .suma-story__scene { grid-column: 2; grid-row: 2; min-height: 460px; } .suma-story__copy { max-width: 760px; } .selected-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .work-visual { min-height: 270px; aspect-ratio: 1.28 / 1; } .work-card__body { min-height: 245px; padding: 18px; } .work-card h3 { font-size: clamp(22px, 2.8vw, 30px); } .work-problem, .work-contribution { font-size: 12px; } .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .archive-card__visual { height: clamp(180px, 23vw, 250px); } } @media (max-width: 680px) { .projects-section { padding-block: 58px 76px; } .projects-layout, .suma-story__layout { grid-template-columns: 1fr; gap: 0; } .section-index { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 9px; margin-bottom: 23px; padding: 0 0 12px; border-right: 0; border-bottom: 1px solid var(--case-line); } .section-index > span { align-self: start; font-size: 12px; } .section-index small { line-height: 1.35; } .selected-work-heading { grid-template-columns: 1fr; align-items: start; gap: 12px; margin-bottom: 24px; } .selected-work-heading .eyebrow { margin-bottom: 11px; } .selected-work-heading h2 { font-size: clamp(34px, 9vw, 48px); } .selected-work-heading .section-intro { max-width: 420px; font-size: 11px; } .selected-project-grid { grid-template-columns: 1fr; gap: 13px; } .work-card { display: grid; grid-template-columns: minmax(0, 1fr); } .work-visual { min-height: 250px; aspect-ratio: 1.32 / 1; } .work-card__body { min-height: auto; padding: 17px 17px 18px; } .work-card h3 { font-size: 26px; } .work-problem, .work-contribution { max-width: 480px; font-size: 11px; } .work-card .text-link { margin-top: 11px; } .work-disclosure { margin-top: 15px; } .archive-preview { margin-top: 59px; padding-top: 21px; } .archive-preview__heading { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 18px; } .archive-preview__heading h3 { font-size: 33px; } .archive-preview__heading > p { font-size: 10px; } .archive-grid { grid-template-columns: 1fr; gap: 11px; } .archive-card { display: grid; grid-template-columns: minmax(118px, .75fr) minmax(0, 1.25fr); } .archive-card__visual { height: auto; min-height: 100%; } .archive-card__body { min-height: 0; padding: 14px; } .archive-card h4 { font-size: 19px; } .archive-card__type { font-size: 8px; } .archive-card__body > p:not(.archive-card__type) { font-size: 10px; line-height: 1.5; } .archive-card .text-link { font-size: 9px; } .archive-footnote { font-size: 8px; } .suma-story { padding-block: 56px 63px; } .suma-story::before { background-size: 100% 100%, 100% 58px; } .suma-story__layout { gap: 0; } .suma-story__layout > .section-index { grid-row: 1; border-bottom-color: rgba(23,20,29,.22); } .suma-story__copy { grid-row: 2; } .suma-story__copy h2 { font-size: clamp(57px, 15vw, 78px); } .suma-story__lead { font-size: 22px; } .suma-story__copy > p:not(.eyebrow, .suma-story__lead) { font-size: 11px; } .suma-story__steps > div { grid-template-columns: 24px 83px minmax(0, 1fr); gap: 6px; } .suma-story__steps small { font-size: 7px; } .suma-story__scene { grid-row: 3; grid-column: auto; min-height: clamp(350px, 97vw, 480px); margin-top: 17px; } .phone-mockup--story { width: clamp(150px, 42vw, 205px); } .phone-mockup--back { top: 9%; left: 7%; } .phone-mockup--front { right: 8%; bottom: 7%; } .suma-story__caption { right: 2px; bottom: -1%; font-size: 6px; } .case-dialog { width: calc(100vw - 18px); max-height: 94svh; border-radius: 14px; } .case-dialog__frame { min-height: 0; padding: 22px 17px 24px; } .case-dialog__panel h2 { font-size: 34px; } .case-dialog__intro { font-size: 11px; } .screen-gallery__stage { max-height: 57svh; } .screen-gallery__stage .phone-mockup { height: min(50svh, 480px); max-width: 67vw; } .screen-gallery__stage--wide { height: 48vw; min-height: 150px; padding: 7px; } .screen-gallery__stage--wide[data-gallery-format="portrait"] { height: 55svh; } .screen-gallery__stage--wide[data-gallery-format="portrait"] .screen-gallery__device { max-width: 70vw; border-radius: 20px; } .screen-gallery__stage--wide[data-gallery-format="portrait"] img { border-radius: 16px; } } @media (max-width: 390px) { .archive-card { grid-template-columns: minmax(104px, .72fr) minmax(0, 1.28fr); } .archive-card__body { padding: 11px; } .archive-card__visual > span { font-size: 6px; } .work-visual { min-height: 220px; } .suma-story__steps > div { grid-template-columns: 20px 75px minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .work-card, .archive-card, .archive-card__visual > img, .text-link, .case-dialog[open] { transition: none; animation: none; } } .hero-art { justify-items: center; } .hero-art__symbol { width: clamp(260px, 30vw, 405px); max-height: 520px; object-fit: contain; filter: drop-shadow(0 28px 25px rgba(113, 40, 19, .16)); transform: rotate(-7deg); animation: signal-sculpture-drift 8s ease-in-out infinite alternate; } .hero-art__list { right: -4px; bottom: 20%; } @keyframes signal-sculpture-drift { from { transform: translate3d(0, 0, 0) rotate(-7deg); } to { transform: translate3d(0, -10px, 0) rotate(-4deg); } } .work-card[role="button"], .archive-card[role="button"] { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; } .work-card[role="button"]:focus-visible, .archive-card[role="button"]:focus-visible { outline: 2px solid #FF5538; outline-offset: 5px; } .work-card[role="button"]:active, .archive-card[role="button"]:active { transform: translateY(-1px) scale(.995); } .case-card__cue { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; color: #D2CFC8; font: 7px var(--mono); letter-spacing: .12em; } .case-card__cue i { display: grid; width: 25px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(243,240,233,.32); border-radius: 50%; color: #FF8068; font: 12px var(--body); font-style: normal; transition: transform .24s ease, background .24s ease, color .24s ease; } .work-card:hover .case-card__cue i, .archive-card:hover .case-card__cue i { transform: rotate(45deg); border-color: #FF5538; background: #FF5538; color: #141414; } .work-card__body { min-height: 290px; } .work-card__body .work-status { margin-top: 9px; } .work-visual--controllist { align-content: stretch; justify-items: stretch; padding: 17px; background: radial-gradient(ellipse at 72% 22%, rgba(168,85,247,.2), transparent 47%), linear-gradient(145deg, #17121f, #0c0b10 76%); } .work-visual--controllist::before { content: none; } .controllist-credential, .controllist-arrival { display: none; } .work-visual--controllist .controllist-brand { position: relative; top: auto; left: auto; } .work-visual--controllist .work-visual__badge { right: auto; bottom: 11px; left: 14px; } .controllist-flow-visual { align-self: center; width: 100%; margin-top: auto; padding: 9px 0 4px 2px; } .controllist-flow-visual > p { margin: 0 0 8px; color: #C8A5FF; font: 7px var(--mono); letter-spacing: .13em; } .controllist-flow-visual h4 { margin: 0; color: #F3F0E9; font: 600 clamp(19px, 1.5vw, 27px)/1.02 var(--display); letter-spacing: -.045em; } .controllist-flow-steps { display: flex; align-items: center; gap: clamp(6px, 1.2vw, 14px); margin-top: 16px; color: #E8E2EF; font: 7px var(--mono); text-transform: uppercase; } .controllist-flow-steps span { padding-bottom: 5px; border-bottom: 1px solid rgba(200,165,255,.47); } .controllist-flow-steps i { color: #FF765E; font-size: 10px; font-style: normal; } .method-section { padding-block: clamp(68px, 8vw, 112px); background: #F3F0E9; color: #141414; } .method-layout { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); } .section-index--dark { color: #141414; border-right-color: rgba(20,20,20,.16); } .section-index--dark small { color: #77736B; } .method-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .52fr); align-items: end; gap: clamp(24px, 4vw, 58px); margin-bottom: 40px; } .method-heading .eyebrow { margin: 0 0 13px; color: #6E6962; font-size: 8px; } .method-heading .eyebrow span { color: #FF5538; } .method-heading h2 { margin: 0; font: 600 clamp(36px, 4.8vw, 64px)/.98 var(--display); letter-spacing: -.067em; } .method-heading h2 em { color: #77736B; font: italic 400 1em/1 var(--editorial); letter-spacing: -.035em; } .method-heading > p { max-width: 350px; margin: 0 0 2px; color: #68645D; font-size: 12px; line-height: 1.7; } .method-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(20,20,20,.22); border-bottom: 1px solid rgba(20,20,20,.22); } .method-steps article { min-height: 200px; padding: 20px clamp(15px, 2vw, 28px) 20px 0; } .method-steps article + article { padding-left: clamp(15px, 2vw, 28px); border-left: 1px solid rgba(20,20,20,.15); } .method-steps article > span { color: #FF5538; font: 10px var(--mono); } .method-steps h3 { margin: 23px 0 9px; font: 600 20px/1.05 var(--display); letter-spacing: -.04em; } .method-steps p { max-width: 250px; margin: 0; color: #66625B; font-size: 11px; line-height: 1.65; } .method-note { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 15px; padding-top: 22px; } .method-note__mark { color: #FF5538; font: 700 19px var(--display); letter-spacing: -.1em; } .method-note > p { max-width: 700px; margin: 0; color: #3F3D38; font-size: 11px; line-height: 1.65; } .method-note > a { color: #141414; font: 8px var(--mono); text-decoration: underline; text-underline-offset: 4px; } .archive-section { padding-block: clamp(65px, 8vw, 112px); background: #141414; color: #F3F0E9; } .archive-layout { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); } .archive-main { min-width: 0; } .archive-preview__heading { margin-bottom: 26px; } .archive-preview__heading h2 { margin: 0; font: 600 clamp(34px, 4.3vw, 58px)/.98 var(--display); letter-spacing: -.065em; } .archive-preview__heading > p { max-width: 380px; } .archive-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; } .archive-card { border-radius: 9px; } .archive-card__visual { height: clamp(160px, 17vw, 230px); } .archive-card__body { min-height: 220px; padding: 15px; } .archive-card h3 { margin: 0; color: #F3F0E9; font: 600 19px/1.08 var(--display); letter-spacing: -.045em; } .archive-card__type { min-height: 20px; margin-bottom: 6px; line-height: 1.45; } .archive-card__body > p:not(.archive-card__type) { font-size: 10px; } .archive-card__body > p:not(.archive-card__type) b { font-size: 7px; } .archive-card--mercurio .archive-card__visual > img { height: 100%; max-width: 100%; object-fit: contain; } .archive-card--modus .archive-card__visual { gap: 13px; padding: 18px; } .archive-card--modus .archive-card__visual > img { width: 66%; max-height: 46%; } .archive-card--modus .archive-card__visual > span { position: static; text-align: center; } .modus-ops-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .modus-ops-tags span { padding: 5px 7px; border: 1px solid rgba(189,255,0,.4); border-radius: 999px; color: #BDFF00; font: 6px var(--mono); letter-spacing: .09em; } .archive-card__visual--techweek { align-content: center; justify-items: start; gap: 12px; padding: 20px; background: #0C0C0D; } .archive-card__visual--techweek::after { display: none; } .techweek-mark { color: #F3F0E9; font: 13px/1.05 var(--display); } .techweek-mark b { color: #FF5538; font-size: 29px; letter-spacing: -.07em; } .techweek-mark i { padding-left: 5px; color: #A8A49D; font: normal 12px var(--mono); } .techweek-line { color: #B9B6AF; font: 7px/1.5 var(--mono); letter-spacing: .08em; } .techweek-status { color: #FF8068; font: 7px var(--mono); letter-spacing: .1em; } .archive-footnote { max-width: 800px; margin: 22px 0 0; color: #98958D; font: 8px/1.65 var(--mono); } .case-dialog { width: min(1160px, calc(100vw - 40px)); max-height: min(92svh, 980px); border-radius: 16px; background: #171715; transform: translate(-50%, -50%); } .case-dialog[open] { animation: case-dialog-in .3s cubic-bezier(.2,.75,.25,1) both; } .case-dialog__frame { min-height: 0; padding: clamp(20px, 3vw, 34px); } .case-dialog__top { position: sticky; z-index: 10; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 0 14px; border-bottom: 1px solid rgba(243,240,233,.16); background: #171715; } .case-dialog__top > p { margin: 0; color: #F3F0E9; font: 8px var(--mono); letter-spacing: .1em; } .case-dialog__top > p span { color: #FF8068; } .case-dialog__close { position: static; margin: 0; padding: 0; } .case-dialog__content { padding-top: 25px; } .case-sheet { animation: case-sheet-in .28s ease both; } .case-sheet__heading { max-width: 860px; margin-bottom: 22px; } .case-sheet__heading .eyebrow { margin-bottom: 10px; color: #A8A49D; font-size: 8px; } .case-sheet__heading .eyebrow::first-letter { color: #FF5538; } .case-sheet__heading h2 { margin: 0; font: 600 clamp(35px, 5vw, 60px)/.98 var(--display); letter-spacing: -.065em; } .case-dialog__intro { max-width: 740px; margin: 11px 0 0; font-size: 12px; } .case-sheet__body { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr); align-items: start; gap: clamp(22px, 3.2vw, 42px); } .case-gallery { min-width: 0; } .case-gallery__stage { display: grid; min-height: 270px; height: min(53svh, 520px); place-items: center; overflow: hidden; border: 1px solid rgba(243,240,233,.13); border-radius: 10px; background: radial-gradient(ellipse at 50% 0, rgba(255,85,56,.10), transparent 55%), #0C0C0C; } .case-gallery__stage[data-format="portrait"] { background: radial-gradient(ellipse at 50% 50%, rgba(216,201,255,.11), transparent 57%), #0C0C0C; } .case-gallery__image { display: block; width: 100%; height: 100%; object-fit: contain; } .case-gallery__image, .case-gallery__video, .case-gallery__diagram { animation: case-media-reveal .38s cubic-bezier(.2,.75,.25,1) both; } .case-gallery__stage[data-format="portrait"] .case-gallery__image { width: auto; max-width: min(56%, 330px); height: 94%; border: 5px solid #080808; border-radius: 28px; background: #080808; box-shadow: 0 24px 55px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.15); } .case-gallery__stage[data-format="wide"] .case-gallery__image { padding: 15px; } .case-gallery__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #050505; } .case-gallery__diagram { width: 100%; min-height: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; } .case-gallery__caption { min-height: 18px; margin: 9px 1px 10px; color: #98958D; font: 8px/1.5 var(--mono); } .case-gallery__controls { display: flex; flex-wrap: wrap; gap: 7px; } .case-gallery__controls button { min-height: 32px; padding: 0 11px; border: 1px solid rgba(243,240,233,.2); border-radius: 999px; background: transparent; color: #C7C3BB; font: 8px var(--mono); cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease; } .case-gallery__controls button:hover { transform: translateY(-1px); border-color: #FF8068; } .case-gallery__controls button[aria-pressed="true"] { border-color: #FF5538; background: #FF5538; color: #141414; } .case-story { display: grid; gap: 0; } .case-story__section { padding: 0 0 15px; border-bottom: 1px solid rgba(243,240,233,.14); } .case-story__section + .case-story__section { padding-top: 13px; } .case-story__label { margin: 0 0 6px; color: #FF8068; font: 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; } .case-story__copy { margin: 0; color: #DBD8D1; font-size: 11px; line-height: 1.65; } .case-process { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .case-process li { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: baseline; gap: 8px; } .case-process li > span { color: #98958D; font: 8px var(--mono); } .case-process li > p { margin: 0; color: #DBD8D1; font-size: 10px; line-height: 1.55; } .case-story__section--role { border-bottom: 0; } .case-sheet__actions { display: grid; justify-items: start; gap: 10px; padding-top: 2px; } .case-sheet__actions .button { min-height: 39px; padding-inline: 16px; font-size: 9px; } .case-story__status { max-width: 500px; margin: 0; color: #98958D; font: 8px/1.55 var(--mono); } .case-dialog__pager { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 19px; padding-top: 13px; border-top: 1px solid rgba(243,240,233,.16); color: #8E8B83; font: 8px var(--mono); } .case-dialog__pager button { min-height: 30px; padding: 0; border: 0; background: transparent; color: #F3F0E9; font: inherit; cursor: pointer; transition: color .2s ease, transform .2s ease; } .case-dialog__pager button:hover:not(:disabled) { color: #FF8068; transform: translateY(-1px); } .case-dialog__pager button:disabled { opacity: .35; cursor: default; } .reveal-on-scroll { opacity: 0; transform: translateY(14px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.75,.25,1), filter .7s ease; } .reveal-on-scroll:is(h2) { filter: blur(7px); transform: translateY(13px); } .reveal-on-scroll.is-revealed { opacity: 1; transform: none; filter: none; } .work-card.reveal-on-scroll, .archive-card.reveal-on-scroll { transition-delay: .04s; } .work-card.reveal-on-scroll:nth-of-type(2), .archive-card.reveal-on-scroll:nth-of-type(2) { transition-delay: .09s; } .work-card.reveal-on-scroll:nth-of-type(3), .archive-card.reveal-on-scroll:nth-of-type(3) { transition-delay: .14s; } .work-card.reveal-on-scroll:nth-of-type(4), .archive-card.reveal-on-scroll:nth-of-type(4) { transition-delay: .19s; } @keyframes case-sheet-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } @keyframes case-media-reveal { from { opacity: 0; filter: blur(5px); transform: scale(.99); } to { opacity: 1; filter: blur(0); transform: scale(1); } } @media (max-width: 1120px) { .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .archive-card__visual { height: clamp(180px, 24vw, 270px); } .case-sheet__body { grid-template-columns: minmax(0, 1fr) minmax(250px, .9fr); } } @media (max-width: 760px) { .hero-art__symbol { width: clamp(210px, 47vw, 320px); max-height: 390px; } .hero-art__list { right: 4%; bottom: 13%; } .method-layout, .archive-layout { grid-template-columns: 1fr; gap: 0; } .method-layout > .section-index, .archive-layout > .section-index { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 9px; margin-bottom: 21px; padding: 0 0 12px; border-right: 0; border-bottom: 1px solid rgba(20,20,20,.16); } .archive-layout > .section-index { border-bottom-color: rgba(243,240,233,.18); } .method-heading { grid-template-columns: 1fr; gap: 12px; margin-bottom: 25px; } .method-heading h2 { font-size: clamp(36px, 8.8vw, 53px); } .method-heading > p { font-size: 11px; } .method-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .method-steps article { min-height: 170px; padding: 16px 14px 17px 0; } .method-steps article:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid rgba(20,20,20,.15); } .method-steps article:nth-child(4) { border-top: 1px solid rgba(20,20,20,.15); } .method-steps h3 { margin-top: 17px; font-size: 18px; } .method-steps p { font-size: 10px; } .method-note { grid-template-columns: 28px minmax(0, 1fr); gap: 8px 12px; } .method-note > a { grid-column: 2; justify-self: start; } .archive-preview__heading { align-items: flex-start; flex-direction: column; gap: 10px; } .archive-preview__heading h2 { font-size: clamp(34px, 8.8vw, 48px); } .archive-preview__heading > p { font-size: 10px; } .archive-grid { grid-template-columns: 1fr; gap: 10px; } .archive-card { display: grid; grid-template-columns: minmax(118px, .75fr) minmax(0, 1.25fr); } .archive-card__visual { height: auto; min-height: 100%; } .archive-card__body { min-height: 0; padding: 13px; } .archive-card h3 { font-size: 18px; } .archive-card__body > p:not(.archive-card__type) { margin-top: 8px; font-size: 9px; } .case-dialog { width: calc(100vw - 18px); max-height: 94svh; border-radius: 13px; } .case-dialog__frame { padding: 15px; } .case-dialog__content { padding-top: 18px; } .case-sheet__heading { margin-bottom: 18px; } .case-sheet__heading h2 { font-size: clamp(31px, 8vw, 42px); } .case-dialog__intro { font-size: 11px; } .case-sheet__body { grid-template-columns: 1fr; gap: 20px; } .case-gallery__stage { min-height: 200px; height: min(43svh, 370px); } .case-gallery__stage[data-format="portrait"] .case-gallery__image { max-width: min(55%, 220px); height: 94%; border-radius: 21px; } .case-gallery__stage[data-format="wide"] .case-gallery__image { padding: 8px; } .case-gallery__diagram { min-height: 100%; height: 100%; } .case-story__copy { font-size: 10px; } .case-dialog__pager { margin-top: 15px; } .case-gallery__stage[data-kind="demo"] { height: min(72svh, 620px); min-height: 540px; } } @media (max-width: 390px) { .archive-card { grid-template-columns: minmax(104px, .72fr) minmax(0, 1.28fr); } .archive-card__body { padding: 10px; } .archive-card__visual > span { font-size: 6px; } .case-dialog__frame { padding: 13px 12px; } } @media (prefers-reduced-motion: reduce) { .hero-art__symbol { animation: none; } .reveal-on-scroll, .reveal-on-scroll.is-revealed { opacity: 1; transform: none; filter: none; transition: none; } .case-sheet, .case-gallery__image, .case-gallery__video, .case-gallery__diagram { animation: none; } } .work-visual--loreal { padding: 14px; background: linear-gradient(135deg,#202431,#121419 70%); } .work-visual--loreal::after { display: none; } .tradeflow-card-screen { position: absolute; inset: 14px; display: block; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: #FAFBFC; } .work-visual--loreal .work-visual__badge { z-index: 3; right: 14px; bottom: 14px; left: auto; border-color: rgba(255,255,255,.28); background: rgba(16,18,24,.84); color: #F3F0E9; } .work-visual--modus { background: #F3F0E9; } .work-visual--modus::before, .work-visual--modus::after { content: none; } .work-visual--modus > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: #F3F0E9; } .modus-card-overlay { position: absolute; z-index: 2; top: 50%; left: clamp(18px,3vw,34px); display: grid; max-width: 39%; gap: 8px; transform: translateY(-50%); color: #141414; } .modus-card-overlay > span, .modus-card-overlay > small { font: 8px/1.5 var(--mono); letter-spacing: .11em; } .modus-card-overlay > span { color: #66558D; } .modus-card-overlay strong { font: 600 clamp(19px,2.2vw,30px)/.98 var(--display); letter-spacing: -.055em; } .modus-card-overlay > small { color: #6E6A63; font-size: 7px; } .archive-card__visual--casa { padding: 0; background: #07080A; } .archive-card__visual--casa::after { background: linear-gradient(180deg,transparent 55%,rgba(0,0,0,.68)); } .archive-card__visual--casa > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 8px; object-fit: contain; } .archive-card__visual--casa > span { z-index: 1; } .suma-story__scene { isolation: isolate; } .suma-story__sculpture { z-index: 1; inset: -15% -8% -9% 8%; width: 100%; height: 124%; object-fit: contain; opacity: .98; mix-blend-mode: normal; filter: hue-rotate(-8deg) saturate(1.08) brightness(.94); pointer-events: none; transition: filter .55s ease, opacity .55s ease; } .suma-story[data-suma-theme="dark"] .suma-story__sculpture { opacity: 1; mix-blend-mode: normal; filter: hue-rotate(36deg) saturate(1.55) brightness(.76) contrast(1.12); } .phone-mockup--story { z-index: 2; } .phone-mockup--story.phone-mockup--front { z-index: 3; } .suma-theme-toggle__icon { transition: filter .4s ease, transform .4s ease; } .suma-story[data-suma-theme="dark"] .suma-theme-toggle__icon { filter: saturate(1.2) brightness(1.06); } .suma-story[data-suma-theme="dark"] .phone-mockup--front > img { transition: opacity .2s ease; } .case-gallery__stage[data-kind="demo"] { overflow: hidden; overscroll-behavior: contain; } @media (max-width: 680px) { .modus-card-overlay { left: 14px; max-width: 43%; gap: 5px; } .modus-card-overlay > span, .modus-card-overlay > small { font-size: 6px; } .modus-card-overlay strong { font-size: clamp(17px,5vw,24px); } .work-visual--loreal { padding: 9px; } .tradeflow-card-screen { inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); } .archive-card__visual--casa > img { padding: 4px; } .suma-story__sculpture { inset: -7% -2% -2% 4%; width: 100%; height: 105%; } } html { scroll-behavior: smooth; } .selected-work-heading { margin-bottom: clamp(28px, 3.3vw, 44px); } .selected-work-heading h2 { max-width: 760px; font-size: clamp(42px, 5.1vw, 70px); line-height: .96; } .selected-work-heading .section-intro { max-width: 410px; font-size: 13px; } .selected-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(15px, 2vw, 24px); } .work-card { border-radius: 10px; background: #191917; } .work-card:hover, .work-card:focus-within { transform: translateY(-4px); box-shadow: 0 24px 54px rgba(0,0,0,.33); } .work-visual { min-height: 300px; aspect-ratio: 1.52 / 1; } .work-card__body { min-height: 0; padding: clamp(18px, 2.1vw, 26px); } .work-kicker { margin-bottom: 13px; font-size: 8px; } .work-card h3 { max-width: 21ch; font-size: clamp(26px, 2.35vw, 34px); } .work-problem, .work-solution, .work-contribution { max-width: 58ch; margin: 13px 0 0; color: #BBB8B0; font-size: 12px; line-height: 1.62; } .work-solution { color: #E8E3DA; } .work-contribution { color: #D3CFC7; } .work-problem b, .work-solution b, .work-contribution b { display: block; margin-bottom: 4px; color: #FF8068; font: 8px var(--mono); letter-spacing: .105em; text-transform: uppercase; } .work-card__body .work-status { max-width: 58ch; margin-top: 10px; font: 8px/1.55 var(--mono); } .case-card__cue { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(243,240,233,.12); } .work-visual__badge { padding: 7px 10px; font-size: 8px; } .work-visual--loreal { background-color: #111923; } .work-visual--loreal .network-flow { gap: 4px; padding: 12px 0; } .work-visual--loreal .network-node { min-height: 43px; grid-template-columns: 32px minmax(0, auto) minmax(0, 1fr); padding-inline: 11px; } .work-visual--loreal .network-node b { font-size: 12px; } .work-visual--loreal .network-node small, .work-visual--loreal .network-node span { font-size: 8px; } .work-visual--loreal .work-visual__top, .work-visual--loreal .work-visual__foot { font-size: 8px; } .work-visual--suma .phone-mockup--suma { width: 31%; max-height: 84%; } .work-visual--suma .suma-sculpture { inset: -19% -19% -23% 6%; } .work-visual--casa .tv-mockup { top: 15%; width: 82%; } .work-card--casa .work-visual__badge { color: #FFF; } .work-visual--controllist { display: block; padding: 0; background: #09080d; } .work-visual--controllist::before { content: none; } .work-visual--controllist .controllist-visual__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 51% center; transition: transform .8s cubic-bezier(.2,.75,.25,1); } .work-card--controllist:hover .controllist-visual__photo { transform: scale(1.035); } .controllist-visual__shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(8,7,11,.18),rgba(8,7,11,.14) 34%,rgba(8,7,11,.78)),linear-gradient(90deg,rgba(8,7,11,.44),transparent 78%); } .controllist-visual__content { position: absolute; inset: 22px; display: flex; flex-direction: column; justify-content: space-between; } .controllist-brand { display: inline-flex; width: max-content; align-items: center; gap: 9px; color: #F5F1FB; font: 700 14px var(--body); letter-spacing: -.025em; text-shadow: 0 2px 12px rgba(0,0,0,.48); } .controllist-brand img { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,.4); } .controllist-brand b { color: #C88CFF; } .controllist-app-state { max-width: 520px; padding-bottom: 14px; } .controllist-app-state > span { color: #DDC9FF; font: 8px var(--mono); letter-spacing: .13em; } .controllist-app-state h4 { max-width: 14ch; margin: 8px 0 12px; color: #FBF9FC; font: 500 clamp(26px, 3.2vw, 45px)/.98 var(--display); letter-spacing: -.065em; text-wrap: balance; } .controllist-app-state small { color: rgba(245,241,251,.74); font: 8px var(--mono); letter-spacing: .09em; } .work-visual--controllist .work-visual__badge { right: 14px; bottom: 14px; left: auto; border-color: rgba(245,241,251,.38); background: rgba(9,8,13,.68); } .archive-card__visual--modus { padding: 13px; background: radial-gradient(ellipse at 52% 42%,#27242c,#0b0b0d 75%); } .archive-card__visual--modus > img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; opacity: .96; } .archive-card__visual--modus::after { background: linear-gradient(transparent 55%,rgba(0,0,0,.78)); } .archive-card__visual--modus > span { z-index: 2; } .modus-ops-tags { position: absolute; z-index: 2; top: 10px; right: 10px; display: flex; gap: 4px; } .modus-ops-tags span { padding: 4px 5px; border: 1px solid rgba(216,201,255,.33); border-radius: 99px; background: rgba(9,8,13,.6); color: #E3D8F5; font: 6px var(--mono); } .archive-card__visual--techweek { display: block; padding: 18px; background: #090909; } .archive-card__visual--techweek::after { inset: 0; background: linear-gradient(90deg,transparent 52%,rgba(0,0,0,.32)); } .techweek-mark-panel { position: absolute; top: 12%; right: 12%; bottom: 8%; width: 31%; background: linear-gradient(100deg,#ff5b3c,#e94324 76%,#171414 77%); transform: skewY(-4deg); box-shadow: 18px 18px 35px rgba(0,0,0,.32); } .techweek-mark { position: absolute; z-index: 1; top: 19%; left: 9%; display: flex; flex-direction: column; align-items: flex-start; color: #F3F0E9; } .techweek-mark > span { margin-bottom: 12px; color: #BEBAB4; font: 7px var(--mono); letter-spacing: .11em; } .techweek-mark strong { font: 600 clamp(29px, 3.8vw, 47px)/.83 var(--display); letter-spacing: -.07em; } .techweek-mark > i { margin-top: 11px; color: #F3F0E9; font: normal 11px var(--body); } .techweek-mark > i b { color: #FF5538; font-weight: 500; } .archive-card__visual--techweek .techweek-line { top: auto; bottom: 19px; left: 9px; width: auto; right: auto; max-width: 73%; font-size: 6px; } .archive-card__visual--techweek .techweek-status { top: 10px; right: 10px; bottom: auto; left: auto; font-size: 6px; color: #FF886F; } .archive-card__body { min-height: 230px; } .archive-card h3 { margin: 0; color: #F3F0E9; font: 600 22px/1.05 var(--display); letter-spacing: -.045em; } .archive-card__body > p:not(.archive-card__type) { font-size: 10px; line-height: 1.6; } .case-dialog { width: min(1220px,calc(100vw - 42px)); max-height: 94svh; border-radius: 14px; } .case-dialog__frame { padding: clamp(24px,3.2vw,42px); } .case-sheet__heading { max-width: 980px; margin-bottom: 24px; } .case-sheet__heading h2 { font-size: clamp(42px,5.5vw,68px); } .case-dialog__intro { max-width: 760px; font-size: 14px; line-height: 1.7; } .case-sheet__body { grid-template-columns: minmax(0,1.08fr) minmax(320px,.92fr); gap: clamp(24px,3.5vw,46px); } .case-gallery__stage { height: min(57svh,590px); min-height: 330px; border-radius: 9px; } .case-gallery__stage[data-format="wide"] .case-gallery__image { padding: 0; } .case-gallery__demo { display: block; width: 100%; height: 100%; min-height: 100%; border: 0; background: #09080d; } .case-gallery__caption { margin-top: 11px; font-size: 9px; } .case-gallery__controls { gap: 8px; } .case-gallery__controls button { min-height: 36px; padding-inline: 13px; font-size: 9px; } .case-story__label { font-size: 9px; } .case-story__copy, .case-story__status { font-size: 12px; line-height: 1.7; } .case-process li > p { font-size: 11px; line-height: 1.65; } .case-story__section--evidence { border-bottom: 0; } .case-sheet__actions { grid-template-columns: repeat(2,max-content); align-items: start; } .case-sheet__actions .case-story__status { grid-column: 1/-1; } .case-dialog__pager { position: static; padding-top: 14px; background: transparent; } .case-dialog__close { padding: 7px 8px 9px 12px; border: 1px solid rgba(243,240,233,.12); border-radius: 999px; background: rgba(23,23,21,.88); backdrop-filter: blur(12px); } .work-card[role="button"],.archive-card[role="button"] { scroll-margin-top: 90px; } .case-gallery__stage { touch-action: pan-y pinch-zoom; } .suma-story { transition: background .42s ease, color .42s ease; } .suma-story__scene { padding-top: 48px; } .suma-theme-toggle { position: absolute; z-index: 4; top: 0; right: 0; display: inline-flex; min-height: 40px; align-items: center; gap: 9px; padding: 5px 7px 5px 11px; border: 1px solid rgba(41,35,69,.22); border-radius: 999px; background: rgba(248,246,255,.72); color: #302A49; font: 9px var(--mono); cursor: pointer; backdrop-filter: blur(12px); transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .suma-theme-toggle:hover { transform: translateY(-2px); border-color: rgba(93,87,210,.58); box-shadow: 0 8px 24px rgba(58,45,101,.15); } .suma-theme-toggle:active { transform: scale(.97); } .suma-theme-toggle__icon { display: grid; width: 22px; aspect-ratio: 1; place-items: center; } .suma-theme-toggle__icon svg { width: 100%; height: 100%; } .suma-theme-toggle__track { width: 30px; height: 17px; padding: 2px; border-radius: 99px; background: #6658C9; transition: background .3s ease; } .suma-theme-toggle__track i { display: block; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: transform .3s cubic-bezier(.2,.75,.25,1); } .suma-story[data-suma-theme="dark"] { --ink: #F5F3FF; --muted: #D5D1E9; --quiet: #A4A2BD; --line: rgba(237,234,255,.2); background: radial-gradient(ellipse at 73% 42%, rgba(62,66,159,.47), transparent 50%), linear-gradient(112deg,#17172D,#202344 56%,#191A32); color: var(--ink); } .suma-story[data-suma-theme="dark"]::before { opacity: .3; background: linear-gradient(90deg,transparent 0 9.4%,rgba(214,209,255,.34) 9.45%,transparent 9.5%),linear-gradient(rgba(214,209,255,.12) 1px,transparent 1px); } .suma-story[data-suma-theme="dark"] .section-index--light { color: #F5F3FF; border-right-color: rgba(237,234,255,.2); } .suma-story[data-suma-theme="dark"] .section-index--light small, .suma-story[data-suma-theme="dark"] .suma-story__copy .eyebrow, .suma-story[data-suma-theme="dark"] .suma-story__copy > p:not(.eyebrow,.suma-story__lead), .suma-story[data-suma-theme="dark"] .suma-story__steps small, .suma-story[data-suma-theme="dark"] .suma-story__note, .suma-story[data-suma-theme="dark"] .suma-story__caption { color: #C2BFD5; } .suma-story[data-suma-theme="dark"] .suma-story__copy .eyebrow > span, .suma-story[data-suma-theme="dark"] .suma-story__steps span { color: #A9A0FF; } .suma-story[data-suma-theme="dark"] .suma-story__lead em { color: #C8B2FF; } .suma-story[data-suma-theme="dark"] .suma-story__steps > div { border-color: rgba(237,234,255,.2); } .suma-story[data-suma-theme="dark"] .suma-story__actions .suma-case-button { border-color: #B2A7FF; background: #B2A7FF; color: #14152A; } .suma-story[data-suma-theme="dark"] .suma-story__actions .suma-case-button:hover { border-color: #D8C9FF; background: #D8C9FF; color: #14152A; } .suma-story[data-suma-theme="dark"] .suma-story__actions .suma-case-button span { color: #3F357F; } .suma-story[data-suma-theme="dark"] .suma-story__scene::before { background: radial-gradient(circle,rgba(108,111,236,.23),rgba(73,76,174,.08) 66%,transparent 70%); } .suma-story[data-suma-theme="dark"] .suma-theme-toggle { border-color: rgba(226,222,255,.26); background: rgba(17,18,40,.84); color: #F3F1FF; } .suma-story[data-suma-theme="dark"] .suma-theme-toggle__track { background: #3F4FC0; } .suma-story[data-suma-theme="dark"] .suma-theme-toggle__track i { transform: translateX(13px); } .suma-story__sculpture { mix-blend-mode: normal; transition: opacity .35s ease, filter .4s ease; } .suma-story[data-suma-theme="dark"] .suma-story__sculpture { mix-blend-mode: normal; opacity: 1; } .suma-story__sculpture > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; } .phone-mockup--story [data-suma-screen] { transition: opacity .2s ease; } .phone-mockup--story [data-suma-screen].is-theme-changing { opacity: .28; } .case-dialog__close { transition: color .2s ease, transform .22s ease; } .case-dialog__close > span { transition: color .2s ease, border-color .2s ease, background .2s ease, transform .28s cubic-bezier(.2,.75,.25,1); } .case-dialog__close:hover { color: #F3F0E9; transform: translateY(-1px); } .case-dialog__close:hover > span { transform: rotate(90deg); border-color: #FF5538; background: #FF5538; color: #141414; } .case-dialog__close:active { transform: scale(.97); } .case-dialog__close:focus-visible { outline: 2px solid #FF8068; outline-offset: 4px; border-radius: 999px; } .work-card--suma .work-kicker > span, .work-card--suma .case-card__cue i { color: #BDB0FF; } .work-card--suma .work-problem b, .work-card--suma .work-solution b, .work-card--suma .work-contribution b { color: #C5B9FF; } .work-card--suma:hover .case-card__cue i { border-color: #998AFF; background: #998AFF; color: #14131C; } .case-gallery__external { display: flex; width: min(100% - 48px, 520px); min-height: 300px; flex-direction: column; justify-content: center; align-items: flex-start; margin: 24px; padding: clamp(24px,4vw,48px); border: 1px solid rgba(216,201,255,.25); border-radius: 12px; background: radial-gradient(ellipse at 82% 20%,rgba(108,88,193,.25),transparent 48%),linear-gradient(145deg,#211D31,#111114 80%); } .case-gallery__external-eyebrow { margin: 0 0 18px; color: #C2B4FF; font: 9px var(--mono); letter-spacing: .13em; } .case-gallery__external h3 { max-width: 11ch; margin: 0; color: #F3F0E9; font: 600 clamp(28px,4vw,48px)/1 var(--display); letter-spacing: -.06em; } .case-gallery__external-copy { max-width: 44ch; margin: 14px 0 22px; color: #B8B4C3; font-size: 12px; line-height: 1.7; } .case-gallery__external .button { min-height: 42px; color: #F3F0E9; } .case-gallery__external .button:hover { border-color: #B6A9FF; background: #B6A9FF; color: #16141D; } .case-gallery__stage[data-kind="external"] { background: radial-gradient(ellipse at 52% 40%,rgba(101,81,188,.16),transparent 58%),#0E0E11; } .case-gallery__stage[data-kind="note"] { background: #E9E5DD; } .case-gallery__note { position: relative; display: flex; width: min(100% - 48px,520px); min-height: 300px; flex-direction: column; justify-content: center; align-items: flex-start; margin: 24px; padding: clamp(24px,4vw,48px); overflow: hidden; border: 1px solid rgba(20,20,20,.18); border-radius: 12px; background: linear-gradient(135deg,#F3F0E9,#E9E5DD); color: #141414; } .case-gallery__note::after { position: absolute; right: -7%; bottom: -55%; width: 48%; aspect-ratio: 1; border: 1px solid rgba(20,20,20,.11); border-radius: 50%; content: ""; box-shadow: 0 0 0 28px rgba(20,20,20,.025),0 0 0 56px rgba(20,20,20,.02); } .case-gallery__note .case-gallery__external-eyebrow { color: #C84A32; } .case-gallery__note h3 { max-width: 11ch; margin: 0; color: #141414; font: 600 clamp(28px,4vw,48px)/1 var(--display); letter-spacing: -.06em; } .case-gallery__note .case-gallery__external-copy { position: relative; z-index: 1; color: #5C5851; } .archive-card__visual--conutric { display: grid; place-items: center; padding: 16px; background: #E9E5DD; } .archive-card__visual--conutric::after { inset: 11px; border: 1px solid rgba(20,20,20,.16); border-radius: 7px; background: none; } .conutric-visual-frame { position: relative; z-index: 1; display: flex; width: 100%; height: 100%; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(16px,2vw,24px); color: #141414; } .conutric-visual-frame > span { position: static; color: #C84A32; font: 7px var(--mono); letter-spacing: .11em; } .conutric-visual-frame > strong { margin-top: 20px; color: #141414; font: 600 clamp(25px,3.5vw,42px)/.94 var(--display); letter-spacing: -.07em; } .conutric-visual-frame > i { max-width: 18ch; margin-top: 9px; color: #646057; font: italic 400 clamp(12px,1.6vw,16px)/1.2 var(--editorial); } .conutric-visual-frame > b { position: absolute; right: clamp(16px,2vw,24px); bottom: clamp(16px,2vw,24px); color: #777167; font: 7px var(--mono); letter-spacing: .1em; } .case-gallery__stage[data-kind="note"] .case-gallery__note { min-height: 100%; height: 100%; } @media (max-width: 980px) { .case-sheet__body { grid-template-columns: minmax(0, 1fr); gap: 24px; } .case-gallery__stage { height: min(56svh, 540px); } .case-gallery__stage[data-kind="demo"] { min-height: 500px; height: min(68svh, 640px); } } .archive-card__visual--screen { background: #08080A; } .archive-card__visual--screen > img { object-fit: contain; object-position: center; } .archive-card__visual--hulk > img { padding: 9px; } .archive-card__visual--hulk::after { background: linear-gradient(transparent 55%,rgba(0,0,0,.72)); } .archive-card__visual--techweek { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 24px; background: linear-gradient(145deg,#171717,#0B0B0B); } .archive-card__visual--techweek::after { inset: 10px; border: 1px solid rgba(243,240,233,.15); border-radius: 7px; background: none; } .archive-card__visual--techweek > .techweek-status,.archive-card__visual--techweek > strong,.archive-card__visual--techweek > span:last-child { position: relative; z-index: 1; top: auto; right: auto; bottom: auto; left: auto; width: auto; } .archive-card__visual--techweek > .techweek-status { color: #FF8068; font: 7px var(--mono); letter-spacing: .13em; } .archive-card__visual--techweek > strong { color: #F3F0E9; font: 600 clamp(25px,3vw,38px)/.98 var(--display); letter-spacing: -.06em; } .archive-card__visual--techweek > span:last-child { color: #A8A49D; font: 8px var(--mono); } .work-visual--loreal { padding: clamp(18px,2.5vw,30px); background: radial-gradient(ellipse at 49% 63%,rgba(42,89,178,.3),transparent 48%),radial-gradient(ellipse at 93% 4%,rgba(255,85,56,.1),transparent 40%),linear-gradient(125deg,#111720,#172238 57%,#101419); } .work-visual--loreal::before { inset: 12px; border-color: rgba(203,218,243,.17); border-radius: 8px; } .work-visual--loreal::after { border: 0; border-bottom: 1px solid rgba(255,255,255,.11); background: linear-gradient(110deg,transparent 18%,rgba(200,220,255,.07) 48%,transparent 74%); background-size: 220% 100%; animation: loreal-sheen 8s ease-in-out infinite; } .work-visual--loreal .work-visual__top,.work-visual--loreal .work-visual__foot { color: #B3C0D3; font-size: 8px; letter-spacing: .12em; } .work-visual--loreal .work-visual__top span:last-child { color: #FF9A82; } .network-flow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; width: 100%; padding: clamp(24px,4vw,50px) 0; } .network-flow > i { display: none; } .network-node { position: relative; display: flex; min-height: clamp(120px,14vw,180px); align-items: flex-start; justify-content: center; flex-direction: column; gap: 12px; padding: clamp(11px,1.5vw,18px); border-color: rgba(203,218,243,.18); border-radius: 8px; background: linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 64%),rgba(8,14,23,.7); box-shadow: inset 0 1px rgba(255,255,255,.05),0 12px 26px rgba(0,0,0,.12); } .network-node::after { position: absolute; top: 17px; right: 14px; width: 5px; height: 5px; border-radius: 50%; content: ""; background: #7099DB; box-shadow: 0 0 14px rgba(112,153,219,.5); } .network-node small { color: #FF8B73; font: 9px var(--mono); } .network-node b { color: #F3F0E9; font: 500 clamp(12px,1.35vw,18px)/1.1 var(--display); } .network-node span { color: #A6B1C1; font: 8px/1.45 var(--mono); text-align: left; } .network-node--accent { border-color: rgba(255,85,56,.45); background: linear-gradient(150deg,rgba(255,85,56,.14),rgba(255,255,255,.02) 64%),rgba(8,14,23,.7); } .network-node--accent::after { background: #FF8068; box-shadow: 0 0 16px rgba(255,85,56,.55); } .work-visual--loreal .work-visual__foot span:first-child { color: #A8B8D1; } @keyframes loreal-sheen { 0%,18% { background-position: 140% 0; } 55%,100% { background-position: -120% 0; } } .case-dialog__close { transition: color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease; } .case-dialog__close span { transition: color .2s ease,border-color .2s ease,background .2s ease,transform .24s cubic-bezier(.2,.75,.25,1); } .case-dialog__close:hover { transform: translateY(-1px); border-color: #FF5538; background: #24201E; color: #FFF; box-shadow: 0 7px 24px rgba(0,0,0,.28); } .case-dialog__close:hover span { transform: rotate(90deg); border-color: #FF5538; background: #FF5538; color: #141414; } .case-dialog__close:active { transform: scale(.97); } .case-dialog__close:active span { transform: rotate(135deg) scale(.92); } .footer-main { display: grid; grid-template-columns: 1fr; align-items: start; gap: clamp(25px,4vw,46px); } .footer-main > div:first-child { min-width: 0; } .footer-wordmark { width: 100%; max-width: none; margin: 0; color: #F3F0E9; font: 600 clamp(43px,10.6vw,150px)/.82 var(--display); letter-spacing: -.09em; white-space: nowrap; } .footer-manifesto { margin: 16px 0 0; color: #A8A49D; font: 11px var(--mono); letter-spacing: .04em; } .footer-contact { width: min(100%,680px); min-width: 0; justify-self: end; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; } .footer-contact a { align-items: center; padding: 12px 0; } .footer-contact .footer-email { font-size: 12px; } @media (max-width: 760px) { .footer-wordmark { font-size: clamp(34px,10.3vw,78px); } .footer-contact { width: 100%; grid-template-columns: 1fr; gap: 0; } .suma-story__scene { padding-top: 48px; } .suma-theme-toggle { right: 2px; } .case-gallery__external { width: min(100% - 24px,520px); min-height: 250px; margin: 12px; padding: 24px; } .case-gallery__note { width: min(100% - 24px,520px); min-height: 250px; margin: 12px; padding: 24px; } .conutric-visual-frame > strong { font-size: clamp(20px,6vw,31px); } .conutric-visual-frame > i { font-size: 11px; } } @media (max-width: 900px) { .work-card__body { padding: 20px; } .work-card h3 { font-size: clamp(25px,3vw,32px); } .case-sheet__body { grid-template-columns: minmax(0,1fr); gap: 24px; } } @media (max-width: 760px) { .selected-project-grid { grid-template-columns: 1fr; gap: 14px; } .work-visual { min-height: 270px; aspect-ratio: 1.44 / 1; } .work-visual--loreal { min-height: 270px; aspect-ratio: auto; padding: 13px 12px 9px; } .work-visual--loreal .network-flow { gap: 2px; padding: 7px 0; } .work-visual--loreal .network-flow > i { height: 4px; } .work-visual--loreal .network-node { min-height: 31px; padding: 3px 7px; } .work-visual--loreal .network-node b { font-size: 10px; } .work-visual--loreal .work-visual__top, .work-visual--loreal .work-visual__foot { font-size: 6px; } .work-card__body { padding: 19px; } .work-card h3 { font-size: clamp(26px,7vw,34px); } .work-problem,.work-solution,.work-contribution { font-size: 11px; } .controllist-visual__content { inset: 17px; } .controllist-app-state h4 { font-size: clamp(28px,7.5vw,40px); } .archive-card__visual--techweek { min-height: 100%; } .case-dialog { width: calc(100vw - 16px); max-height: 96svh; border-radius: 12px; } .case-dialog__frame { padding: 16px; } .case-sheet__heading h2 { font-size: clamp(34px,9vw,48px); } .case-dialog__intro { font-size: 12px; } .case-sheet__body { grid-template-columns: 1fr; gap: 16px; } .case-gallery__stage { min-height: 250px; height: min(53svh,460px); } .case-gallery__stage[data-format="portrait"] .case-gallery__image { max-width: min(60%,245px); } .case-gallery__demo { min-height: 100%; } .case-story__copy,.case-story__status { font-size: 11px; } .case-sheet__actions { grid-template-columns: 1fr; } } @media (max-width: 430px) { .work-visual { min-height: 245px; } .work-card__body { padding: 16px; } .case-dialog__frame { padding: 13px; } .case-dialog__close { margin-right: 0; } .case-gallery__stage { min-height: 220px; height: min(49svh,390px); } .case-gallery__controls button { min-height: 34px; padding-inline: 10px; font-size: 9px; } .case-dialog__pager button { min-height: 38px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .work-card,.controllist-visual__photo,.case-dialog__close,.case-gallery__controls button { transition: none; } } @media (max-width: 430px) { .selected-project-grid .work-visual--loreal { height: 270px; min-height: 270px; aspect-ratio: auto; padding: 13px 12px 9px; } .selected-project-grid .work-visual--loreal .network-flow { gap: 2px; padding: 7px 0; } .selected-project-grid .work-visual--loreal .network-flow > i { height: 4px; } .selected-project-grid .work-visual--loreal .network-node { min-height: 31px; padding: 3px 7px; } .selected-project-grid .work-visual--loreal .network-node b { font-size: 10px; } .selected-project-grid .work-visual--loreal .work-visual__top, .selected-project-grid .work-visual--loreal .work-visual__foot { font-size: 6px; } } .footer-wordmark { font-size: clamp(30px,10.2vw,150px); } @media (max-width: 760px) { .footer-main { grid-template-columns: 1fr; } .footer-wordmark { font-size: clamp(28px,9.5vw,76px); } .footer-contact { width: 100%; grid-template-columns: 1fr; gap: 0; } .network-flow { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding-block: 18px; } .network-flow > i { display: none; } .work-visual--loreal .network-node { min-height: 94px; padding: 12px; gap: 8px; } .work-visual--loreal .network-node b { font-size: 14px; } .work-visual--loreal .network-node span { font-size: 7px; } .work-visual--loreal .network-node small { font-size: 8px; } .work-visual--loreal .work-visual__top,.work-visual--loreal .work-visual__foot { font-size: 6px; } } @media (max-width: 390px) { .footer-wordmark { font-size: clamp(26px,8.8vw,34px); letter-spacing: -.08em; } .work-visual--loreal .network-node { min-height: 83px; padding: 9px; } .work-visual--loreal .network-node b { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .work-visual--loreal::after { animation: none; } } .case-dialog { width: min(1320px, calc(100vw - 32px)); height: min(92dvh, 900px); max-height: min(92dvh, 900px); overflow: hidden; overscroll-behavior: none; } .case-dialog__frame { display: grid; min-width: 0; height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; padding: clamp(14px, 1.7vw, 24px); } .case-dialog__top { position: relative; padding: 2px 0 10px; } .case-dialog__content { display: flex; width: 100%; min-width: 0; min-height: 0; overflow: hidden; padding-top: clamp(8px, 1.1vh, 13px); overscroll-behavior: none; scrollbar-width: none; } .case-dialog__content::-webkit-scrollbar { display: none; } .case-sheet { display: grid; width: 100%; min-width: 0; height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr); } .case-sheet__heading { margin-bottom: clamp(8px, 1.2vh, 14px); } .case-sheet__heading, .case-sheet__body, .case-sheet__body > *, .case-gallery, .case-gallery__controls, .case-story, .case-story__tabs, .case-story__panel, .case-sheet__actions { min-width: 0; } .case-sheet__heading .eyebrow { margin-bottom: 6px; font-size: 8px; } .case-sheet__heading h2 { font-size: clamp(30px, 3.4vw, 48px); } .case-dialog__intro { display: -webkit-box; max-width: 900px; margin-top: 6px; overflow: hidden; font-size: clamp(10px, .9vw, 12px); line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .case-sheet__body { min-height: 0; height: 100%; grid-template-columns: minmax(0, 1.12fr) minmax(290px, .88fr); align-items: stretch; gap: clamp(16px, 2.2vw, 30px); } .case-gallery { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto auto; align-content: stretch; } .case-gallery__stage { height: auto; min-height: 0; max-height: none; touch-action: pan-y pinch-zoom; } .case-gallery__stage[data-kind="demo"] { min-height: 0; height: auto; overflow: hidden; } .case-gallery__demo { display: block; width: 100%; height: 100%; min-height: 0; border: 0; background: #09080d; overscroll-behavior: contain; touch-action: pan-y; } .case-gallery__stage[data-format="wide"] .case-gallery__image { width: 100%; max-width: 100%; height: 100%; padding: 8px; object-fit: contain; } .case-gallery__stage[data-format="portrait"] .case-gallery__image { width: auto; max-width: min(48%, 280px); height: 94%; } .case-gallery__caption { display: -webkit-box; min-height: 17px; margin: 6px 1px; overflow: hidden; font-size: 9px; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .case-gallery__controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; } .case-gallery__controls button { min-width: 0; min-height: 29px; overflow: hidden; padding: 0 7px; border-color: rgba(243,240,233,.16); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; } .case-gallery__controls button:hover { border-color: var(--case-accent, #FF8068); } .case-gallery__controls button[aria-pressed="true"] { border-color: var(--case-accent, #FF5538); background: var(--case-accent, #FF5538); color: var(--case-accent-ink, #FFFFFF); } .case-story { min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; } .case-story__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding-bottom: 9px; border-bottom: 1px solid rgba(243,240,233,.13); } .case-story__tab { display: grid; min-width: 0; min-height: 34px; place-items: center; padding: 0 5px; border: 1px solid rgba(243,240,233,.18); border-radius: 999px; background: transparent; color: #B9B6AF; font: 9px var(--mono); line-height: 1.15; overflow-wrap: anywhere; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; } .case-story__tab:hover { transform: translateY(-1px); border-color: var(--case-accent, #FF8068); color: #F3F0E9; } .case-story__tab[aria-selected="true"] { border-color: var(--case-accent, #FF5538); background: var(--case-accent, #FF5538); color: var(--case-accent-ink, #FFFFFF); } .case-story__panel { min-height: 0; overflow: hidden; padding: clamp(12px, 1.6vh, 20px) 2px; animation: case-sheet-in .22s ease both; } .case-story__panel .case-story__copy { font-size: clamp(11px, .92vw, 13px); line-height: 1.55; } .case-story__panel .case-story__copy, .case-process--tabbed li > p { overflow-wrap: break-word; } .case-process--tabbed { gap: 8px; } .case-process--tabbed li { grid-template-columns: 24px minmax(0, 1fr); gap: 7px; } .case-process--tabbed li > span { color: var(--case-accent, #FF8068); } .case-process--tabbed li > p { font-size: clamp(10px, .82vw, 12px); line-height: 1.45; } .case-sheet__actions { display: grid; justify-items: start; gap: 6px; padding-top: 9px; border-top: 1px solid rgba(243,240,233,.13); } .case-sheet__actions .button { min-height: 39px; max-width: 100%; padding-inline: 16px; border-color: var(--case-accent, #FF5538); background: var(--case-accent, #FF5538); color: var(--case-accent-ink, #FFFFFF); font-size: 9px; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; } .case-sheet__actions .button:hover, .case-sheet__actions .button:focus-visible { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 9px 24px color-mix(in srgb, var(--case-accent, #FF5538) 20%, transparent); } .case-sheet__actions .button:active { transform: scale(.98); } .case-story__status { display: -webkit-box; max-width: 100%; overflow: hidden; font-size: 7px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .case-dialog__pager { margin: 0; padding-top: 7px; } .case-dialog__pager button { min-height: 28px; } .case-dialog__close:focus-visible, .case-story__tab:focus-visible, .case-gallery__controls button:focus-visible, .case-sheet__actions .button:focus-visible { outline: 2px solid var(--case-accent, #FF8068); outline-offset: 2px; } .project-feature--modus[role="button"] { cursor: pointer; } .project-feature--modus[role="button"]:focus-visible { outline: 2px solid #BDFF00; outline-offset: 6px; } .project-feature--modus[role="button"] .project-feature__action { transition: transform .24s ease, color .24s ease; } .project-feature--modus[role="button"]:hover .project-feature__action, .project-feature--modus[role="button"]:focus-visible .project-feature__action { transform: translateY(-2px); color: #BDFF00; } @media (max-width: 760px) { .case-dialog { width: calc(100vw - 12px); height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); border-radius: 12px; } .case-dialog__frame { padding: 10px; } .case-dialog__top { min-height: 34px; padding: 1px 0 7px; } .case-dialog__top > p { font-size: 7px; } .case-dialog__close { padding: 4px 5px 5px 9px; font-size: 8px; } .case-dialog__close span { width: 23px; font-size: 14px; } .case-dialog__content { padding-top: 7px; } .case-sheet__heading { margin-bottom: 7px; } .case-sheet__heading .eyebrow { margin-bottom: 4px; font-size: 7px; } .case-sheet__heading h2 { font-size: clamp(27px, 7vw, 38px); } .case-dialog__intro { margin-top: 4px; font-size: 9px; line-height: 1.35; -webkit-line-clamp: 2; } .case-sheet__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, .92fr) minmax(0, 1fr); gap: 7px; } .case-gallery { grid-template-rows: minmax(0, 1fr) auto auto; } .case-gallery__stage { min-height: 0; border-radius: 7px; } .case-gallery__stage[data-kind="demo"] { min-height: 0; height: auto; } .case-gallery__stage[data-format="portrait"] .case-gallery__image { max-width: min(34%, 165px); height: 96%; border-width: 3px; border-radius: 16px; } .case-gallery__stage[data-format="wide"] .case-gallery__image { padding: 3px; } .case-gallery__caption { min-height: 13px; margin: 3px 1px; font-size: 6px; } .case-gallery__controls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } .case-gallery__controls button { min-height: 30px; padding-inline: 4px; font-size: clamp(7.5px, 2.1vw, 8.5px); } .case-story { grid-template-rows: auto minmax(0, 1fr) auto; } .case-story__tabs { gap: 4px; padding-bottom: 5px; } .case-story__tab { min-height: 36px; padding-inline: 3px; font-size: clamp(8px, 2.25vw, 9px); } .case-story__panel { padding: 6px 2px; } .case-story__panel .case-story__copy { font-size: 10px; line-height: 1.4; } .case-process--tabbed { gap: 4px; } .case-process--tabbed li { grid-template-columns: 19px minmax(0, 1fr); gap: 5px; } .case-process--tabbed li > span { font-size: 7px; } .case-process--tabbed li > p { font-size: 8px; line-height: 1.3; } .case-sheet__actions { grid-template-columns: minmax(0, max-content); gap: 4px; padding-top: 5px; } .case-sheet__actions .button { min-height: 36px; padding-inline: 12px; font-size: 9px; } .case-story__status { font-size: 6px; -webkit-line-clamp: 1; } .case-dialog__pager { padding-top: 4px; } .case-dialog__pager button { min-height: 24px; font-size: 7px; } } @media (max-height: 680px) { .case-dialog { height: 96dvh; max-height: 96dvh; } .case-dialog__frame { padding-block: 8px; } .case-sheet__heading { margin-bottom: 5px; } .case-sheet__heading h2 { font-size: clamp(26px, 3.2vw, 38px); } .case-dialog__intro { margin-top: 3px; font-size: 9px; line-height: 1.3; } .case-story__panel { padding-block: 7px; } .case-story__panel .case-story__copy { font-size: 10px; line-height: 1.35; } } @media (max-height: 600px) and (max-width: 760px) { .case-sheet__body { grid-template-rows: minmax(0, .78fr) minmax(0, 1.1fr); } .case-gallery__controls button { min-height: 28px; } .case-story__tab { min-height: 34px; } .case-sheet__actions .button { min-height: 34px; } } @media (prefers-reduced-motion: reduce) { .case-story__tab, .case-sheet__actions .button { transition: none; } } .project-feature-section { position: relative; overflow: hidden; padding-block: clamp(30px, 3.4vw, 52px); background: #101011; color: #F3F0E9; } .project-feature-layout { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); } .project-feature-section:not(.project-feature-section--suma) .project-feature-layout { min-height: clamp(360px, 32vw, 460px); } .project-feature-layout > .section-index { align-self: stretch; } .project-feature { --feature-accent: #FF5538; --feature-ink: #F3F0E9; --feature-muted: #BBB8B0; position: relative; display: grid; min-width: 0; min-height: clamp(340px, 31vw, 445px); grid-template-columns: minmax(245px, .72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(24px, 4vw, 62px); overflow: visible; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; } .project-feature:focus-visible { outline: 1px solid color-mix(in srgb, var(--feature-accent) 75%, transparent); outline-offset: 10px; } .project-feature__copy { position: relative; z-index: 2; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; padding-block: 12px; } .project-feature__eyebrow { margin: 0 0 20px; color: var(--feature-muted); font: 8px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; } .project-feature__logo { display: block; width: min(100%, 230px); height: 48px; margin-bottom: 26px; object-fit: contain; object-position: left center; } .project-feature__copy h2, .project-feature__copy h3 { margin: 0; color: var(--feature-ink); font: 700 clamp(36px, 4.4vw, 62px)/.98 var(--display); letter-spacing: -.075em; text-wrap: balance; } .project-feature__copy > p:not(.project-feature__eyebrow) { max-width: 38ch; margin: 16px 0 0; color: var(--feature-muted); font: 400 clamp(12px, 1.08vw, 14px)/1.65 var(--body); } .project-feature__action { display: inline-flex; align-items: center; gap: 18px; min-height: 40px; margin-top: 23px; padding: 0 16px; border: 1px solid rgba(243,240,233,.82); border-radius: 999px; background: #F3F0E9; color: #141414; font: 8px var(--mono); letter-spacing: .04em; text-transform: uppercase; transition: background .22s ease, color .22s ease, transform .22s ease; } .project-feature__action i { color: var(--feature-accent); font: normal 15px var(--body); transition: transform .3s cubic-bezier(.2,.75,.25,1); } .project-feature:hover .project-feature__action, .project-feature:focus-visible .project-feature__action { transform: translateY(-2px); background: transparent; color: var(--feature-ink); } .project-feature:hover .project-feature__action i, .project-feature:focus-visible .project-feature__action i { transform: translate(3px,-3px); } .project-feature__links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 19px; color: var(--feature-muted); font: 7px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; } .project-feature__links span { padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--feature-muted) 38%, transparent); border-radius: 999px; } .project-feature__visual { position: relative; display: block; width: 100%; height: clamp(270px, 25vw, 360px); min-width: 0; aspect-ratio: auto; margin: 0; overflow: visible; isolation: isolate; } .project-feature__visual > img:not(.project-feature__phone), .project-feature__visual > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .6s cubic-bezier(.2,.75,.25,1); } .project-feature:hover .project-feature__visual > img:not(.project-feature__phone), .project-feature:hover .project-feature__visual > video { transform: scale(1.018); } .project-feature__visual figcaption { position: absolute; right: 1%; bottom: -5px; left: auto; z-index: 3; max-width: 98%; color: var(--feature-muted); font: 7px/1.5 var(--mono); letter-spacing: .09em; text-align: right; pointer-events: none; } .project-feature-section--modus { background: radial-gradient(ellipse at 78% 60%, rgba(189,255,0,.085), transparent 42%), #0E0F0D; } .project-feature--modus { --feature-accent: #BDFF00; --feature-muted: #B6B7AD; } .project-feature__logo--modus { width: min(100%, 245px); } .project-feature__visual--modus { aspect-ratio: 1200 / 630; } .project-feature__visual--modus img { filter: drop-shadow(0 25px 60px rgba(0,0,0,.28)); } .project-feature__visual--modus figcaption { color: #A9AAA0; } .project-feature-section--casa { background: radial-gradient(ellipse at 84% 60%, rgba(255,64,57,.13), transparent 44%), #160E11; } .project-feature--casa { --feature-accent: #FF625A; --feature-ink: #F7F4F3; --feature-muted: #C0B4B5; } .project-feature__brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; color: var(--feature-ink); font: 700 clamp(27px,3vw,39px)/1 var(--display); letter-spacing: -.06em; } .project-feature__visual--casa { aspect-ratio: 1.52; padding: 5% 18% 5% 1%; background: radial-gradient(ellipse at 55% 52%,rgba(130,45,59,.26),transparent 68%); } .project-feature__visual--casa .project-feature__ambient { z-index: -1; inset: -10% -12% -5% 4%; width: 115%; height: 115%; opacity: .88; object-fit: contain; filter: drop-shadow(0 22px 36px rgba(0,0,0,.32)); } .project-feature__visual--casa .project-feature__tv { position: relative; width: 100%; height: auto; max-height: 100%; padding: 5px; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; background: #050506; box-shadow: 0 25px 65px rgba(0,0,0,.48); } .project-feature__visual--casa .project-feature__phone { position: absolute; right: 8%; bottom: 2%; width: auto; max-width: clamp(112px,15vw,184px); height: 94%; border: 5px solid #080808; border-radius: 25px; outline: 1px solid rgba(255,255,255,.36); background: #080808; box-shadow: 0 20px 55px rgba(0,0,0,.56); object-fit: contain; object-position: top; } .project-feature-section--tradeflow { background: radial-gradient(ellipse at 79% 52%, rgba(220,33,125,.13), transparent 45%), #120E12; } .project-feature--tradeflow { --feature-accent: #EA3D91; --feature-ink: #F7F3F6; --feature-muted: #B8AEB7; } .project-feature__brand--tradeflow { margin-bottom: 19px; color: #F052A0; font-size: clamp(31px,3.6vw,47px); } .project-feature__visual--tradeflow { overflow: visible; border: 0; background: transparent; box-shadow: none; } .project-feature__visual--tradeflow .project-feature__ambient { z-index: -1; inset: 4% -16% -6% -13%; width: 128%; height: 108%; object-fit: contain; opacity: .86; filter: drop-shadow(0 24px 45px rgba(0,0,0,.35)); } .tradeflow-device { position: absolute; z-index: 1; inset: 3% 1% 10% 0; overflow: hidden; padding: 5px 5px 0; border: 1px solid #766170; border-bottom: 0; border-radius: 11px 11px 4px 4px; background: linear-gradient(150deg,#29232b,#08090b 18%); box-shadow: 0 22px 52px rgba(0,0,0,.48), inset 0 0 0 2px rgba(255,255,255,.06); } .tradeflow-device__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 7px 7px 0 0; background: #100d11; } .tradeflow-device__screen iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; pointer-events: none; } .tradeflow-device__chin { position: absolute; right: -5%; bottom: -6%; left: -5%; height: 10%; border: 1px solid #6f626c; border-top: 0; border-radius: 0 0 45% 45%; background: linear-gradient(#242026,#0d0d0e 68%); box-shadow: 0 17px 31px rgba(0,0,0,.38); } .project-feature__visual--tradeflow figcaption { right: 2%; bottom: -4px; z-index: 2; color: #d0c2cd; } .case-gallery__stage[data-kind="image"][data-format="wide"] { height: auto; min-height: 0; overflow: visible; border: 0; background: transparent; } .case-gallery__stage[data-kind="image"][data-format="wide"] .case-gallery__image { width: 100%; height: auto; max-height: min(57svh, 590px); padding: 0; border-radius: 8px; object-fit: contain; } .suma-story { scroll-margin-top: 75px; min-height: clamp(500px, 38vw, 565px); padding-block: clamp(38px, 4.5vw, 62px); } .suma-story__layout { grid-template-columns: 78px minmax(260px, .72fr) minmax(350px, 1.28fr); } .suma-story__copy > p:not(.eyebrow, .suma-story__lead) { font-size: 13px; } .suma-story__actions { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; } .suma-story__actions .suma-theme-toggle { position: static; inset: auto; min-height: 39px; justify-content: flex-start; gap: 9px; margin: 0; padding: 0 12px; border: 1px solid rgba(64,55,110,.28); border-radius: 999px; background: rgba(255,255,255,.42); box-shadow: none; color: #211B3A; transform: none; } .suma-story__actions .suma-theme-toggle:hover { transform: translateY(-2px); border-color: rgba(93,87,210,.72); background: #EEE9FF; box-shadow: 0 8px 24px rgba(58,45,101,.15); color: #211B3A; } .suma-story__actions .suma-theme-toggle:active { transform: scale(.97); } .suma-story__actions .suma-theme-toggle .suma-theme-toggle__track { background: #D9D4F1; } .suma-story__actions .suma-theme-toggle .suma-theme-toggle__track i { background: #6553CA; } .suma-story__actions .suma-theme-toggle[aria-pressed="true"] .suma-theme-toggle__track { background: #59518C; } .suma-story__actions .suma-theme-toggle[aria-pressed="true"] .suma-theme-toggle__track i { transform: translateX(12px); background: #D8C9FF; } .suma-story__actions .suma-theme-toggle .suma-theme-toggle__icon { width: 18px; } .suma-story__actions .suma-theme-toggle .suma-theme-toggle__track { width: 28px; height: 16px; } .suma-story__actions .suma-theme-toggle .suma-theme-toggle__track i { width: 12px; height: 12px; } .suma-story__actions .suma-case-button { min-height: 39px; border-color: #17141D; background: #17141D; color: #F3F0E9; font-size: 9px; } .suma-story__actions .suma-case-button:hover { border-color: #6553CA; background: #6553CA; color: #fff; } .suma-story__actions .suma-case-button span { color: #C8B2FF; } .suma-story[data-suma-theme="dark"] .suma-story__actions .suma-theme-toggle { border-color: rgba(191,181,255,.35); background: rgba(26,25,54,.88); color: #F3F1FF; } .suma-story[data-suma-theme="dark"] .suma-story__actions .suma-theme-toggle:hover { border-color: #A99AFF; background: #34315F; color: #fff; } .suma-story__scene { width: 100%; padding: 48px 0 0; border: 0; background: transparent; color: inherit; text-align: inherit; cursor: pointer; } .suma-story__scene { min-height: clamp(360px, 27vw, 410px); padding: 0; } .suma-story__scene:focus-visible { outline-offset: -3px; } .suma-story__scene:hover .phone-mockup--front { transform: rotate(5deg) translateY(-7px); } .phone-mockup--front { transition: transform .45s cubic-bezier(.2,.75,.25,1); } .suma-story__sculpture { z-index: 0; inset: -11% -7% -6% 7%; width: 100%; height: 116%; object-fit: contain; opacity: .95; transform: rotate(14deg); filter: saturate(1.08) brightness(.96); pointer-events: none; } .suma-story[data-suma-theme="dark"] .suma-story__sculpture { opacity: 1; filter: hue-rotate(36deg) saturate(1.45) brightness(.76) contrast(1.08); } .suma-story__scene .phone-mockup--story { z-index: 1; } .suma-story__scene .phone-mockup__island { top: 1.7%; left: 50%; width: 24%; height: 3.2%; } .suma-story__scene::before { opacity: .12; background: radial-gradient(circle, rgba(132,119,255,.62), rgba(92,109,255,.16) 57%, transparent 71%); } .suma-story[data-suma-theme="dark"] .suma-story__scene::before { opacity: .18; background: radial-gradient(circle, rgba(132,119,255,.75), rgba(56,84,179,.21) 57%, transparent 71%); } .suma-story[data-suma-theme="dark"] .phone-mockup--story { box-shadow: 0 31px 70px rgba(8,9,25,.58), 0 0 0 1px rgba(186,178,255,.55); } .archive-preview__heading h2 { font-size: clamp(34px,4.2vw,58px); } .archive-preview__heading > p { max-width: 300px; } .archive-footnote { max-width: 620px; } .about-layout { grid-template-columns: minmax(0,1fr) minmax(300px,.7fr); gap: clamp(35px,7vw,100px); } .about-copy > p:not(.eyebrow) { max-width: 520px; margin-top: 18px; font-size: 13px; line-height: 1.7; } .about-copy h2 { font-size: clamp(44px,5.6vw,76px); } .about-panel { padding: 20px 23px; } .about-row { padding-block: 13px; } .footer-main h2.footer-wordmark { width: 100%; white-space: normal; overflow-wrap: normal; font: 700 clamp(40px,11.2vw,160px)/.84 var(--display); letter-spacing: -.09em; } .footer-wordmark.reveal-on-scroll { filter: blur(12px); transform: translateY(18px); } .footer-wordmark.reveal-on-scroll.is-revealed { filter: blur(0); transform: none; } @media (max-width: 980px) { .project-feature { grid-template-columns: minmax(205px,.72fr) minmax(0,1.28fr); gap: 22px; } .project-feature__copy h2, .project-feature__copy h3 { font-size: clamp(34px,4.2vw,50px); } .suma-story__layout { grid-template-columns: 58px minmax(240px,.8fr) minmax(280px,1.2fr); } .suma-story__scene { min-height: 420px; } } @media (max-width: 900px) { .project-feature-section:not(.project-feature-section--suma) .project-feature-layout { min-height: 0; } .project-feature { min-height: 0; } .project-feature { grid-template-columns: minmax(0,1fr); gap: 19px; } .project-feature__copy { max-width: 650px; } .project-feature__visual { height: auto; } .project-feature__visual--tradeflow { height: clamp(280px,40vw,350px); min-height: 0; } .project-feature__visual--modus { min-height: 0; } .suma-story__layout { grid-template-columns: minmax(0,1fr); gap: 0; } .suma-story__layout > .section-index { grid-row: 1; display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 9px; margin-bottom: 21px; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid rgba(23,20,29,.22); } .suma-story__copy { grid-row: 2; max-width: 650px; } .suma-story__scene { grid-row: 3; grid-column: 1; min-height: clamp(440px,62vw,520px); margin-top: 12px; padding-top: 25px; } .suma-story { min-height: 0; } .phone-mockup--story { width: clamp(150px,28vw,220px); } } @media (max-width: 760px) { .project-feature-layout { grid-template-columns: 1fr; gap: 17px; } .project-feature-layout > .section-index { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 9px; margin: 0; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid rgba(243,240,233,.18); } .project-feature-section--tradeflow .project-feature-layout > .section-index { border-bottom-color: rgba(243,240,233,.18); } .project-feature { grid-template-columns: 1fr; gap: 17px; padding: 0; border: 0; border-radius: 0; } .project-feature__copy { min-height: 0; } .project-feature__eyebrow { margin-bottom: 18px; } .project-feature__logo { margin-bottom: 20px; } .project-feature__copy h2, .project-feature__copy h3 { font-size: clamp(36px,8vw,54px); } .project-feature__visual, .project-feature__visual--casa { height: auto; min-height: clamp(270px,70vw,390px); } .project-feature__visual--tradeflow { height: clamp(270px,70vw,390px); min-height: 0; } .project-feature__visual--modus { min-height: 0; } .project-feature__visual--casa { padding: 28px 18% 28px 12px; } .project-feature__visual--casa .project-feature__phone { right: 7%; max-width: clamp(104px,23vw,150px); height: 84%; border-width: 4px; border-radius: 21px; } .projects-layout { grid-template-columns: 1fr; gap: 19px; } .projects-layout > .section-index { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 9px; margin: 0; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid rgba(243,240,233,.18); } .selected-work-heading { grid-template-columns: 1fr; gap: 12px; } .selected-work-heading h2 { font-size: clamp(42px,10vw,64px); } .selected-work-heading .section-intro { max-width: 460px; font-size: 11px; } .suma-story { padding-block: 48px 55px; } .suma-story__layout { grid-template-columns: 1fr; gap: 0; } .suma-story__layout > .section-index { grid-row: 1; display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 9px; margin-bottom: 21px; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid rgba(23,20,29,.22); } .suma-story__copy { grid-row: 2; max-width: 650px; } .suma-story__copy h2 { font-size: clamp(60px,15vw,85px); } .suma-story__scene { grid-row: 3; min-height: clamp(355px,98vw,470px); margin-top: 12px; padding-top: 25px; } .phone-mockup--story { width: clamp(150px,35vw,220px); } .phone-mockup--back { left: 14%; } .phone-mockup--front { right: 12%; } .archive-layout { grid-template-columns: 1fr; gap: 0; } .archive-layout > .section-index { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 9px; margin-bottom: 21px; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid rgba(243,240,233,.18); } .archive-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .about-layout { grid-template-columns: 1fr; gap: 26px; } .footer-main h2.footer-wordmark { font-size: clamp(40px,11.5vw,84px); } } @media (max-width: 520px) { .project-feature { padding: 0; border: 0; border-radius: 0; } .project-feature__links { gap: 6px; margin-top: 17px; font-size: 6px; } .project-feature__links span + span::before { margin-right: 7px; } .project-feature__visual, .project-feature__visual--modus, .project-feature__visual--casa, .project-feature__visual--tradeflow { min-height: 250px; border-radius: 8px; } .project-feature__visual, .project-feature__visual--tradeflow { height: 250px; } .project-feature__visual--casa { min-height: 260px; padding: 18px 19% 18px 8px; } .project-feature__visual--casa .project-feature__phone { max-width: clamp(92px,28vw,132px); height: 80%; } .project-feature__visual figcaption { right: 7px; bottom: 8px; max-width: calc(100% - 14px); font-size: 6px; } .suma-story__actions { align-items: flex-start; } .suma-story__actions .button { min-height: 38px; padding-inline: 10px; font-size: 8px; } .suma-story__actions .suma-theme-toggle { gap: 6px; } .suma-story__actions .suma-theme-toggle__icon { display: none; } .suma-story__scene { min-height: 320px; } .phone-mockup--story { width: clamp(128px,36vw,172px); border-width: 4px; border-radius: 22px; } .phone-mockup--story > img { border-radius: 18px; } .archive-grid { grid-template-columns: 1fr; } .footer-main h2.footer-wordmark { font-size: clamp(38px,11.4vw,60px); letter-spacing: -.085em; } .footer-contact { grid-template-columns: 1fr; } } @media (max-width: 720px) { .case-gallery__stage[data-kind="image"][data-format="wide"] .case-gallery__image { max-height: min(53svh, 460px); } } @media (prefers-reduced-motion: reduce) { .project-feature, .project-feature__action i, .phone-mockup--front { transition: none; } .project-feature:hover, .project-feature:focus-visible, .project-feature:active { transform: none; } } .project-feature__visual--modus { height: clamp(285px, 27vw, 390px); overflow: hidden; background: #10110F; } .project-feature__visual--modus figcaption { z-index: 3; right: 5%; bottom: 12px; max-width: 90%; } .archive-card__visual--techweek { position: relative; overflow: hidden; padding: 0; background: #111; } .archive-card__visual--techweek::after { inset: auto 0 0; height: 38%; background: linear-gradient(transparent,rgba(0,0,0,.75)); } .archive-card__visual--techweek > span { z-index: 2; right: 9px; bottom: 8px; left: 9px; color: #F3F0E9; font: 6px/1.35 var(--mono); letter-spacing: .08em; text-align: left; } .archive-card--mercurio .archive-card__visual { background: radial-gradient(ellipse at 50% 48%,#26252B,#09090A 74%); } .archive-card--mercurio .archive-card__visual-caption { position: absolute; z-index: 2; right: 8px; bottom: 8px; left: 8px; color: #E7E3EA; font: 6px var(--mono); letter-spacing: .08em; } .archive-card__visual--conutric { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: 10px; padding: 20px; background: #E8E4DB; color: #171715; } .archive-card__visual--conutric::after { inset: 10px; border: 1px solid rgba(20,20,20,.2); background: none; } .archive-card__visual--conutric > span,.archive-card__visual--conutric > strong,.archive-card__visual--conutric > small { position: relative; z-index: 1; top: auto; right: auto; bottom: auto; left: auto; width: auto; } .archive-card__visual--conutric > span { color: #716C62; font: 6px var(--mono); letter-spacing: .12em; } .archive-card__visual--conutric > strong { color: #171715; font: 600 clamp(20px,2.5vw,30px)/.98 var(--display); letter-spacing: -.065em; } .archive-card__visual--conutric > small { color: #625C54; font: 9px var(--editorial); } .case-gallery__live { display: block; width: 100%; height: 100%; min-height: 100%; border: 0; background: #111; } .case-gallery__stage[data-kind="live"] { overflow: hidden; background: #111; } .footer-main h2.footer-wordmark { font-size: clamp(46px,11.8vw,184px); letter-spacing: -.09em; } .project-feature--modus, .archive-card[href] { color: inherit; text-decoration: none; } .project-feature--modus:focus-visible, .archive-card[href]:focus-visible { outline: 2px solid #FF5538; outline-offset: 6px; } .project-feature--modus .project-feature__visual--modus { display: grid; height: clamp(285px, 27vw, 390px); place-items: center; overflow: hidden; border: 1px solid rgba(243,240,233,.16); background: #10110F; } .project-feature--modus .project-feature__visual--modus::after { content: none; } .project-feature--modus .project-feature__visual--modus figcaption { right: 16px; bottom: 13px; z-index: 2; color: #AAA79D; } .project-feature--modus .project-feature__visual--modus { padding: clamp(16px,2.4vw,30px); background: radial-gradient(ellipse at 54% 46%,rgba(189,255,0,.075),transparent 58%),#10110F; } .modus-operations-map { display: block; width: 100%; height: 100%; object-fit: contain; border: 1px solid rgba(243,240,233,.12); border-radius: 8px; background: #101110; } .project-feature--modus .project-feature__visual--modus figcaption { right: 22px; bottom: 19px; padding: 5px 8px; border: 1px solid rgba(243,240,233,.17); border-radius: 999px; background: rgba(12,13,12,.76); color: #D7D9D1; } .archive-card__visual--controllist { place-items: stretch; padding: 0; background: #100E14; } .archive-card__visual--controllist::after { content: none; } .controllist-site-link { display: flex; min-width: 0; height: 100%; flex-direction: column; justify-content: center; padding: clamp(15px,2vw,25px); border-left: 1px solid rgba(181,124,255,.55); color: #F7F4FB; } .controllist-site-link > span { color: #B8B0C3; font: 7px var(--mono); letter-spacing: .12em; } .controllist-site-link strong { margin-top: 17px; white-space: nowrap; font: 600 clamp(13px,2vw,19px)/1.05 var(--display); letter-spacing: -.075em; } .controllist-site-link i { width: max-content; margin-top: 18px; padding-bottom: 5px; border-bottom: 1px solid rgba(229,216,255,.5); color: #F7F4FB; font: normal 8px var(--mono); } .archive-card--controllist:hover .controllist-site-link i, .archive-card--controllist:focus-visible .controllist-site-link i { color: #D7B8FF; border-color: #D7B8FF; } .archive-card--mercurio .archive-card__visual { padding: 12px 8px 17px; background: radial-gradient(ellipse at 50% 50%,#232323,#08090A 80%); } .mercurio-screenstrip { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; gap: clamp(3px,.55vw,8px); overflow: hidden; } .mercurio-screenstrip img { display: block; width: auto; height: min(100%,190px); max-width: 32%; object-fit: contain; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; background: #080808; box-shadow: 0 8px 22px rgba(0,0,0,.28); } .archive-card--mercurio .archive-card__visual-caption { right: 0; bottom: 0; left: 0; padding: 7px 8px 6px; background: rgba(8,8,8,.78); text-align: center; } .archive-card__visual--techweek { padding: 0; background: #090909; } .archive-card__visual--techweek::after { content: none; } .archive-card__visual--techweek > img { width: 100%; height: 100%; padding: 4px; object-fit: contain; } .archive-card__visual--techweek > span { right: 5px; bottom: 5px; left: 5px; padding: 5px; background: rgba(8,8,8,.78); text-align: center; } .archive-card--techweek:hover .archive-card__visual > img { transform: scale(1.015); } @media (max-width: 760px) { .project-feature__visual--modus { height: clamp(245px,68vw,340px); } .project-feature--modus .project-feature__visual--modus { height: clamp(245px,68vw,340px); } .modus-site-link { width: 88%; min-height: 72%; } .footer-main h2.footer-wordmark { font-size: clamp(38px,10.5vw,82px); } } @media (max-width: 390px) { .footer-main h2.footer-wordmark { font-size: clamp(27px,8vw,35px); letter-spacing: -.08em; } } html { scrollbar-gutter: stable; } html.case-dialog-open { overflow: hidden; overscroll-behavior: none; scrollbar-gutter: stable; } html.case-dialog-open body { position: fixed; top: var(--case-dialog-page-y, 0px); right: 0; left: 0; width: 100%; overflow: hidden; overscroll-behavior: none; } .case-dialog { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; overflow: hidden; border: 0; border-radius: 0; padding: 0; transform: none; background: #171715; animation: case-dialog-fade-in .2s ease both; overscroll-behavior: none; } .case-dialog[open] { transform: none; animation: case-dialog-fade-in .2s ease both; } .case-dialog::backdrop { background: rgba(8,8,8,.82); animation: case-backdrop-in .2s ease both; backdrop-filter: none; } .case-dialog__frame { display: flex; width: 100%; height: 100%; min-height: 0; flex-direction: column; padding: calc(clamp(14px,2.3vw,30px) + env(safe-area-inset-top)) clamp(14px,2.3vw,30px) calc(clamp(12px,1.6vw,22px) + env(safe-area-inset-bottom)); overflow: hidden; } .case-dialog__top { position: relative; top: auto; flex: 0 0 auto; } .case-dialog__content { min-height: 0; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; scroll-behavior: auto; overflow-anchor: none; } .case-dialog__pager { flex: 0 0 auto; margin-top: 12px; } .case-gallery__stage[data-kind="image"] { scroll-margin-block: 16px; } .case-gallery__stage[data-kind="image"][data-format="portrait"] { height: auto; min-height: 0; overflow: visible; padding: 14px 10px; } .case-gallery__stage[data-kind="image"][data-format="portrait"] .case-gallery__image { width: min(58%,230px); max-width: min(58%,230px); height: auto; max-height: none; aspect-ratio: 689 / 1500; object-fit: contain; } .case-dialog__close { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } @keyframes case-dialog-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes case-backdrop-in { from { opacity: 0; } to { opacity: 1; } } .suma-story__scene { min-height: 620px; overflow: visible; } .phone-mockup--story { width: clamp(170px,15vw,238px); } .phone-mockup--back { top: 5%; left: 12%; } .phone-mockup--front { right: 8%; bottom: 5%; } @media (max-width: 980px) { .suma-story__scene { min-height: 500px; } .phone-mockup--story { width: clamp(170px,23vw,225px); } } @media (max-width: 760px) { .suma-story__scene { min-height: clamp(470px,87vw,530px); overflow: visible; } .phone-mockup--story { width: clamp(158px,31vw,205px); } .phone-mockup--back { top: 5%; left: 8%; } .phone-mockup--front { right: 6%; bottom: 5%; } } @media (max-width: 520px) { .suma-story__scene { min-height: clamp(410px,108vw,490px); } .phone-mockup--story { width: clamp(126px,33vw,165px); } .phone-mockup--back { left: 5%; } .phone-mockup--front { right: 4%; } } .site-nav .nav-resume, .mobile-menu__resume { display: inline-flex; align-items: center; justify-content: center; gap: 11px; border: 1px solid #FF5538; border-radius: 999px; background: #FF5538; color: #141414; font-weight: 650; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .mobile-menu:not([hidden]) { background: #141414; border-color: rgba(243,240,233,.18); } .mobile-menu:not([hidden]) a:not(.mobile-menu__resume) { color: #F3F0E9; transition: color .22s ease, transform .32s cubic-bezier(.2,.75,.25,1), border-color .22s ease; } .mobile-menu:not([hidden]) a:not(.mobile-menu__resume):hover, .mobile-menu:not([hidden]) a:not(.mobile-menu__resume):focus-visible { color: #FF8068; transform: translateX(4px); } .mobile-menu:not([hidden]) a:not(.mobile-menu__resume) span { color: #FF8068; } .mobile-menu:not([hidden]) a:not(.mobile-menu__resume):focus-visible { outline: 2px solid #FF8068; outline-offset: 5px; } .mobile-menu:not([hidden]) > a.mobile-menu__resume { justify-content: center; gap: 12px; min-height: 52px; padding: 12px 18px; border-bottom: 0; color: #141414; } .mobile-menu:not([hidden]) > a.mobile-menu__resume span { color: #141414; font-size: 13px; } .menu-button { transition: color .22s ease, background-color .22s ease; } .menu-button:focus-visible { outline: 2px solid #FF5538; outline-offset: 5px; border-radius: 4px; } .menu-button__icon { position: relative; transform-origin: center; transition: color .2s ease; } .menu-button__icon::after { position: absolute; top: 50%; left: 50%; width: 31px; height: 31px; border: 1px solid rgba(255,85,56,.45); border-radius: 50%; content: ""; opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.68); transition: opacity .24s ease, transform .42s cubic-bezier(.2,.82,.22,1), box-shadow .24s ease; } .menu-button__icon i { transition: transform .36s cubic-bezier(.2,.82,.22,1), background-color .2s ease; } .menu-button[aria-expanded="true"] .menu-button__icon i { background: currentColor; } .menu-button[aria-expanded="true"]:hover .menu-button__icon, .menu-button[aria-expanded="true"]:focus-visible .menu-button__icon { color: #FF5538; } .menu-button[aria-expanded="true"]:hover .menu-button__icon::after, .menu-button[aria-expanded="true"]:focus-visible .menu-button__icon::after { opacity: 1; transform: translate(-50%,-50%) scale(1); box-shadow: 0 0 18px rgba(255,85,56,.14); } .menu-button[aria-expanded="true"]:hover .menu-button__icon i:first-child, .menu-button[aria-expanded="true"]:focus-visible .menu-button__icon i:first-child { transform: translateY(3px) rotate(55deg); } .menu-button[aria-expanded="true"]:hover .menu-button__icon i:last-child, .menu-button[aria-expanded="true"]:focus-visible .menu-button__icon i:last-child { transform: translateY(-3px) rotate(-55deg); } .menu-button[aria-expanded="true"]:active .menu-button__icon { transform: scale(.94); } .menu-button[aria-expanded="true"]:hover, .menu-button[aria-expanded="true"]:focus-visible { color: #FF5538; } .site-nav .nav-resume { padding: 8px 13px; } .nav-resume span, .mobile-menu__resume span { display: inline-block; margin: 0; color: #141414; transition: transform .24s cubic-bezier(.2,.75,.25,1); } .site-nav .nav-resume:hover, .site-nav .nav-resume:focus-visible, .mobile-menu__resume:hover, .mobile-menu__resume:focus-visible { transform: translateY(-2px); border-color: #FF8068; background: #FF8068; color: #141414; box-shadow: 0 9px 24px rgba(255,85,56,.2); } .site-nav .nav-resume:hover span, .site-nav .nav-resume:focus-visible span, .mobile-menu__resume:hover span, .mobile-menu__resume:focus-visible span { transform: translate(3px,-3px); } .about-resume { display: inline-flex; min-height: 54px; align-items: center; gap: clamp(22px,4vw,46px); margin-top: 26px; padding: 0 10px 0 22px; border: 1px solid #FF5538; border-radius: 999px; background: #FF5538; color: #141414; font: 600 10px var(--mono); text-decoration: none; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; } .about-resume span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(20,20,20,.27); border-radius: 50%; color: #141414; font-size: 16px; transition: transform .28s cubic-bezier(.2,.75,.25,1), background .22s ease; } .about-resume:hover, .about-resume:focus-visible { transform: translateY(-3px); background: #FF8068; box-shadow: 0 13px 28px rgba(255,85,56,.22); } .about-resume:hover span, .about-resume:focus-visible span { transform: translate(3px,-3px); background: rgba(255,255,255,.2); } .about-resume:active { transform: translateY(-1px) scale(.985); } .archive-card__visual--controllist { position: relative; overflow: hidden; padding: 0; background: #111019; } .archive-card__visual--controllist::after { content: none; } .archive-card__visual--controllist > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: #111019; } .archive-card__visual--controllist > span { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; padding: 8px 9px; background: linear-gradient(transparent,rgba(8,7,14,.9)); color: #F7F4FB; font: 6px var(--mono); letter-spacing: .08em; } .archive-card__visual--hulk { background: #111114; } .archive-card__visual--hulk > img { width: 100%; height: 100%; padding: 6px; object-fit: contain; object-position: center top; } .archive-card__visual--hulk::after { content: none; } .archive-card__visual--conutric { border: 1px solid rgba(20,20,20,.12); background: #F3F0E9; } .archive-card__visual--conutric::after { content: none; } .archive-card__visual--conutric > strong { max-width: 11ch; } .hero-art__symbol { will-change: transform; animation: signal-sculpture-drift 9s cubic-bezier(.45,0,.55,1) infinite alternate; transition: filter .6s ease; } .hero-art:hover .hero-art__symbol { animation-play-state: paused; filter: drop-shadow(0 34px 30px rgba(113,40,19,.23)); } @keyframes signal-sculpture-drift { from { transform: translate3d(0,2px,0) rotate(-7deg) scale(.99); } to { transform: translate3d(0,-9px,0) rotate(-4deg) scale(1.015); } } @media (max-width: 760px) { .case-dialog__frame { padding-inline: 14px; } .case-dialog__pager { padding-bottom: max(4px,env(safe-area-inset-bottom)); } .site-nav .nav-resume { padding: 7px 11px; } .about-resume { min-height: 50px; margin-top: 21px; } .project-feature--modus .project-feature__visual--modus { padding: 12px; } .case-gallery__stage[data-kind="image"][data-format="portrait"] .case-gallery__image { width: min(50%,170px); max-width: min(50%,170px); } } @media (max-width: 430px) { .case-gallery__stage[data-kind="image"][data-format="portrait"] .case-gallery__image { width: min(50%,145px); max-width: min(50%,145px); } } @media (prefers-reduced-motion: reduce) { .hero-art__symbol { animation: none; will-change: auto; } .site-nav .nav-resume, .mobile-menu__resume, .about-resume, .about-resume span, .mobile-menu a, .menu-button__icon { transition: none; } .site-nav .nav-resume:hover, .mobile-menu__resume:hover, .about-resume:hover { transform: none; } .site-nav .nav-resume:hover span, .mobile-menu__resume:hover span, .about-resume:hover span { transform: none; } .mobile-menu:not([hidden]) a:not(.mobile-menu__resume):hover, .mobile-menu:not([hidden]) a:not(.mobile-menu__resume):focus-visible, .menu-button[aria-expanded="true"]:hover .menu-button__icon, .menu-button[aria-expanded="true"]:focus-visible .menu-button__icon { transform: none; } .menu-button__icon::after { transition: none; } .menu-button[aria-expanded="true"]:hover .menu-button__icon::after, .menu-button[aria-expanded="true"]:focus-visible .menu-button__icon::after { opacity: 0; } .menu-button[aria-expanded="true"]:hover .menu-button__icon i:first-child, .menu-button[aria-expanded="true"]:focus-visible .menu-button__icon i:first-child { transform: translateY(3px) rotate(45deg); } .menu-button[aria-expanded="true"]:hover .menu-button__icon i:last-child, .menu-button[aria-expanded="true"]:focus-visible .menu-button__icon i:last-child { transform: translateY(-3px) rotate(-45deg); } .case-dialog, .case-dialog::backdrop { animation: none; } } .header-resume-shortcut { display: none; } @media (max-width: 760px) { .header-inner { gap: 12px; } .header-resume-shortcut { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 36px; padding: 0 11px !important; border: 1px solid #FF5538 !important; border-radius: 999px !important; background: #FF5538; color: #141414; font: 8px var(--mono); letter-spacing: .02em; text-decoration: none; white-space: nowrap; } .header-resume-shortcut span { color: #141414; } .header-resume-shortcut:hover, .header-resume-shortcut:focus-visible { background: #FF8068; border-color: #FF8068 !important; color: #141414; } } @media (max-width: 380px) { .header-inner { gap: 8px; } .header-resume-shortcut { min-height: 34px; padding-inline: 9px !important; font-size: 7px; } } .suma-story__scene { min-height: 520px; } .phone-mockup--story { width: clamp(164px, 17vw, 206px); } .phone-mockup--back { top: 5%; left: 15%; } .phone-mockup--front { right: 8%; bottom: 5%; } @media (max-width: 900px) { .suma-story__scene { min-height: 520px; } .phone-mockup--story { width: clamp(150px, 23vw, 208px); } } @media (max-width: 760px) { .suma-story__scene { min-height: clamp(470px, 66vw, 520px); } .phone-mockup--story { width: clamp(150px, 34vw, 208px); } .phone-mockup--back { top: 7%; left: 8%; } .phone-mockup--front { right: 8%; bottom: 6%; } } @media (max-width: 520px) { .suma-story__scene { min-height: clamp(350px, 82vw, 430px); } .phone-mockup--story { width: clamp(128px, 33vw, 172px); } .phone-mockup--back { top: 7%; left: 4%; } .phone-mockup--front { right: 4%; bottom: 6%; } } .archive-card__visual--conutric { align-items: flex-start; justify-content: center; gap: 13px; padding: clamp(18px, 2.2vw, 27px); background: linear-gradient(135deg, #F3F0E9, #E8E4DB); color: #141414; } .archive-card__visual--conutric::before { position: absolute; inset: 12px; border: 1px solid rgba(20,20,20,.17); content: ""; pointer-events: none; } .archive-card__visual--conutric > span { color: #777168; font: 7px var(--mono); letter-spacing: .1em; } .archive-card__visual--conutric > strong { max-width: none; color: #141414; font: 600 clamp(27px, 3.4vw, 42px)/.95 var(--display); letter-spacing: -.07em; } .archive-card__visual--conutric > small { max-width: 24ch; color: #625C54; font: 10px/1.45 var(--body); } html.case-dialog-open { scroll-behavior: auto !important; } .reveal-on-scroll { transform: translateY(7px); transition: opacity .34s ease, transform .34s cubic-bezier(.2,.75,.25,1); } .reveal-on-scroll:is(h2) { filter: none; transform: translateY(7px); } .reveal-on-scroll.is-revealed { filter: none; transform: none; } .work-card.reveal-on-scroll, .archive-card.reveal-on-scroll, .work-card.reveal-on-scroll:nth-of-type(n), .archive-card.reveal-on-scroll:nth-of-type(n) { transition-delay: 0s; } .footer-wordmark.reveal-on-scroll { filter: none; transform: translateY(7px); transition: opacity .34s ease, transform .34s cubic-bezier(.2,.75,.25,1); } .footer-wordmark.reveal-on-scroll.is-revealed { filter: none; transform: none; } @keyframes case-media-reveal { from { opacity: 0; transform: scale(.995); } to { opacity: 1; transform: scale(1); } } .archive-card__visual--conutric { display: grid; height: clamp(150px, 15vw, 218px); grid-template-rows: minmax(0, 1fr) auto auto; align-items: center; justify-items: stretch; gap: 7px; padding: 14px 15px 27px; border-color: rgba(248, 247, 239, .18); background: #164C3C; } .archive-card__visual--conutric::before, .archive-card__visual--conutric::after { content: none; } .conutric-board__identity { display: flex; min-height: 0; align-items: center; justify-content: center; gap: 12px; } .conutric-board__identity img { display: block; width: clamp(48px, 5.5vw, 76px); height: clamp(48px, 5.5vw, 76px); object-fit: contain; border-radius: 4px; } .conutric-board__identity span { color: rgba(255,255,255,.78); font: 7px/1.5 var(--mono); letter-spacing: .12em; } .archive-card__visual--conutric .conutric-board__banner { display: block; width: 100%; height: auto; max-height: 60px; object-fit: contain; object-position: center; } .archive-card__visual--conutric .conutric-board__caption { right: auto; bottom: 9px; left: 15px; color: rgba(255,255,255,.72); font-size: 6px; } .archive-card__visual--conutric .conutric-board__caption::selection { background: #FF5538; } .case-gallery__stage[data-kind="image"][data-format="square"] { height: min(57svh, 590px); min-height: 330px; background: #164C3C; } .case-gallery__stage[data-kind="image"][data-format="square"] .case-gallery__image { width: min(100%, 520px); height: auto; max-height: min(57svh, 590px); padding: 18px; object-fit: contain; } @media (max-width: 1120px) { .archive-card__visual--conutric { height: clamp(180px, 24vw, 270px); } .archive-card__visual--conutric .conutric-board__banner { max-height: 76px; } } @media (max-width: 560px) { .archive-card__visual--conutric { height: 205px; } .conutric-board__identity img { width: 74px; height: 74px; } .case-gallery__stage[data-kind="image"][data-format="square"] { min-height: 290px; height: min(48svh, 430px); } .case-gallery__stage[data-kind="image"][data-format="square"] .case-gallery__image { max-height: min(48svh, 430px); padding: 12px; } } html.case-dialog-open .reveal-on-scroll, html.case-dialog-open .footer-wordmark.reveal-on-scroll { transition: none !important; animation-play-state: paused !important; } .case-dialog__content { overscroll-behavior: contain; overflow-anchor: none; } .hero-art__symbol { will-change: transform; animation: signal-sculpture-drift 11s cubic-bezier(.45,0,.55,1) infinite alternate; } @keyframes signal-sculpture-drift { from { transform: translate3d(0, 1px, 0) rotate(-6.5deg); } to { transform: translate3d(0, -7px, 0) rotate(-4.5deg); } } @media (prefers-reduced-motion: reduce) { .header-resume-shortcut, .header-resume-shortcut span { transition: none; } .hero-art__symbol { animation: none; will-change: auto; } } .case-dialog { inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; border-radius: 0; animation: none; } .case-dialog[open] { animation: none; } .case-dialog::backdrop { animation: none; backdrop-filter: none; } .case-dialog__frame { display: flex; height: 100%; min-height: 0; flex-direction: column; overflow: hidden; } .case-dialog__top { position: relative; top: auto; flex: 0 0 auto; } .case-dialog__content { min-height: 0; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: auto; scroll-behavior: auto; overflow-anchor: none; } .case-dialog__pager { flex: 0 0 auto; } .case-sheet[data-case-id="suma"] .case-gallery__controls button[aria-pressed="true"] { border-color: #7667F7; background: #7667F7; color: #FFFFFF; } .case-sheet[data-case-id="suma"] .case-gallery__controls button:hover, .case-sheet[data-case-id="suma"] .case-gallery__controls button:focus-visible { border-color: #B7A8FF; color: #D8C9FF; } .case-sheet[data-case-id="suma"] .case-gallery__controls button[aria-pressed="true"]:hover, .case-sheet[data-case-id="suma"] .case-gallery__controls button[aria-pressed="true"]:focus-visible { border-color: #B7A8FF; background: #8E80FF; color: #FFFFFF; } .case-dialog[data-case-id="suma"] .case-dialog__pager button:hover:not(:disabled) { color: #B7A8FF; } @media (min-width: 901px) { .suma-story { min-height: 0; padding-block: 22px 28px; } .suma-story__scene { height: clamp(390px, calc(100vh - 150px), 470px); height: clamp(390px, calc(100svh - 150px), 470px); min-height: 0; } .phone-mockup--story { width: clamp(155px, 9.8vw, 188px); } .phone-mockup--back { top: 4%; left: 14%; } .phone-mockup--front { right: 7%; bottom: 4%; } } @media (min-width: 901px) and (max-height: 640px) { .suma-story { padding-block: 16px 20px; } .suma-story__scene { height: clamp(360px, calc(100vh - 130px), 430px); height: clamp(360px, calc(100svh - 130px), 430px); } .phone-mockup--story { width: clamp(148px, 28svh, 176px); } } @media (prefers-reduced-motion: reduce) { .case-dialog, .case-dialog::backdrop { animation: none; } } @media (max-width: 760px) { .suma-story__scene { min-height: clamp(310px, 61vw, 360px); } .phone-mockup--story { width: clamp(128px, 27vw, 156px); } .phone-mockup--back { top: 4%; left: 13%; } .phone-mockup--front { right: 7%; bottom: 4%; } } @media (max-width: 390px) { .suma-story__scene { min-height: clamp(300px, 72vw, 330px); } .phone-mockup--story { width: clamp(116px, 31vw, 128px); } .phone-mockup--back { left: 11%; } .phone-mockup--front { right: 5%; } } .hero-art__symbol { transform-origin: 52% 48%; will-change: transform, filter; animation: signal-sculpture-drift 12s cubic-bezier(.45,0,.55,1) infinite; } .hero-art:hover .hero-art__symbol { animation-play-state: paused; } @keyframes signal-sculpture-drift { 0%, 100% { transform: translate3d(0,1px,0) rotate(-5.2deg) scale(.995); filter: drop-shadow(0 20px 22px rgba(113,40,19,.08)); } 50% { transform: translate3d(0,-8px,0) rotate(-3.6deg) scale(1.012); filter: drop-shadow(0 30px 28px rgba(113,40,19,.16)); } } .about-resume span { translate: 0 0; animation: resume-arrow-nudge 3.8s ease-in-out infinite; } .about-resume:hover span, .about-resume:focus-visible span { animation-play-state: paused; } @keyframes resume-arrow-nudge { 0%, 78%, 100% { translate: 0 0; } 85% { translate: 3px -3px; } 92% { translate: 1px -1px; } } .case-dialog__content { touch-action: pan-y pinch-zoom; scrollbar-width: thin; scrollbar-color: rgba(216,201,255,.42) transparent; } .case-dialog__content::-webkit-scrollbar { width: 6px; } .case-dialog__content::-webkit-scrollbar-track { background: transparent; } .case-dialog__content::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(216,201,255,.38); } .case-dialog__content::-webkit-scrollbar-thumb:hover { background: rgba(216,201,255,.66); } @media (prefers-reduced-motion: reduce) { .hero-art__symbol, .about-resume span { animation: none; will-change: auto; } } .project-feature--modus .project-feature__visual--modus { padding: 0; width: min(100%, 780px); height: auto; aspect-ratio: 8 / 5; justify-self: end; border-color: rgba(243,240,233,.2); border-radius: 10px; background: #F3F0E9; box-shadow: 0 24px 64px rgba(0,0,0,.34); } .project-feature__visual--modus .modus-public-capture { display: block; width: 100%; height: 100%; border: 0; border-radius: inherit; object-fit: contain; object-position: top center; filter: none; } .project-feature--modus:hover .modus-public-capture, .project-feature--modus:focus-visible .modus-public-capture { transform: scale(1.012); } .project-feature--modus .project-feature__visual--modus figcaption { right: 12px; bottom: 12px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; background: rgba(20,20,20,.72); color: #F3F0E9; backdrop-filter: blur(8px); } html.case-dialog-open { height: 100%; overflow: hidden; overscroll-behavior: none; scroll-behavior: auto !important; scrollbar-gutter: stable; } html.case-dialog-open body { position: fixed !important; inset: var(--case-dialog-page-y, 0px) 0 auto !important; width: auto !important; height: 100dvh; overflow: hidden !important; overscroll-behavior: none; overflow-anchor: none; } .case-dialog__content { overscroll-behavior-y: contain; overflow-anchor: none; scroll-behavior: auto !important; scrollbar-gutter: stable; } html.case-dialog-open .case-sheet, html.case-dialog-open .case-gallery__image, html.case-dialog-open .case-gallery__video, html.case-dialog-open .case-gallery__diagram { animation: none !important; } @media (min-width: 901px) { .suma-story__scene { height: clamp(450px, calc(100svh - 190px), 550px); min-height: 0; } .phone-mockup--story { width: clamp(156px, 10vw, 192px); } .phone-mockup--back { top: 7%; left: 9%; } .phone-mockup--front { right: 5%; bottom: 7%; } } @media (min-width: 761px) and (max-width: 900px) { .suma-story__scene { min-height: clamp(420px, 56vw, 480px); } .phone-mockup--story { width: clamp(146px, 22vw, 180px); } .phone-mockup--back { top: 6%; left: 8%; } .phone-mockup--front { right: 6%; bottom: 6%; } } @media (max-width: 760px) { .suma-story__scene { min-height: clamp(380px, 72vw, 430px); } .phone-mockup--story { width: clamp(128px, 27vw, 156px); } .phone-mockup--back { top: 7%; left: 8%; } .phone-mockup--front { right: 5%; bottom: 7%; } } @media (max-width: 390px) { .suma-story__scene { min-height: 355px; } .phone-mockup--story { width: clamp(116px, 31vw, 128px); } } .archive-card__visual--conutric { border: 1px solid rgba(20,20,20,.14); background: linear-gradient(145deg,#F6F3EC,#EAE6DD); } .archive-card__visual--conutric::before { inset: 12px; border-color: rgba(20,20,20,.16); } .archive-card__visual--conutric > span:first-child { color: #716C62; } .archive-card__visual--conutric > strong { color: #141414; } .archive-card__visual--conutric > small { color: #625C54; } .archive-card__visual--hulk { overflow: hidden; background: #111114; } .archive-card__visual--hulk > img { object-fit: contain; object-position: center; } @media (max-width: 900px) { .project-feature--modus .project-feature__visual--modus { width: 100%; height: auto; aspect-ratio: 8 / 5; justify-self: stretch; } } @media (prefers-reduced-motion: reduce) { .project-feature--modus:hover .modus-public-capture, .project-feature--modus:focus-visible .modus-public-capture { transform: none; } } html.case-dialog-open { height: 100%; overflow: hidden; overscroll-behavior: none; scroll-behavior: auto !important; scrollbar-gutter: stable; } html.case-dialog-open body { position: static !important; inset: auto !important; width: 100% !important; height: auto; overflow: visible !important; overscroll-behavior: none; overflow-anchor: none; } @media (hover: none) and (pointer: coarse) { html.case-dialog-open body { position: fixed !important; inset: var(--case-dialog-page-y, 0px) 0 auto !important; height: 100dvh; overflow: hidden !important; } } .case-dialog__content { overscroll-behavior: contain; overflow-anchor: none; scroll-behavior: auto !important; scrollbar-gutter: stable; } .suma-story { overflow-x: clip; overflow-y: visible; } @media (min-width: 901px) { .suma-story__scene { height: clamp(530px, calc(100svh - 150px), 620px); min-height: 0; } .phone-mockup--story { width: clamp(156px, 9.6vw, 184px); } .phone-mockup--back { top: 8%; left: 9%; } .phone-mockup--front { right: 6%; bottom: 8%; } } @media (min-width: 761px) and (max-width: 900px) { .suma-story__scene { min-height: 500px; } .phone-mockup--story { width: clamp(146px, 20vw, 176px); } .phone-mockup--back { top: 7%; left: 7%; } .phone-mockup--front { right: 6%; bottom: 7%; } } @media (max-width: 760px) { .suma-story__scene { min-height: clamp(390px, 80vw, 470px); } .phone-mockup--story { width: clamp(132px, 31vw, 158px); } .phone-mockup--back { top: 6%; left: 6%; } .phone-mockup--front { right: 5%; bottom: 6%; } } @media (max-width: 390px) { .suma-story__scene { min-height: 370px; } .phone-mockup--story { width: 126px; } } @media (min-width: 901px) and (max-height: 760px) { .suma-story { padding-block: 16px 18px; } .suma-story__scene { height: clamp(360px, calc(100svh - 124px), 460px); } .phone-mockup--story { width: clamp(118px, 22svh, 152px); } .phone-mockup--back { top: 3%; left: 8%; } .phone-mockup--front { right: 5%; bottom: 3%; } } .case-dialog { inset: 0; width: auto; height: 100vh; height: 100svh; max-width: none; max-height: none; margin: 0; overflow: hidden; border: 0; border-radius: 0; padding: 0; transform: none !important; animation: none !important; overscroll-behavior: none; } .case-dialog[open] { animation: none !important; } .case-dialog::backdrop { animation: none !important; backdrop-filter: none; overscroll-behavior: none; } .case-dialog__frame { width: 100%; height: 100%; min-height: 0; overflow: hidden; } .case-dialog__content { min-height: 0; flex: 1 1 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; overflow-anchor: none; scroll-behavior: auto !important; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; touch-action: pan-y pinch-zoom; } html.case-dialog-open .hero-art__symbol { animation-play-state: paused !important; } .suma-story__scene { min-height: 0; overflow: visible; } @media (min-width: 901px) and (max-height: 760px) { .suma-story { padding-block: 16px 18px; } .suma-story__scene { height: clamp(340px, calc(100svh - 170px), 420px); } .phone-mockup--story { width: clamp(108px, 20.5svh, 136px); } .phone-mockup--back { top: 6%; left: 8%; transform: rotate(-5deg); } .phone-mockup--front { right: 5%; bottom: 6%; transform: rotate(5deg); } } @media (min-width: 761px) and (max-width: 900px) { .suma-story__scene { height: 440px; min-height: 0; } .phone-mockup--story { width: min(clamp(146px, 20vw, 172px), 24svh); } .phone-mockup--back { top: 6%; left: 7%; transform: rotate(-5deg); } .phone-mockup--front { right: 5%; bottom: 6%; transform: rotate(5deg); } } @media (max-width: 760px) { .suma-story__scene { height: clamp(340px, 92vw, 410px); min-height: 0; } .phone-mockup--story { width: clamp(116px, 32vw, 136px); } .phone-mockup--back { top: 5%; left: 5%; transform: rotate(-5deg); } .phone-mockup--front { right: 5%; bottom: 5%; transform: rotate(5deg); } } @media (min-width: 761px) and (max-height: 500px) { .suma-story__scene { height: 300px; } .phone-mockup--story { width: clamp(92px, 18svh, 108px); } .phone-mockup--back { top: 5%; left: 8%; } .phone-mockup--front { right: 5%; bottom: 5%; } } html.case-dialog-open { overflow: hidden; overscroll-behavior: none; scroll-behavior: auto !important; scrollbar-gutter: stable; } html.case-dialog-open body { position: static !important; inset: auto !important; width: 100% !important; height: auto; overflow: visible !important; overscroll-behavior: none; overflow-anchor: none; } @media (hover: none) and (pointer: coarse) { html.case-dialog-open body { position: fixed !important; inset: var(--case-dialog-page-y, 0px) 0 auto !important; width: 100% !important; height: 100vh; height: 100svh; overflow: hidden !important; } } .hero-art__symbol { transform-origin: 50% 50%; animation: signal-sculpture-drift 13s cubic-bezier(.45,0,.55,1) infinite; } @keyframes signal-sculpture-drift { 0%, 100% { transform: translate3d(0, 1px, 0) rotate(-5.2deg) scale(.995); filter: drop-shadow(0 18px 22px rgba(113,40,19,.08)); } 50% { transform: translate3d(0, -9px, 0) rotate(-3.8deg) scale(1.012); filter: drop-shadow(0 30px 29px rgba(113,40,19,.16)); } } @media (prefers-reduced-motion: reduce) { .hero-art__symbol { animation: none; } } .case-dialog { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; overscroll-behavior: none; } .case-dialog[open] { display: block; } .case-dialog::backdrop { overscroll-behavior: none; backdrop-filter: none; } .case-dialog__frame { display: flex; width: 100%; height: 100%; min-height: 0; flex-direction: column; overflow: hidden; } .case-dialog__top, .case-dialog__pager { flex: 0 0 auto; } .case-dialog__content { flex: 1 1 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; overflow-anchor: none; scrollbar-gutter: stable; scroll-behavior: auto !important; -webkit-overflow-scrolling: touch; touch-action: pan-y pinch-zoom; } .case-dialog__pager { margin-top: 12px; } @media (min-width: 901px) and (max-height: 760px) { .suma-story { padding-block: 18px 22px; } .suma-story__scene { height: clamp(390px, calc(100svh - 130px), 460px); } .phone-mockup--story { width: clamp(100px, 17svh, 124px); } .phone-mockup--back { top: 8%; left: 8%; } .phone-mockup--front { right: 6%; bottom: 8%; } } @media (max-width: 760px) { .suma-story__scene { height: clamp(330px, 90vw, 410px); min-height: 0; } .phone-mockup--story { width: clamp(112px, 28vw, 132px); } .phone-mockup--back { top: 7%; left: 8%; } .phone-mockup--front { right: 7%; bottom: 7%; } } @media (max-width: 390px) { .suma-story__scene { height: 330px; } .phone-mockup--story { width: 110px; } .phone-mockup--back { left: 8%; } .phone-mockup--front { right: 6%; } } @media (prefers-reduced-motion: reduce) { .hero-art__symbol { animation: none !important; } } html.case-dialog-open main > :not(#case-dialog) iframe { visibility: hidden !important; } html.case-dialog-open main > :not(#case-dialog) video { visibility: hidden !important; } .suma-story__scene { overflow: visible; } .phone-mockup--story { max-height: calc(100% - 44px); } @media (min-width: 901px) and (max-height: 760px) { .suma-story__scene { height: clamp(380px, calc(100svh - 112px), 470px); } .phone-mockup--story { width: clamp(108px, 16svh, 128px); } .phone-mockup--back { top: 7%; left: 9%; } .phone-mockup--front { right: 7%; bottom: 7%; } } @media (min-width: 761px) and (max-width: 900px) { .suma-story__scene { height: clamp(430px, 56vw, 500px); min-height: 0; } .phone-mockup--story { width: min(clamp(140px, 19vw, 170px), 22svh); } .phone-mockup--back { top: 7%; left: 7%; } .phone-mockup--front { right: 6%; bottom: 7%; } } @media (max-width: 760px) { .suma-story__scene { height: clamp(360px, 92vw, 430px); min-height: 0; } .phone-mockup--story { width: clamp(112px, 29vw, 132px); } .phone-mockup--back { top: 6%; left: 6%; } .phone-mockup--front { right: 6%; bottom: 6%; } } @media (max-width: 390px) { .suma-story__scene { height: 350px; } .phone-mockup--story { width: 110px; } } @media (prefers-reduced-motion: reduce) { html.case-dialog-open .reveal-on-scroll, html.case-dialog-open .footer-wordmark.reveal-on-scroll { animation: none !important; } } @media (prefers-reduced-motion: no-preference) { html:not(.smooth-scroll-enabled):not(.case-dialog-open) { scroll-behavior: smooth; } } html.smooth-scroll-enabled { scroll-behavior: auto !important; } html.reduce-motion { scroll-behavior: auto !important; } .scroll-progress { position: fixed; z-index: 120; inset: 0 0 auto; height: 2px; overflow: hidden; pointer-events: none; background: rgba(20, 20, 20, .08); } .scroll-progress > span { display: block; width: 100%; height: 100%; transform: scaleX(var(--scroll-progress, 0)); transform-origin: left center; background: var(--accent, #FF5538); will-change: transform; } .project-feature__visual--modus { isolation: isolate; overflow: visible; } .project-feature--modus .project-feature__visual--modus { overflow: visible; } .modus-scroll-object { position: absolute; z-index: 1; top: -18%; right: -12%; width: clamp(145px, 13vw, 176px); height: auto; overflow: visible; color: #BDFF00; opacity: .96; pointer-events: none; filter: drop-shadow(0 9px 24px rgba(0, 0, 0, .35)); } .modus-scroll-object__rotor { transform: translate3d(0, var(--modus-lift, 0px), 0) rotate(var(--modus-angle, -18deg)) scale(var(--modus-scale, 1)); transform-box: fill-box; transform-origin: center; } .modus-scroll-object__frame { fill: none; stroke: #BDFF00; stroke-width: 1.8; } .modus-scroll-object__corner { fill: #BDFF00; stroke: #BDFF00; stroke-width: 1; } .modus-scroll-object__orbit { fill: none; stroke: rgba(243, 240, 233, .9); stroke-width: 1.8; } .modus-scroll-object__square { fill: #BDFF00; stroke: #BDFF00; stroke-width: 1; } .project-feature-section--modus.is-in-view .modus-scroll-object { opacity: 1; } .project-feature__visual--modus .modus-public-capture { z-index: 2; transform: translate3d(0, var(--modus-image-drift, 0px), 0) scale(1.012); will-change: transform; } .project-feature__visual--casa::before { position: absolute; z-index: 0; inset: 12% 8%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 70, 73, .34), rgba(255, 35, 60, .1) 48%, transparent 72%); content: ""; opacity: var(--casa-glow-opacity, 0); transform: translate3d(0, var(--casa-glow-y, 0px), 0) scale(var(--casa-glow-scale, .86)); transition: opacity .12s linear, transform .12s linear; pointer-events: none; } .project-feature__visual--casa { isolation: isolate; } figure.project-feature__visual--casa > img.project-feature__ambient { z-index: 1; top: -17%; right: auto; bottom: -20%; left: 6%; width: 124%; height: 138%; opacity: .78; mix-blend-mode: screen; object-fit: contain; transform: rotate(-5deg) scale(1.06); filter: drop-shadow(0 14px 26px rgba(255, 37, 63, .2)); } .project-feature__visual--casa .project-feature__tv { position: relative; z-index: 2; } .project-feature__visual--casa .project-feature__phone { z-index: 3; } .project-feature__visual--casa .project-feature__tv { transition: box-shadow .7s ease, transform .55s cubic-bezier(.2, .75, .25, 1); } .project-feature__visual--casa .project-feature__phone { transition: box-shadow .7s ease, transform .55s cubic-bezier(.2, .75, .25, 1); } .project-feature-section--casa.is-in-view .project-feature__visual--casa .project-feature__tv { box-shadow: 0 26px 72px rgba(0, 0, 0, .5), 0 0 34px rgba(255, 57, 68, .19); } .project-feature-section--casa.is-in-view .project-feature__visual--casa .project-feature__phone { box-shadow: 0 20px 55px rgba(0, 0, 0, .56), 0 0 24px rgba(255, 57, 68, .16); } .project-feature__visual--tradeflow { isolation: isolate; } figure.project-feature__visual--tradeflow > img.project-feature__ambient { z-index: 3; top: -30%; right: -5%; bottom: auto; left: auto; width: min(58%, 400px); height: auto; opacity: .58; object-fit: contain; mix-blend-mode: screen; filter: drop-shadow(0 16px 32px rgba(222, 32, 126, .26)); transform: translate3d(0, var(--tradeflow-art-y, 0px), 0) rotate(var(--tradeflow-art-angle, -2deg)); will-change: transform; pointer-events: none; } .project-feature__visual--tradeflow .tradeflow-device { z-index: 2; } .case-sheet[data-case-id="suma"] .case-gallery__stage[data-kind="image"][data-format="portrait"] { min-height: 0; padding: 10px; } .case-sheet[data-case-id="suma"] .case-gallery__stage[data-kind="image"][data-format="portrait"] .case-gallery__image { width: auto; max-width: min(52%, 200px); height: auto; max-height: min(44svh, 320px); aspect-ratio: 689 / 1500; object-fit: contain; } .case-sheet[data-case-id="suma"] .case-gallery__controls { display: flex; width: max-content; max-width: 100%; flex-wrap: nowrap; gap: 4px; overflow-x: auto; padding: 5px; border: 1px solid rgba(220, 213, 255, .22); border-radius: 999px; background: rgba(25, 25, 53, .48); box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 9px 26px rgba(17, 13, 49, .18); backdrop-filter: blur(22px) saturate(1.35); scrollbar-width: none; } .case-sheet[data-case-id="suma"] .case-gallery__controls::-webkit-scrollbar { display: none; } .case-sheet[data-case-id="suma"] .case-gallery__controls button { flex: 0 0 auto; min-height: 34px; border-color: transparent; background: rgba(255, 255, 255, .055); color: #D8D3F0; -webkit-tap-highlight-color: transparent; } .case-sheet[data-case-id="suma"] .case-gallery__controls button:hover, .case-sheet[data-case-id="suma"] .case-gallery__controls button:focus-visible { border-color: rgba(196, 184, 255, .5); background: rgba(164, 146, 255, .16); color: #FFF; } .case-sheet[data-case-id="suma"] .case-gallery__controls button[aria-pressed="true"] { border-color: rgba(235, 230, 255, .44); background: linear-gradient(180deg, rgba(170, 153, 255, .95), rgba(120, 103, 231, .9)); box-shadow: inset 0 1px rgba(255, 255, 255, .34), 0 4px 14px rgba(105, 87, 216, .24); color: #FFF; } .tradeflow-sequence { display: grid; width: min(100%, 390px); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; color: #D4C5CF; font: 8px/1.3 var(--mono, "IBM Plex Mono", monospace); letter-spacing: .035em; } .tradeflow-sequence > span { position: relative; min-width: 0; padding-top: 15px; } .tradeflow-sequence > span::before { position: absolute; top: 2px; left: 0; width: 6px; height: 6px; border: 1px solid rgba(240, 82, 160, .8); border-radius: 50%; background: #F052A0; opacity: var(--step-opacity, .35); transform: scale(var(--step-scale, .86)); box-shadow: 0 0 14px rgba(240, 82, 160, var(--step-glow, .04)); content: ""; transition: opacity .12s linear, box-shadow .12s linear, transform .12s linear; } .tradeflow-sequence > span:not(:last-child)::after { position: absolute; top: 4px; right: 5px; left: 12px; height: 1px; background: linear-gradient(90deg, rgba(240, 82, 160, .72), rgba(240, 82, 160, .18)); content: ""; transform: scaleX(var(--step-fill, 0)); transform-origin: left center; transition: transform .12s linear; } @media (max-width: 900px) { .modus-scroll-object { top: -17%; right: -9%; width: clamp(132px, 15vw, 160px); } figure.project-feature__visual--casa > img.project-feature__ambient { top: -11%; right: auto; bottom: -11%; left: 3%; width: 116%; height: 122%; } figure.project-feature__visual--tradeflow > img.project-feature__ambient { top: -24%; right: -4%; width: 54%; opacity: .52; } .tradeflow-sequence { margin-top: 18px; } } @media (max-width: 520px) { .scroll-progress { height: 2px; } .modus-scroll-object { top: -14%; right: -6%; width: 108px; } figure.project-feature__visual--casa > img.project-feature__ambient { top: -8%; right: auto; bottom: -8%; left: 2%; width: 112%; height: 118%; opacity: .68; } figure.project-feature__visual--tradeflow > img.project-feature__ambient { top: -22%; right: -3%; width: 57%; opacity: .45; } .tradeflow-sequence { width: 100%; max-width: 340px; font-size: 7px; } } @media (prefers-reduced-motion: reduce) { .scroll-progress > span, .modus-scroll-object__rotor, figure.project-feature__visual--casa > img.project-feature__ambient, figure.project-feature__visual--tradeflow > img.project-feature__ambient, .project-feature__visual--casa::before, .project-feature__visual--casa .project-feature__tv, .project-feature__visual--casa .project-feature__phone, .tradeflow-sequence > span::before, .tradeflow-sequence > span::after { transition: none !important; animation: none !important; } .modus-scroll-object__rotor { transform: none !important; } .project-feature__visual--modus .modus-public-capture { transform: none !important; } .project-feature-section--casa .project-feature__visual--casa::before { opacity: .45; transform: none; } .tradeflow-sequence > span::before { opacity: 1; transform: none; } .tradeflow-sequence > span:not(:last-child)::after { transform: scaleX(1); } } .archive-card__visual--conutric { display: flex; height: clamp(208px, 23vw, 248px); flex-direction: column; justify-content: center; gap: 10px; padding: 15px 15px 30px; background: #22563F; } .archive-card__visual--conutric::after { content: none; } .archive-card__visual--conutric .conutric-board__banner { position: relative; inset: auto; display: block; width: 100%; height: auto; max-height: 74px; object-fit: contain; object-position: center; border: 1px solid rgba(243,240,233,.2); } .conutric-board__assets { position: relative; z-index: 1; display: grid; width: 100%; height: clamp(58px, 8vw, 76px); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .conutric-board__assets img { display: block; width: 100%; height: 100%; padding: 2px; border: 1px solid rgba(243,240,233,.2); border-radius: 3px; background: #F3F0E9; object-fit: contain; } .archive-card__visual--conutric .conutric-board__caption { right: 13px; bottom: 9px; left: 13px; color: rgba(243,240,233,.76); font: 6px/1.2 var(--mono); letter-spacing: .06em; } .archive-card--conutric .archive-card__type { color: #8CC6A2; } .archive-card--conutric .archive-card__body b { color: #9BD2AE; } .archive-card--conutric .case-card__cue { color: #D3E8DA; } .archive-card--conutric .case-card__cue i { color: #A8D5BA; } .archive-card--conutric:hover { border-color: rgba(168,213,186,.8); } .case-gallery__stage[data-kind="image"][data-format="square"] .case-gallery__image { padding: 10px; } .project-feature-section--casa, .project-feature-section--tradeflow { isolation: isolate; } .project-feature__visual--casa { overflow: visible; } figure.project-feature__visual--casa > img.project-feature__ambient { z-index: 1; top: -29%; right: auto; bottom: auto; left: -28%; width: 158%; height: 158%; opacity: 1; mix-blend-mode: screen; object-fit: contain; transform: translate3d(var(--casa-art-x, 0px), calc(var(--casa-art-y, 0px) + var(--casa-art-pointer-y, 0px)), 0) rotate(var(--casa-art-angle, -3deg)) scale(1.08); filter: saturate(1.42) brightness(1.3) drop-shadow(0 0 22px rgba(255, 42, 63, .46)); transition: filter .55s ease, opacity .55s ease; will-change: transform; pointer-events: none; } .project-feature__visual--casa .project-feature__tv { z-index: 2; } .project-feature__visual--casa .project-feature__phone { z-index: 3; } .project-feature-section--casa.is-in-view .project-feature__visual--casa > img.project-feature__ambient { filter: saturate(1.58) brightness(1.42) drop-shadow(0 0 30px rgba(255, 42, 63, .56)); } .project-feature__visual--tradeflow { overflow: visible; } figure.project-feature__visual--tradeflow > img.project-feature__ambient { z-index: 1; top: -9%; right: auto; bottom: auto; left: -17%; width: 134%; max-width: none; height: 122%; opacity: .88; object-fit: contain; mix-blend-mode: screen; transform: translate3d(var(--tradeflow-art-x, 0px), calc(var(--tradeflow-art-y, 0px) + var(--tradeflow-art-pointer-y, 0px)), 0) rotate(var(--tradeflow-art-angle, -2deg)) scale(1.03); filter: saturate(1.32) brightness(1.12) drop-shadow(0 0 26px rgba(232, 36, 126, .44)); transition: filter .45s ease, opacity .45s ease; will-change: transform; pointer-events: none; } .project-feature-section--tradeflow.is-in-view figure.project-feature__visual--tradeflow > img.project-feature__ambient, .project-feature__visual--tradeflow:hover > img.project-feature__ambient { opacity: 1; filter: saturate(1.55) brightness(1.26) drop-shadow(0 0 34px rgba(232, 36, 126, .56)); } .project-feature__visual--tradeflow .tradeflow-device { z-index: 2; } @media (max-width: 900px) { figure.project-feature__visual--casa > img.project-feature__ambient { top: -21%; left: -21%; width: 143%; height: 143%; } figure.project-feature__visual--tradeflow > img.project-feature__ambient { top: -5%; left: -15%; width: 129%; height: 118%; } } .project-feature--modus .project-feature__visual--modus { position: relative; display: block; height: clamp(285px, 27vw, 390px); overflow: visible; padding: 0; background: radial-gradient(ellipse at 82% 48%, rgba(189,255,0,.11), transparent 32%), #10110f; } .project-feature--modus .modus-public-capture { position: absolute; inset: 50% auto auto 0 !important; z-index: 3; display: block; width: 76% !important; height: auto !important; max-width: none !important; max-height: none !important; aspect-ratio: 8 / 5; transform: translate3d(0, calc(-50% + var(--modus-image-drift, 0px)), 0) !important; object-fit: cover; object-position: top left; border: 1px solid rgba(243,240,233,.16); border-radius: 9px; box-shadow: 0 24px 56px rgba(0,0,0,.35); } .project-feature--modus .project-feature__visual--modus > img.modus-green-ribbon { position: absolute; z-index: 1; inset: auto !important; top: 64% !important; right: 0 !important; bottom: auto !important; left: auto !important; display: block; width: 48%; max-width: 360px; height: auto; max-height: none; opacity: .96; object-fit: contain; filter: drop-shadow(0 14px 30px rgba(126,255,0,.18)); pointer-events: none; transform: translate3d(var(--modus-art-x, 0px), calc(-50% + var(--modus-ribbon-lift, 0px) + var(--modus-art-pointer-y, 0px)), 0) rotate(var(--modus-ribbon-angle, 0deg)) scale(var(--modus-ribbon-scale, 1)); transform-origin: 50% 50%; will-change: transform; } .project-feature--modus .modus-scroll-object { z-index: 2; top: 10%; right: 2%; width: clamp(92px, 9vw, 118px); max-width: 18%; overflow: visible; color: #BDFF00; } .project-feature--modus .modus-scroll-object__rotor { transform: translate3d(0, var(--modus-lift, 0px), 0) rotate(var(--modus-angle, 0deg)) scale(var(--modus-scale, 1)); transform-box: fill-box; transform-origin: center; } .project-feature--modus .modus-scroll-object__frame { fill: none; stroke: #BDFF00; stroke-width: 1.5; } .project-feature--modus .modus-scroll-object__orbit { fill: none; stroke: rgba(243,240,233,.82); stroke-width: 1.5; } .project-feature--modus .modus-scroll-object__square, .project-feature--modus .modus-scroll-object__corner { fill: #BDFF00; stroke: #BDFF00; stroke-width: 1; } .project-feature--modus .project-feature__visual--modus figcaption { z-index: 4; right: 12px; bottom: 12px; } .project-feature--modus:hover .modus-green-ribbon, .project-feature--modus:focus-visible .modus-green-ribbon { filter: drop-shadow(0 16px 36px rgba(126,255,0,.28)); } @media (max-width: 760px) { .project-feature--modus .project-feature__visual--modus { height: clamp(245px, 68vw, 340px); } .project-feature--modus .modus-public-capture { width: 82% !important; } .project-feature--modus .project-feature__visual--modus > img.modus-green-ribbon { top: 70% !important; right: 0 !important; width: 58% !important; } .project-feature--modus .modus-scroll-object { top: 6%; right: 2%; width: clamp(78px, 15vw, 104px); max-width: 22%; } } @media (max-width: 390px) { .project-feature--modus .modus-public-capture { width: 82% !important; } .project-feature--modus .project-feature__visual--modus > img.modus-green-ribbon { width: 60%; } .project-feature--modus .modus-scroll-object { width: 76px; } } @media (min-width: 901px) { figure.project-feature__visual--casa > img.project-feature__ambient { left: -11%; width: 146%; height: 146%; } } @media (max-width: 520px) { figure.project-feature__visual--casa > img.project-feature__ambient { top: -10%; left: -20%; width: 142%; height: 124%; } figure.project-feature__visual--tradeflow > img.project-feature__ambient { top: 0; left: -14%; width: 128%; height: 110%; } } @media (prefers-reduced-motion: reduce) { figure.project-feature__visual--casa > img.project-feature__ambient, figure.project-feature__visual--tradeflow > img.project-feature__ambient { transform: none !important; transition: none !important; will-change: auto; } } @media (max-width: 1120px) { .archive-card__visual--conutric { height: clamp(190px, 24vw, 230px); } .conutric-board__assets { height: 58px; } .archive-card__visual--conutric .conutric-board__banner { max-height: 62px; } } @media (max-width: 760px) { .archive-card__visual--conutric { height: 205px; } .conutric-board__assets { height: 54px; } } .archive-card__visual--conutric { display: grid; height: auto; min-height: 0; aspect-ratio: 1.35 / 1; place-items: center; padding: 12px; overflow: hidden; background: #E8E4DB; } .archive-card__visual--conutric::after { content: none; } .archive-card__visual--conutric .conutric-board__banner { width: 100%; height: auto; max-height: none; border: 0; object-fit: contain; } .archive-card__visual--conutric .conutric-board__caption { right: 9px; bottom: 7px; left: 9px; color: #716C62; font-size: 6px; text-align: left; } .archive-card--conutric .archive-card__type { color: #A8A49D; } .archive-card--conutric .archive-card__body b { color: #FF8068; } .archive-card[role="button"] { cursor: pointer; } .archive-card[role="button"]:focus-visible { outline: 2px solid #FF8068; outline-offset: 3px; } .footer-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 54px); padding-block: clamp(48px, 7vw, 96px); } .footer-main__identity { min-width: 0; } .footer-main__identity > .eyebrow { margin-bottom: 16px; } .footer-main__kicker { margin: 0 0 12px; color: #A8A49D; font: 8px/1.4 var(--mono, "IBM Plex Mono", monospace); letter-spacing: .14em; } .footer-main h2.footer-wordmark { width: 100%; max-width: none; overflow: hidden; color: #F3F0E9; font-size: clamp(30px, 11.25vw, 188px); line-height: .84; letter-spacing: -.09em; white-space: nowrap; text-overflow: clip; } .footer-manifesto { margin-top: 15px; } .footer-main__details { display: grid; grid-template-columns: minmax(190px, .64fr) minmax(0, 1.36fr); align-items: start; gap: clamp(26px, 5vw, 76px); } .footer-main__details .footer-contact { width: 100%; min-width: 0; grid-template-columns: 1fr; gap: 0; align-self: end; } .footer-main__details .footer-contact a { min-height: 46px; align-items: center; padding: 11px 0; border-color: rgba(243,240,233,.18); color: #D0CDC5; font-size: 9px; } .footer-main__details .footer-contact a:hover, .footer-main__details .footer-contact a:focus-visible { color: #F3F0E9; } .footer-main__details .footer-contact .footer-email { font-size: 12px; } .footer-lead { min-width: 0; padding: clamp(20px, 3vw, 34px); border: 1px solid rgba(243,240,233,.19); border-radius: 14px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); } .footer-lead__heading .eyebrow { margin: 0 0 11px; color: #FF8068; font: 8px/1.3 var(--mono, "IBM Plex Mono", monospace); letter-spacing: .13em; } .footer-lead__heading h3 { margin: 0; color: #F3F0E9; font: 600 clamp(23px, 2.8vw, 34px)/1.02 var(--display, "Space Grotesk", sans-serif); letter-spacing: -.055em; text-wrap: balance; } .footer-lead__form { display: grid; gap: 13px; margin-top: 22px; } .footer-lead__fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } .footer-lead__form label:not(.footer-lead__consent):not(.footer-lead__honeypot) { display: grid; min-width: 0; gap: 6px; color: #D8D5CD; font: 8px/1.35 var(--mono, "IBM Plex Mono", monospace); letter-spacing: .025em; } .footer-lead__form label small { color: #A8A49D; font: inherit; } .footer-lead__form input:not([type="checkbox"]), .footer-lead__form select, .footer-lead__form textarea { width: 100%; min-width: 0; min-height: 43px; border: 1px solid rgba(243,240,233,.19); border-radius: 7px; outline: none; padding: 10px 11px; background: rgba(5,5,5,.26); color: #F3F0E9; font: 400 11px/1.45 var(--body, "DM Sans", sans-serif); letter-spacing: 0; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; } .footer-lead__form select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg,transparent 50%,#A8A49D 50%),linear-gradient(135deg,#A8A49D 50%,transparent 50%); background-position: calc(100% - 15px) 18px,calc(100% - 10px) 18px; background-size: 5px 5px,5px 5px; background-repeat: no-repeat; } .footer-lead__form select option { background: #171715; color: #F3F0E9; } .footer-lead__form textarea { min-height: 82px; resize: vertical; } .footer-lead__form input::placeholder, .footer-lead__form textarea::placeholder { color: #858179; } .footer-lead__form input:focus-visible, .footer-lead__form select:focus-visible, .footer-lead__form textarea:focus-visible { border-color: #FF8068; background-color: rgba(255,255,255,.045); box-shadow: 0 0 0 3px rgba(255,85,56,.14); } .footer-lead__honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; } .footer-lead__consent { display: flex; align-items: flex-start; gap: 9px; color: #BEBAB2; font: 10px/1.55 var(--body, "DM Sans", sans-serif); letter-spacing: 0; } .footer-lead__consent input { flex: 0 0 auto; width: 15px; height: 15px; margin: 1px 0 0; accent-color: #FF5538; } .footer-lead__consent a { color: #F3F0E9; text-decoration-color: rgba(243,240,233,.5); text-underline-offset: 3px; } .footer-lead__verification { min-height: 0; } .footer-lead__verification:empty { display: none; } .footer-lead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .footer-lead__submit { display: inline-flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 30px; padding: 5px 7px 5px 17px; border: 1px solid #FF5538; border-radius: 999px; background: #FF5538; color: #141414; cursor: pointer; font: 600 10px var(--mono, "IBM Plex Mono", monospace); transition: transform .24s cubic-bezier(.2,.75,.25,1), background .2s ease, box-shadow .2s ease; } .footer-lead__submit i { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(20,20,20,.28); border-radius: 50%; font: normal 17px var(--body, "DM Sans", sans-serif); transition: transform .24s cubic-bezier(.2,.75,.25,1), background .2s ease; } .footer-lead__submit:hover, .footer-lead__submit:focus-visible { transform: translateY(-2px); background: #FF8068; box-shadow: 0 11px 25px rgba(255,85,56,.18); } .footer-lead__submit:hover i, .footer-lead__submit:focus-visible i { transform: translate(2px,-2px); background: rgba(255,255,255,.16); } .footer-lead__submit:active { transform: translateY(0) scale(.985); } .footer-lead__submit:disabled { cursor: wait; opacity: .7; } .footer-lead__email-fallback { color: #F3F0E9; font: 9px var(--mono, "IBM Plex Mono", monospace); text-underline-offset: 4px; } .footer-lead__status { flex-basis: 100%; min-height: 16px; color: #D8D5CD; font: 10px/1.5 var(--body, "DM Sans", sans-serif); } .footer-lead__privacy-note { margin: 0; color: #8F8B83; font: 8px/1.5 var(--mono, "IBM Plex Mono", monospace); } .footer-main__details [hidden] { display: none !important; } @media (max-width: 760px) { .footer-main__details { grid-template-columns: 1fr; gap: 20px; } .footer-main__details .footer-contact { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; } .footer-main__details .footer-contact a { font-size: 8px; } .footer-main__details .footer-contact .footer-email { font-size: 9px; } } @media (max-width: 520px) { .footer-main__details .footer-contact { grid-template-columns: 1fr; gap: 0; } .footer-lead { padding: 18px 15px; } .footer-lead__fields { grid-template-columns: 1fr; } .footer-lead__heading h3 { font-size: 25px; } } @media (prefers-reduced-motion: reduce) { .footer-lead__form input, .footer-lead__form select, .footer-lead__form textarea, .footer-lead__submit, .footer-lead__submit i { transition: none; } } .footer-main--closing { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(34px, 5vw, 72px); padding-block: clamp(52px, 6.5vw, 92px) 22px; } .footer-main--closing > .footer-lead { width: min(100%, 1120px); justify-self: end; } .footer-lead__section-index { margin: 0 0 10px; color: #A8A49D; } .footer-lead__section-index span { color: #FF8068; } .footer-main--closing > .footer-main__kicker, .footer-main--closing .footer-main__kicker { margin: 0 0 22px; } .footer-signoff { display: grid; gap: clamp(20px, 3vw, 36px); } .footer-signoff__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 28px; } .footer-signoff .footer-manifesto { grid-column: 1; margin: 0; color: #D0CDC5; font: 400 clamp(13px, 1.4vw, 17px)/1.4 var(--body, "DM Sans", sans-serif); } .footer-signoff .footer-contact { grid-column: 1 / -1; display: grid; width: min(100%, 820px); min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-self: end; gap: clamp(12px, 3vw, 42px); } .footer-signoff .footer-contact a { min-width: 0; min-height: 40px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(243,240,233,.2); color: #D0CDC5; font-size: 9px; } .footer-signoff .footer-contact .footer-email { font-size: 11px; } .footer-signoff .footer-legal { grid-column: 1 / -1; margin: 5px 0 0; padding: 12px 0 0; border-top-color: rgba(243,240,233,.14); } .footer-main--closing h2.footer-wordmark { display: block; width: 100%; max-width: none; margin: 0; overflow: visible; color: #F3F0E9; font: 700 clamp(40px, 11.8vw, 184px)/.84 var(--display, "Space Grotesk", sans-serif); letter-spacing: -.09em; white-space: nowrap; } .footer-main--closing .footer-wordmark.reveal-on-scroll:not(.is-revealed) { opacity: .18; filter: blur(16px); transform: translateY(22px); transition: opacity 1s ease, filter 1.15s cubic-bezier(.2,.75,.25,1), transform 1.15s cubic-bezier(.2,.75,.25,1); } .footer-main--closing .footer-wordmark.reveal-on-scroll.is-revealed { opacity: 1; filter: blur(0); transform: translateY(0); } @media (max-width: 760px) { .footer-signoff__meta { grid-template-columns: minmax(0, 1fr); gap: 12px; } .footer-signoff .footer-contact { width: 100%; justify-self: stretch; } .footer-signoff .footer-legal { gap: 10px 16px; } .footer-main--closing h2.footer-wordmark { font-size: clamp(36px, 11.6vw, 82px); } } @media (max-width: 520px) { .footer-main--closing { gap: 34px; } .footer-signoff .footer-contact { grid-template-columns: 1fr; gap: 2px; } .footer-signoff .footer-contact .footer-email { font-size: 10px; } .footer-signoff .footer-legal { flex-direction: column; align-items: flex-start; } .footer-main--closing h2.footer-wordmark { font-size: clamp(31px, 9.4vw, 42px); letter-spacing: -.085em; } } @media (prefers-reduced-motion: reduce) { .footer-main--closing .footer-wordmark.reveal-on-scroll:not(.is-revealed), .footer-main--closing .footer-wordmark.reveal-on-scroll.is-revealed { opacity: 1; filter: none; transform: none; transition: none; } } .case-dialog[data-case-id="loreal"] .case-gallery__stage[data-kind="demo"] { height: min(66svh, 640px); min-height: min(66svh, 470px); } @media (max-width: 680px) { .case-dialog[data-case-id="loreal"] .case-gallery__stage[data-kind="demo"] { height: min(66svh, 620px); min-height: min(66svh, 400px); } } figure.project-feature__visual--casa > img.project-feature__ambient { max-width: none; opacity: 1; filter: saturate(1.62) brightness(1.52) contrast(1.06) drop-shadow(0 0 34px rgba(255, 42, 63, .62)); } .project-feature:hover .project-feature__visual--casa > img.project-feature__ambient, .project-feature:focus-visible .project-feature__visual--casa > img.project-feature__ambient { transform: translate3d(var(--casa-art-x, 0px), calc(var(--casa-art-y, 0px) + var(--casa-art-pointer-y, 0px)), 0) rotate(var(--casa-art-angle, -3deg)) scale(1.1); } .project-feature-section--casa.is-in-view figure.project-feature__visual--casa > img.project-feature__ambient { filter: saturate(1.78) brightness(1.65) contrast(1.08) drop-shadow(0 0 42px rgba(255, 42, 63, .72)); } figure.project-feature__visual--tradeflow > img.project-feature__ambient { max-width: none; opacity: .98; filter: saturate(1.62) brightness(1.42) contrast(1.04) drop-shadow(0 0 38px rgba(232, 36, 126, .62)); } .project-feature:hover .project-feature__visual--tradeflow > img.project-feature__ambient, .project-feature:focus-visible .project-feature__visual--tradeflow > img.project-feature__ambient { transform: translate3d(var(--tradeflow-art-x, 0px), calc(var(--tradeflow-art-y, 0px) + var(--tradeflow-art-pointer-y, 0px)), 0) rotate(var(--tradeflow-art-angle, -2deg)) scale(1.06); } .project-feature-section--tradeflow.is-in-view figure.project-feature__visual--tradeflow > img.project-feature__ambient { filter: saturate(1.78) brightness(1.58) contrast(1.06) drop-shadow(0 0 44px rgba(232, 36, 126, .72)); } .case-dialog[data-case-id="mercurio"] .case-gallery__stage[data-kind="demo"] { height: min(74svh, 700px); min-height: min(68svh, 560px); background: radial-gradient(ellipse at 50% 48%, rgba(62, 100, 75, .2), transparent 42%), #0b0d0c; } @media (max-width: 680px) { .case-dialog[data-case-id="mercurio"] .case-gallery__stage[data-kind="demo"] { height: min(70svh, 620px); min-height: min(66svh, 470px); } } figure.project-feature__visual--casa > img.project-feature__ambient { top: -25%; left: -2%; width: 146%; height: 146%; opacity: 1; transform: translate3d(var(--casa-art-x, 0px), calc(var(--casa-art-y, 0px) + var(--casa-art-pointer-y, 0px)), 0) rotate(var(--casa-art-angle, -4deg)) scale(1.14); filter: saturate(1.9) brightness(1.72) contrast(1.08) drop-shadow(0 0 46px rgba(255, 42, 63, .76)); } .project-feature:hover .project-feature__visual--casa > img.project-feature__ambient, .project-feature:focus-visible .project-feature__visual--casa > img.project-feature__ambient { transform: translate3d(var(--casa-art-x, 0px), calc(var(--casa-art-y, 0px) + var(--casa-art-pointer-y, 0px)), 0) rotate(var(--casa-art-angle, -4deg)) scale(1.2); } figure.project-feature__visual--tradeflow > img.project-feature__ambient { top: -15%; left: -10%; width: 150%; height: 142%; opacity: 1; transform: translate3d(var(--tradeflow-art-x, 0px), calc(var(--tradeflow-art-y, 0px) + var(--tradeflow-art-pointer-y, 0px)), 0) rotate(var(--tradeflow-art-angle, 0deg)) scale(1.08); filter: saturate(1.9) brightness(1.62) contrast(1.08) drop-shadow(0 0 46px rgba(232, 36, 126, .76)); } .project-feature:hover .project-feature__visual--tradeflow > img.project-feature__ambient, .project-feature:focus-visible .project-feature__visual--tradeflow > img.project-feature__ambient { transform: translate3d(var(--tradeflow-art-x, 0px), calc(var(--tradeflow-art-y, 0px) + var(--tradeflow-art-pointer-y, 0px)), 0) rotate(var(--tradeflow-art-angle, 0deg)) scale(1.16); } @media (max-width: 900px) { figure.project-feature__visual--casa > img.project-feature__ambient { top: -20%; left: -3%; width: 148%; height: 145%; } figure.project-feature__visual--tradeflow > img.project-feature__ambient { top: -13%; left: -8%; width: 146%; height: 140%; } } @media (max-width: 520px) { figure.project-feature__visual--casa > img.project-feature__ambient { top: -14%; left: -5%; width: 144%; height: 132%; } figure.project-feature__visual--tradeflow > img.project-feature__ambient { top: -8%; left: -7%; width: 142%; height: 132%; } } :root { color-scheme: light; --page: #F9F7F6; --surface: #FFFFFF; --surface-soft: #F0EFED; --ink: #141414; --muted: #67645E; --quiet: #918D85; --line: rgba(20, 20, 20, .15); --accent: #153BFF; --accent-hover: #0C2EDB; --accent-soft: rgba(21, 59, 255, .13); --accent-ink: #FFFFFF; } html, body { background: var(--page); color: var(--ink); } ::selection { color: #FFFFFF; background: var(--accent); } .site-header { border-bottom-color: rgba(20,20,20,.12); background: rgba(249,247,246,.94); } .header-inner { display: grid; min-height: 68px; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 18px; } .brand { grid-column: 1; grid-row: 1; justify-self: start; } .site-nav { grid-column: 2; grid-row: 1; justify-self: center; gap: clamp(15px,2.2vw,34px); } .site-nav .nav-resume { display: none; } .header-location { display: none; } .header-resume-shortcut { display: inline-flex; grid-column: 3; justify-self: end; min-height: 42px; align-items: center; gap: 11px; padding: 0 24px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: #FFFFFF; font: 600 13px var(--body); text-decoration: none; transition: transform .22s ease, background .22s ease, box-shadow .22s ease; } .header-resume-shortcut span { color: inherit; transition: transform .24s cubic-bezier(.2,.75,.25,1); } .header-resume-shortcut:hover, .header-resume-shortcut:focus-visible { transform: translateY(-2px); background: var(--accent-hover); box-shadow: 0 9px 25px rgba(21,59,255,.2); } .header-resume-shortcut:hover span, .header-resume-shortcut:focus-visible span { transform: translate(3px,-3px); } .site-nav a:hover, .mobile-menu a:hover { color: var(--accent); } .brand-mark span { color: var(--accent); background: none; } .header-location > span { background: var(--accent); } .hero { min-height: max(630px, calc(100svh - 68px)); overflow: hidden; border-bottom: 1px solid var(--line); background: var(--page); color: var(--ink); } .hero::before { opacity: 0; background: none; } .hero::after { top: 12%; right: -8%; width: min(54vw, 760px); height: min(54vw, 760px); background: radial-gradient(circle, rgba(21,59,255,.075), rgba(21,59,255,.025) 42%, transparent 72%); filter: blur(12px); } .hero-layout { min-height: max(630px, calc(100svh - 68px)); padding-block: clamp(40px,6vw,82px); grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); align-items: center; gap: clamp(16px, 3.4vw, 52px); } .hero-copy { max-width: 720px; } .hero-meta { justify-content: flex-start; margin: 0 0 clamp(35px,5vw,66px); color: var(--muted); font-size: 11px; letter-spacing: .15em; } .hero-meta span:first-child { color: var(--muted); } .hero h1 { max-width: 8.2ch; font: 700 clamp(78px,10.25vw,150px)/.84 var(--display); letter-spacing: -.09em; text-transform: none; text-wrap: initial; } .hero h1 br { display: block; } .hero-actions { margin-top: clamp(36px,5vw,64px); } .hero .button--primary { min-height: 64px; gap: 28px; padding: 0 36px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: #FFFFFF; font: 600 16px var(--body); letter-spacing: 0; text-transform: none; transition: transform .22s ease, background .22s ease, box-shadow .22s ease; } .hero .button--primary span { color: inherit; font-size: 23px; transition: transform .25s cubic-bezier(.2,.75,.25,1); } .hero .button--primary:hover, .hero .button--primary:focus-visible { transform: translateY(-2px); border-color: var(--accent-hover); background: var(--accent-hover); color: #FFFFFF; box-shadow: 0 12px 30px rgba(21,59,255,.2); } .hero .button--primary:hover span, .hero .button--primary:focus-visible span { transform: translateX(4px); } .hero-art { position: relative; display: grid; width: 100%; min-width: 0; min-height: 0; aspect-ratio: 1; place-items: center; padding: 0; transform: translate3d(0,var(--hero-scroll-y,0px),0); touch-action: pan-y; } .hero-art__glow { position: absolute; z-index: 0; top: 50%; left: var(--hero-glow-x,50%); width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(21,59,255,.18), rgba(21,59,255,.06) 43%, transparent 72%); filter: blur(25px); opacity: .58; pointer-events: none; transform: translate(-50%,-50%) scale(var(--hero-glow-scale,1)); transition: opacity .45s ease, transform .6s cubic-bezier(.2,.75,.25,1), left .32s ease, top .32s ease; } .hero-art__float { position: relative; z-index: 1; display: block; width: min(100%, 650px); aspect-ratio: 1; transform: translate3d(var(--hero-pointer-x,0px),var(--hero-pointer-y,0px),0); transform-style: preserve-3d; transition: transform .48s cubic-bezier(.2,.75,.25,1), filter .45s ease; will-change: transform; animation: hero-mark-hover 7.4s ease-in-out infinite; } .hero-art__symbol { display: block; width: 100%; height: 100%; object-fit: contain; filter: url(#bernardo-ribbon-paper-matte); mix-blend-mode: normal; transform: none !important; animation: none !important; } .hero-art__orbit { position: absolute; z-index: 1; top: 50%; left: 50%; display: block; width: 132%; max-width: none; height: auto; object-fit: contain; opacity: .88; pointer-events: none; mix-blend-mode: multiply; transform: translate3d(calc(-50% + var(--hero-orbit-x, 0px)), calc(-50% + var(--hero-orbit-y, 0px)), 0) rotate(calc(-5deg + var(--hero-orbit-scroll, 0deg) + var(--hero-orbit-pointer, 0deg))); transform-origin: 50% 50%; transition: transform .55s cubic-bezier(.2,.75,.25,1), opacity .5s ease; will-change: transform; } .visual-filter-defs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(100%); pointer-events: none; } .hero-art:hover .hero-art__glow { opacity: .88; } .hero-art:hover .hero-art__float { filter: none; animation-play-state: paused; } @keyframes hero-mark-hover { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } } .about-section { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(58px,8vw,112px); border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 82% 42%, rgba(214,220,255,.42), transparent 36%), linear-gradient(114deg,#FAF9FF 0%,var(--page) 53%,#F0F2FF 100%); color: var(--ink); } .about-section::before { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 0% 100%, rgba(21,59,255,.08), transparent 48%); content: ""; pointer-events: none; } .about-section__art { position: absolute; z-index: 0; left: -8%; bottom: -26%; display: block; width: min(58vw, 900px); max-width: none; height: auto; opacity: .39; pointer-events: none; mix-blend-mode: multiply; transform: rotate(-7deg); transform-origin: left bottom; animation: about-ribbon-breathe 11s ease-in-out infinite; } @keyframes about-ribbon-breathe { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } } .about-layout { position: relative; z-index: 1; grid-template-columns: minmax(0,.96fr) minmax(0,1.04fr); align-items: center; gap: clamp(32px,5.5vw,80px); } .about-copy { min-width: 0; } .about-copy .eyebrow { margin-bottom: clamp(22px,3vw,38px); color: var(--muted); font: 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; } .about-copy .eyebrow span { color: var(--muted); } .about-copy h2 { max-width: 13ch; font: 650 clamp(42px,4.3vw,62px)/1.01 var(--display); letter-spacing: -.065em; } .about-copy h2 span { color: var(--accent); } .about-copy > p:not(.eyebrow) { max-width: 48ch; margin-top: 18px; color: #343434; font: 400 clamp(15px,1.35vw,18px)/1.55 var(--body); } .about-copy > p + p:not(.eyebrow) { margin-top: 10px; } .about-resume { display: inline-flex; min-height: 60px; align-items: center; gap: clamp(24px,4vw,48px); margin-top: 28px; padding: 0 12px 0 26px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: #FFFFFF; font: 600 15px var(--body); text-decoration: none; transition: transform .22s ease, background .2s ease, box-shadow .22s ease; } .about-resume span { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; color: #FFFFFF; font-size: 18px; animation: about-resume-arrow 3.4s ease-in-out infinite; transition: transform .28s cubic-bezier(.2,.75,.25,1), background .22s ease; } .about-resume span svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .about-resume:hover, .about-resume:focus-visible { transform: translateY(-3px); background: var(--accent-hover); box-shadow: 0 13px 28px rgba(21,59,255,.2); } .about-resume:hover span, .about-resume:focus-visible span { transform: translate(3px,-3px); background: rgba(255,255,255,.14); animation-play-state: paused; } .about-resume:active { transform: translateY(-1px) scale(.985); } @keyframes about-resume-arrow { 0%,80%,100% { transform: translate(0,0); } 88% { transform: translate(2px,-2px); } 94% { transform: translate(0,0); } } .about-panel { min-width: 0; padding: clamp(16px,2.2vw,28px) clamp(18px,2.4vw,32px); border: 1px solid rgba(21,59,255,.17); border-radius: 24px; background: rgba(255,255,255,.56); box-shadow: 0 18px 60px rgba(57,74,168,.055), inset 0 1px rgba(255,255,255,.85); backdrop-filter: blur(12px) saturate(1.08); } .about-panel__header { padding-bottom: 14px; border-bottom: 1px solid rgba(20,20,20,.14); color: var(--muted); } .about-panel__header span:last-child { color: var(--accent); } .about-row { display: grid; grid-template-columns: 34px minmax(94px,.58fr) minmax(0,1.15fr); align-items: center; gap: clamp(10px,1.4vw,18px); padding-block: clamp(11px,1.35vw,16px); border-bottom: 1px solid rgba(20,20,20,.13); transition: transform .28s cubic-bezier(.2,.75,.25,1), background .28s ease; } .about-row:last-child { padding-bottom: 2px; border-bottom: 0; } .about-row__icon { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(21,59,255,.1); border-radius: 11px; background: linear-gradient(145deg,rgba(255,255,255,.95),rgba(225,230,255,.74)); color: var(--accent); transition: transform .3s cubic-bezier(.2,.75,.25,1), box-shadow .3s ease; } .about-row__icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .about-row__label { color: var(--accent); font: 700 10px/1.4 var(--body); letter-spacing: .045em; text-transform: uppercase; } .about-row b { padding-left: clamp(9px,1.4vw,17px); border-left: 1px solid rgba(21,59,255,.2); color: #222222; font: 400 clamp(13px,1.12vw,16px)/1.42 var(--body); } @media (hover:hover) and (pointer:fine) { .about-row:hover { transform: translateX(3px); } .about-row:hover .about-row__icon { transform: rotate(-5deg) scale(1.05); box-shadow: 0 6px 15px rgba(21,59,255,.11); } } .scroll-progress > span { background: var(--accent); } .eyebrow span, .footer-lead__section-index span { color: var(--accent); } .archive-card__type, .archive-card__body b, .case-card__cue i, .work-kicker > span, .work-problem b, .work-solution b, .work-contribution b, .work-disclosure summary span, .method-heading .eyebrow span, .method-steps article > span, .text-link span, .text-link:hover, .case-story__label, .case-dialog__top > p span, .case-dialog__pager button:hover:not(:disabled) { color: var(--accent); } .about-resume span { color: #FFFFFF; } .archive-card[role="button"]:focus-visible, .menu-button:focus-visible, .case-card:focus-visible { outline-color: var(--accent); } .case-card__cue i { border-color: rgba(21,59,255,.5); } .work-card:hover .case-card__cue i, .archive-card:hover .case-card__cue i { border-color: var(--accent); background: var(--accent); color: #FFFFFF; } .case-dialog__close:hover, .case-dialog__close:focus-visible { border-color: var(--accent); } .case-dialog__close:hover > span, .case-dialog__close:focus-visible > span { border-color: var(--accent); background: var(--accent); color: #FFFFFF; } .case-dialog__close:focus-visible, .case-story__tab:focus-visible, .case-gallery__controls button:focus-visible, .case-sheet__actions .button:focus-visible { outline-color: var(--accent); } .screen-gallery__controls button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #FFFFFF; } .screen-gallery__controls button:hover, .case-gallery__controls button:hover { border-color: var(--accent); } .mobile-menu:not([hidden]) a:not(.mobile-menu__resume):hover, .mobile-menu:not([hidden]) a:not(.mobile-menu__resume):focus-visible, .mobile-menu:not([hidden]) a:not(.mobile-menu__resume) span, .menu-button[aria-expanded="true"]:hover, .menu-button[aria-expanded="true"]:focus-visible, .menu-button[aria-expanded="true"]:hover .menu-button__icon, .menu-button[aria-expanded="true"]:focus-visible .menu-button__icon { color: var(--accent); } .menu-button:focus-visible { outline-color: var(--accent); } .menu-button__icon::after { border-color: rgba(21,59,255,.45); } .menu-button[aria-expanded="true"]:hover .menu-button__icon::after, .menu-button[aria-expanded="true"]:focus-visible .menu-button__icon::after { box-shadow: 0 0 18px rgba(21,59,255,.14); } .header-resume-shortcut:hover, .header-resume-shortcut:focus-visible, .mobile-menu:not([hidden]) > a.mobile-menu__resume:hover, .mobile-menu:not([hidden]) > a.mobile-menu__resume:focus-visible, .site-nav .nav-resume:hover, .site-nav .nav-resume:focus-visible { border-color: var(--accent-hover); background: var(--accent-hover); color: #FFFFFF; box-shadow: 0 9px 24px rgba(21,59,255,.2); } .mobile-menu__resume span, .header-resume-shortcut span { color: #FFFFFF; } .footer-lead__form input:focus-visible, .footer-lead__form select:focus-visible, .footer-lead__form textarea:focus-visible { border-color: #5270FF; box-shadow: 0 0 0 3px rgba(21,59,255,.14); } .footer-lead__consent input { accent-color: var(--accent); } .footer-lead__submit { border-color: var(--accent); background: var(--accent); color: #FFFFFF; } .footer-lead__submit i { border-color: rgba(255,255,255,.4); color: #FFFFFF; } .footer-lead__submit:hover, .footer-lead__submit:focus-visible { background: var(--accent-hover); box-shadow: 0 11px 25px rgba(21,59,255,.18); } .footer-lead__section-index span { color: #6F87FF; } @media (max-width: 900px) { .hero-layout { grid-template-columns: minmax(0,1fr) minmax(0,.95fr); gap: 12px; } .hero h1 { font-size: clamp(72px,10vw,112px); } .about-layout { gap: 30px; } .about-row { grid-template-columns: 30px minmax(84px,.54fr) minmax(0,1fr); } } @media (max-width: 760px) { .header-inner { min-height: 64px; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); } .site-nav { display: none; } .header-resume-shortcut { grid-column: 2; grid-row: 1; justify-self: center; min-height: 38px; padding-inline: 16px; font-size: 11px; } .menu-button { display: inline-flex; grid-column: 3; grid-row: 1; justify-self: end; } .hero { min-height: 0; } .hero-layout { min-height: 0; padding-block: 40px 22px; grid-template-columns: minmax(0,1fr); gap: 4px; } .hero-meta { margin-bottom: 27px; font-size: 9px; } .hero h1 { max-width: 100%; font-size: clamp(68px,13.8vw,104px); line-height: .84; } .hero-actions { margin-top: 28px; } .hero .button--primary { min-height: 54px; padding-inline: 26px; font-size: 14px; } .hero-art { width: min(100%,560px); justify-self: center; margin-top: -2px; } .hero-art__float { width: min(100%,560px); } .about-layout { grid-template-columns: minmax(0,1fr); gap: 32px; } .about-copy h2 { max-width: 13ch; font-size: clamp(39px,8vw,58px); } .about-panel { padding: 17px 19px; } .about-row { grid-template-columns: 30px minmax(78px,.56fr) minmax(0,1fr); } } @media (max-width: 480px) { .hero-layout { padding-top: 32px; } .hero-meta { margin-bottom: 25px; } .hero h1 { font-size: clamp(58px,14.8vw,78px); } .hero-art { width: min(100%,420px); margin-top: 5px; } .about-section { padding-block: 48px; } .about-copy .eyebrow { margin-bottom: 22px; } .about-copy h2 { font-size: clamp(37px,9vw,48px); } .about-copy > p:not(.eyebrow) { margin-top: 14px; font-size: 15px; } .about-resume { min-height: 54px; margin-top: 21px; padding-left: 21px; font-size: 14px; } .about-resume span { width: 34px; height: 34px; } .about-panel { padding: 14px 15px; border-radius: 18px; } .about-row { grid-template-columns: 27px minmax(69px,.5fr) minmax(0,1fr); gap: 8px; padding-block: 12px; } .about-row__icon { width: 27px; height: 27px; border-radius: 9px; } .about-row__icon svg { width: 15px; height: 15px; } .about-row__label { font-size: 8px; } .about-row b { padding-left: 8px; font-size: 12px; } .about-section__art { left: -28%; bottom: -12%; width: 115vw; opacity: .24; } } @media (prefers-reduced-motion: reduce) { .hero-art__float, .hero-art__orbit, .about-section__art, .about-resume span { animation: none; } .hero-art__float { transform: none !important; transition: none; } } .hero-art__symbol, .hero-art:hover .hero-art__symbol { filter: url(#bernardo-ribbon-paper-matte) !important; } @media (hover: hover) and (pointer: fine) { .hero-art__float { scale: 1; } .hero-art:hover .hero-art__float { scale: 1.022; filter: drop-shadow(0 18px 30px rgba(21,59,255,.12)); animation-play-state: paused; } .hero-art:hover .hero-art__glow { opacity: 1; transform: translate(-50%,-50%) scale(1.17); } } @media (prefers-reduced-motion: reduce) { .hero-art__float, .hero-art:hover .hero-art__float { scale: 1; filter: none; } } .footer-lead__heading .eyebrow, .footer-lead__section-index > span, .archive-card__type, .archive-card__body > p b { color: #A9B9FF; } .projects-section .eyebrow span, .projects-section .work-kicker > span, .projects-section .work-problem b, .projects-section .work-solution b, .projects-section .work-contribution b, .projects-section .work-disclosure summary span, .case-dialog__top > p span, .case-dialog .case-story__label, .case-dialog .case-process--tabbed li > span { color: #A9B9FF; } .work-card:hover, .work-card:focus-within, .archive-card:hover, .archive-card:focus-within { border-color: rgba(83, 112, 255, .82); box-shadow: 0 18px 40px rgba(21, 59, 255, .14); } .work-card[role="button"]:focus-visible, .archive-card[role="button"]:focus-visible { outline: 2px solid #5370FF; outline-offset: 4px; } .archive-card:hover .case-card__cue i, .archive-card:focus-within .case-card__cue i { border-color: #5370FF; background: #5370FF; color: #FFFFFF; } .work-card .case-card__cue i, .archive-card .case-card__cue i { border-color: rgba(109, 135, 255, .72); color: #A9B9FF; } html body .footer-lead .footer-lead__heading > .eyebrow, html body .archive-card .archive-card__type, html body .archive-card .archive-card__body > p > b, html body .projects-section .work-kicker > span, html body .projects-section .work-problem b, html body .projects-section .work-solution b, html body .projects-section .work-contribution b, html body .case-dialog .case-story__label, html body .case-dialog .case-process--tabbed li > span { color: #B9C8FF !important; } html body .footer-lead .footer-lead__heading > .eyebrow { font-size: 11px !important; letter-spacing: .15em; } html body .archive-card .archive-card__type { font-size: 12px !important; font-weight: 500; line-height: 1.4; } html body .archive-card .archive-card__body > p > b { font-size: 10px !important; font-weight: 500; } html body .archive-card .case-card__cue { font-size: 10px !important; letter-spacing: .11em; } html body .archive-preview__heading .eyebrow { color: #B9C8FF !important; font-size: 11px !important; font-weight: 500; letter-spacing: .12em; } html body .work-card.reveal-on-scroll, html body .archive-card.reveal-on-scroll { opacity: 1 !important; } html body .archive-card:is(:hover, :focus-within), html body .work-card:is(:hover, :focus-within) { border-color: rgba(109, 135, 255, .88) !important; box-shadow: 0 18px 40px rgba(21, 59, 255, .18) !important; } html body .archive-card[role="button"]:focus-visible, html body .work-card[role="button"]:focus-visible { outline-color: #8EA2FF !important; } html body .archive-card:hover .case-card__cue i, html body .archive-card:focus-within .case-card__cue i, html body .work-card:hover .case-card__cue i, html body .work-card:focus-within .case-card__cue i { border-color: #5370FF !important; background: #5370FF !important; color: #FFFFFF !important; } html body .case-dialog__close, html body .case-dialog__close > span { border-color: rgba(109, 135, 255, .62) !important; color: #B9C8FF !important; } html body .case-dialog__close:hover, html body .case-dialog__close:focus-visible { border-color: #5370FF !important; background: rgba(83, 112, 255, .11) !important; color: #FFFFFF !important; } html body .case-dialog__close:hover > span, html body .case-dialog__close:focus-visible > span { border-color: #5370FF !important; background: #5370FF !important; color: #FFFFFF !important; } html body .case-dialog__pager button:hover:not(:disabled) { color: #B9C8FF !important; } .hero { background: radial-gradient(ellipse at 75% 47%, rgba(201,210,255,.44), transparent 39%), linear-gradient(112deg,#FCFBFF 0%,#F9F7F6 54%,#F1F3FF 100%); } .hero::before { opacity: 1; background: radial-gradient(ellipse at 78% 43%, rgba(255,255,255,.38), transparent 50%); } .hero::after { opacity: .8; } .hero-art { isolation: isolate; } .hero-art__glow { z-index: 0; opacity: .78; } .hero-art__orbit { z-index: 1; } .hero-art__float { z-index: 2; } .hero-art:hover .hero-art__orbit { opacity: 1; } .about-section .about-copy h2, .about-section .about-panel { will-change: transform; } @media (max-width: 760px) { .hero { background: radial-gradient(ellipse at 50% 82%, rgba(201,210,255,.46), transparent 45%), linear-gradient(160deg,#FCFBFF 0%,#F9F7F6 72%,#F1F3FF 100%); } .hero-art__orbit { width: 120%; opacity: .82; } .about-section__art { left: -35%; bottom: -9%; width: 132vw; opacity: .2; } .about-panel { backdrop-filter: blur(8px); } } @media (max-width: 380px) { .about-row { grid-template-columns: 25px minmax(62px,.46fr) minmax(0,1fr); gap: 7px; } .about-row__icon { width: 25px; height: 25px; } .about-row__label { font-size: 7.5px; letter-spacing: .02em; } .about-row b { padding-left: 7px; font-size: 11px; } } @media (prefers-reduced-motion: reduce) { .about-section__art { animation: none; } .hero-art__orbit { transition: none; transform: translate(-50%,-50%) rotate(-5deg); } } @media (max-width: 760px) { .case-dialog { width: calc(100vw - 12px); height: min(94dvh, 900px); max-height: calc(100dvh - 12px); overflow: hidden; } .case-dialog__frame { display: grid; height: 100%; min-height: 0; grid-template-rows: auto minmax(0,1fr) auto; padding: 10px; overflow: hidden; } .case-dialog__top { position: relative; min-height: 34px; padding: 1px 0 7px; } .case-dialog__content { display: block; min-height: 0; overflow: hidden; padding-top: 7px; } .case-sheet { height: 100%; min-height: 0; grid-template-rows: auto minmax(0,1fr); } .case-sheet__heading { margin-bottom: 7px; } .case-sheet__heading .eyebrow { margin-bottom: 4px; font-size: 7px; } .case-sheet__heading h2 { font-size: clamp(25px,6.4vw,38px); } .case-dialog__intro { margin-top: 4px; font-size: 9px; line-height: 1.35; } .case-sheet__body { height: 100%; min-height: 0; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,.94fr) minmax(0,1fr); gap: 7px; } .case-gallery { min-height: 0; grid-template-rows: minmax(0,1fr) auto auto; } .case-gallery__stage { position: relative; display: grid; min-height: 0; height: auto; overflow: hidden; border-radius: 7px; isolation: isolate; } .case-gallery__stage[data-kind="demo"] { min-height: 0; height: auto; } .case-gallery__demo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; } .case-gallery__stage[data-format="portrait"] .case-gallery__image { max-width: min(32%,150px); height: 94%; border-width: 3px; border-radius: 15px; } .case-gallery__stage[data-format="wide"] .case-gallery__image { padding: 3px; } .case-gallery__caption { min-height: 12px; margin: 3px 1px; font-size: 6px; line-height: 1.3; } .case-gallery__controls { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; } .case-gallery__controls button { min-height: 28px; padding-inline: 4px; font-size: clamp(7px,1.9vw,8px); } .case-story { min-height: 0; grid-template-rows: auto minmax(0,1fr) auto; } .case-story__tabs { gap: 4px; padding-bottom: 5px; } .case-story__tab { min-height: 32px; padding-inline: 3px; font-size: clamp(7px,1.9vw,8px); } .case-story__panel { min-height: 0; overflow: hidden; padding: 7px 2px; } .case-story__panel .case-story__copy { font-size: clamp(10px,2.4vw,12px); line-height: 1.4; } .case-process--tabbed { gap: 4px; } .case-process--tabbed li { grid-template-columns: 19px minmax(0,1fr); gap: 5px; } .case-process--tabbed li > p { font-size: 8px; line-height: 1.3; } .case-sheet__actions { grid-template-columns: minmax(0,max-content); gap: 4px; padding-top: 5px; } .case-sheet__actions .button { min-height: 34px; padding-inline: 12px; font-size: 8px; } .case-story__status { font-size: 6px; line-height: 1.3; -webkit-line-clamp: 1; } .case-dialog__pager { margin: 0; padding-top: 4px; } .case-dialog__pager button { min-height: 24px; font-size: 7px; } } @media (max-width: 760px) and (max-height: 620px) { .case-sheet__body { grid-template-rows: minmax(0,.78fr) minmax(0,1fr); } .case-gallery__controls button { min-height: 25px; } .case-story__tab { min-height: 29px; } .case-story__panel { padding-block: 4px; } .case-sheet__actions .button { min-height: 30px; } } @media (max-width: 350px) { .case-dialog__frame { padding: 7px; } .case-sheet__body { gap: 5px; } .case-gallery__controls { gap: 3px; } .case-gallery__controls button { min-height: 24px; padding-inline: 2px; font-size: 6.5px; } .case-story__tab { min-height: 28px; font-size: 6.5px; } .case-story__panel .case-story__copy { font-size: 9px; } } html body .case-dialog .case-sheet__body, html body .case-dialog .case-sheet__body > *, html body .case-dialog .case-gallery, html body .case-dialog .case-gallery__stage, html body .case-dialog .case-gallery__caption, html body .case-dialog .case-gallery__controls, html body .case-dialog .case-story, html body .case-dialog .case-story__tabs, html body .case-dialog .case-story__panel, html body .case-dialog .case-sheet__actions { min-width: 0; max-width: 100%; } html body .case-dialog .case-gallery { width: 100%; } html body .case-dialog .case-gallery__stage { width: 100%; } html body .case-dialog .case-gallery__controls { width: 100%; } html body .case-dialog .case-gallery__stage[data-kind="demo"], html body .case-dialog .case-gallery__stage[data-kind="live"] { position: relative; min-height: 0; } html body .case-dialog iframe.case-gallery__demo, html body .case-dialog iframe.case-gallery__live { position: absolute; inset: 0; display: block; width: 100%; max-width: 100%; height: 100%; min-height: 0; max-height: 100%; } html body .case-dialog .case-story { grid-template-rows: auto minmax(0,1fr) auto; row-gap: 6px; } html body .case-dialog .case-story__panel { min-height: 0; } html body .case-dialog .case-sheet__actions { align-self: end; } @media (max-width: 760px) { html body .case-dialog .case-sheet__body { width: 100%; grid-template-columns: minmax(0,1fr); } html body .case-dialog .case-gallery { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto auto; row-gap: 4px; } html body .case-dialog .case-gallery__stage { min-height: 0; } html body .case-dialog[data-case-id="loreal"] .case-gallery__stage[data-kind="demo"], html body .case-dialog[data-case-id="mercurio"] .case-gallery__stage[data-kind="demo"] { height: auto !important; min-height: 0 !important; max-height: none !important; } html body .case-dialog .case-story { row-gap: 6px; } } @media (min-width: 761px) and (max-width: 980px) { html body .case-dialog .case-sheet__body { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(12px,2vw,20px); } html body .case-dialog .case-gallery { row-gap: 6px; } html body .case-dialog .case-gallery__stage { height: min(45svh,430px); min-height: 0; } html body .case-dialog[data-case-id="loreal"] .case-gallery__stage[data-kind="demo"], html body .case-dialog[data-case-id="mercurio"] .case-gallery__stage[data-kind="demo"] { height: min(45svh,430px) !important; min-height: 0 !important; max-height: 430px !important; } } @media (max-width: 760px) and (max-height: 680px) { html body .case-dialog { height: 100dvh; max-height: 100dvh; width: 100vw; max-width: 100vw; border-radius: 0; } html body .case-dialog .case-dialog__frame { padding: 7px 9px; } html body .case-dialog .case-sheet__heading { margin-bottom: 4px; } html body .case-dialog .case-sheet__heading h2 { font-size: clamp(24px,6vw,32px); } html body .case-dialog .case-sheet__body { grid-template-rows: minmax(0,.88fr) minmax(0,1fr); gap: 4px; } html body .case-dialog .case-gallery { row-gap: 2px; } html body .case-dialog .case-story { row-gap: 3px; } html body .case-dialog .case-story__tabs { padding-bottom: 3px; } html body .case-dialog .case-story__panel { padding-block: 3px; } } html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="portrait"] { height: auto !important; min-height: 0 !important; max-height: none !important; padding: 8px !important; overflow: hidden !important; } html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="portrait"] .case-gallery__image { width: auto !important; height: auto !important; max-width: min(100%, 280px) !important; max-height: calc(100% - 2px) !important; aspect-ratio: auto !important; object-fit: contain !important; } .hero-art { grid-template-columns: minmax(0,1fr) !important; grid-template-rows: minmax(0,1fr) !important; align-items: center; justify-items: center; } .hero-art__float { width: min(100%,650px) !important; } .hero-art__symbol { width: 100% !important; height: 100%; } .hero-art__float, .hero-art__orbit { grid-column: 1; grid-row: 1; } html body .header-resume-shortcut { border-color: #153BFF !important; background: #153BFF !important; color: #FFFFFF !important; } html body .header-resume-shortcut span { color: #FFFFFF !important; } html body .header-resume-shortcut:is(:hover,:focus-visible), html body .site-nav .nav-resume:is(:hover,:focus-visible), html body .mobile-menu__resume:is(:hover,:focus-visible) { border-color: #0C2EDB !important; background: #0C2EDB !important; color: #FFFFFF !important; outline-color: #153BFF !important; } html body .work-card:is(:hover,:focus-within), html body .archive-card:is(:hover,:focus-within) { border-color: #5370FF !important; } html body .case-story__tab[aria-selected="true"], html body .case-gallery__controls button[aria-pressed="true"], html body .screen-gallery__controls button[aria-pressed="true"], html body .case-sheet__actions .button--primary, html body .footer-lead__submit { border-color: #153BFF !important; background-color: #153BFF !important; color: #FFFFFF !important; } html body .case-story__tab[aria-selected="true"] *, html body .case-gallery__controls button[aria-pressed="true"] *, html body .screen-gallery__controls button[aria-pressed="true"] *, html body .case-sheet__actions .button--primary *, html body .footer-lead__submit * { color: #FFFFFF !important; } html body .about-copy h2 { position: relative; display: block; visibility: visible; opacity: 1; transform: none; filter: none; color: var(--ink); -webkit-text-fill-color: var(--ink); will-change: auto; } html body .about-copy h2 span { color: var(--accent); -webkit-text-fill-color: var(--accent); } html body .about-section__art { left: -4%; bottom: -3%; width: min(88vw,1280px); opacity: .25; filter: saturate(1.08); transform: translate3d(var(--about-art-x,0px),calc(var(--about-art-scroll-y,0px) + var(--about-art-pointer-y,0px)),0) rotate(-3deg); transition: transform .8s cubic-bezier(.2,.75,.25,1), opacity .45s ease; } html body .about-section { background: radial-gradient(ellipse at var(--about-glow-x,82%) var(--about-glow-y,42%),rgba(21,59,255,.085),transparent 37%),linear-gradient(114deg,#FAF9FF 0%,var(--page) 53%,#F0F2FF 100%); } html body .about-section::after { position: absolute; z-index: 0; left: -11%; bottom: -10%; width: min(84vw,1200px); aspect-ratio: 1774 / 887; background: url("../assets/generated/about-blue-orbit-v1.webp") center / contain no-repeat; opacity: .18; mix-blend-mode: multiply; transform: translate3d(var(--about-art-x,0px),calc(var(--about-art-scroll-y,0px) + var(--about-art-pointer-y,0px)),0) rotate(-3deg); transform-origin: left bottom; transition: transform .8s cubic-bezier(.2,.75,.25,1), opacity .45s ease; content: ""; pointer-events: none; } html body .about-section .about-layout { z-index: 1; } @media (max-width: 760px) { html body .case-dialog .case-dialog__content { overflow-y: hidden; } html body .case-dialog .case-sheet__body { grid-template-rows: minmax(0,1fr) auto; gap: clamp(6px,1svh,10px); } html body .case-dialog .case-gallery { grid-template-rows: minmax(0,1fr) auto auto; min-height: 0; } html body .case-dialog .case-gallery__stage { min-height: 112px; } html body .case-dialog .case-story { height: auto; grid-template-rows: auto auto auto; align-content: start; row-gap: 4px; } html body .case-dialog .case-story__panel { min-height: 0; overflow: visible; padding-block: 5px; } html body .case-dialog .case-story__panel .case-story__copy { line-height: 1.35; } html body .case-dialog .case-sheet__actions { padding-top: 4px; } } @media (max-width: 760px) and (max-height: 680px) { html body .case-dialog .case-sheet__heading { margin-bottom: 3px; } html body .case-dialog .case-sheet__heading h2 { font-size: clamp(23px,6vw,32px); } html body .case-dialog .case-dialog__intro { -webkit-line-clamp: 1; } html body .case-dialog .case-sheet__body { gap: 4px; } html body .case-dialog .case-story__tabs { padding-bottom: 3px; } html body .case-dialog .case-story__tab { min-height: 30px; } html body .case-dialog .case-sheet__actions .button { min-height: 30px; } } @media (max-width: 760px) { html body .about-section::after { left: -12%; bottom: -10%; width: min(150vw,780px); opacity: .14; } } @media (prefers-reduced-motion: reduce) { html body .about-section::after { transition: none; transform: rotate(-3deg); } } html { scroll-padding-top: 92px; } html body .site-header { height: 82px; align-items: flex-start; border-bottom: 1px solid rgba(20,20,20,.12); background: rgba(249,247,246,.94); backdrop-filter: blur(18px) saturate(1.08); transition: height .58s cubic-bezier(.22,1,.36,1), background .4s ease, border-color .4s ease; } html body .site-header .header-inner { position: relative; width: min(calc(100% - clamp(28px,8vw,112px)),1440px); max-width: 1440px; min-height: 68px; margin: 0 auto; padding: 0; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 22px; pointer-events: auto; transition: width .62s cubic-bezier(.22,1,.36,1), min-height .52s cubic-bezier(.22,1,.36,1), margin .52s cubic-bezier(.22,1,.36,1), padding .52s cubic-bezier(.22,1,.36,1), border-radius .52s cubic-bezier(.22,1,.36,1), border-color .4s ease, background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease; } html body .site-header .brand, html body .site-header .site-nav, html body .site-header .header-resume-shortcut, html body .site-header .menu-button { pointer-events: auto; } html body .site-header .site-nav { display:flex; grid-column:2; justify-self:center; gap:clamp(18px,2.5vw,38px); } html body .site-header .site-nav a { position:relative; display:inline-flex; align-items:center; color:#262633; font:500 13px/1 var(--body); letter-spacing:-.01em; text-transform:none; transition:color .2s ease, transform .3s cubic-bezier(.2,.75,.25,1); } html body .site-header .site-nav a:is(:hover,:focus-visible) { color:var(--accent); transform:translateY(-1px); } html body .site-header .site-nav a[aria-current="location"] { color:var(--accent); } html body .site-header .site-nav a[aria-current="location"]::after { position:absolute; right:0; bottom:-8px; left:0; height:1px; background:var(--accent); content:""; } html body .site-header .brand { grid-column:1; justify-self:start; } html body .site-header .brand-mark { position:relative; display:inline-block; color:#141414; font:700 22px/.9 var(--display); font-kerning:normal; letter-spacing:-.035em; } html body .site-header .brand-mark span { position:absolute; bottom:-6px; left:50%; width:4px; height:4px; border-radius:50%; background:var(--accent); color:transparent; font-size:0; transform:translateX(-50%); } html body .site-header .header-resume-shortcut { grid-column:3; justify-self:end; min-width:116px; min-height:42px; padding:0 18px; border:1px solid var(--accent); background:var(--accent); color:#fff; font:600 13px var(--body); } html body .site-header.is-scrolled { height: 72px; border-bottom-color: transparent; background: transparent; backdrop-filter: none; } html body .site-header.is-scrolled .header-inner { width:max-content; max-width:calc(100vw - 28px); min-height:50px; margin:11px auto 0; padding:4px 7px 4px 15px; grid-template-columns:auto auto auto; gap:clamp(16px,2.3vw,32px); border:1px solid rgba(33,46,104,.15); border-radius:999px; background:rgba(250,249,247,.9); box-shadow:0 12px 36px rgba(25,34,75,.09), inset 0 1px 0 rgba(255,255,255,.82); backdrop-filter:blur(22px) saturate(1.18); } html body .site-header.is-scrolled .brand { grid-column:1; } html body .site-header.is-scrolled .brand-mark { font-size:20px; } html body .site-header.is-scrolled .site-nav { grid-column:2; gap:clamp(14px,2vw,28px); } html body .site-header.is-scrolled .site-nav a { font-size:12px; } html body .site-header.is-scrolled .header-resume-shortcut { grid-column:3; width:40px; min-width:40px; min-height:40px; justify-content:center; gap:0; padding:0; border-radius:50%; font-size:0; box-shadow:0 5px 15px rgba(21,59,255,.16); } html body .site-header.is-scrolled .header-resume-shortcut span { font-size:19px; } html body .site-header.is-scrolled .header-resume-shortcut:is(:hover,:focus-visible) { transform:translateY(-1px) scale(1.045); } html body .site-header .mobile-menu { pointer-events:auto; } html body .site-footer { position:relative; isolation:isolate; overflow:hidden; border-top:1px solid rgba(154,173,255,.16); background:radial-gradient(ellipse at 77% 17%,rgba(25,58,183,.16),transparent 40%),linear-gradient(180deg,#080C19 0%,#070A14 100%); color:#F5F6FF; } html body .site-footer::before { position:absolute; z-index:0; inset:-2% -4% 0; background:url("../assets/generated/bernardo-footer-orbits.svg") center 34% / min(145%,1900px) auto no-repeat; opacity:.08; transform:translate3d(0,var(--footer-art-y,0px),0) scale(1.015); transform-origin:center top; transition:opacity .7s ease,transform 1.1s cubic-bezier(.22,1,.36,1); content:""; pointer-events:none; } html body .site-footer.is-in-view::before { opacity:.82; } html body .site-footer::after { position:absolute; z-index:0; inset:0; background:linear-gradient(180deg,rgba(7,10,20,.34) 0%,rgba(7,10,20,.2) 45%,rgba(7,10,20,.82) 100%); content:""; pointer-events:none; } html body .footer-main--closing { position:relative; z-index:1; gap:clamp(40px,6.8vw,96px); padding-block:clamp(56px,7vw,92px) 28px; } html body .footer-lead { display:grid; width:100%; grid-template-columns:minmax(250px,.77fr) minmax(0,1.23fr); align-items:start; gap:14px clamp(32px,5.5vw,78px); padding:0; border:0; border-radius:0; background:transparent; } html body .footer-lead__section-index { grid-column:1/-1; margin:0; color:rgba(226,231,255,.66); font-size:10px; letter-spacing:.18em; } html body .footer-lead__section-index span { color:#6F8AFF; } html body .footer-lead > .footer-main__kicker { grid-column:1/-1; margin:0 0 5px; color:rgba(190,199,232,.64); font:9px/1.4 var(--mono); letter-spacing:.15em; } html body .footer-lead__heading { grid-column:1; grid-row:3; max-width:430px; align-self:center; padding-block:13px; } html body .footer-lead__heading .eyebrow { margin:0 0 22px; color:#8198FF; font:9px/1.3 var(--mono); letter-spacing:.16em; } html body .footer-lead__heading h3 { color:#F6F7FF; font:650 clamp(44px,5.6vw,76px)/.94 var(--display); letter-spacing:-.065em; text-wrap:balance; } html body .footer-lead__heading h3 span { color:#3157FF; } html body .footer-lead__intro { max-width:37ch; margin:24px 0 0; color:#C0C5D4; font:400 clamp(15px,1.25vw,18px)/1.55 var(--body); } html body .footer-lead__topics { display:flex; flex-wrap:wrap; gap:0; margin:34px 0 0; padding:0; list-style:none; } html body .footer-lead__topics li { padding:0 17px; border-left:1px solid rgba(180,194,255,.26); color:#E3E7F6; font:12px/1.3 var(--body); } html body .footer-lead__topics li:first-child { padding-left:0; border-left:0; } html body .footer-lead__form { position:relative; grid-column:2; grid-row:3; display:grid; gap:17px; margin:0; padding:clamp(22px,3vw,38px); border:1px solid rgba(125,150,255,.35); border-radius:24px; background:linear-gradient(145deg,rgba(19,28,55,.88),rgba(11,16,32,.93)); box-shadow:0 22px 70px rgba(2,5,20,.28),inset 0 1px 0 rgba(230,235,255,.055); transition:border-color .45s ease,box-shadow .45s ease,transform .45s cubic-bezier(.2,.75,.25,1); } html body .footer-lead__form:focus-within { border-color:rgba(109,139,255,.72); box-shadow:0 22px 76px rgba(2,5,20,.3),0 0 34px rgba(37,77,255,.12),inset 0 1px 0 rgba(230,235,255,.07); } html body .footer-lead__form-head { display:flex; align-items:center; gap:16px; margin-bottom:3px; } html body .footer-lead__mail-icon { display:grid; width:44px; height:44px; flex:0 0 auto; place-items:center; border:1px solid rgba(69,101,255,.65); border-radius:13px; background:rgba(32,63,191,.2); color:#AFC0FF; box-shadow:0 0 22px rgba(35,75,255,.13); } html body .footer-lead__mail-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } html body .footer-lead__form-head h4 { margin:0; color:#F4F6FF; font:600 20px/1.15 var(--display); letter-spacing:-.035em; } html body .footer-lead__form-head p { margin:5px 0 0; color:#AAB2CA; font:400 13px/1.45 var(--body); } html body .footer-lead__fields { gap:14px 16px; } html body .footer-lead__form label:not(.footer-lead__consent):not(.footer-lead__honeypot) { gap:7px; color:#E0E4F0; font:500 11px/1.4 var(--body); letter-spacing:0; } html body .footer-lead__form label small { color:#9DA8C6; } html body .footer-lead__form input:not([type="checkbox"]), html body .footer-lead__form select, html body .footer-lead__form textarea { min-height:46px; padding:11px 13px; border-color:rgba(176,189,230,.28); border-radius:9px; background:rgba(7,11,24,.62); color:#F5F6FF; font:400 13px/1.45 var(--body); } html body .footer-lead__form textarea { min-height:100px; } html body .footer-lead__form input::placeholder, html body .footer-lead__form textarea::placeholder { color:#8F98B0; } html body .footer-lead__form select { appearance:none; -webkit-appearance:none; background-color:rgba(7,11,24,.62); background-image:linear-gradient(45deg,transparent 50%,#AFC0FF 50%),linear-gradient(135deg,#AFC0FF 50%,transparent 50%); background-position:calc(100% - 17px) 20px,calc(100% - 12px) 20px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; } html body .footer-lead__form select option { background:#10172B; color:#F5F6FF; } html body .footer-lead__form input:focus-visible, html body .footer-lead__form select:focus-visible, html body .footer-lead__form textarea:focus-visible { border-color:#7891FF; background-color:rgba(10,17,40,.92); box-shadow:0 0 0 3px rgba(49,87,255,.18); } html body .footer-lead__form :user-invalid:not(:focus) { border-color:rgba(239,114,132,.72); } html body .footer-lead__consent { color:#BBC2D5; font-size:12px; line-height:1.55; } html body .footer-lead__consent input { width:17px; height:17px; accent-color:#3157FF; } html body .footer-lead__consent a { color:#F2F4FF; text-decoration-color:rgba(191,204,255,.55); } html body .footer-lead__submit { width:100%; min-height:54px; padding:6px 8px 6px 20px; border-color:#153BFF; background:#153BFF; color:#fff; font:600 14px var(--body); box-shadow:0 8px 24px rgba(21,59,255,.15); } html body .footer-lead__submit i { width:40px; height:40px; border-color:rgba(255,255,255,.35); color:#fff; font-size:19px; } html body .footer-lead__submit:is(:hover,:focus-visible) { transform:translateY(-2px); border-color:#3157FF; background:#3157FF; box-shadow:0 13px 30px rgba(21,59,255,.26); } html body .footer-lead__submit:is(:hover,:focus-visible) i { transform:translate(2px,-2px); background:rgba(255,255,255,.12); } html body .footer-lead__submit:active { transform:translateY(0) scale(.99); } html body .footer-lead__status { color:#DCE2F5; font:12px/1.45 var(--body); } html body .footer-lead__privacy-note { color:#9AA4BD; font:10px/1.55 var(--body); } html body .footer-lead__email-fallback { color:#DCE2F5; } html body .footer-signoff { gap:clamp(22px,3vw,36px); } html body .footer-signoff__meta { grid-template-columns:minmax(0,1fr) auto; gap:16px 28px; } html body .footer-signoff .footer-manifesto { color:#C0C7DB; font:400 14px/1.4 var(--body); } html body .footer-signoff .footer-contact { width:auto; justify-self:end; grid-template-columns:repeat(3,auto); gap:clamp(18px,3vw,40px); } html body .footer-signoff .footer-contact a { min-height:34px; padding:8px 0; border-color:rgba(184,198,255,.22); color:#D5DAE9; font:500 11px var(--body); transition:color .22s ease,border-color .22s ease; } html body .footer-signoff .footer-contact a:is(:hover,:focus-visible) { color:#fff; border-color:#6680FF; } html body .footer-signoff .footer-contact a span { color:#8198FF; } html body .footer-signoff .footer-legal { border-top-color:rgba(184,198,255,.18); color:#A7B0C7; font:10px/1.5 var(--mono); } html body .footer-signoff .privacy-button { color:#C1C8DB; } html body .footer-signoff h2.footer-wordmark { display:flex; flex-wrap:nowrap; align-items:baseline; justify-content:flex-start; gap:.16em; width:100%; margin:0; overflow:visible; color:#F5F6FF; -webkit-text-fill-color:#F5F6FF; font:700 clamp(46px,10.7vw,154px)/.88 var(--display); letter-spacing:-.055em; white-space:nowrap; text-overflow:clip; } html body .footer-signoff h2.footer-wordmark span:first-child { color:#F5F6FF; -webkit-text-fill-color:#F5F6FF; } html body .footer-signoff h2.footer-wordmark span:last-child { color:#3157FF; -webkit-text-fill-color:#3157FF; } html body .footer-signoff h2.footer-wordmark span { display:block; } html body .footer-signoff .footer-wordmark.reveal-on-scroll:not(.is-revealed) { opacity:.2; filter:blur(15px); transform:translateY(20px); } html body .footer-signoff .footer-wordmark.reveal-on-scroll.is-revealed { opacity:1; filter:blur(0); transform:none; } html body .footer-legal .privacy-button:is(:hover,:focus-visible) { color:#AFC0FF; } @media (max-width: 900px) { html body .footer-lead { grid-template-columns:minmax(220px,.78fr) minmax(0,1.22fr); gap:14px 28px; } html body .footer-lead__heading h3 { font-size:clamp(40px,6vw,60px); } html body .footer-lead__form { padding:24px; } html body .footer-signoff h2.footer-wordmark { font-size:clamp(48px,10vw,94px); } } @media (max-width: 760px) { html body .site-header { height:72px; } html body .site-header .header-inner { width:calc(100% - 32px); min-height:64px; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; } html body .site-header .site-nav { display:none; } html body .site-header .header-resume-shortcut { grid-column:2; min-width:104px; min-height:40px; padding:0 15px; font-size:12px; } html body .site-header .menu-button { display:inline-flex; grid-column:3; justify-self:end; min-height:44px; color:#191A22; } html body .site-header.is-scrolled { height:66px; } html body .site-header.is-scrolled .header-inner { width:calc(100% - 20px); max-width:540px; min-height:52px; margin:7px auto 0; padding:4px 8px 4px 13px; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; } html body .site-header.is-scrolled .brand-mark { font-size:20px; } html body .site-header.is-scrolled .header-resume-shortcut { grid-column:2; width:auto; min-width:96px; min-height:38px; padding:0 14px; border-radius:999px; font-size:11px; } html body .site-header.is-scrolled .header-resume-shortcut span { font-size:14px; } html body .site-header.is-scrolled .menu-button { min-height:40px; } html body .mobile-menu:not([hidden]) { top:calc(100% + 9px); left:10px; right:10px; padding:12px 22px 20px; border:1px solid rgba(33,46,104,.15); border-radius:20px; background:#FAF9F7; box-shadow:0 18px 55px rgba(15,22,55,.16); backdrop-filter:blur(18px); } html body .mobile-menu:not([hidden]) a:not(.mobile-menu__resume) { border-color:rgba(20,20,20,.1); color:#20212A; } html body .mobile-menu:not([hidden]) a:not(.mobile-menu__resume) span { color:var(--accent); } html body .mobile-menu:not([hidden]) a:not(.mobile-menu__resume):is(:hover,:focus-visible) { color:var(--accent); } html body .mobile-menu:not([hidden]) > a.mobile-menu__resume { border-color:var(--accent); background:var(--accent); color:#fff; } html body .mobile-menu:not([hidden]) > a.mobile-menu__resume span { color:#fff; } html body .footer-main--closing { gap:42px; padding-block:54px 22px; } html body .footer-lead { grid-template-columns:minmax(0,1fr); gap:10px; } html body .footer-lead__section-index, html body .footer-lead > .footer-main__kicker { grid-column:1; } html body .footer-lead__heading { grid-column:1; grid-row:auto; max-width:600px; padding-block:12px 8px; } html body .footer-lead__heading h3 { max-width:10ch; font-size:clamp(48px,10.5vw,76px); } html body .footer-lead__intro { max-width:45ch; margin-top:18px; } html body .footer-lead__topics { margin-top:23px; } html body .footer-lead__form { grid-column:1; grid-row:auto; margin-top:12px; } html body .footer-signoff__meta { grid-template-columns:1fr; gap:14px; } html body .footer-signoff .footer-contact { grid-column:1; justify-self:start; grid-template-columns:repeat(3,auto); gap:20px; } html body .footer-signoff .footer-legal { grid-column:1; } html body .footer-signoff h2.footer-wordmark { justify-content:flex-start; gap:.16em; font-size:clamp(54px,11vw,92px); } } @media (max-width: 520px) { html body .site-header .header-inner { width:calc(100% - 24px); } html body .site-header .header-resume-shortcut { min-width:92px; gap:6px; padding-inline:11px; font-size:11px; } html body .site-header.is-scrolled .header-inner { width:calc(100% - 14px); gap:5px; padding-left:10px; } html body .site-header.is-scrolled .header-resume-shortcut { min-width:86px; padding-inline:10px; font-size:10px; } html body .site-header .menu-button { gap:7px; font-size:10px; letter-spacing:.14em; } html body .footer-lead__form { gap:15px; padding:20px 16px; border-radius:19px; } html body .footer-lead__form-head { gap:12px; } html body .footer-lead__mail-icon { width:40px; height:40px; } html body .footer-lead__form-head h4 { font-size:18px; } html body .footer-lead__form-head p { font-size:12px; } html body .footer-lead__fields { grid-template-columns:1fr; gap:12px; } html body .footer-lead__form textarea { min-height:92px; } html body .footer-lead__topics li { padding-inline:11px; font-size:11px; } html body .footer-signoff .footer-contact { grid-template-columns:1fr; gap:2px; } html body .footer-signoff .footer-contact a { width:100%; } html body .footer-signoff .footer-legal { flex-direction:column; align-items:flex-start; } html body .footer-signoff h2.footer-wordmark { flex-wrap:wrap; gap:0 .14em; font-size:clamp(39px,10.5vw,58px); line-height:.95; } html body .site-footer::before { inset:2% -35% 0; background-position:48% 20%; background-size:auto 820px; opacity:.56; } } @media (max-width: 360px) { html body .site-header .brand-mark { font-size:19px; } html body .site-header .header-resume-shortcut { min-width:83px; gap:4px; padding-inline:8px; font-size:10px; } html body .site-header .menu-button { gap:5px; font-size:9px; } } @media (prefers-reduced-motion: reduce) { html body .site-header, html body .site-header .header-inner, html body .site-header .site-nav a, html body .site-header .header-resume-shortcut, html body .footer-lead__form, html body .footer-lead__submit, html body .footer-lead__submit i, html body .footer-signoff .footer-wordmark, html body .site-footer::before { transition:none !important; animation:none !important; } html body .site-footer::before { transform:none; } } html body .site-header .brand-mark { position:relative; display:inline-flex; width:38px; height:42px; align-items:flex-start; justify-content:center; padding-top:8px; font-size:22px; line-height:.9; letter-spacing:-.025em; white-space:nowrap; } html body .site-header .brand-mark > span { position:absolute; top:auto; right:auto; bottom:4px; left:50%; display:block; width:4px; height:4px; margin:0; transform:translateX(-50%); } html body .site-header .brand-mark { display:flex !important; width:40px; height:25px; flex:0 0 40px; flex-direction:column; align-items:center; justify-content:center; gap:1px; overflow:visible; padding:0; border:0; border-radius:0; color:#141414; font-size:0; line-height:0; letter-spacing:0; } html body .site-header .brand-mark > img { display:block; width:38px; height:16px; flex:none; object-fit:contain; } html body .site-header .brand-mark > .brand-mark__dot { position:static; display:block; width:4px; height:4px; flex:none; margin:0; border-radius:50%; background:#153BFF; transform:none; } html body .archive-preview__heading .eyebrow span { color:#B9C8FF !important; } html body .mobile-menu:not([hidden]) { border-color:rgba(20,20,20,.12) !important; background:#F9F7F6 !important; color:#171820 !important; } html body .mobile-menu:not([hidden]) a:not(.mobile-menu__resume) { color:#20212A !important; } html body .mobile-menu:not([hidden]) a:not(.mobile-menu__resume) span { color:#153BFF !important; } html body .mobile-menu:not([hidden]) > a.mobile-menu__resume { border-color:#153BFF !important; background:#153BFF !important; color:#FFFFFF !important; } html body .mobile-menu:not([hidden]) > a.mobile-menu__resume span { color:#FFFFFF !important; } html body .case-dialog .case-gallery__controls button[aria-pressed="true"], html body .case-dialog .case-story__tab[aria-selected="true"], html body .case-dialog .case-sheet__actions .button, html body .screen-gallery__controls button[aria-pressed="true"] { border-color:#153BFF !important; background:#153BFF !important; color:#FFFFFF !important; } html body .case-dialog .case-gallery__controls button[aria-pressed="true"] *, html body .case-dialog .case-story__tab[aria-selected="true"] *, html body .case-dialog .case-sheet__actions .button *, html body .screen-gallery__controls button[aria-pressed="true"] * { color:#FFFFFF !important; } html body .site-header.is-scrolled .header-inner { width:min(650px,calc(100vw - 28px)); grid-template-columns:auto minmax(0,1fr) auto; } html body .site-header.is-scrolled .brand-mark { width:37px; height:23px; flex-basis:37px; } html body .site-header.is-scrolled .brand-mark > img { width:35px; height:15px; } html body .site-header.is-scrolled .brand-mark > .brand-mark__dot { width:3.5px; height:3.5px; } html body .hero-art__orbit { aspect-ratio:3/2; } html body .hero-art__orbit > img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; } html body .hero-art__symbol-frame { display:block; width:100%; height:100%; line-height:0; } @media (max-width:760px) { html body .site-header.is-scrolled .header-inner { width:calc(100% - 20px); grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); } } html body dialog.case-dialog:not([open]):not(.is-fallback-open) { display:none !important; } html body dialog.case-dialog[open], html body dialog.case-dialog.is-fallback-open { display:block !important; } html body .footer-lead__heading .eyebrow, html body .case-dialog .case-story__label, html body .case-dialog .case-dialog__top > p span, html body .case-dialog .work-problem b, html body .case-dialog .work-solution b, html body .case-dialog .work-contribution b, html body .archive-card__type { color:#9FB1FF; } html body .case-dialog .case-dialog__close:hover, html body .case-dialog .case-dialog__close:focus-visible { border-color:#6680FF; color:#fff; } html body .case-dialog .case-dialog__close:is(:hover,:focus-visible) > span { border-color:#153BFF; background:#153BFF; color:#fff; } html body .case-dialog .case-gallery__controls button[aria-pressed="true"], html body .case-dialog .case-story__tab[aria-pressed="true"], html body .case-dialog .case-sheet__actions .button { border-color:#153BFF; background:#153BFF; color:#fff; } html body .case-dialog .case-gallery__controls button:hover, html body .case-dialog .case-story__tab:hover, html body .case-dialog .case-sheet__actions .button:is(:hover,:focus-visible) { border-color:#6680FF; } html body .case-dialog .case-dialog__pager button:hover:not(:disabled), html body .case-dialog .case-story__tab:hover { color:#AFC0FF; } html body .archive-card:hover, html body .archive-card:focus-within, html body .work-card:hover, html body .work-card:focus-within { border-color:rgba(49,87,255,.72); } html body .archive-card:focus-visible, html body .work-card:focus-visible, html body .case-dialog :is(button,a):focus-visible { outline-color:#6680FF; } html body .case-card__cue i, html body .case-card__cue span, html body .archive-card__cue i { color:#9FB1FF; } html body .work-card:hover .case-card__cue i, html body .archive-card:hover .case-card__cue i { border-color:#153BFF; background:#153BFF; color:#fff; } html body .case-dialog .case-dialog__content { overflow:hidden !important; scrollbar-gutter:auto; } html body .case-dialog .case-sheet { min-height:0; grid-template-rows:auto minmax(0,1fr); } html body .case-dialog .case-sheet__body { height:auto !important; min-height:0; } html body .case-dialog .case-gallery { min-height:0; grid-template-rows:minmax(0,1fr) auto auto; overflow:hidden; } html body .case-dialog .case-gallery__stage[data-kind="demo"], html body .case-dialog .case-gallery__stage[data-kind="live"] { height:auto !important; min-height:0 !important; max-height:none !important; } html body .case-dialog iframe.case-gallery__demo, html body .case-dialog iframe.case-gallery__live { min-height:0 !important; max-height:100% !important; } html body .case-dialog .case-sheet__actions:has(.case-story__status) { grid-template-columns:repeat(2,minmax(0,1fr)); } html body .case-dialog .case-sheet__actions .button { justify-self:start; } html body .case-dialog .case-sheet__actions .case-story__status { grid-column:1 / -1; width:100%; min-width:0; max-width:100%; overflow-wrap:anywhere; white-space:normal; } html body dialog.case-dialog.is-fallback-open { position: fixed; inset: 0; display: block; z-index: 9999; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; overflow: hidden; border-radius: 0; background: #141414; color: #F3F0E9; } @media (min-width:761px) { html body .case-dialog .case-gallery__stage { min-height:0; } html body .case-dialog .case-gallery__caption { margin-block:3px; } html body .case-dialog .case-gallery__controls { gap:4px; } html body .case-dialog .case-gallery__controls button { min-height:30px; } } @media (max-width:760px) { html body .case-dialog { height:min(98dvh,900px); max-height:calc(100dvh - 12px); } } html body svg.ui-icon { display:inline-block; width:1.1em; height:1.1em; min-width:1.1em; flex:none; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; } html body svg.ui-icon path { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } html body .case-dialog .case-gallery__controls { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; justify-items:center; gap:12px; } html body .case-dialog .case-gallery__controls .case-gallery__step { display:grid; width:44px; min-width:44px; height:44px; min-height:44px; place-items:center; padding:0; border:1px solid rgba(235,239,255,.26); border-radius:50%; background:rgba(255,255,255,.025); color:#F5F6FC; cursor:pointer; touch-action:manipulation; transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease; } html body .case-dialog .case-gallery__controls .case-gallery__step:hover { transform:translateY(-1px); border-color:rgba(112,140,255,.85); background:rgba(49,87,255,.12); } html body .case-dialog .case-gallery__controls .case-gallery__step:active { transform:scale(.96); } html body .case-dialog .case-gallery__controls .case-gallery__step .ui-icon { width:19px; height:19px; min-width:19px; } html body .case-dialog .case-gallery__counter { justify-self:center; color:#C9CDE0; font:10px/1 var(--mono); font-variant-numeric:tabular-nums; letter-spacing:.12em; } html body .case-dialog .case-story { display:grid; min-height:0; grid-template-rows:minmax(0,1fr) auto; align-content:stretch; gap:14px; } html body .case-dialog .case-story__summary { display:grid; min-height:0; grid-template-rows:repeat(3,minmax(0,1fr)); } html body .case-dialog .case-story__point { display:grid; min-width:0; grid-template-columns:minmax(94px,.28fr) minmax(0,1fr); align-content:start; gap:14px; padding:15px 0; border-bottom:1px solid rgba(230,234,250,.14); } html body .case-dialog .case-story__point:last-child { border-bottom:0; } html body .case-dialog .case-story__label { margin:2px 0 0; color:#AFC0FF !important; font:9px/1.4 var(--mono); letter-spacing:.13em; text-transform:uppercase; } html body .case-dialog .case-story__copy { min-width:0; margin:0; color:#E0E2EB; font:13px/1.55 var(--body); overflow-wrap:anywhere; } html body .case-dialog .case-sheet__actions { display:grid; grid-template-columns:minmax(0,max-content) minmax(0,1fr); align-items:center; justify-items:start; gap:12px 18px; padding-top:14px; border-top:1px solid rgba(230,234,250,.16); } html body .case-dialog .case-sheet__actions .case-story__status { grid-column:1/-1; max-width:100%; color:#A5A8B6; font:10px/1.5 var(--mono); } @media (max-width:760px) { html body .case-dialog .case-gallery__controls { grid-template-columns:44px minmax(0,1fr) 44px; gap:8px; } html body .case-dialog .case-story { grid-template-rows:minmax(0,1fr) auto; gap:8px; } html body .case-dialog .case-story__point { grid-template-columns:minmax(0,1fr); gap:4px; padding:8px 0; } html body .case-dialog .case-story__label { margin:0; font-size:8px; } html body .case-dialog .case-story__copy { font-size:12px; line-height:1.42; } html body .case-dialog .case-sheet__actions { grid-template-columns:minmax(0,1fr); gap:7px; padding-top:9px; } html body .case-dialog .case-sheet__actions .case-story__status { grid-column:1; font-size:9px; } } @media (max-width:760px) { html body .hero-art__float { animation:none; will-change:auto; } html body .hero-art__orbit { will-change:auto; } } @media (max-width:760px) { html body .hero-art__orbit { display:none !important; } html body .hero-art::before, html body .hero-art::after { position:absolute; z-index:1; top:50%; left:50%; display:block; border:1px solid rgba(21,59,255,.2); border-radius:50%; content:""; pointer-events:none; } html body .hero-art::before { width:116%; height:46%; transform:translate(-50%,-50%) rotate(-13deg); box-shadow:0 0 28px rgba(21,59,255,.08); } html body .hero-art::after { width:128%; height:35%; border-color:rgba(21,59,255,.12); transform:translate(-50%,-50%) rotate(17deg); } html body .hero-art__float { z-index:2; } } @media (max-width:760px) { html body dialog.case-dialog { position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; overflow:hidden; border:0; border-radius:0; } html body .case-dialog .case-dialog__frame { display:flex; width:100%; height:100%; min-height:0; flex-direction:column; overflow:hidden; padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); } html body .case-dialog .case-dialog__top { position:relative; z-index:2; display:flex; min-height:54px; flex:0 0 auto; align-items:center; justify-content:space-between; gap:10px; padding:4px 0 9px; background:#141414; } html body .case-dialog .case-dialog__close { min-height:44px; flex:0 0 auto; padding:5px 7px 5px 12px; font-size:11px; } html body .case-dialog .case-dialog__close > span { width:32px; height:32px; font-size:17px; } html body .case-dialog .case-dialog__content { display:block; width:100%; min-height:0; height:auto; flex:1 1 auto; overflow-x:hidden !important; overflow-y:auto !important; padding:14px 1px 26px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y pinch-zoom; scrollbar-width:none; scroll-behavior:auto; } html body .case-dialog .case-dialog__content::-webkit-scrollbar { display:none; } html body .case-dialog .case-sheet { display:block; width:100%; height:auto !important; min-height:0; overflow:visible; } html body .case-dialog .case-sheet__heading { max-width:none; margin:0 0 18px; } html body .case-dialog .case-sheet__heading .eyebrow { margin:0 0 7px; color:#AFC0FF; font-size:9px; line-height:1.5; letter-spacing:.11em; overflow-wrap:anywhere; } html body .case-dialog .case-sheet__heading h2 { display:block; margin:0; color:#F3F0E9; font-size:clamp(31px,8.8vw,42px); line-height:1.02; letter-spacing:-.06em; outline:0 !important; box-shadow:none !important; -webkit-tap-highlight-color:transparent; } html body .case-dialog .case-sheet__heading h2:focus, html body .case-dialog .case-sheet__heading h2:focus-visible { outline:0 !important; box-shadow:none !important; } html body .case-dialog .case-dialog__intro { display:block; max-width:62ch; margin:8px 0 0; overflow:visible; color:#C9C7D0; font-size:14px; line-height:1.5; -webkit-line-clamp:unset; } html body .case-dialog .case-sheet__body { display:grid; width:100%; height:auto !important; min-height:0; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:auto auto !important; align-items:start; gap:22px; overflow:visible; } html body .case-dialog .case-gallery { display:grid; width:100%; min-height:0; grid-template-rows:auto auto auto; align-content:start; gap:7px; overflow:visible; } html body .case-dialog .case-gallery__stage { position:relative; display:grid; width:100%; min-height:0; height:auto; max-height:none; place-items:center; overflow:hidden; border-radius:10px; } html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="wide"], html body .case-dialog .case-gallery__stage[data-kind="video"][data-format="wide"] { aspect-ratio:16 / 9; min-height:175px; } html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="portrait"] { height:min(62svh,520px); min-height:300px; padding:8px; } html body .case-dialog .case-gallery__stage[data-kind="demo"], html body .case-dialog .case-gallery__stage[data-kind="live"] { height:min(66svh,560px) !important; min-height:400px !important; max-height:560px !important; aspect-ratio:auto; overflow:hidden; } html body .case-dialog iframe.case-gallery__demo, html body .case-dialog iframe.case-gallery__live { position:absolute; inset:0; display:block; width:100%; height:100%; min-height:0 !important; max-height:none !important; } html body .case-dialog .case-gallery__stage[data-format="wide"] .case-gallery__image, html body .case-dialog .case-gallery__stage[data-format="wide"] .case-gallery__video { display:block; width:100%; max-width:100%; height:100%; max-height:100%; padding:4px; object-fit:contain; } html body .case-dialog .case-gallery__stage[data-format="portrait"] .case-gallery__image { display:block; width:auto; height:auto; max-width:min(100%,330px); max-height:100%; border-width:3px; border-radius:18px; object-fit:contain; } html body .case-dialog .case-gallery__caption { display:block; min-height:0; margin:2px 1px 5px; overflow:visible; color:#B8B9C5; font-size:10px; line-height:1.5; overflow-wrap:anywhere; -webkit-line-clamp:unset; } html body .case-dialog .case-gallery__controls { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; align-items:center; gap:10px; } html body .case-dialog .case-gallery__controls .case-gallery__step { width:48px; min-width:48px; height:48px; min-height:48px; } html body .case-dialog .case-gallery__counter { font-size:11px; } html body .case-dialog .case-story { display:block; width:100%; height:auto; min-height:0; overflow:visible; } html body .case-dialog .case-story__summary { display:grid; min-height:0; grid-template-rows:none; gap:0; } html body .case-dialog .case-story__point { display:grid; min-width:0; grid-template-columns:minmax(0,1fr); gap:5px; padding:15px 0; border-bottom:1px solid rgba(230,234,250,.15); } html body .case-dialog .case-story__label { margin:0; color:#AFC0FF !important; font-size:10px; line-height:1.45; } html body .case-dialog .case-story__copy { color:#E0E2EB; font-size:15px; line-height:1.55; overflow-wrap:anywhere; } html body .case-dialog .case-sheet__actions { display:grid; grid-template-columns:minmax(0,1fr); justify-items:stretch; gap:10px; padding:16px 0 4px; } html body .case-dialog .case-sheet__actions .button { justify-self:start; min-height:48px; } html body .case-dialog .case-sheet__actions .case-story__status { grid-column:1; margin:0; color:#A5A8B6; font-size:10px; line-height:1.55; } html body .case-dialog .case-dialog__pager { position:relative; z-index:2; display:flex; min-height:54px; flex:0 0 auto; align-items:center; justify-content:space-between; gap:10px; margin:0; padding:8px 0 1px; background:#141414; } html body .case-dialog .case-dialog__pager button { min-width:72px; min-height:44px; font-size:10px; } } @media (max-width:760px) and (max-height:700px) { html body .case-dialog .case-gallery__stage[data-kind="demo"], html body .case-dialog .case-gallery__stage[data-kind="live"] { height:min(58svh,470px) !important; min-height:350px !important; max-height:470px !important; } html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="portrait"] { height:min(58svh,470px); } } @media (max-width:760px) { html body dialog.case-dialog { width:100vw !important; height:100vh !important; height:100dvh !important; max-width:100vw !important; max-height:100vh !important; max-height:100dvh !important; margin:0 !important; transform:none !important; border-radius:0 !important; } html body .case-dialog .case-dialog__top { position:sticky !important; top:0 !important; z-index:20 !important; background:rgba(20,20,20,.97) !important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); } html body .case-dialog .case-sheet__heading h2, html body .case-dialog .case-sheet__heading h2:focus, html body .case-dialog .case-sheet__heading h2:focus-visible { outline:none !important; border:0 !important; box-shadow:none !important; -webkit-tap-highlight-color:transparent; } html body .case-dialog .case-gallery__controls .case-gallery__step { min-width:48px !important; min-height:48px !important; touch-action:manipulation; } html body .case-dialog .case-dialog__pager button, html body .case-dialog .case-dialog__close, html body .case-dialog .case-sheet__actions .button { touch-action:manipulation; } html body .case-dialog .case-dialog__pager button { min-height:48px !important; } html body .case-dialog .case-sheet__actions .button { min-height:52px !important; } html body .archive-card[role="button"], html body .project-feature[role="button"], html body .case-card[role="button"] { touch-action:manipulation; -webkit-tap-highlight-color:rgba(21,59,255,.14); } } @media (max-width:760px) { html body .case-dialog[data-case-id="loreal"] .case-gallery__stage[data-kind="demo"], html body .case-dialog[data-case-id="mercurio"] .case-gallery__stage[data-kind="demo"], html body .case-dialog[data-case-id="casa"] .case-gallery__stage[data-kind="demo"], html body .case-dialog .case-gallery__stage[data-kind="demo"] { height:min(52svh,440px) !important; min-height:405px !important; max-height:440px !important; } } html body .button--primary, html body .header-resume-shortcut, html body .mobile-menu__resume, html body .footer-lead__submit, html body .case-dialog .case-gallery__controls button[aria-pressed="true"] { color:#FFFFFF !important; } html body .archive-card__type, html body .work-card__type, html body .case-dialog__top > p span, html body .case-dialog .case-story__label, html body .case-dialog .case-gallery__caption { color:#AFC0FF; } @media (max-width:760px) { html body .case-dialog .case-gallery { overflow-anchor:none; } html body .case-dialog .case-gallery__stage { height:min(47svh,400px) !important; min-height:min(42svh,350px) !important; max-height:400px !important; aspect-ratio:auto !important; } html body .case-dialog .case-gallery__stage[data-format="wide"] .case-gallery__image, html body .case-dialog .case-gallery__stage[data-format="wide"] .case-gallery__video { width:100% !important; height:100% !important; max-height:100% !important; object-fit:contain !important; } html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="portrait"] { height:min(47svh,400px) !important; min-height:min(42svh,350px) !important; max-height:400px !important; } } @media (max-width:760px) and (max-height:700px) { html body .case-dialog .case-gallery__stage, html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="portrait"] { height:min(37svh,250px) !important; min-height:min(33svh,220px) !important; max-height:250px !important; } } @media (max-width:760px) { html body dialog.case-dialog { display:block !important; width:100vw !important; height:100dvh !important; max-width:100vw !important; max-height:100dvh !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y pinch-zoom; scrollbar-width:none; } html body dialog.case-dialog::-webkit-scrollbar { display:none; } html body .case-dialog .case-dialog__frame { display:block !important; width:100%; height:auto !important; min-height:100dvh; overflow:visible !important; padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); } html body .case-dialog .case-dialog__top { position:sticky !important; top:0; z-index:10; background:#141414; } html body .case-dialog .case-dialog__content { display:block; width:100%; height:auto !important; min-height:0; overflow:visible !important; padding:8px 1px 12px !important; -webkit-overflow-scrolling:auto; touch-action:pan-y pinch-zoom; scrollbar-width:none; } html body .case-dialog .case-dialog__content::-webkit-scrollbar { display:none; } html body .case-dialog .case-sheet__heading { margin-bottom:10px; } html body .case-dialog .case-dialog__intro { margin-top:6px; font-size:13px; line-height:1.42; } html body .case-dialog .case-sheet__body { gap:12px; } html body .case-dialog .case-gallery { gap:5px; } html body .case-dialog .case-gallery__stage { height:auto !important; min-height:0 !important; max-height:none !important; aspect-ratio:auto !important; } html body .case-dialog .case-gallery__stage[data-format="wide"][data-kind="image"], html body .case-dialog .case-gallery__stage[data-format="wide"][data-kind="video"] { height:auto !important; min-height:0 !important; max-height:none !important; aspect-ratio:16 / 9 !important; } html body .case-dialog .case-gallery__stage[data-format="wide"] .case-gallery__image, html body .case-dialog .case-gallery__stage[data-format="wide"] .case-gallery__video { width:100% !important; height:100% !important; max-height:100% !important; object-fit:contain !important; } html body .case-dialog .case-gallery__stage[data-kind="demo"], html body .case-dialog .case-gallery__stage[data-kind="live"] { height:min(39svh,330px) !important; min-height:min(33svh,280px) !important; max-height:330px !important; aspect-ratio:auto !important; } html body .case-dialog .case-gallery__stage[data-format="portrait"][data-kind="image"] { height:min(45svh,360px) !important; min-height:min(35svh,270px) !important; max-height:360px !important; aspect-ratio:auto !important; } html body .case-dialog .case-gallery__stage[data-format="portrait"] .case-gallery__image { width:auto !important; height:100% !important; max-width:min(100%,230px) !important; max-height:100% !important; object-fit:contain !important; } html body .case-dialog .case-gallery__caption { margin:2px 1px 3px; } html body .case-dialog .case-gallery__controls { gap:7px; } html body .case-dialog .case-story__point { padding:9px 0; } html body .case-dialog .case-story__copy { font-size:14px; line-height:1.45; } html body .case-dialog .case-dialog__pager { position:relative; margin-top:8px; padding-bottom:max(4px,env(safe-area-inset-bottom)); } } html body dialog.case-dialog:not([open]):not(.is-fallback-open) { display:none !important; } html body dialog.case-dialog[open], html body dialog.case-dialog.is-fallback-open { display:block !important; } @media (max-width:760px) { html body .case-dialog[data-case-id="loreal"] .case-gallery__stage[data-kind="demo"], html body .case-dialog[data-case-id="mercurio"] .case-gallery__stage[data-kind="demo"], html body .case-dialog[data-case-id="casa"] .case-gallery__stage[data-kind="demo"] { height:min(39svh,330px) !important; min-height:min(33svh,280px) !important; max-height:330px !important; } } @media (max-width:760px) { html body dialog.case-dialog { display:block !important; width:100vw !important; height:100dvh !important; max-width:100vw !important; max-height:100dvh !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y pinch-zoom; scrollbar-width:none; } html body dialog.case-dialog::-webkit-scrollbar { display:none; } html body .case-dialog .case-dialog__frame { display:block !important; width:100%; height:auto !important; min-height:100dvh; overflow:visible !important; padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); } html body .case-dialog .case-dialog__top { position:sticky !important; top:0; z-index:10; background:#141414; } html body .case-dialog .case-dialog__content { display:block; width:100%; height:auto !important; min-height:0; overflow:visible !important; padding:8px 1px 12px !important; -webkit-overflow-scrolling:auto; touch-action:pan-y pinch-zoom; scrollbar-width:none; } html body .case-dialog .case-dialog__content::-webkit-scrollbar { display:none; } html body .case-dialog .case-sheet__heading { margin-bottom:10px; } html body .case-dialog .case-dialog__intro { margin-top:6px; font-size:13px; line-height:1.42; } html body .case-dialog .case-sheet__body { gap:12px; } html body .case-dialog .case-gallery { gap:5px; } html body .case-dialog .case-gallery__stage { height:auto !important; min-height:0 !important; max-height:none !important; aspect-ratio:auto !important; } html body .case-dialog .case-gallery__stage[data-format="wide"][data-kind="image"], html body .case-dialog .case-gallery__stage[data-format="wide"][data-kind="video"] { height:auto !important; min-height:0 !important; max-height:none !important; aspect-ratio:16 / 9 !important; } html body .case-dialog .case-gallery__stage[data-format="wide"] .case-gallery__image, html body .case-dialog .case-gallery__stage[data-format="wide"] .case-gallery__video { width:100% !important; height:100% !important; max-height:100% !important; object-fit:contain !important; } html body .case-dialog .case-gallery__stage[data-kind="demo"], html body .case-dialog .case-gallery__stage[data-kind="live"] { height:min(39svh,330px) !important; min-height:min(33svh,280px) !important; max-height:330px !important; aspect-ratio:auto !important; } html body .case-dialog .case-gallery__stage[data-format="portrait"][data-kind="image"] { height:min(45svh,360px) !important; min-height:min(35svh,270px) !important; max-height:360px !important; aspect-ratio:auto !important; } html body .case-dialog .case-gallery__stage[data-format="portrait"] .case-gallery__image { width:auto !important; height:100% !important; max-width:min(100%,230px) !important; max-height:100% !important; object-fit:contain !important; } html body .case-dialog .case-gallery__caption { margin:2px 1px 3px; } html body .case-dialog .case-gallery__controls { gap:7px; } html body .case-dialog .case-story__point { padding:9px 0; } html body .case-dialog .case-story__copy { font-size:14px; line-height:1.45; } html body .case-dialog .case-dialog__pager { position:relative; margin-top:8px; padding-bottom:max(4px,env(safe-area-inset-bottom)); } } @media (max-width:760px) { html body .case-dialog .case-dialog__content { padding:8px 1px 20px; scrollbar-width:thin; scrollbar-color:rgba(55,91,255,.48) transparent; } html body .case-dialog .case-sheet__heading { margin-bottom:10px; } html body .case-dialog .case-sheet__heading .eyebrow { margin-bottom:5px; } html body .case-dialog .case-dialog__intro { margin-top:7px; font-size:13px; line-height:1.42; } html body .case-dialog .case-sheet__body { gap:14px; } html body .case-dialog .case-gallery { gap:5px; } html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="wide"], html body .case-dialog .case-gallery__stage[data-kind="video"][data-format="wide"] { height:auto !important; min-height:0 !important; max-height:min(43svh,250px) !important; aspect-ratio:16 / 9 !important; } html body .case-dialog .case-gallery__stage[data-kind="demo"], html body .case-dialog .case-gallery__stage[data-kind="live"] { height:min(43svh,360px) !important; min-height:min(38svh,310px) !important; max-height:360px !important; } html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="portrait"] { height:min(43svh,360px) !important; min-height:min(38svh,310px) !important; max-height:360px !important; } html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="portrait"] .case-gallery__image { width:auto !important; height:auto !important; max-width:min(100%,205px) !important; max-height:100% !important; } html body .case-dialog .case-gallery__caption { margin:2px 1px 3px; } html body .case-dialog .case-gallery__controls { gap:7px; } html body .case-dialog .case-story__point { padding:11px 0; } html body .case-dialog .case-story__copy { font-size:14px; line-height:1.48; } html body .case-dialog .case-dialog__pager { min-height:50px; padding-top:5px; } } @media (max-width:760px) and (max-height:700px) { html body .case-dialog .case-gallery__stage[data-kind="demo"], html body .case-dialog .case-gallery__stage[data-kind="live"], html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="portrait"] { height:min(42svh,280px) !important; min-height:min(36svh,230px) !important; max-height:280px !important; } } @media (min-width:761px) and (max-width:900px), (max-width:900px) and (max-height:600px) { html body .case-dialog .case-dialog__frame { padding:calc(16px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); } html body .case-dialog .case-dialog__content { min-height:0; flex:1 1 auto; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; } html body .case-dialog .case-sheet { display:block; width:100%; height:auto !important; min-height:0; overflow:visible; } html body .case-dialog .case-sheet__heading { margin:0 0 14px; } html body .case-dialog .case-sheet__body { display:grid; width:100%; height:auto !important; min-height:0; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:auto auto !important; align-items:start; gap:16px; overflow:visible; } html body .case-dialog .case-gallery { display:grid; width:100%; min-height:0; grid-template-rows:auto auto auto; align-content:start; gap:6px; } html body .case-dialog .case-gallery__stage { width:100%; min-height:0; height:auto; max-height:none; overflow:hidden; } html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="wide"], html body .case-dialog .case-gallery__stage[data-kind="video"][data-format="wide"] { aspect-ratio:16 / 9; min-height:0; max-height:min(56svh,480px); } html body .case-dialog .case-gallery__stage[data-kind="demo"], html body .case-dialog .case-gallery__stage[data-kind="live"] { height:min(54svh,520px); min-height:min(42svh,380px); max-height:520px; } html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="portrait"] { height:min(58svh,560px); min-height:min(42svh,380px); max-height:560px; } html body .case-dialog .case-gallery__stage[data-format="wide"] .case-gallery__image, html body .case-dialog .case-gallery__stage[data-format="wide"] .case-gallery__video { width:100%; height:100%; max-height:100%; object-fit:contain; } html body .case-dialog iframe.case-gallery__demo, html body .case-dialog iframe.case-gallery__live { width:100%; height:100%; min-height:0; } html body .case-dialog .case-story { display:block; width:100%; height:auto; min-height:0; overflow:visible; } } @media (max-width:760px) { html body .case-dialog .case-gallery { overflow-anchor:none; } html body .case-dialog .case-gallery__stage { height:min(47svh,400px) !important; min-height:min(42svh,350px) !important; max-height:400px !important; aspect-ratio:auto !important; } html body .case-dialog .case-gallery__stage[data-format="wide"] .case-gallery__image, html body .case-dialog .case-gallery__stage[data-format="wide"] .case-gallery__video { width:100% !important; height:100% !important; max-height:100% !important; object-fit:contain !important; } html body .case-dialog .case-gallery__stage[data-kind="demo"], html body .case-dialog .case-gallery__stage[data-kind="live"] { height:min(47svh,400px) !important; min-height:min(42svh,350px) !important; max-height:400px !important; } html body .case-dialog[data-case-id="loreal"] .case-gallery__stage[data-kind="demo"], html body .case-dialog[data-case-id="mercurio"] .case-gallery__stage[data-kind="demo"], html body .case-dialog[data-case-id="casa"] .case-gallery__stage[data-kind="demo"] { height:min(47svh,400px) !important; min-height:min(42svh,350px) !important; max-height:400px !important; } html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="portrait"] { height:min(45svh,380px) !important; min-height:min(35svh,300px) !important; max-height:380px !important; } } @media (max-width:760px) and (max-height:700px) { html body .case-dialog .case-gallery__stage { height:min(37svh,250px) !important; min-height:min(33svh,220px) !important; max-height:250px !important; } html body .case-dialog .case-gallery__stage[data-kind="demo"], html body .case-dialog .case-gallery__stage[data-kind="live"], html body .case-dialog[data-case-id="loreal"] .case-gallery__stage[data-kind="demo"], html body .case-dialog[data-case-id="mercurio"] .case-gallery__stage[data-kind="demo"], html body .case-dialog[data-case-id="casa"] .case-gallery__stage[data-kind="demo"] { height:min(42svh,300px) !important; min-height:min(39svh,280px) !important; max-height:300px !important; } html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="portrait"] { height:min(40svh,300px) !important; min-height:min(34svh,250px) !important; max-height:300px !important; } } @media (max-width:760px) { html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="portrait"] { height:min(45svh,380px) !important; min-height:min(35svh,300px) !important; max-height:380px !important; } html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="portrait"] .case-gallery__image { width:auto !important; height:min(40svh,340px) !important; max-width:min(100%,220px) !important; max-height:none !important; aspect-ratio:auto !important; object-fit:contain !important; } } @media (max-width:760px) and (max-height:700px) { html body .case-dialog .case-gallery__stage[data-kind="demo"], html body .case-dialog .case-gallery__stage[data-kind="live"], html body .case-dialog[data-case-id="loreal"] .case-gallery__stage[data-kind="demo"], html body .case-dialog[data-case-id="mercurio"] .case-gallery__stage[data-kind="demo"], html body .case-dialog[data-case-id="casa"] .case-gallery__stage[data-kind="demo"] { height:min(37svh,250px) !important; min-height:min(33svh,220px) !important; max-height:250px !important; } html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="portrait"] { height:min(42svh,270px) !important; min-height:min(36svh,230px) !important; } html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="portrait"] .case-gallery__image { height:min(36svh,230px) !important; } } @media (max-width:760px) { html body .case-dialog .case-gallery { overflow-anchor:none; } html body .case-dialog .case-gallery__stage { height:min(47svh,400px) !important; min-height:min(42svh,350px) !important; max-height:400px !important; aspect-ratio:auto !important; } html body .case-dialog .case-gallery__stage[data-format="wide"] .case-gallery__image, html body .case-dialog .case-gallery__stage[data-format="wide"] .case-gallery__video { width:100% !important; height:100% !important; max-height:100% !important; object-fit:contain !important; } } @media (max-width:760px) and (max-height:700px) { html body .case-dialog .case-gallery__stage, html body .case-dialog .case-gallery__stage[data-kind="image"][data-format="portrait"] { height:min(37svh,250px) !important; min-height:min(33svh,220px) !important; max-height:250px !important; } } @media (max-width:760px) { html body dialog.case-dialog { display:block !important; width:100vw !important; height:100dvh !important; max-width:100vw !important; max-height:100dvh !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y pinch-zoom; scrollbar-width:none; } html body dialog.case-dialog::-webkit-scrollbar { display:none; } html body .case-dialog .case-dialog__frame { display:block !important; width:100%; height:auto !important; min-height:100dvh; overflow:visible !important; padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); } html body .case-dialog .case-dialog__top { position:sticky !important; top:0; z-index:10; background:#141414; } html body .case-dialog .case-dialog__content { display:block; width:100%; height:auto !important; min-height:0; overflow:visible !important; padding:8px 1px 12px !important; -webkit-overflow-scrolling:auto; touch-action:pan-y pinch-zoom; scrollbar-width:none; } html body .case-dialog .case-dialog__content::-webkit-scrollbar { display:none; } html body .case-dialog .case-sheet__heading { margin-bottom:10px; } html body .case-dialog .case-dialog__intro { margin-top:6px; font-size:13px; line-height:1.42; } html body .case-dialog .case-sheet__body { gap:12px; } html body .case-dialog .case-gallery { gap:5px; } html body .case-dialog .case-gallery__stage { height:auto !important; min-height:0 !important; max-height:none !important; aspect-ratio:auto !important; } html body .case-dialog .case-gallery__stage[data-format="wide"][data-kind="image"], html body .case-dialog .case-gallery__stage[data-format="wide"][data-kind="video"] { height:auto !important; min-height:0 !important; max-height:none !important; aspect-ratio:16 / 9 !important; } html body .case-dialog .case-gallery__stage[data-format="wide"] .case-gallery__image, html body .case-dialog .case-gallery__stage[data-format="wide"] .case-gallery__video { width:100% !important; height:100% !important; max-height:100% !important; object-fit:contain !important; } html body .case-dialog .case-gallery__stage[data-kind="demo"], html body .case-dialog .case-gallery__stage[data-kind="live"] { height:min(39svh,330px) !important; min-height:min(33svh,280px) !important; max-height:330px !important; aspect-ratio:auto !important; } html body .case-dialog .case-gallery__stage[data-format="portrait"][data-kind="image"] { height:min(45svh,360px) !important; min-height:min(35svh,270px) !important; max-height:360px !important; aspect-ratio:auto !important; } html body .case-dialog .case-gallery__stage[data-format="portrait"] .case-gallery__image { width:auto !important; height:100% !important; max-width:min(100%,230px) !important; max-height:100% !important; object-fit:contain !important; } html body .case-dialog .case-gallery__caption { margin:2px 1px 3px; } html body .case-dialog .case-gallery__controls { gap:7px; } html body .case-dialog .case-story__point { padding:9px 0; } html body .case-dialog .case-story__copy { font-size:14px; line-height:1.45; } html body .case-dialog .case-dialog__pager { position:relative; margin-top:8px; padding-bottom:max(4px,env(safe-area-inset-bottom)); } } html body dialog.case-dialog:not([open]):not(.is-fallback-open) { display:none !important; } html body dialog.case-dialog[open], html body dialog.case-dialog.is-fallback-open { display:block !important; } @media (max-width:760px) { html body .case-dialog[data-case-id="loreal"] .case-gallery__stage[data-kind="demo"], html body .case-dialog[data-case-id="mercurio"] .case-gallery__stage[data-kind="demo"], html body .case-dialog[data-case-id="casa"] .case-gallery__stage[data-kind="demo"] { height:min(39svh,330px) !important; min-height:min(33svh,280px) !important; max-height:330px !important; } } @media (max-width:760px) { html body .case-dialog .case-sheet__actions .button { width:min(100%,360px) !important; min-height:52px; justify-content:space-between; padding-inline:18px; white-space:normal; text-align:left; } } @media (min-width:761px) and (max-width:900px) { html body dialog.case-dialog[open] .case-gallery__stage[data-kind="demo"], html body dialog.case-dialog[open] .case-gallery__stage[data-kind="live"] { height:min(50svh,440px) !important; min-height:320px !important; max-height:440px !important; aspect-ratio:auto !important; align-self:start; } html body dialog.case-dialog[open] iframe.case-gallery__demo, html body dialog.case-dialog[open] iframe.case-gallery__live { width:100% !important; height:100% !important; min-height:0 !important; } } @media (min-width:761px) and (max-width:1100px) and (max-height:600px) { html body dialog.case-dialog[open] .case-dialog__content { overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y pinch-zoom; } html body dialog.case-dialog[open] .case-gallery__stage { height:min(42svh,220px) !important; min-height:0 !important; max-height:220px !important; aspect-ratio:auto !important; } html body dialog.case-dialog[open] .case-gallery__stage[data-kind="demo"], html body dialog.case-dialog[open] .case-gallery__stage[data-kind="live"] { height:min(42svh,220px) !important; min-height:0 !important; max-height:220px !important; } html body dialog.case-dialog[open] iframe.case-gallery__demo, html body dialog.case-dialog[open] iframe.case-gallery__live { height:100% !important; } } @media (max-width:760px) { html body dialog.case-dialog[open] .case-gallery__stage[data-kind="demo"], html body dialog.case-dialog[open] .case-gallery__stage[data-kind="live"] { height:min(55svh,460px) !important; min-height:420px !important; max-height:460px !important; aspect-ratio:auto !important; } } html body .project-feature__action, html body .case-card__cue { appearance:none; cursor:pointer; -webkit-tap-highlight-color:transparent; } html body .case-card__cue { min-height:44px; border:0; background:transparent; text-align:left; } html body .project-feature__action:focus-visible, html body .case-card__cue:focus-visible { outline:2px solid #6680FF; outline-offset:4px; } html body .project-feature__action:active, html body .case-card__cue:active { transform:translateY(1px) scale(.985); } html body .privacy-consent { color:#F9F7F6; } html body .privacy-consent p { color:#E5E3E1; } html body .privacy-consent button { color:#F9F7F6; } html body .privacy-consent button:last-child { color:#FFFFFF; } @media (max-width:760px) { html body .archive-card .archive-card__body > p:not(.archive-card__type) { font-size:12px !important; line-height:1.5; } html body .archive-footnote, html body .footer-lead__privacy-note { font-size:12px !important; } html body .case-card__cue { min-height:46px; } html body .project-feature__action { min-height:46px; } } html body .case-dialog .case-gallery__stage[data-kind="demo"] { position:relative; } html body .case-dialog .case-gallery__stage[data-kind="demo"] .case-gallery__demo-poster { position:absolute; z-index:1; inset:0; display:block; width:100%; height:100%; padding:8px; object-fit:contain; background:#09080d; pointer-events:none; } html body .case-dialog iframe.case-gallery__demo { position:absolute; z-index:2; inset:0; display:block; width:100%; height:100%; min-height:0; opacity:0; transition:opacity .2s ease; } html body .case-dialog iframe.case-gallery__demo.is-ready { opacity:1; } html body .case-dialog iframe.case-gallery__demo:not(.is-ready) { pointer-events:none; } @media (prefers-reduced-motion:reduce) { html body .case-dialog iframe.case-gallery__demo { transition:none; } }