.portfolio-page{--portfolio-purple:#6435b1;--portfolio-yellow:#ffe063;max-width:1400px;margin:auto;padding:70px 40px 0;color:#23182e}.portfolio-heading{padding-bottom:64px;border-bottom:3px solid #23182e}.project-kicker{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;line-height:1.7}.portfolio-heading h1{font-size:clamp(40px,6.8vw,94px);line-height:1.16;letter-spacing:-.045em;margin:22px 0 28px;max-width:1100px}.portfolio-intro{display:flex;align-items:end;justify-content:space-between;gap:30px}.portfolio-intro p,.case-lead{font-size:21px;line-height:1.8;max-width:740px;margin:0}.project-link{display:inline-flex;align-items:center;min-height:44px;font-weight:800;border-bottom:2px solid currentColor;text-decoration:none;padding:8px 0;line-height:1.6}.project-link:hover{color:var(--portfolio-purple)}.project-link:focus-visible,summary:focus-visible{outline:3px solid var(--portfolio-purple);outline-offset:5px}.portfolio-section-title{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin:58px 0 30px}.portfolio-section-title h2{font-size:clamp(26px,3vw,42px);line-height:1.4;margin:0;letter-spacing:-.03em}.portfolio-section-title>span{font-size:11px;letter-spacing:.13em;font-weight:800}.featured-project{display:grid;grid-template-columns:1.65fr 1fr;align-items:center;gap:52px;margin-bottom:46px;padding-bottom:46px;border-bottom:1px solid #d8cce5}.project-stage{position:relative;background:#e8dff5;padding:42px 62px 46px 26px;aspect-ratio:1.5;isolation:isolate}.featured-project:nth-of-type(2) .project-stage{background:#ffe063}.featured-project:nth-of-type(3) .project-stage{background:#6435b1}.desktop-frame{position:relative;width:92%;border:1px solid #2b2036;border-radius:8px;background:white;overflow:hidden;box-shadow:5px 8px 0 #23182e20}.browser-bar{display:flex;gap:4px;align-items:center;height:25px;padding:0 10px;border-bottom:1px solid #dad5e0;background:#fff}.browser-bar i{width:5px;height:5px;background:#8d8199;border-radius:50%}.browser-bar span{font-size:8px;font-family:Arial,sans-serif;color:#5d5168;margin-left:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.desktop-viewport{aspect-ratio:1.53;overflow:hidden}.desktop-viewport img{display:block;width:100%;height:auto}.phone-frame{position:absolute;right:4%;bottom:7%;width:23%;aspect-ratio:390/800;overflow:hidden;border:5px solid #23182e;border-radius:20px;background:#fff;box-shadow:3px 7px 0 #23182e26}.phone-frame img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top}.phone-camera{position:absolute;z-index:1;top:3px;left:35%;width:30%;height:6px;border-radius:20px;background:#23182e}.project-copy h3{font-size:clamp(25px,3vw,40px);line-height:1.3;letter-spacing:-.03em;margin:14px 0 18px}.project-copy p{font-size:17px;line-height:1.85;margin:0 0 20px;max-width:440px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:46px 26px}.project-grid .project-stage{padding:25px 33px 26px 16px}.project-grid .phone-frame{border-width:3px;border-radius:12px}.project-grid .browser-bar{height:17px;padding:0 6px;gap:3px}.project-grid .browser-bar i{width:3px;height:3px}.project-grid .browser-bar span{font-size:6px;margin-left:4px}.project-grid .project-copy{padding-top:20px}.project-grid .project-copy h3{font-size:25px;margin:8px 0 12px}.project-grid .project-copy p{font-size:15px;line-height:1.8}.project-grid .project-stage:nth-child(1){background:#e8dff5}.capture-note{font-size:12px;color:#6f627b;line-height:1.9;margin:28px 0 48px}.portfolio-closing{background:#ffe063;padding:48px;margin:60px 0}.portfolio-closing h2{font-size:clamp(28px,4vw,52px);line-height:1.4;margin:16px 0;max-width:950px;letter-spacing:-.03em}.portfolio-closing p{font-size:18px;line-height:1.9;max-width:740px}.secondary-link{margin-left:30px}.back-link{font-size:13px;margin-bottom:40px}.case-page>.project-stage{max-width:1100px;margin:48px auto 0;padding:55px 90px 65px 45px}.case-page .portfolio-heading{padding-bottom:40px}.case-note-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}.case-note-grid h3{font-size:24px;line-height:1.5;margin:14px 0}.case-note-grid p{font-size:17px;line-height:1.9}.case-full{margin:60px 0}.case-full h2{font-size:34px}.case-full details{border-top:2px solid #23182e;border-bottom:2px solid #23182e;margin-bottom:22px}.case-full summary{cursor:pointer;padding:22px 4px;font-weight:800;list-style:none;display:flex;justify-content:space-between}.case-full summary::-webkit-details-marker{display:none}.case-full details img{display:block;width:min(100%,1000px);height:auto;margin:auto}.case-full details[open] summary span{transform:rotate(45deg)}
@media(max-width:1023px){.portfolio-page{padding:48px 24px 0}.featured-project{gap:28px;grid-template-columns:1.35fr 1fr}.project-copy p{font-size:16px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.case-note-grid{gap:24px}.portfolio-intro p{font-size:19px}.project-stage{padding:30px 43px 32px 20px}.portfolio-closing{padding:34px}.case-note-grid h3{font-size:21px}}
@media(max-width:650px){.portfolio-page{padding:34px 18px 0}.portfolio-heading{padding-bottom:34px}.portfolio-heading h1{font-size:43px;margin:18px 0 24px}.portfolio-intro{display:block}.portfolio-intro p,.case-lead{font-size:17px;line-height:1.85}.portfolio-intro .project-link{margin-top:16px}.portfolio-section-title{display:block;margin-top:36px}.portfolio-section-title>span{display:block;margin-top:10px}.featured-project{display:block;margin-bottom:30px;padding-bottom:30px}.project-stage{padding:30px 45px 36px 18px}.featured-project .project-copy{padding-top:23px}.project-copy h3{font-size:29px;margin:10px 0 14px}.project-copy p{margin-bottom:13px}.project-grid{grid-template-columns:1fr;gap:30px}.project-grid .project-stage{padding:30px 45px 34px 18px}.project-grid .browser-bar{height:22px}.project-grid .browser-bar span{font-size:8px}.project-grid .phone-frame{border-width:4px;border-radius:15px}.portfolio-closing{padding:27px 22px;margin:40px 0}.portfolio-closing p{font-size:16px}.secondary-link{margin:12px 0 0;display:table}.case-page>.project-stage{padding:30px 45px 34px 18px;margin-top:28px}.case-note-grid{grid-template-columns:1fr;gap:20px}.case-note-grid article{border-top:1px solid #d8cce5;padding-top:22px}.case-note-grid h3{font-size:23px}.case-note-grid p{font-size:16px}.back-link{margin-bottom:25px}.capture-note{margin-bottom:28px}.case-full h2{font-size:28px}}
@media(prefers-reduced-motion:no-preference){.project-link{transition:color .15s ease}}