/* Native Work portfolio grid */
.np-work-page { background: var(--np-color-paper); }
.np-work-hero { margin: 0; padding: clamp(72px, 9vw, 132px) max(24px, calc((100vw - 1160px) / 2)); background: linear-gradient(120deg, var(--np-color-ink) 0 58%, var(--np-color-accent) 58% 100%); color: #fff; position: relative; overflow: hidden; }
.np-work-hero::after { content: "✦"; position: absolute; right: 8%; top: 12%; color: var(--np-color-sun); font-size: clamp(6rem, 12vw, 11rem); }
.np-work-hero .np-kicker { color: var(--np-color-aqua); }
.np-work-hero h1 { color: #fff; max-width: 900px; font-size: clamp(4.2rem, 8vw, 8rem); line-height: .88; letter-spacing: -.065em; }
.np-work-hero p { max-width: 680px; color: #fff; font-size: 1.2rem; }
.np-work-grid-wrap { padding: clamp(64px, 8vw, 110px) max(24px, calc((100vw - 1160px) / 2)); }
.np-portfolio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 34px; }
.np-portfolio-card { min-width: 0; background: #fff; border: 3px solid var(--np-color-ink); box-shadow: 10px 10px 0 var(--np-color-ink); }
.np-portfolio-card:nth-child(4n+2), .np-portfolio-card:nth-child(4n+3) { background: var(--np-color-sun); }
.np-portfolio-image { display: block; overflow: hidden; background: var(--np-color-aqua); border-bottom: 3px solid var(--np-color-ink); aspect-ratio: 4 / 3; }
.np-portfolio-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.np-portfolio-card:hover .np-portfolio-image img { transform: scale(1.025); }
.np-portfolio-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--np-color-ink); font: 800 5rem/1 var(--np-font-heading); }
.np-portfolio-card-copy { padding: 24px 26px 30px; }
.np-portfolio-type { margin: 0 0 9px; color: var(--np-color-accent); font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.np-portfolio-card h2 { margin: 0; font-size: clamp(1.7rem, 2.5vw, 2.5rem); line-height: 1.02; }
.np-portfolio-card h2 a { color: var(--np-color-ink); text-decoration: none; }
.np-portfolio-card h2 a:hover { color: var(--np-color-accent); }
.np-work-cta { padding: clamp(72px, 9vw, 120px) max(24px, calc((100vw - 1160px) / 2)); background: linear-gradient(120deg, var(--np-color-coral) 0 62%, var(--np-color-sun) 62% 100%); color: var(--np-color-ink); }
.np-work-cta .np-kicker { color: var(--np-color-ink); }
.np-work-cta h2 { max-width: 900px; margin-bottom: 22px; color: var(--np-color-ink); font-size: clamp(3rem, 6vw, 6rem); line-height: .94; letter-spacing: -.055em; }
.np-work-cta > p:not(.np-kicker) { max-width: 720px; color: var(--np-color-ink); font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.np-work-cta-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px 30px; margin-top: 34px; }
.np-work-cta .np-button { background: var(--np-color-ink); color: #fff !important; box-shadow: 6px 6px 0 #fff; }
.np-work-call { color: var(--np-color-ink); font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (max-width: 781px) { .np-work-cta { background: var(--np-color-coral); } .np-work-cta-actions { align-items: stretch; flex-direction: column; } .np-work-cta .np-button { text-align: center; } }
@media (max-width: 781px) { .np-work-hero { background: var(--np-color-ink); } .np-work-hero::after { opacity: .22; } .np-portfolio-grid { grid-template-columns: 1fr; } }