/* Blog article (new design, test address only until approved) — lives in an on-page Embed so the Designer shows it too. Copied from the approved sample page blog-post-new. */
.bp-body-slot { max-width: 44rem; }
.bp-body-slot .w-richtext { color: #cfcfcf; }
.bp-body-slot .w-richtext > *:first-child { margin-top: 0 !important; }
.bp-body-slot .w-richtext p { margin: 0 0 1.25rem; font-family: Raleway, sans-serif; font-size: 1.05rem; line-height: 1.8; font-weight: 400; color: #cfcfcf; letter-spacing: 0; text-transform: none; }
.bp-body-slot .w-richtext h2 { margin: 3rem 0 1rem; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.85rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; color: #fff; text-transform: none; scroll-margin-top: 7rem; }
.bp-body-slot .w-richtext h3 { margin: 2.25rem 0 .75rem; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.3rem; line-height: 1.35; font-weight: 700; letter-spacing: 0; color: #fff; text-transform: none; scroll-margin-top: 7rem; }
.bp-body-slot .w-richtext h4 { margin: 1.75rem 0 .5rem; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.05rem; line-height: 1.4; font-weight: 700; color: #fff; text-transform: none; }
.bp-body-slot .w-richtext h2 strong, .bp-body-slot .w-richtext h3 strong { font-weight: inherit; }
.bp-body-slot .w-richtext strong { color: #fff; font-weight: 700; }
.bp-body-slot .w-richtext em { color: #e6e6e6; }
.bp-body-slot .w-richtext a { color: #cddc2c; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bp-body-slot .w-richtext a:hover { color: #fff; }
.bp-body-slot .w-richtext ul, .bp-body-slot .w-richtext ol { margin: 0 0 1.5rem; padding-left: 1.4rem; font-family: Raleway, sans-serif; font-size: 1.02rem; line-height: 1.75; color: #cfcfcf; }
.bp-body-slot .w-richtext li { margin-bottom: .55rem; padding-left: .25rem; }
.bp-body-slot .w-richtext ul li::marker { color: #cddc2c; }
.bp-body-slot .w-richtext ol li::marker { color: #cddc2c; font-weight: 700; }
.bp-body-slot .w-richtext blockquote { margin: 2rem 0; padding: 1.25rem 1.5rem; border-left: 3px solid #cddc2c; border-radius: 0 12px 12px 0; background: #1b1b1b; font-family: Raleway, sans-serif; font-size: 1.05rem; line-height: 1.65; color: #fff; }
.bp-body-slot .w-richtext figure { margin: 2.25rem 0; }
.bp-body-slot .w-richtext figure img { width: 100%; height: auto; border-radius: 16px; }
.bp-body-slot .w-richtext figcaption { margin-top: .6rem; font-family: Raleway, sans-serif; font-size: .8rem; color: #8c8c8c; text-align: left; }
.bp-body-slot .w-richtext .w-embed { margin: 2rem 0; }
.bp-body-slot .w-richtext table { width: 100%; border-collapse: collapse; }
/* Quote lines written as italic paragraphs get a pull-quote look */
.bp-body-slot .w-richtext p:has(> em:only-child) { padding-left: 1.1rem; border-left: 2px solid rgba(205,220,44,.6); color: #e6e6e6; margin-bottom: .4rem; }
.bp-body-slot .w-richtext p:has(> em:only-child) + p:has(> em:only-child) { margin-bottom: 1.5rem; font-size: .9rem; color: #8c8c8c; }
/* Contents list (filled by the page script): one row per section with its own reading bar */
.bp-toc-list { scroll-behavior: smooth; }
.bp-toc-hint { padding: .6rem .65rem; border: 1px dashed rgba(255,255,255,.2); border-radius: 8px; font: 500 .72rem/1.45 Raleway, sans-serif; color: #8c8c8c; }
.bp-toc-link { display: grid; grid-template-columns: 1.6rem 1fr; column-gap: .35rem; row-gap: .45rem; align-items: start; padding: .55rem .65rem .6rem; border-radius: 8px; color: #bdbdbd; font: 500 .78rem/1.35 Raleway, sans-serif; text-decoration: none; transition: background-color .25s, color .25s; }
.bp-toc-link:hover { color: #fff; background: rgba(255,255,255,.04); }
.bp-toc-num { color: #8c8c8c; font-size: .68rem; font-weight: 700; padding-top: .1rem; }
.bp-toc-bar { grid-column: 2; height: 2px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.bp-toc-fill { display: block; width: 0; height: 100%; background: #cddc2c; transition: width .15s linear; }
.bp-toc-link.bp-done .bp-toc-num { color: #cddc2c; font-size: 0; }
.bp-toc-link.bp-done .bp-toc-num::before { content: '\2713'; font-size: .8rem; }
.bp-toc-link.bp-done { color: #e6e6e6; }
.bp-toc-link.bp-on { background: #cddc2c; color: #111; font-weight: 700; }
.bp-toc-link.bp-on .bp-toc-num { color: #111; }
.bp-toc-link.bp-on .bp-toc-bar { background: rgba(17,17,17,.2); }
.bp-toc-link.bp-on .bp-toc-fill { background: #111; }
/* FAQ rows */
.bp-faq > summary { list-style: none; }
.bp-faq > summary::-webkit-details-marker { display: none; }
.bp-faq-icon::before, .bp-faq-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s ease; }
.bp-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.bp-faq[open] .bp-faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.bp-faq[open] .bp-faq-title { color: #cddc2c; }
.bl-card-read::after { content: ' read'; }
html[lang^="de"] .bl-card-read::after { content: ''; }
.bl-card-date:empty, .bp-meta-date:empty { display: none; }
.bp-listen.bp-playing .bp-listen-icon { background: #fff; }
.bp-toast { position: fixed; left: 50%; bottom: 2rem; z-index: 999; padding: .7rem 1.2rem; border-radius: 999px; background: #cddc2c; color: #111; font: 700 .8rem Raleway, sans-serif; transform: translateX(-50%); }
@media (max-width: 767px) { .bp-body-slot .w-richtext h2 { font-size: 1.5rem; margin-top: 2.25rem; } .bp-body-slot .w-richtext p { font-size: 1rem; } }
.bp-ai-tools { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.bp-ai-tool { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: #151515; color: #fff; font: 700 .76rem Raleway, sans-serif; text-decoration: none; transition: border-color .2s, transform .2s; }
.bp-ai-tool:hover { border-color: #cddc2c; transform: translateY(-2px); }
.bp-ai-ico { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 8px; }
.bp-ai-ico svg { width: 1.1rem; height: 1.1rem; }
.bp-cta-card .bp-cta-text { color: #111; }
/* FAQ rows (built on the page from this article's FAQs): same look as the approved sample */
.bp-faq { border-bottom: 1px solid #ffffff24; }
.bp-faq-q { grid-column-gap: 1.5rem; cursor: pointer; justify-content: space-between; align-items: center; padding-top: 1.35rem; padding-bottom: 1.35rem; display: flex; }
.bp-faq-title { color: #fff; text-transform: none; margin-top: 0; margin-bottom: 0; font-family: Raleway, Arial, sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
.bp-faq-icon { color: #fff; flex-shrink: 0; width: 1.5rem; height: 1.5rem; position: relative; }
.bp-faq-a { color: #cfcfcf; max-width: 44rem; margin-top: 0; margin-bottom: 0; padding-bottom: 1.4rem; font-family: Raleway, Arial, sans-serif; font-size: .95rem; line-height: 1.6; }
/* Author box when the author has no photo (photo is hidden, never a placeholder): keep the button at its own size */
.bp-authorbox:has(> .bp-authorbox-avatar[style*="none"]) { grid-template-columns: minmax(0, 1fr) auto; }
@media screen and (max-width: 991px) { .bp-authorbox:has(> .bp-authorbox-avatar[style*="none"]) { grid-template-columns: 1fr; } .bp-authorbox-link { justify-self: start; } }
/* Recognition cards: as the row scrolls in, the cards flip up one after another and a lime light runs around each
   border. The Clutch score counts up to 4.9 and its stars light up one by one. Hovering a card tilts it toward the
   mouse with a soft lime spotlight under the cursor; every few seconds a lime glint passes along the row. */
.cx-recog.is-fx .cx-logo-grid { perspective: 1100px; }
.cx-recog.is-fx .cx-logo-badge { position: relative; overflow: hidden; isolation: isolate; opacity: 0; transform: rotateX(-75deg) translateY(30px); transform-origin: 50% 100%; transition: opacity .6s ease, transform .9s cubic-bezier(.2,.9,.25,1.15), border-color .3s ease, background-color .3s ease, box-shadow .3s ease; will-change: transform; }
.cx-recog.is-fx .cx-logo-badge.is-in { opacity: 1; transform: none; }
.cx-recog.is-fx .cx-logo-badge.is-in:hover { border-color: #cddc2c; background-color: #1f1f1f; box-shadow: 0 20px 40px -20px rgba(205,220,44,.45); }
/* running border light (plays once on arrival) */
.cr-ring { position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--cr-a, 0deg), transparent 0 70%, #cddc2c 85%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; }
.cx-logo-badge.is-ring .cr-ring { animation: cr-run 1.2s ease-out forwards; }
@property --cr-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes cr-run { 0% { opacity: 1; --cr-a: 0deg; } 80% { opacity: 1; } 100% { opacity: 0; --cr-a: 360deg; } }
/* spotlight under the mouse */
.cr-spot { position: absolute; inset: 0; z-index: -1; background: radial-gradient(180px circle at var(--cr-x, 50%) var(--cr-y, 50%), rgba(205,220,44,.16), transparent 70%); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.cx-logo-badge:hover .cr-spot { opacity: 1; }
/* glint passing along the row */
.cr-glint { position: absolute; top: 0; bottom: 0; left: -60%; z-index: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(205,220,44,.14), transparent); transform: skewX(-18deg); pointer-events: none; }
.cx-logo-badge.is-glint .cr-glint { animation: cr-glint .9s ease forwards; }
@keyframes cr-glint { to { left: 130%; } }
.cx-recog.is-fx .cx-logo-img, .cx-recog.is-fx .cx-logo-word { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.cx-recog.is-fx .cx-logo-badge:hover .cx-logo-img, .cx-recog.is-fx .cx-logo-badge:hover .cx-logo-word { transform: translateY(-4px) scale(1.08); }
.cx-recog.is-fx .cx-logo-go { transition: transform .3s ease; }
.cx-recog.is-fx .cx-logo-badge:hover .cx-logo-go { transform: translate(3px,-3px); }
.cr-star { display: inline-block; opacity: .2; transform: scale(.6); transition: opacity .3s ease, transform .4s cubic-bezier(.2,1.6,.4,1), color .3s ease; }
.cr-star.is-on { opacity: 1; transform: none; color: #cddc2c; }
@media (prefers-reduced-motion: reduce) { .cx-recog.is-fx .cx-logo-badge { opacity: 1; transform: none; transition: none; } .cr-ring, .cr-glint { display: none; } }
/* Check marks in the closing section's list (same as the homepage) */
.hm-cta .pf-check::before { content: '\2713'; display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #cddc2c; color: #111; font-size: .72rem; font-weight: 700; }
/* Closing section background: the three showreel videos already used on the service pages (websites, branding,
   packaging) play one after another with a cross-fade. They only load when the section is near the screen. */
.hc-vids { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hc-vids video { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; will-change: transform, opacity; }
.hc-vids video.is-on { opacity: 1; }
.hm-cta.has-video .hm-cta-bg { opacity: 0; transition: opacity 1s ease; }
.hc-chips { position: absolute; left: 50%; bottom: 1.6rem; z-index: 3; display: none; gap: .5rem; transform: translateX(-50%); }
.hm-cta.has-video .hc-chips { display: flex; }
.hc-chip { position: relative; overflow: hidden; padding: .45rem .9rem; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(10,10,10,.45); color: rgba(255,255,255,.75); font: 600 .7rem Raleway, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); transition: color .3s, border-color .3s; }
.hc-chip::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--p, 0%); background: #cddc2c; box-shadow: 0 0 8px rgba(205,220,44,.8); }
.hc-chip.is-on { color: #fff; border-color: rgba(205,220,44,.7); }
.hc-chip:hover { color: #fff; }
/* Link to the matching service page under the button */
.hc-more { display: block; margin-top: 1.1rem; color: rgba(255,255,255,.75); font: 600 .9rem Raleway, sans-serif; text-decoration: none; transition: color .2s; }
.hc-more:hover { color: #cddc2c; }
/* Booking pop-up in the site's look (only with the new article design): dark blurred backdrop, rounded frame with a lime edge, lime close button */
html.art-v2 .calendly-overlay .calendly-close-overlay { background: rgba(6,6,6,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.art-v2 .calendly-overlay .calendly-popup { overflow: hidden; border-radius: 20px; background: #141414; box-shadow: 0 0 0 1px rgba(205,220,44,.35), 0 30px 80px -20px rgba(0,0,0,.85); }
html.art-v2 .calendly-overlay .calendly-popup-close { top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; opacity: 1; background: #cddc2c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23111' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .25s ease; }
html.art-v2 .calendly-overlay .calendly-popup-close:hover { transform: rotate(90deg); }
html.art-v2 .calendly-overlay .calendly-spinner > div { background-color: #cddc2c; }
@media (max-width: 767px) { .hc-chips { bottom: 1rem; } .hc-chip { padding: .4rem .7rem; font-size: .6rem; } }
.bk-upd{font-size:14px;line-height:1.4;opacity:.75;margin:0 0 1rem}.bk-rank{display:block;font-size:15px;line-height:1.55;padding:14px 16px;margin:1.25rem 0;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:12px}.bk-rel{display:block;margin:2.5rem 0 0;padding-top:1.5rem;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}.bk-rel-h{font-size:1.375rem;line-height:1.25;margin:0 0 1rem;text-transform:none}.bk-rel-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}@media (min-width:768px){.bk-rel-list{grid-template-columns:repeat(2,minmax(0,1fr))}}.bk-rel-list li{margin:0;padding:0}.bk-rel-a{display:flex;flex-direction:column;gap:4px;min-height:44px;height:100%;box-sizing:border-box;padding:12px 14px;color:inherit;text-decoration:none;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:12px}.bk-rel-a:hover,.bk-rel-a:focus-visible{border-color:currentColor}.bk-rel-k{font-size:14px;opacity:.7}.bk-rel-t{font-size:16px;line-height:1.35;overflow-wrap:anywhere}