.work-intro{padding-block:85px 60px;background:radial-gradient(ellipse at 75% 0,#dce4fb,transparent 55%)}.work-intro h1,.project-heading h1{font-family:var(--condensed);font-size:clamp(70px,9vw,130px);text-transform:uppercase;line-height:.95;letter-spacing:-.03em;font-weight:700;margin-top:25px}.work-intro h1 span{color:#2855ff}.work-intro>p:last-child{max-width:510px;margin-top:26px;color:var(--muted);font-size:16px}#portfolio-root{padding-bottom:90px}.preview-note{background:#e8edf7;border:1px solid #ced8ef;padding:22px 25px;border-radius:8px;font-size:13px;margin-bottom:30px;color:#3b506e}.preview-note p{margin-top:6px}.preview-note a{display:inline-block;margin-top:12px;text-decoration:underline;text-underline-offset:4px}.work-feature{display:grid;grid-template-columns:1.3fr 1fr;background:#17213a;color:#edf1ff;border-radius:16px;overflow:hidden;margin-bottom:55px}.feature-copy{padding:50px 40px;align-self:center}.feature-copy h2{font-family:var(--condensed);text-transform:uppercase;font-size:65px;font-weight:700;line-height:1;margin-top:20px}.feature-copy>p:not(.eyebrow){font-size:14px;color:#c2cce0;margin-top:20px}.feature-copy .button{background:#b7c5ff;color:#11182b;margin-top:25px}.work-visual{position:relative;min-height:300px;display:grid;place-items:center;overflow:hidden;background:#dbe4f6;color:#171816}.work-visual.apps{background:#e5d8cb}.work-visual.google{background:#dce8d6}.work-visual>img{width:100%;height:100%;max-height:650px;object-fit:contain}.work-mock{width:78%;background:#fbfaf7;border:1px solid #ffffff90;border-radius:9px;box-shadow:15px 25px 45px #25305222;padding:22px;transform:rotate(-5deg);position:relative}.mock-brand{font-size:8px;letter-spacing:.12em;color:#586374}.mock-screen{position:relative;margin-top:25px;height:170px;overflow:hidden}.mock-shape{height:100px;width:100px;border:24px solid #879cdd;border-radius:50%;margin-left:auto}.mock-line{height:9px;width:70%;background:#bfc9e0;margin-top:15px;border-radius:5px}.mock-line.short{width:45%;margin-top:8px}.apps .work-mock{width:155px;border:6px solid #30323a;border-radius:24px;padding:20px 13px;transform:rotate(8deg)}.apps .mock-screen{height:180px}.apps .mock-shape{background:#c18b62;border-color:#e7c7ac;width:86px;height:86px;margin:auto}.google .work-mock{transform:rotate(3deg)}.google .mock-shape{display:none}.google .mock-line{position:relative;top:85px;background:#bdd1b2}.mock-pin{position:absolute;top:5px;left:calc(50% - 35px);height:70px;width:70px;background:#42654b;color:#fff;display:grid;place-items:center;border-radius:40px 40px 40px 5px;font-size:30px}.work-filters{display:flex;gap:10px;flex-wrap:wrap}.work-filters button{padding:14px 22px;border:1px solid var(--line);border-radius:25px;min-height:44px;background:transparent;font-size:13px}.work-filters button[aria-pressed=true]{background:#171816;color:#fff;border-color:#171816}.work-status{font-size:12px;color:var(--muted);margin:22px 0}.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px 24px}.work-card{display:block;border-radius:9px;overflow:hidden;border:1px solid #dde0da;background:#fffefa;transition:transform .2s,box-shadow .2s}.work-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #0000000c}.work-card .work-visual{min-height:270px}.work-card:nth-child(3n+2) .work-mock{transform:rotate(5deg)}.work-caption{padding:25px}.work-category{font-size:10px;color:#4f647e;letter-spacing:.03em}.work-caption h3{font-size:23px;margin-top:10px}.work-caption p{font-size:12px;margin-top:12px;color:var(--muted)}.draft-tag{display:inline-block;margin-top:18px;font-size:10px;color:#506280;background:#e8edf6;padding:6px 9px;border-radius:4px}.feature-copy .draft-tag{display:block;width:max-content}.testimonial-preview,.work-testimonials{margin-top:75px;padding:40px;background:#e9ece7;border-radius:12px}.testimonial-preview h2,.work-testimonials h2{font-size:44px;margin-top:18px}.testimonial-preview>p:last-child{color:var(--muted);max-width:590px;margin-top:18px;font-size:14px}.client-quote{margin:30px 0;padding:30px;background:#e9edf6;border-radius:10px}.client-quote blockquote{font-size:24px;line-height:1.6;margin:0}.client-quote figcaption{font-size:12px;margin-top:18px;color:#52617b}.work-back{display:inline-block;margin-top:40px;text-decoration:underline;text-underline-offset:4px}.project-heading{padding-block:40px}.project-heading h1{font-size:clamp(55px,7vw,95px)}.project-heading>p:not(.eyebrow){margin-top:20px;max-width:650px}.project-heading .preview-note{margin-top:25px}.case-sections{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-block:55px}.case-sections h2{font-size:25px}.case-sections p{color:var(--muted);font-size:14px;margin-top:18px}.project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-block:40px}.project-gallery figure{margin:0}.project-gallery img{border-radius:8px;width:100%}.project-gallery figcaption{font-size:12px;color:var(--muted);margin-top:12px}.home-work{padding-block:90px}.home-work>h2{margin:20px 0 35px}.home-work> .button{margin-top:35px}#selected-work{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.work-empty{padding:50px 0}
@media(max-width:1000px){.work-grid{grid-template-columns:1fr 1fr}.feature-copy{padding:35px}.feature-copy h2{font-size:52px}.work-card .work-visual{min-height:240px}}
@media(max-width:700px){.work-intro{padding-block:55px 40px}.work-intro h1{font-size:17vw}.work-feature{grid-template-columns:1fr}.work-feature .work-visual{min-height:330px}.feature-copy{padding:30px}.work-grid,#selected-work{grid-template-columns:1fr}.work-filters button{font-size:12px;padding:12px 16px}.work-card .work-visual{min-height:300px}.case-sections,.project-gallery{grid-template-columns:1fr;gap:30px}.testimonial-preview,.work-testimonials{padding:25px}.testimonial-preview h2,.work-testimonials h2{font-size:35px}.client-quote blockquote{font-size:20px}.home-work{padding-block:60px}.project-heading h1{font-size:16vw}}
@media(prefers-reduced-motion:reduce){.work-card{transition:none}.work-card:hover{transform:none}}
.project-state{display:block;margin-top:16px;font-size:11px;font-weight:600;color:#3e5967}.feature-copy .project-state{color:#c2d4ff}.work-visual.brand-art{background:#dce9e8;min-height:300px}.work-visual.brand-art>img{width:150px;height:150px;object-fit:contain;border-radius:30px;box-shadow:0 20px 45px #12383d20}.work-card .work-visual>img{aspect-ratio:16/11;object-fit:cover;object-position:top;height:100%}.work-card .work-visual.brand-art>img{aspect-ratio:1;object-fit:contain;height:150px}.work-feature .work-visual{min-height:300px}.work-feature .work-visual>img{align-self:center;height:auto}.project-heading .project-state{font-size:13px}#portfolio-root>.work-visual{min-height:0}#portfolio-root>.work-visual>img{height:auto;max-height:720px}.work-status{line-height:1.5}
.work-card .work-visual{height:300px;min-height:300px}.work-card .work-visual>img{object-fit:contain;object-position:center;aspect-ratio:auto}.work-card .work-visual.brand-art>img{width:150px;height:150px}

.review-label{color:#bbc8e5;font-size:10px;letter-spacing:.06em;text-transform:uppercase}

/* Consistent project collection */
.work-intro{padding-block:65px 45px}.work-intro h1{font-size:clamp(64px,7.5vw,106px)}
.work-grid,#selected-work{align-items:stretch;gap:28px}.work-card{display:flex;flex-direction:column;border:1px solid #d7dddF;border-radius:12px;background:#fff;box-shadow:none;transition:transform .2s,border-color .2s,box-shadow .2s}.work-card:hover{transform:translateY(-4px);border-color:#a5b5d3;box-shadow:0 12px 28px #2336520b}.work-card:focus-visible{outline:3px solid #2855ff;outline-offset:5px}
.work-card .work-visual,.work-card .work-visual.apps,.work-card .work-visual.brand-art{height:auto;min-height:0;aspect-ratio:8/5;background:#e8ecf1;padding:20px;border-bottom:1px solid #dce2e9;display:flex;align-items:center;justify-content:center}
.work-card .work-visual>img{width:100%;height:100%;max-height:none;object-fit:contain;object-position:center;border-radius:5px;box-shadow:0 6px 16px #13264412}
.work-card .work-visual[data-project="hearth-app"]>img,.work-card .work-visual[data-project="garvin-digital"]>img{object-fit:cover;object-position:top}
.work-card .work-visual.brand-art>img{width:36%;height:auto;aspect-ratio:1;border-radius:22%;box-shadow:0 12px 24px #17383c20}
.work-card .work-caption{display:flex;flex:1;flex-direction:column;padding:25px;min-height:235px}.work-category{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#586b85}.work-caption h3{font-family:var(--display);font-weight:600;font-size:25px;letter-spacing:-.045em;line-height:1.2;min-height:2.4em;margin-top:12px}.work-caption p{font-size:13px;line-height:1.75;margin-top:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.work-caption .project-state{align-self:flex-start;margin-top:auto;padding:7px 10px;background:#eef2f7;border:1px solid #e2e8f0;border-radius:5px;font-size:10px;line-height:1.5;color:#3a536c}.work-caption p+.project-state{margin-top:24px}.work-caption .draft-tag{align-self:flex-start}.work-filters{gap:8px}.work-filters button{border-radius:7px;padding:12px 20px;background:#fff}.work-status{margin-block:20px 28px}
@media(max-width:1000px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.work-grid,#selected-work{gap:22px}.work-caption h3{font-size:24px}}
@media(max-width:700px){.work-intro{padding-block:45px 32px}.work-intro h1{font-size:16vw}.work-grid,#selected-work{grid-template-columns:minmax(0,1fr);gap:24px}.work-card .work-caption{min-height:215px;padding:23px}.work-caption h3{min-height:0;font-size:26px}.work-card .work-visual{padding:18px}.work-caption .project-state{margin-top:24px}}
@media(prefers-reduced-motion:reduce){.work-card{transition:none}.work-card:hover{transform:none}}

/* Real website previews in matching browser frames. */
.work-card .work-visual.website-preview{padding:18px}.website-frame{width:100%;overflow:hidden;border:1px solid #c8d0dc;border-radius:7px;background:#fff;box-shadow:0 8px 20px #1e35551a}.website-frame-bar{display:flex;align-items:center;gap:10px;min-height:25px;padding:6px 9px;background:#f6f8fb;border-bottom:1px solid #dce2eb}.frame-dots{display:flex;gap:3px;flex-shrink:0}.frame-dots i{width:4px;height:4px;border-radius:50%;background:#bac4d2}.frame-address{font-size:7px;line-height:1.4;letter-spacing:.01em;color:#55647b;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.website-frame-screen{aspect-ratio:16/9;overflow:hidden;background:#e6eaf0}.website-frame-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.work-caption p{min-height:5.25em}#portfolio-root>.website-preview{padding:35px;background:#e8ecf1;border-radius:12px}#portfolio-root>.website-preview .website-frame{max-width:1100px}#portfolio-root>.website-preview .website-frame-bar{min-height:35px;padding:10px 14px}#portfolio-root>.website-preview .frame-address{font-size:11px}#portfolio-root>.website-preview .frame-dots i{width:6px;height:6px}#portfolio-root>.website-preview .website-frame-screen{aspect-ratio:auto}#portfolio-root>.website-preview .website-frame-screen img{height:auto;max-height:none;object-fit:contain}@media(max-width:700px){.work-card .work-visual.website-preview{padding:16px}.frame-address{font-size:8px}#portfolio-root>.website-preview{padding:16px}}

.work-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:18px}.work-featured-label{color:#2855ff;font-size:9px;font-weight:600;white-space:nowrap}.work-card.featured-project{border-color:#aabbe4}

/* Actual app opening screen, framed without client drawings. */
.app-device-frame{width:100%;overflow:hidden;border:6px solid #202b33;border-radius:12px;background:#f4f3f9;box-shadow:0 8px 20px #1e35551a}.app-device-frame img{display:block;width:100%;height:auto;max-height:none}.work-card .app-opening-preview{padding:18px}#portfolio-root>.app-opening-preview{padding:35px;background:#e8ecf1;border-radius:12px}#portfolio-root>.app-opening-preview .app-device-frame{max-width:1100px}@media(max-width:700px){#portfolio-root>.app-opening-preview{padding:16px}}

/* Original blue mockup cards, populated with real project screens. */
.work-card .work-visual,.work-card .work-visual.apps,.work-card .work-visual.website-preview{background:#dbe4f6;padding:24px;isolation:isolate}
.work-card .website-frame{width:91%;padding:10px;background:#fffefa;border:1px solid #ffffff90;border-radius:8px;transform:rotate(-5deg);box-shadow:12px 18px 26px #25305222}
.work-card .website-frame-bar{display:none}.work-card .website-frame-screen{border-radius:3px;aspect-ratio:16/10;background:#fff}
.work-card .app-device-frame{position:relative;width:32%;height:100%;aspect-ratio:9/17;flex-shrink:0;border:5px solid #30323a;border-radius:20px;padding:0;overflow:hidden;background:#f4f3f9;transform:rotate(8deg);box-shadow:12px 18px 26px #25305222}
.work-card .app-device-frame::after{content:"";position:absolute;top:0;left:25%;width:50%;height:8px;border-radius:0 0 7px 7px;background:#30323a}
.app-device-screen{width:100%;height:100%;overflow:hidden;background:#f4f3f9}.app-device-screen img{width:100%;height:auto;display:block}
.work-card [data-project="hearth-app"] .app-device-screen img{height:100%;object-fit:cover;object-position:left top}
#portfolio-root>.app-opening-preview .app-device-frame{border-radius:12px;aspect-ratio:auto}#portfolio-root>.app-opening-preview .app-device-screen{height:auto}
@media(max-width:700px){.work-card .work-visual.website-preview,.work-card .work-visual.apps{padding:25px}}

.work-card [data-project="apps-1"] .app-device-frame{width:90%;height:auto;aspect-ratio:2/1;border-radius:16px;transform:rotate(8deg);padding:0 6px}.work-card [data-project="apps-1"] .app-device-frame::after{top:25%;left:0;width:6px;height:50%;border-radius:0 6px 6px 0}

/* Landscape iPad frames for the app portfolio. */
.work-card .app-device-frame,.work-card [data-project="apps-1"] .app-device-frame{width:88%;height:auto;aspect-ratio:4/3;border:6px solid #30323a;border-radius:14px;padding:0;transform:rotate(5deg)}
.work-card .app-device-frame::after,.work-card [data-project="apps-1"] .app-device-frame::after{top:calc(50% - 2px);left:-4px;width:3px;height:3px;border-radius:50%;background:#67717d}
.work-card .app-device-screen{display:flex;align-items:center;justify-content:center;background:#f4f3f9}
.work-card .app-device-screen img,.work-card [data-project="hearth-app"] .app-device-screen img{width:100%;height:100%;object-fit:contain;object-position:center}

.work-card .work-visual.apps{padding:18px}.work-card .app-device-frame,.work-card [data-project="apps-1"] .app-device-frame{width:70%;max-height:85%}

/* Fill the Hearth iPad display with its interface. */
.work-card [data-project="hearth-app"] .app-device-screen img{width:100%;height:100%;object-fit:cover;object-position:left top}

/* Anchor Skalet’s opening UI to the tablet’s top edge. */
.work-card [data-project="apps-1"] .app-device-screen{align-items:flex-start;background:#f3f2f8}.work-card [data-project="apps-1"] .app-device-screen img{width:100%;height:auto;object-fit:contain;object-position:top;flex-shrink:0}

/* Coordinated mockups with individual framing and varied composition. */
.work-card .work-visual{background:#dbe4f6}
.work-card [data-project="websites-3"] .website-frame{width:96%;transform:rotate(-4deg)}
.work-card [data-project="websites-1"] .website-frame{width:88%;transform:rotate(3deg)}
.work-card [data-project="websites-2"] .website-frame{width:94%;transform:rotate(-2deg)}
.work-card [data-project="garvin-digital"] .website-frame{width:89%;transform:rotate(4deg)}
.work-card [data-project="apps-1"] .app-device-frame{width:86%;aspect-ratio:16/10;max-height:88%;transform:rotate(-4deg);border-radius:12px}
.work-card [data-project="apps-1"] .app-device-screen{align-items:center}
.work-card [data-project="apps-1"] .app-device-screen img{height:100%;object-fit:contain;object-position:center}
.work-card [data-project="hearth-app"] .app-device-frame{width:73%;transform:rotate(5deg)}
.work-card .work-visual[data-project="nielsen-google"]{background:#dbe4f6;padding:17px}
.work-card [data-project="nielsen-google"]>img{width:auto;height:100%;max-width:85%;object-fit:contain;transform:rotate(-3deg);border:5px solid #fff;border-radius:9px;box-shadow:9px 14px 24px #25305222}

/* Quiet, uniform project boxes: one preview treatment across the collection. */
.work-card .work-visual,.work-card .work-visual.apps,.work-card .work-visual.website-preview,.work-card .work-visual[data-project="nielsen-google"]{padding:20px;background:#dbe4f6;aspect-ratio:8/5}
.work-card .work-visual .website-frame,.work-card .work-visual .app-device-frame,.work-card [data-project="apps-1"] .app-device-frame,.work-card [data-project="hearth-app"] .app-device-frame{width:100%;height:auto;max-height:none;aspect-ratio:16/10;transform:none;border:8px solid #fff;border-radius:7px;padding:0;background:#f3f2f8;box-shadow:0 7px 18px #25305216;overflow:hidden}
.work-card .website-frame-screen{aspect-ratio:auto;width:100%;height:100%;border-radius:0}
.work-card .app-device-frame::after{display:none}
.work-card .app-device-screen{height:100%;display:flex;align-items:center}
.work-card [data-project="apps-1"] .app-device-screen img{width:100%;height:100%;object-fit:contain;object-position:center}
.work-card [data-project="hearth-app"] .app-device-screen img{width:100%;height:100%;object-fit:cover;object-position:left top}
.work-card [data-project="nielsen-google"]>img{width:100%;height:auto;aspect-ratio:16/10;max-width:none;object-fit:cover;object-position:center 30%;transform:none;border:8px solid #fff;border-radius:7px;box-shadow:0 7px 18px #25305216}
@media(max-width:700px){.work-card .work-visual,.work-card .work-visual.apps,.work-card .work-visual.website-preview{padding:20px}}

/* Service categories share a layout and use distinct preview colors. */
.work-card .work-visual.apps{background:#dce9e1}

/* Skalet uses its real opening screen directly, without a mock device. */
.work-card .work-visual[data-project="apps-1"]>img{width:100%;height:auto;max-height:100%;aspect-ratio:auto;object-fit:contain;border:0;border-radius:5px;box-shadow:0 7px 18px #25305216}

.work-group-heading{grid-column:1/-1;font-family:var(--display);font-size:28px;line-height:1.2;letter-spacing:-.035em;margin:28px 0 0}.work-group-heading:first-child{margin-top:0}