:root{--portfolio-ink:#151515;--portfolio-paper:#f2efe8;--portfolio-line:rgba(20,20,20,.18)}
html{scroll-behavior:auto}.portfolio-index{padding-top:7rem}.portfolio-intro{padding-block:6rem 5rem}.portfolio-intro h1{max-width:980px;font-size:clamp(3.4rem,8vw,8rem);line-height:.9;letter-spacing:-.065em}.portfolio-intro .lead{max-width:700px;margin-top:2rem;font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.55}.project-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;padding-bottom:9rem}.project-card{grid-column:span 4;min-width:0}.project-link{position:relative;display:block;color:inherit;text-decoration:none}.project-preview{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:#171717}.project-preview img,.preview-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .55s ease}.preview-frame{display:grid;place-items:center;padding:2rem;opacity:0;text-align:center;font-size:clamp(1.8rem,3vw,3rem);font-weight:700;letter-spacing:-.04em}.project-card--marquis .preview-frame--landing{background:#b90f1f;color:#fff;font-family:Georgia,serif}.project-card--marquis .preview-frame--application{background:#17120f;color:#d73a3a;border:1rem solid #b90f1f}.project-card--arke .preview-frame--landing{background:#e8e2d5;color:#24362c;font-family:Georgia,serif}.project-card--arke .preview-frame--application{background:#24362c;color:#e8e2d5}.project-card--defacto .preview-frame--landing{background:#111;color:#e9ff54}.project-card--defacto .preview-frame--application{background:#e9ff54;color:#111}.project-card[data-preview="playing"] .project-preview img{animation:preview-image 2.7s both}.project-card[data-preview="playing"] .preview-frame--landing{animation:preview-landing 2.7s both}.project-card[data-preview="playing"] .preview-frame--application{animation:preview-application 2.7s both}@keyframes preview-image{0%,28%{opacity:1;transform:scale(1)}36%,100%{opacity:0;transform:scale(1.06)}}@keyframes preview-landing{0%,28%{opacity:0;transform:translateY(7%)}38%,62%{opacity:1;transform:none}72%,100%{opacity:0;transform:translateY(-7%)}}@keyframes preview-application{0%,66%{opacity:0;transform:scale(.94)}76%,100%{opacity:1;transform:none}}.concept-label{display:inline-flex;align-items:center;border:1px solid currentColor;border-radius:99px;padding:.45rem .7rem;font-size:.67rem;line-height:1;text-transform:uppercase;letter-spacing:.1em}.project-card .concept-label{margin-top:1.15rem}.project-card__sector{display:block;margin-top:1.25rem;color:#666;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em}.project-card h2{margin:.35rem 0 .3rem;font-size:clamp(2.2rem,4vw,4.2rem);letter-spacing:-.055em}.project-card p{min-height:3rem;margin:0;color:#555;line-height:1.5}.project-card__action{display:inline-block;margin-top:1rem;font-weight:700;border-bottom:1px solid}.portfolio-method{display:grid;grid-template-columns:1fr 2fr;gap:2rem;padding-block:7rem;border-top:1px solid var(--portfolio-line)}.portfolio-method h2,.portfolio-cta h2{font-size:clamp(2.5rem,5vw,5.5rem);line-height:.98;letter-spacing:-.055em}.portfolio-method p{max-width:620px;font-size:1.1rem;line-height:1.6}.portfolio-cta{padding-block:9rem;text-align:center}.portfolio-cta h2{max-width:900px;margin:1rem auto 2.5rem}.portfolio-cta>p:last-child{margin-top:1rem;color:#777;font-size:.85rem}
.case-page{margin:0;background:#0d0d0d;color:#fff}.case-header{position:fixed;z-index:50;top:0;left:0;width:100%;height:72px;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(1rem,3vw,3rem);color:#fff;mix-blend-mode:difference}.case-header a{color:inherit;text-decoration:none}.case-header .case-nav{display:flex;align-items:center;gap:1.5rem}.case-header .case-back,.case-header .case-header-next{font-size:.82rem;font-weight:700;transition:opacity .2s ease}.case-header a:hover{opacity:.8}.case-header .concept-label{justify-self:end}.motion-case{position:relative;min-height:500vh}.motion-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#0d0d0d;isolation:isolate}.motion-scene{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1fr);align-items:center;padding:clamp(5.5rem,9vh,8rem) clamp(1.25rem,6vw,7rem) clamp(5rem,8vh,7rem);gap:clamp(2rem,6vw,7rem);opacity:0;visibility:hidden;transform:translate3d(0,2rem,0) scale(.988);transition:opacity .65s cubic-bezier(.33,0,.15,1),transform .65s cubic-bezier(.33,0,.15,1),visibility 0s .65s;will-change:transform,opacity}.motion-stage[data-active-scene="opening"] [data-motion-scene="opening"],.motion-stage[data-active-scene="idea"] [data-motion-scene="idea"],.motion-stage[data-active-scene="landing"] [data-motion-scene="landing"],.motion-stage[data-active-scene="applications"] [data-motion-scene="applications"],.motion-stage[data-active-scene="cta"] [data-motion-scene="cta"]{opacity:1;visibility:visible;transform:none;transition:opacity .65s cubic-bezier(.33,0,.15,1),transform .65s cubic-bezier(.33,0,.15,1);transition-delay:0s}.scene-copy{position:relative;z-index:3;max-width:700px}.scene-copy h1{margin:0;font-size:clamp(5rem,14vw,13rem);line-height:.72;letter-spacing:-.075em}.scene-copy h2{margin:.4rem 0 1.2rem;font-size:clamp(3.1rem,7vw,7.6rem);line-height:.9;letter-spacing:-.065em}.scene-copy>p:not(.scene-index):not(.scene-lead):not(.khora-signature){max-width:570px;font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.55}.scene-index{margin:0 0 1rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;opacity:.7}.scene-lead{margin:2rem 0 1rem;font:italic clamp(2rem,4vw,4.7rem)/.95 Georgia,serif}.khora-signature{margin-top:2rem;padding-top:1rem;border-top:1px solid currentColor;font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;opacity:.65}.compact-copy{align-self:start;margin-top:7vh}.compact-copy h2{font-size:clamp(2.8rem,5.6vw,6rem)}.scene-cover,.scene-shade{position:absolute;inset:0;width:100%;height:100%}.scene-cover{object-fit:cover;transform:scale(calc(1.04 + var(--local-progress,0) * .05))}.scene-shade{z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.25) 58%,rgba(0,0,0,.08))}.scene-opening{grid-template-columns:1fr}.motion-progress{position:absolute;z-index:20;left:clamp(1.25rem,3vw,3rem);right:clamp(1.25rem,3vw,3rem);bottom:1.6rem;height:2px;background:rgba(255,255,255,.22)}.motion-progress>span{display:block;width:calc(var(--case-progress,0) * 100%);height:100%;background:currentColor;transition:width .25s cubic-bezier(.33,0,.15,1)}.motion-progress ol{position:absolute;left:0;right:0;bottom:.7rem;display:flex;justify-content:space-between;margin:0;padding:0;list-style:none;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.58)}
.motion-case--marquis .motion-stage{background:#a70f1d}.motion-case--marquis .scene-idea,.motion-case--marquis .scene-cta{background:#b71324}.marquis-seal{justify-self:center;display:grid;place-items:center;width:min(32vw,380px);aspect-ratio:1;border:2px solid #fff;border-radius:50%;transform:rotate(calc(-12deg + var(--local-progress) * 12deg)) scale(calc(.7 + var(--local-progress) * .3));box-shadow:inset 0 0 0 12px #b71324,inset 0 0 0 14px #fff}.marquis-seal span{font:9rem/1 Georgia,serif}.marquis-seal small{position:absolute;margin-top:14rem;letter-spacing:.25em}.scene-landing{background:#171311}.browser-mock{position:relative;z-index:2;justify-self:end;width:min(58vw,830px);height:min(74vh,710px);overflow:hidden;border-radius:14px;background:#eee;color:#171717;box-shadow:0 35px 90px rgba(0,0,0,.42);transform:perspective(1400px) rotateY(calc(-5deg + var(--local-progress) * 5deg)) translateY(calc(25px - var(--local-progress) * 25px))}.browser-bar{height:38px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#ddd;font-size:.65rem}.browser-bar i{width:8px;height:8px;border-radius:50%;background:#aaa}.browser-bar span{margin-left:auto;margin-right:auto;opacity:.55}.browser-scroll{transform:translateY(calc(var(--local-progress) * -28%));transition:transform .25s cubic-bezier(.33,0,.15,1)}.mock-marquis-hero{min-height:65vh;padding:2rem 3rem;background:#b71324;color:#fff}.mock-marquis-hero{display:flex;flex-direction:column}.mock-marquis-hero span{margin-top:auto;font-size:.65rem;letter-spacing:.15em}.mock-marquis-hero h3{font:italic clamp(2.8rem,5vw,6rem)/.9 Georgia,serif}.mock-marquis-hero em{font-style:normal;border-bottom:1px solid;width:max-content}.mock-marquis-product{display:grid;grid-template-columns:1fr 1fr;min-height:55vh;background:#efe7da}.mock-marquis-product img{width:100%;height:100%;object-fit:cover}.mock-marquis-product div{padding:3rem;display:flex;flex-direction:column;justify-content:center}.mock-marquis-product strong{font:3rem/1 Georgia,serif;margin:1rem 0}.scene-applications{display:block;padding-top:11vh;background:#211614}.application-rail{position:absolute;left:38vw;top:24vh;display:flex;gap:2vw;width:max-content;transform:translate3d(calc((1 - var(--local-progress)) * 12vw - var(--local-progress) * 24vw),0,0);transition:transform .3s cubic-bezier(.33,0,.15,1)}.application-rail figure{width:min(35vw,500px);height:57vh;margin:0;overflow:hidden;background:#ddd;color:#111}.application-rail figure img{width:100%;height:calc(100% - 45px);object-fit:cover}.application-rail figcaption{height:45px;padding:13px 16px;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em}.application-rail .type-card,.application-rail .df-ui-card{display:flex;flex-direction:column;justify-content:space-between;padding:2.4rem;background:#b71324;color:#fff}.type-card strong{font:clamp(2.5rem,4vw,5rem)/.9 Georgia,serif}.type-card span,.type-card small{letter-spacing:.14em}.scene-cta{grid-template-columns:1.2fr .8fr}.scene-cta h2{font-size:clamp(2.4rem,4.2vw,4.5rem);line-height:1.02;margin-bottom:1rem}.cta-orbit{width:min(48vw,650px);aspect-ratio:1;border:1px solid rgba(255,255,255,.45);border-radius:50%;display:grid;place-items:center;font:clamp(10rem,28vw,27rem)/1 Georgia,serif;transform:rotate(calc(-20deg + var(--local-progress) * 20deg))}.scene-cta .btn{display:inline-flex;margin-top:1.5rem}.motion-next{display:block;width:max-content;margin-top:1.5rem;color:inherit;text-decoration:none;border-bottom:1px solid}
.motion-case--arke{color:#22342b}.motion-case--arke .motion-stage{background:#e7e1d4}.motion-case--arke .scene-shade{background:linear-gradient(90deg,rgba(231,225,212,.96),rgba(231,225,212,.36),transparent)}.arke-wordmark{width:70px;height:70px;object-fit:contain;margin-bottom:1.5rem}.motion-case--arke .scene-idea,.motion-case--arke .scene-cta{background:#d9d2c3}.arke-drawing svg{width:100%;max-height:55vh;fill:none;stroke:#22342b;stroke-width:2;stroke-dasharray:1600;stroke-dashoffset:calc(1600 - var(--local-progress) * 1600)}.arke-drawing span{display:block;text-align:center;text-transform:uppercase;letter-spacing:.18em;font-size:.7rem}.browser-mock--arke{background:#f2eee5}.mock-arke-hero{min-height:65vh;padding:2.5rem 3.5rem;background:#24362c;color:#eee8dc}.mock-arke-hero small{display:block;margin-top:18vh}.mock-arke-hero h3{font:clamp(3rem,5vw,6rem)/.92 Georgia,serif}.mock-arke-hero em{font-style:normal;border-bottom:1px solid}.mock-arke-process{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:3rem;min-height:50vh}.mock-arke-process img{grid-column:1/-1;width:100%;height:30vh;object-fit:cover}.motion-case--arke .scene-applications{background:#24362c;color:#eee8dc}.arke-sign{display:grid;place-items:center;background:#e7e1d4!important}.arke-sign img{width:55%!important;height:55%!important;object-fit:contain!important}.motion-case--arke .type-card{background:#d9d2c3;color:#22342b}.arke-orbit{font-family:Georgia,serif}
.motion-case--defacto .motion-stage{background:#0d0f0c;color:#f3f4ec}.defacto-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(233,255,84,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(233,255,84,.08) 1px,transparent 1px);background-size:7vw 7vw;transform:translateY(calc(var(--local-progress) * -7vw))}.defacto-wordmark{display:block;width:min(60vw,620px);margin-bottom:2rem;color:#f3f4ec}.motion-case--defacto .scene-lead{font-family:inherit;font-style:normal;font-weight:700}.motion-case--defacto .scene-idea,.motion-case--defacto .scene-cta{background:#eaff54;color:#10110f}.df-status-stack{display:flex;flex-direction:column;gap:.65rem}.df-status-stack span,.df-status-stack strong{padding:1.2rem 1.5rem;border:1px solid currentColor;transform:translateX(calc((1 - var(--local-progress)) * 5rem));opacity:calc(.25 + var(--local-progress) * .75)}.df-status-stack strong{margin-top:1rem;background:#10110f;color:#eaff54;font-size:2.5rem}.browser-mock--defacto{background:#f4f4ef}.mock-df-hero{min-height:63vh;padding:2.5rem 3rem;background:#111;color:#f1f1e9}.mock-df-hero small{display:block;margin-top:18vh;color:#eaff54}.mock-df-hero h3{font-size:clamp(3rem,5vw,6rem);letter-spacing:-.05em;line-height:.95}.mock-df-hero em{font-style:normal;color:#eaff54}.mock-df-product{position:relative;min-height:48vh;padding:3rem;background:#eaff54}.mock-df-product img{width:70%;height:32vh;object-fit:contain;object-position:left top}.mock-df-product strong{position:absolute;right:3rem;top:4rem;font-size:3rem}.mock-df-product span{position:absolute;right:3rem;top:8rem}.motion-case--defacto .scene-applications{background:#121510}.motion-case--defacto .application-rail .df-ui-card,.motion-case--defacto .type-card{background:#eaff54;color:#10110f}.df-ui-card strong{font-size:5rem}.df-orbit{border-color:#10110f;font-family:inherit;font-weight:900;animation:none}
.concept-disclosure{margin:0;padding:1.5rem 2rem;background:#0d0d0d;color:#888;text-align:center;font-size:.72rem}.case-page--arke .concept-disclosure{background:#e7e1d4;color:#59655e}
@media(max-width:900px){.project-grid{grid-template-columns:1fr 1fr}.project-card{grid-column:auto}.project-card:last-child{grid-column:1/-1;max-width:calc(50% - .75rem)}.motion-scene{grid-template-columns:1fr;align-content:center;gap:1.5rem;padding-inline:1.5rem}.scene-copy{max-width:78vw}.scene-copy h1{font-size:clamp(4.6rem,18vw,9rem)}.scene-copy h2{font-size:clamp(2.8rem,9vw,5rem)}.scene-copy>p:not(.scene-index):not(.scene-lead):not(.khora-signature){font-size:.98rem}.compact-copy{margin-top:0;align-self:auto}.browser-mock{justify-self:center;width:min(88vw,700px);height:52vh}.application-rail{left:4vw;top:39vh}.application-rail figure{width:62vw;height:48vh}.scene-applications .compact-copy{max-width:88vw}.scene-cta{grid-template-columns:.75fr 1fr}.cta-orbit{width:38vw}.case-header{grid-template-columns:1fr auto}.case-header .concept-label{display:none}.case-header .case-back{justify-self:end}}
@media(max-width:620px){.portfolio-index{padding-top:4rem}.portfolio-intro{padding-block:4rem 3rem}.portfolio-intro h1{font-size:3.7rem}.project-grid{display:block}.project-card,.project-card:last-child{max-width:none;margin-bottom:4rem}.project-card p{min-height:0}.portfolio-method{grid-template-columns:1fr;padding-block:4rem}.portfolio-cta{padding-block:6rem}.case-header{height:60px}.case-header .wordmark{font-size:1rem}.case-header .case-back{font-size:.7rem}.motion-case{min-height:500svh}.motion-scene{padding:5rem 1.15rem 4.5rem}.scene-copy{max-width:94vw}.scene-copy h1{font-size:22vw}.scene-copy h2{font-size:12vw}.scene-lead{font-size:8vw}.scene-copy>p:not(.scene-index):not(.scene-lead):not(.khora-signature){font-size:.88rem;line-height:1.4}.khora-signature{margin-top:1rem;font-size:.6rem}.motion-progress ol{display:none}.marquis-seal{position:absolute;right:-12vw;bottom:8vh;width:47vw;opacity:.55}.browser-mock{width:92vw;height:48vh;border-radius:9px}.browser-scroll{font-size:.75rem}.mock-marquis-hero,.mock-arke-hero,.mock-df-hero{min-height:52vh;padding:1.5rem}.mock-marquis-hero h3,.mock-arke-hero h3,.mock-df-hero h3{font-size:2.5rem}.mock-marquis-product{min-height:42vh}.mock-marquis-product div{padding:1.2rem}.mock-arke-process{padding:1.2rem;min-height:40vh}.mock-df-product{padding:1.5rem}.compact-copy{position:absolute;top:6rem}.compact-copy p:not(.scene-index){display:none}.scene-landing{align-content:end}.scene-landing .browser-mock{margin-bottom:2rem}.scene-applications{padding-top:5rem}.application-rail{top:35vh}.application-rail figure{width:78vw;height:46vh}.type-card strong{font-size:2.7rem}.scene-cta{display:block;padding-top:clamp(3rem,6vh,5rem)}.scene-cta .scene-copy{margin-left:0;max-width:100%}.scene-cta h2{font-size:clamp(2.2rem,7vw,3.8rem);line-height:1.05}.cta-orbit{position:absolute;right:-18vw;bottom:-6vh;width:66vw;opacity:.25}.defacto-wordmark{width:80vw}.df-status-stack{position:absolute;right:1rem;bottom:12vh;width:60vw}.df-status-stack span,.df-status-stack strong{padding:.65rem}.df-status-stack strong{font-size:1.2rem}.arke-drawing{position:absolute;right:-5vw;bottom:10vh;width:60vw}.concept-disclosure{font-size:.65rem}}
.motion-case--arke .scene-landing{background:#d9d2c3}
@media(prefers-reduced-motion:reduce){.project-card[data-preview="playing"] *{animation:none!important}.motion-case{position:static;min-height:0}.motion-stage{position:static;height:auto;overflow:visible}.motion-progress{display:none}.motion-scene{position:relative;inset:auto;min-height:100svh;opacity:1;visibility:visible;transform:none;transition:none}.scene-cover{transform:none}.browser-scroll,.application-rail,.marquis-seal,.arke-drawing svg,.df-status-stack>*{transform:none}.application-rail{position:relative;left:auto;top:auto;max-width:62vw;overflow:hidden}.scene-cta{min-height:80svh}}