.portfolio-detail-design .pf-hero-grid{grid-template-columns:1fr 1fr;align-items:center;gap:40px;display:grid}.portfolio-detail-design.case-studies-design .cs-hero .pf-hero-grid h1,.portfolio-detail-design.case-studies-design .cs-hero .pf-hero-grid .sub{max-width:none}.portfolio-detail-design .cs-hero .vw-crumbs{margin-bottom:28px}@media (max-width:800px){.portfolio-detail-design .pf-hero-grid{grid-template-columns:1fr;gap:28px}}.portfolio-detail-design .pf-hero-chips{flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none;display:flex}.portfolio-detail-design .pf-hero-chips li{border-radius:var(--r-pill);font:500 var(--fs-xs) / 1 var(--font-sans);color:#ffffffdb;color:lab(100% -.0000298023 .0000119209/.86);background:#ffffff14;background:lab(100% -.0000298023 .0000119209/.08);border:1px solid #ffffff47;border:1px solid lab(100% -.0000298023 .0000119209/.28);padding:7px 12px}.portfolio-detail-design .cs-hero .pf-stage{min-width:0;margin-top:0}.portfolio-detail-design .pf-stage-note{font:500 var(--fs-xs) / 1.4 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:#ffffffad;color:lab(100% -.0000298023 .0000119209/.68);margin:12px 0 0}.portfolio-detail-design .pf-section-title{font:italic 400 clamp(32px, 4vw, 44px) / 1.08 var(--font-display);letter-spacing:-.02em;color:var(--fg-primary);margin:0 0 8px}.portfolio-detail-design .pf-section-title .dot{color:var(--fg-muted);font-style:normal}.portfolio-detail-design .pf-extra-pairs{flex-direction:column;gap:28px;display:flex}.portfolio-detail-design .pf-ba{border:1px solid var(--hair);border-radius:var(--r-2xl);background:var(--surface-card);box-shadow:var(--e-rest);overflow:hidden}.portfolio-detail-design .pf-ba .panes{grid-template-columns:1fr 1fr;display:grid;position:relative}.portfolio-detail-design .pf-ba .pane{flex-direction:column;gap:14px;min-width:0;padding:28px;display:flex}.portfolio-detail-design .pf-ba .pane.src{background:var(--vw-cream);border-right:1px solid var(--hair)}.portfolio-detail-design .pf-ba .pane .tag{border-radius:var(--r-pill);font:var(--fw-bold) 10px / 1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;align-self:flex-start;padding:5px 12px;display:inline-flex}.portfolio-detail-design .pf-ba .pane.src .tag{background:color-mix(in oklab, var(--vw-orange-500) 12%, transparent);color:var(--vw-orange-700)}.portfolio-detail-design .pf-ba .pane.out .tag{background:var(--vw-green-50);color:var(--vw-green-700)}.portfolio-detail-design .pf-ba .pane .image-slot,.portfolio-detail-design .pf-ba .pane .image-slot.image-slot--filled{background:#fff;border-radius:12px;width:100%;height:320px;display:block;overflow:hidden}.portfolio-detail-design .pf-ba .pane.src .image-slot{border:1.5px dashed color-mix(in oklab, var(--vw-orange-500) 50%, transparent)}.portfolio-detail-design .pf-ba .pane.out .image-slot{border:1.5px solid var(--vw-green-300)}.portfolio-detail-design .pf-ba .pane .image-slot__img{object-fit:cover;object-position:center;width:100%;height:100%}.portfolio-detail-design .pf-ba .pane .meta{font:500 11px / 1.5 var(--font-mono);color:var(--fg-muted);justify-content:space-between;gap:12px;display:flex}.portfolio-detail-design .pf-ba .pane .meta span:first-child{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.portfolio-detail-design .pf-ba .pane .meta span:last-child{flex:none}.portfolio-detail-design .pf-ba .compare{z-index:3;border:1px solid var(--hair);width:54px;height:54px;box-shadow:var(--e-lift);color:var(--vw-green-700);background:#fff;border-radius:50%;place-items:center;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.portfolio-detail-design .pf-ba .compare svg{width:22px;height:22px}.portfolio-detail-design .pf-ba .specs{border-top:1px solid var(--border-default);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:22px 28px;display:flex}.portfolio-detail-design .pf-ba .specs .seps{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.portfolio-detail-design .pf-ba .specs .chip{border:1px solid var(--border-default);font:600 10px / 1 var(--font-mono);color:var(--fg-secondary);white-space:nowrap;border-radius:7px;align-items:center;gap:7px;padding:6px 11px;display:inline-flex}@media (max-width:768px){.portfolio-detail-design .pf-ba .panes{grid-template-columns:1fr}.portfolio-detail-design .pf-ba .pane.src{border-right:none;border-bottom:1px solid var(--hair)}.portfolio-detail-design .pf-ba .compare svg{transform:rotate(90deg)}}.portfolio-detail-design .pf-stage{position:relative}.portfolio-detail-design .pf-stage .portfolio-design{background:0 0}.portfolio-detail-design .pf-stage .portfolio-design .pf-card{border-radius:var(--r-2xl);box-shadow:var(--e-lift);contain:paint;background:0 0;overflow:clip;transform:translateZ(0)}.portfolio-detail-design .pf-stage .portfolio-design .pf-card:hover{transform:translateZ(0)}.portfolio-detail-design .pf-stage .portfolio-design .pf-card,.portfolio-detail-design .pf-stage .portfolio-design .pf-card .ba{clip-path:inset(0 round var(--r-2xl));border-radius:var(--r-2xl)!important}.portfolio-detail-design .pf-stage .portfolio-design .pf-card .ba{overflow:hidden}.portfolio-detail-design .pf-answer-row{flex-direction:column;align-items:stretch;gap:16px;display:flex}.portfolio-detail-design .pf-answer-row .vw-answer{width:100%}.portfolio-detail-design .pf-specs{background:0 0;border:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;display:grid}@media (max-width:800px){.portfolio-detail-design .pf-specs{grid-template-columns:1fr 1fr}}@media (max-width:520px){.portfolio-detail-design .pf-specs{grid-template-columns:1fr}}.portfolio-detail-design .pf-specs>div{background:var(--surface-card);border:1px solid var(--hair);border-radius:var(--r-xl);box-shadow:var(--e-rest);flex-direction:column;padding:18px 20px;display:flex}.portfolio-detail-design .pf-specs dt{font:500 var(--fs-xs) / 1.4 var(--font-sans);color:var(--fg-muted);order:2;margin:8px 0 0}.portfolio-detail-design .pf-specs dd{font:var(--fw-semibold) var(--fs-md) / 1.35 var(--font-sans);color:var(--fg-primary);order:1;margin:0}.portfolio-detail-design .pf-narrative{max-width:none}.portfolio-detail-design .pf-narrative h2{font:italic 400 clamp(28px, 3.2vw, 40px) / 1.12 var(--font-display);letter-spacing:-.02em;color:var(--fg-primary);margin:0 0 12px}.portfolio-detail-design .pf-narrative h3{font:italic 400 clamp(24px, 2.8vw, 32px) / 1.15 var(--font-display);letter-spacing:-.02em;color:var(--fg-primary);border-top:1px solid var(--hair);margin:36px 0 12px;padding-top:32px}.portfolio-detail-design .pf-narrative h2+p,.portfolio-detail-design .pf-narrative h3+p,.portfolio-detail-design .pf-narrative p{font:400 var(--fs-md) / 1.65 var(--font-sans);color:var(--fg-secondary)}.portfolio-detail-design .pf-narrative>*+h2{border-top:1px solid var(--hair);margin-top:36px;padding-top:32px}.portfolio-detail-design .guide-article.pf-faq{background:0 0;max-width:none}.portfolio-detail-design .pf-faq>h2{font:italic 400 clamp(28px, 3.2vw, 40px) / 1.12 var(--font-display);letter-spacing:-.02em;color:var(--fg-primary);margin:0 0 18px}.portfolio-detail-design .pf-link-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}@media (max-width:800px){.portfolio-detail-design .pf-link-grid{grid-template-columns:1fr}}.portfolio-detail-design .pf-link-card{border:1px solid var(--hair);border-radius:var(--r-xl);background:var(--surface-card);min-height:100%;box-shadow:var(--e-rest);color:var(--fg-primary);flex-direction:column;gap:8px;padding:22px 22px 24px;text-decoration:none;display:flex}.portfolio-detail-design .pf-link-card:hover{border-color:color-mix(in oklab, var(--vw-green-500) 40%, var(--hair-strong));box-shadow:var(--e-lift)}.portfolio-detail-design .pf-link-card .kicker{font:var(--fw-bold) var(--fs-2xs) / 1.3 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--vw-green-700)}.portfolio-detail-design .pf-faq .vw-faq summary h3{font:inherit;letter-spacing:inherit;color:inherit;flex:1;margin:0}.portfolio-detail-design .pf-link-card h3{font:var(--fw-semibold) var(--fs-lg) / 1.25 var(--font-sans);color:inherit;margin:0}.portfolio-detail-design .pf-link-card p{font:400 var(--fs-sm) / 1.55 var(--font-sans);color:var(--fg-secondary);margin:0}.portfolio-design .pf-card a.body{color:inherit;text-decoration:none}.portfolio-design .pf-card a.body:hover h3{color:var(--vw-green-700)}