/* Portfolio uses the approved Home palette and spacing. */
.vpp-main { padding-block: 48px 96px; }
.vpp-main :is(h1,h2,h3,p,figure) { margin: 0; overflow-wrap: anywhere; }
.vpp-main h1 { font-size: clamp(2.5rem,5vw,5rem); line-height: 1.12; font-weight: 500; letter-spacing: -.045em; }
.vpp-main h2, .vp-home .vpp-empty h2 { font-size: clamp(1.65rem,3vw,2.7rem); line-height: 1.2; letter-spacing: -.03em; font-weight: 500; }
.vpp-main h3 { font-size: clamp(1.3rem,2vw,1.75rem); line-height: 1.3; }
.vpp-heading { max-width: 960px; padding-block: 40px 56px; }
.vpp-heading p { margin-block: 16px; }
.vpp-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px 32px; }
.vpp-card { min-width: 0; }
.vpp-card-photo { display: block; overflow: hidden; border-radius: var(--vp-radius); aspect-ratio: 4/3; background: var(--vp-mist); }
.vpp-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 250ms ease; }
.vpp-card:hover .vpp-card-photo img { transform: scale(1.025); }
.vpp-card-copy { padding-block: 24px 8px; display: grid; gap: 12px; justify-items: start; }
.vpp-card-copy .vp-eyebrow { margin-bottom: 0 !important; }
.vpp-card-copy>p:not(.vp-eyebrow) { color: var(--vp-muted); }
.vpp-empty { padding: clamp(28px,5vw,72px); background: var(--vp-mist); border: 1px solid var(--vp-line); border-radius: var(--vp-radius); }
.vpp-empty h2 { max-width: 720px; }
.vpp-empty>p:not(.vp-eyebrow) { max-width: 580px; margin-block: 20px 28px; color: var(--vp-muted); }
.vpp-cover { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--vp-radius); max-width: var(--vpp-source-width, 100%); }
.vpp-cover img { width: 100%; height: 100%; object-fit: cover; }
.vpp-description { max-width: 820px; margin-block: 48px; overflow-wrap: anywhere; }
.vpp-description :is(p,ul,ol) { margin-block: 20px; }
.vpp-section { padding-block: 40px; }
.vpp-section>h2 { margin-bottom: 28px; }
.vpp-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.vpp-gallery img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--vp-radius); }
.vpp-gallery .vpp-natural img { object-fit: contain; background: var(--vp-mist); }
.vpp-gallery figcaption { margin-top: 12px; color: var(--vp-muted); }
.vpp-cta { margin-top: 48px; padding: clamp(28px,5vw,64px); background: var(--vp-water); border-radius: var(--vp-radius); }
.vpp-cta h2 { margin-bottom: 28px; }
.vpp-viewer { width: min(1100px,calc(100% - 32px)); max-height: 95dvh; border: 0; border-radius: 8px; padding: 20px; color: var(--vp-navy); }
.vpp-viewer::backdrop { background: rgb(9 47 66 / 90%); }
.vpp-viewer-media>img { width: 100%; height: min(65dvh,700px); object-fit: contain; }
.vpp-viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 8px; }
.vpp-viewer-bar h2 { font-size: 1rem; }
.vpp-viewer button { min-height: 44px; padding: 8px 16px; background: var(--vp-navy); color: white; border: 0; border-radius: 4px; cursor: pointer; }
body.vpp-viewer-open { overflow: hidden; }
.vpp-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vpp-comparison figure { position: relative; margin: 0; }
.vpp-comparison img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.vpp-comparison figcaption { position: absolute; top: 16px; left: 16px; padding: 6px 14px; background: var(--vp-navy); color: white; }
.vpp-comparison.is-interactive { display: block; position: relative; aspect-ratio: 3/2; overflow: hidden; --vpp-position: 50%; }
.vpp-comparison.is-interactive figure { position: absolute; inset: 0; }
.vpp-comparison.is-interactive .vpp-after { clip-path: inset(0 0 0 var(--vpp-position)); }
.vpp-comparison.is-interactive .vpp-after figcaption { left: auto; right: 16px; }
.vpp-comparison.is-interactive::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--vpp-position); width: 3px; background: white; pointer-events: none; }
.vpp-comparison-control { margin-top: 24px; }
.vpp-comparison-control input { display: block; width: 100%; min-height: 44px; accent-color: var(--vp-navy); }
.vpp-comparison-control input:focus-visible { outline: 3px solid var(--vp-teal); outline-offset: 4px; }
.vpp-comparison-control p { color: var(--vp-muted); font-size: .875rem; }
.vpp-page .pagination { margin-block: 32px; }
.vpp-page .page-numbers { display: inline-block; padding: 12px; }
@media(max-width:700px) { .vpp-grid,.vpp-gallery { grid-template-columns: minmax(0,1fr); } .vpp-main { padding-block: 24px 64px; } .vpp-heading { padding-block: 24px 40px; } .vpp-viewer { padding: 12px; } .vpp-viewer-bar { flex-wrap: wrap; } }
@media(prefers-reduced-motion:reduce) { .vpp-card-photo img { transition: none; } .vpp-card:hover .vpp-card-photo img { transform: none; } }