/* Personal photos and approved page layout, with targeted visual replacements. */
.vbh-root .vbh-real-hero { background: #e8eee7; }
.vbh-root .vbh-real-hero--team_selfie,
.vbh-root .vbh-real-hero--wasja { aspect-ratio: 3 / 4; }
.vbh-root.vbh-xp .vbh-real-hero img.vbh-real-photo { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:contain; object-position:center; }
.vbh-root .vbh-real-hero figcaption { background:rgba(19,49,36,.9); color:#fff; font:500 .95rem/1.5 system-ui,sans-serif; }
.vbh-team-page .vbh-photo--landscape { aspect-ratio:3/4; }
.vbh-team-page .vbh-photo--landscape img { object-fit:contain; background:#e8eee7; }
.vbh-onboarding-page .vbh-photo--page-hero { aspect-ratio:3/4; }
.vbh-onboarding-page .vbh-photo--page-hero img { object-fit:contain; background:#e8eee7; }
.vbh-about-page .vbh-photo--portrait img { object-position:center; }
.vbh-personal-photo-section { padding-top:0; }
.vbh-personal-photo { max-width:1000px; margin:0 auto; }
.vbh-personal-photo img { display:block; width:100%; height:auto; border-radius:24px; }
.vbh-personal-photo figcaption { margin-top:.75rem; color:#52675a; font-size:.94rem; line-height:1.6; }
.vbh-personal-photo--freedom img { aspect-ratio:4/3; object-fit:contain; }

/* Original logo, composed with real text: sharp at every screen size. */
.vbh-root.vbh-xp .vbh-logo-hero { display:block; padding:clamp(18px,2.4vw,32px); background:#fff; border-radius:36px; aspect-ratio:auto; }
.vbh-root.vbh-xp .vbh-logo-hero img { display:block; flex:0 1 auto; width:100%; max-width:500px; margin:auto; height:auto; aspect-ratio:1/1; object-fit:contain; object-position:center; }
.vbh-root.vbh-xp .vbh-logo-hero figcaption { position:static; margin:0 0 clamp(6px,1vw,16px); padding:0; color:#315f4f; background:transparent; border-radius:0; font:600 clamp(1.45rem,2.3vw,2rem)/1.3 Georgia,serif; }
.vbh-root.vbh-xp .vbh-real-hero--knowledge { aspect-ratio:auto; }
.vbh-root.vbh-xp .vbh-real-hero--knowledge img.vbh-real-photo { aspect-ratio:4/5; object-fit:cover; object-position:center; }
.vbh-consulting-page .vbh-visual-wasja { aspect-ratio:3/4; }
.vbh-consulting-page .vbh-visual-wasja img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; background:#e8eee7; }
.vbh-onboarding-page .vbh-visual-team-selfie img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
.vbh-consulting-page .vbh-generated-support { aspect-ratio:3/2; }
.vbh-consulting-page .vbh-generated-support img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.vbh-root.vbh-xp .vbh-symbol-caption,
.vbh-root .vbh-photo .vbh-symbol-caption { position:absolute; left:auto; right:12px; bottom:12px; margin:0; padding:5px 9px; border-radius:7px; background:rgba(18,47,36,.86); color:#fff; font:400 11px/1.4 system-ui,sans-serif; }

/* Neutral, topic-specific article artwork. No personal photos as thumbnails. */
.vbh-root .vbh-insight-card__visual img.vbh-neutral-placeholder { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.vbh-root .vbh-guide-featured.vbh-neutral-placeholder { display:block; width:100%; height:auto; max-height:440px; aspect-ratio:5/3; object-fit:contain; background:#edf2ec; }

/* The existing filled SVG rules must not fill these new outline icons. */
.vbh-router-page svg.vbh-line-icon { fill:none; stroke:currentColor; color:#315f4f; flex-shrink:0; overflow:visible; }
.vbh-router-page .vbh-router__choices svg.vbh-line-icon { width:40px; height:40px; }
.vbh-router-page .vbh-router__placeholder svg.vbh-line-icon { width:64px; height:64px; }
.vbh-router-page .vbh-card-icon svg.vbh-line-icon { width:36px; height:36px; }
.vbh-router-page svg.vbh-line-icon [fill="currentColor"] { fill:currentColor; }

@media (max-width:767px) {
 .vbh-root .vbh-real-hero { max-height:none; min-height:0; }
 .vbh-root .vbh-real-hero img { min-height:0; }
 .vbh-root.vbh-xp .vbh-logo-hero { padding:16px; min-height:0; }
 .vbh-root.vbh-xp .vbh-logo-hero img { aspect-ratio:1/1; }
 .vbh-root.vbh-xp .vbh-real-hero--knowledge img.vbh-real-photo { aspect-ratio:4/5; }
 .vbh-team-page .vbh-photo--landscape,
 .vbh-onboarding-page .vbh-photo--page-hero,
 .vbh-consulting-page .vbh-visual-wasja { max-height:none; }
 .vbh-consulting-page .vbh-visual-wasja { max-width:480px; margin-inline:auto; }
 .vbh-personal-photo img { border-radius:16px; }
}

/* Local handwriting font: no request to an external font service. */
@font-face {
 font-family:"VBH Caveat";
 src:url("brandmotion/caveat-600.woff2") format("woff2");
 font-style:normal;
 font-weight:600;
 font-display:swap;
}
.vbh-root.vbh-xp .vbh-motion-brand { padding:clamp(20px,3vw,38px) clamp(16px,2vw,28px) 24px; }
.vbh-motion-brand .vbh-embrace { display:block; width:100%; height:auto; overflow:visible; }
.vbh-root.vbh-xp .vbh-motion-brand .vbh-warm-tagline {
 font-family:"VBH Caveat","Segoe Print","Bradley Hand",cursive;
 font-size:clamp(2.15rem,3.5vw,3.05rem);
 font-weight:600; line-height:1.25; color:#315f4f;
 margin:8px 0 0; padding:0 4px 5px;
}
.vbh-embrace-arm { transform-box:view-box; }
.vbh-embrace-arm--left { transform-origin:200px 230px; }
.vbh-embrace-arm--right { transform-origin:400px 230px; }
.vbh-embrace-wordmark { transform-box:view-box; transform-origin:300px 382px; }
/* The unanimated state is the complete logo, including without JavaScript.
   Only the controller starts a cycle; it removes this class after completion. */
.vbh-motion-brand.vbh-motion-playing .vbh-embrace-arm { animation-duration:1.45s; animation-delay:.15s; animation-timing-function:cubic-bezier(.22,1,.36,1); animation-fill-mode:both; }
.vbh-motion-brand.vbh-motion-playing .vbh-embrace-arm--left { animation-name:vbhEmbraceLeft; }
.vbh-motion-brand.vbh-motion-playing .vbh-embrace-arm--right { animation-name:vbhEmbraceRight; }
.vbh-motion-brand.vbh-motion-playing .vbh-embrace-wordmark { animation:vbhWordmarkArrive .8s .95s cubic-bezier(.22,1,.36,1) both; }
.vbh-root.vbh-xp .vbh-motion-brand.vbh-motion-playing .vbh-warm-tagline { animation:vbhTaglineArrive .85s 1.45s cubic-bezier(.22,1,.36,1) both; }
@keyframes vbhEmbraceLeft { from { transform:translate(-26px,28px) rotate(-8deg); } to { transform:translate(0,0) rotate(0); } }
@keyframes vbhEmbraceRight { from { transform:translate(26px,28px) rotate(8deg); } to { transform:translate(0,0) rotate(0); } }
@keyframes vbhWordmarkArrive { from { opacity:0; transform:translateY(12px) scale(.94); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes vbhTaglineArrive { 0% { opacity:0; transform:translateY(14px) scale(.94); } 65% { opacity:1; transform:translateY(-2px) scale(1.025); } 100% { opacity:1; transform:translateY(0) scale(1); } }

/* Realistic transparent pictograms, with labels retained as real text. */
.vbh-router-page .vbh-realistic-icon { display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; min-width:64px; overflow:hidden; flex-shrink:0; vertical-align:middle; }
.vbh-router-page .vbh-realistic-icon img.vbh-realistic-icon__image { display:block; width:100%; height:100%; max-width:none; object-fit:contain; background:transparent; border:0; border-radius:0; box-shadow:none; }
.vbh-router-page .vbh-router__choices button { min-height:112px; }
.vbh-router-page .vbh-router__choices button > span:last-child { min-width:0; }
.vbh-router-page .vbh-router__choices small { overflow-wrap:anywhere; }
.vbh-router-page .vbh-shop-card__icon:has(.vbh-realistic-icon),
.vbh-router-page .vbh-card-icon:has(.vbh-realistic-icon) { width:72px; height:72px; background:transparent; }
.vbh-router-page .vbh-shop-card__icon .vbh-realistic-icon,
.vbh-router-page .vbh-card-icon .vbh-realistic-icon { width:72px; height:72px; }
@media (max-width:767px) {
 .vbh-router-page .vbh-router__choices .vbh-realistic-icon { width:56px; height:56px; min-width:56px; }
 /* Compact logo before the introduction, so it is visible without scrolling. */
 .vbh-root.vbh-home.vbh-xp > .vbh-xp-hero { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; padding-top:24px; }
 .vbh-root.vbh-home.vbh-xp > .vbh-xp-hero > .vbh-xp-hero-copy { grid-row:2; min-width:0; }
 .vbh-root.vbh-home.vbh-xp > .vbh-xp-hero > .vbh-motion-brand { grid-row:1; width:min(64vw,250px); max-width:100%; min-height:0; margin:0 auto; padding:12px 12px 10px; border-radius:24px; box-sizing:border-box; }
 .vbh-root.vbh-xp .vbh-motion-brand .vbh-warm-tagline { font-size:clamp(1.5rem,6.4vw,1.85rem); margin-top:4px; padding-bottom:0; }
}
@media (prefers-reduced-motion:reduce) {
 .vbh-motion-brand.vbh-motion-playing .vbh-embrace-arm,
 .vbh-motion-brand.vbh-motion-playing .vbh-embrace-wordmark,
 .vbh-root.vbh-xp .vbh-motion-brand.vbh-motion-playing .vbh-warm-tagline { animation:none; transform:none; opacity:1; }
}