.site-header{position:absolute;top:20px;left:50%;transform:translateX(-50%);margin:0;z-index:10}
.portfolio-intro{position:relative;z-index:0;padding:165px 24px 95px;background-color:#f3e8de;background-image:repeating-linear-gradient(120deg,#27080f04 0,#27080f04 1px,transparent 1px,transparent 15px);transform:translateY(var(--portfolio-offset,0px));will-change:transform;text-align:center}
.intro-inner{max-width:1152px;margin:auto}.portfolio-intro .breadcrumb{text-align:left;margin:0 0 52px}.portfolio-intro h1{font-size:clamp(42px,4.7vw,65px);line-height:1.08;max-width:990px;margin:25px auto 28px}.portfolio-intro p{max-width:720px;margin:0 auto;font-size:16px}.portfolio-intro em{color:#764052}
.project-filters{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:38px}.project-filters button{border:1px solid #27080f40;color:var(--wine);background:#ffffff88;border-radius:30px;padding:12px 21px;font-size:12px;font-weight:600;transition:background .25s,color .25s}.project-filters button[aria-pressed=true]{background:var(--wine);color:var(--cream);border-color:var(--wine)}.project-filters button:hover{background:var(--pink);color:var(--wine)}
.portfolio-projects{position:relative;z-index:2;background:#fff;border-radius:60px 60px 0 0;margin:0 auto;padding:75px max(5vw,24px) 0;max-width:1440px}
.project-section-head{max-width:1200px;margin:0 auto 40px;display:flex;align-items:start;justify-content:space-between;gap:60px}.project-section-head h2{margin-bottom:0}.project-section-head>p{max-width:350px;font-size:14px;margin:12px 0 0}
.project-grid{display:grid;grid-auto-rows:1fr;gap:32px;max-width:1200px;margin:auto}.portfolio-project{--project-bg:#e5e8e7;display:grid;grid-template-columns:1fr 1fr;border:1px solid #27080f24;border-radius:40px;overflow:hidden;background:#fff;min-height:640px}.colour-green{--project-bg:#d6ded4}.colour-sand{--project-bg:#e8d8c7}.colour-blue{--project-bg:#dce4e8}.colour-cream{--project-bg:#eee8dc}.colour-olive{--project-bg:#e4e5d5}.colour-peach{--project-bg:#eedbce}
.project-visual{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;background:var(--project-bg);padding:65px 42px 80px;min-height:640px;overflow:hidden}.desktop-frame{position:relative;background:#fff;border:9px solid #fff;border-radius:18px;box-shadow:13px 23px 28px #27080f26;width:100%;height:350px;overflow:hidden;transform:rotate(-4deg);transition:transform .45s ease,box-shadow .45s ease}.desktop-frame>img{display:block;width:100%;height:calc(100% - 18px);object-fit:cover;object-position:top}.screen-bar{height:18px;display:flex;align-items:center;gap:4px;background:#fff;padding-left:3px}.screen-bar i{width:4px;height:4px;background:#b3a7a9;border-radius:50%}.project-mobile{position:absolute;right:25px;bottom:95px;width:115px;height:250px;overflow:hidden;border:6px solid #fff;border-radius:20px;background:#fff;box-shadow:10px 13px 22px #27080f25;transform:rotate(6deg);transition:transform .45s ease}.project-mobile>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.portfolio-project:hover .desktop-frame{transform:rotate(0deg) translateY(-5px);box-shadow:12px 28px 32px #27080f28}.portfolio-project:hover .project-mobile{transform:rotate(2deg) translateY(-6px)}.project-number{position:absolute;left:28px;bottom:25px;font-size:11px;letter-spacing:1px;color:#6f5f66}
.project-info{padding:42px;display:flex;flex-direction:column;min-width:0}.project-niche{text-transform:uppercase;letter-spacing:1.5px;font-size:10px;color:#765568}.project-info h3{font-size:34px;line-height:1.12;margin:15px 0 18px}.technology-list{list-style:none;display:flex;gap:7px;flex-wrap:wrap;padding:0;margin:0 0 24px}.technology-list li{border:1px solid #27080f25;border-radius:18px;font-size:10px;padding:5px 10px}.project-summary{font-size:15px;line-height:1.75;margin-bottom:24px}.project-work{margin-bottom:22px}.project-work h4{font:600 11px/1.5 Manrope,sans-serif;text-transform:uppercase;letter-spacing:1px;margin:0 0 12px}.project-work p{font-size:13px;line-height:1.85;margin:0}.feature-list{list-style:none;display:flex;flex-wrap:wrap;gap:7px 16px;padding:0;margin:0 0 28px}.feature-list li{font-size:11px;padding-left:13px;position:relative}.feature-list li:before{content:'+';position:absolute;left:0;color:#764052}.project-credit{margin-top:auto;border-top:1px solid #27080f25;padding-top:20px}.project-credit strong{font-size:11px;font-weight:600}.project-credit p{font-size:10px;line-height:1.7;margin:6px 0 0;color:#716269}
.follow-section{position:relative;z-index:2;max-width:none;width:calc(100% - 40px);margin:120px 20px 0;padding:75px max(5vw,24px);background-color:var(--lime);border-radius:60px;background-image:linear-gradient(#27080f08 1px,transparent 1px);background-size:100% 28px}.follow-section>h2,.follow-section>.eyebrow{max-width:1100px;margin-left:auto;margin-right:auto}.follow-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:1100px;margin:42px auto 0}.follow-link{display:flex;align-items:start;gap:22px;border-top:1px solid #27080f44;padding-top:27px;text-decoration:none}.follow-link>span:last-child{margin-left:auto;font-size:25px}.follow-symbol{width:45px;height:45px;flex:none;font-size:32px;line-height:1.3}.follow-link h3{font-size:30px;margin-bottom:12px}.follow-link p{font-size:13px;max-width:310px;margin:0}.follow-link:hover h3{text-decoration:underline;text-underline-offset:5px}.contact{position:relative;z-index:2}.contact .pill{margin-top:10px}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1100px){.project-info{padding:32px}.project-visual{padding-left:30px;padding-right:30px}.project-info h3{font-size:30px}.project-mobile{right:18px;width:100px;height:220px}.portfolio-project{min-height:660px}}
@media(max-width:1000px){.portfolio-intro{padding:160px 26px 65px}.portfolio-intro h1{font-size:44px}.portfolio-intro .breadcrumb{margin-bottom:36px}.portfolio-intro p{font-size:15px}.portfolio-projects{padding:55px 26px 0;border-radius:40px 40px 0 0}.project-section-head{display:block;text-align:center}.project-section-head>p{max-width:600px;margin:24px auto 0}.portfolio-project{grid-template-columns:1fr;min-height:0;max-width:720px;width:100%;margin:auto}.project-visual{min-height:430px;padding:48px 60px 58px}.desktop-frame{height:310px}.project-mobile{right:30px;bottom:55px;width:110px;height:235px}.project-info{padding:35px;text-align:center}.technology-list,.feature-list{justify-content:center}.project-credit{margin-top:0}.follow-section{margin:85px 18px 0;width:calc(100% - 36px);padding:60px 30px;border-radius:40px;text-align:center}.follow-grid{gap:35px}.follow-link{flex-direction:column;align-items:center;position:relative}.follow-link>span:last-child{position:absolute;right:0;top:20px}.follow-link p{max-width:330px}.project-filters button{padding:11px 17px}.project-filters{gap:10px}}
@media(max-width:600px){.portfolio-intro{padding:145px 24px 55px}.portfolio-intro h1{font-size:38px}.portfolio-intro h1 br{display:none}.portfolio-intro .breadcrumb{font-size:9px;margin-bottom:30px}.portfolio-intro p{font-size:14px}.project-filters{margin-top:28px}.project-filters button{font-size:11px;padding:10px 14px}.portfolio-projects{padding:45px 18px 0}.portfolio-project{border-radius:30px}.project-visual{min-height:330px;padding:40px 30px 48px}.desktop-frame{height:240px;border-width:7px;border-radius:13px}.project-mobile{width:85px;height:190px;right:20px;bottom:28px;border-width:5px;border-radius:16px}.project-info{padding:30px 25px}.project-info h3{font-size:30px}.project-summary{font-size:14px}.project-work p{font-size:13px}.follow-grid{grid-template-columns:1fr}.follow-section{padding:50px 25px}.project-section-head h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){.portfolio-intro{transform:none!important}.desktop-frame,.project-mobile{transition:none}}
.portfolio-projects>.project-filters{position:sticky;top:0;z-index:30;margin:0 auto 40px;padding:16px 8px;background:#fff;max-width:1200px;border-radius:0 0 24px 24px;box-shadow:0 10px 16px #27080f08}
.portfolio-project{position:sticky;top:var(--stack-top,20px)}
.follow-section{background-image:linear-gradient(#27080f12 1px,transparent 1px),linear-gradient(90deg,#27080f12 1px,transparent 1px);background-size:28px 28px}
@media(min-width:1001px){.project-reversed .project-visual{grid-column:2;grid-row:1}.project-reversed .project-info{grid-column:1;grid-row:1}}