.vpi { --ink:#1f2923; --green:#315844; --paper:#f7f5f0; --sage:#dfe7dc; --line:rgba(31,41,35,.14); color:var(--ink); background:#fff; }
.vpi *, .vpi *::before, .vpi *::after { box-sizing:border-box; }
.vpi img { display:block; width:100%; }
.vpi h1, .vpi h2, .vpi h3, .vpi p { margin:0; }
.vpi a { color:inherit; }
.vpi-eyebrow { margin-bottom:15px !important; color:var(--green); font-size:10px; letter-spacing:.18em; font-weight:750; text-transform:uppercase; }
.vpi-hero { padding:clamp(70px,8vw,118px) max(24px,calc((100vw - 1380px)/2)); text-align:center; background:var(--paper); }
.vpi-hero h1 { max-width:820px; margin:0 auto; font-size:clamp(2.6rem,4.1vw,4.5rem); line-height:1.05; letter-spacing:-.04em; font-weight:550; }
.vpi-hero > p:last-child { max-width:650px; margin:24px auto 0; font-size:1rem; line-height:1.7; opacity:.66; }
.vpi-nav { position:sticky; top:0; z-index:3; display:grid; grid-template-columns:repeat(3,1fr); padding-inline:max(24px,calc((100vw - 1380px)/2)); background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.vpi-nav a { display:flex; align-items:center; justify-content:center; gap:12px; min-height:62px; padding:12px 18px; text-align:center; text-decoration:none; font-size:12px; font-weight:650; }
.vpi-nav a + a { border-left:1px solid var(--line); }
.vpi-nav span { color:var(--green); font-size:8px; }
.vpi-nav a:hover { background:var(--sage); }
.vpi-category { padding:clamp(68px,8vw,110px) max(24px,calc((100vw - 1380px)/2)); scroll-margin-top:72px; }
.vpi-category--tint { background:var(--paper); }
.vpi-category__head { display:grid; grid-template-columns:1.25fr .55fr; gap:clamp(36px,7vw,110px); align-items:end; margin-bottom:50px; }
.vpi-category__head h2 { font-size:clamp(2.1rem,3.1vw,3.5rem); line-height:1.08; letter-spacing:-.035em; font-weight:550; }
.vpi-category__head > p { max-width:420px; font-size:.92rem; line-height:1.7; opacity:.64; }
.vpi-grid { max-width:1380px; display:grid; margin:0 auto; gap:22px; }
.vpi-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.vpi-grid--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.vpi-grid--two .vpi-card { max-width:520px; }
.vpi-card { min-width:0; }
.vpi-card__image { display:block; aspect-ratio:4/5; overflow:hidden; background:#ebe7df; }
.vpi-card__image img { height:100%; object-fit:contain; padding:18px; transition:transform .4s ease; }
.vpi-card__image:hover img { transform:scale(1.025); }
.vpi-card__copy { padding:17px 2px 0; }
.vpi-card__copy > p { margin-bottom:8px; color:var(--green); font-size:8px; letter-spacing:.15em; font-weight:700; }
.vpi-card__copy h3 { min-height:2.9em; font-size:1rem; line-height:1.45; font-weight:650; }
.vpi-card__copy h3 a { text-decoration:none; }
.vpi-card__copy h3 a:hover { text-decoration:underline; text-underline-offset:4px; }
.vpi-card__copy > span { display:block; min-height:3em; margin-top:8px; font-size:12px; line-height:1.55; opacity:.62; }
.vpi-card__copy > div { display:flex; justify-content:space-between; gap:16px; margin-top:17px; padding-top:14px; border-top:1px solid var(--line); }
.vpi-card__copy strong { color:var(--green); font-size:13px; }
.vpi-card__copy > div a { font-size:11px; text-underline-offset:4px; }
.vpi-assurance { display:grid; grid-template-columns:repeat(3,1fr); padding:0 max(24px,calc((100vw - 1380px)/2)) clamp(70px,8vw,110px); background:#fff; }
.vpi-assurance div { padding:28px clamp(18px,3vw,38px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.vpi-assurance div + div { border-left:1px solid var(--line); }
.vpi-assurance strong, .vpi-assurance span { display:block; }
.vpi-assurance strong { margin-bottom:8px; font-size:13px; }
.vpi-assurance span { font-size:11px; line-height:1.55; opacity:.62; }
@media (max-width:800px) {
  .vpi-category__head { grid-template-columns:1fr; align-items:start; }
  .vpi-grid--three, .vpi-grid--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vpi-nav a { font-size:10px; }
  .vpi-nav span { display:none; }
}
@media (max-width:540px) {
  .vpi-nav { position:static; grid-template-columns:1fr; }
  .vpi-nav a + a { border-left:0; border-top:1px solid var(--line); }
  .vpi-grid--three, .vpi-grid--two { grid-template-columns:1fr; }
  .vpi-grid--two .vpi-card { max-width:none; }
  .vpi-assurance { grid-template-columns:1fr; }
  .vpi-assurance div + div { border-left:0; border-top:0; }
}