/*
 * Blog base and cards, shared by the blog sections (page-hero/blog, post-feature, post-grid) and by the
 * templates that are not built from sections (archive, search, 404, the posts page fallback, single post).
 * The roots list holds .blog-page for those templates and the section roots for sections used anywhere.
 */
:is(.blog-page,.vrm-section--page-hero--blog,.vrm-section--post-feature,.vrm-section--post-grid){font:500 14px/1.8 Manrope,Arial,sans-serif;color:var(--color-text)}
:is(.blog-page,.vrm-section--page-hero--blog,.vrm-section--post-feature,.vrm-section--post-grid),:is(.blog-page,.vrm-section--page-hero--blog,.vrm-section--post-feature,.vrm-section--post-grid) *{box-sizing:border-box}
:is(.blog-page,.vrm-section--page-hero--blog,.vrm-section--post-feature,.vrm-section--post-grid) :where(h1,h2,h3,p,figure){margin:0}
:is(.blog-page,.vrm-section--page-hero--blog,.vrm-section--post-feature,.vrm-section--post-grid) a{color:inherit;text-decoration:none}
:is(.blog-page,.vrm-section--page-hero--blog,.vrm-section--post-feature,.vrm-section--post-grid) em{font-family:'Instrument Serif',Georgia,serif;font-weight:400}
:is(.blog-page,.vrm-section--page-hero--blog,.vrm-section--post-feature,.vrm-section--post-grid) a:focus-visible,:is(.blog-page,.vrm-section--page-hero--blog,.vrm-section--post-feature,.vrm-section--post-grid) button:focus-visible{outline:2px solid var(--color-primary);outline-offset:6px}
.blog-hero,.blog-section{padding:100px max(6vw,24px)}
.blog-hero{position:relative;isolation:isolate;background:var(--color-background-dark);color:var(--color-background-light);padding-top:160px;padding-bottom:80px}
.blog-hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(color-mix(in srgb,var(--color-black) 33.333%,transparent),color-mix(in srgb,var(--color-black) 53.333%,transparent)),url('../../images/agency/services-background.png');background-size:cover;background-position:center;filter:var(--decorative-purple-filter)}
.blog-hero h1{font-size:clamp(64px,8vw,128px);font-weight:500;letter-spacing:-.065em;line-height:1.04}
.blog-hero em{color:var(--color-primary-light)}
.blog-hero p{max-width:480px;margin-top:32px;color:var(--color-text-on-dark)}
.blog-label{font-size:10px;letter-spacing:1px;margin-bottom:45px}
:is(.blog-page,.vrm-section--page-hero--blog,.vrm-section--post-feature,.vrm-section--post-grid) h2{font-size:clamp(42px,5vw,76px);font-weight:500;letter-spacing:-.055em;line-height:1.1}
:is(.blog-page,.vrm-section--page-hero--blog,.vrm-section--post-feature,.vrm-section--post-grid) img{display:block;width:100%;object-fit:cover}
:is(.blog-page,.vrm-section--page-hero--blog,.vrm-section--post-feature,.vrm-section--post-grid) time{display:block;font-size:10px;color:var(--color-muted)}
.blog-read{display:inline-flex;align-items:center;gap:24px;font-size:12px;border-bottom:1px solid var(--color-border);padding-bottom:8px}
.blog-listing{background:var(--color-surface-lavender)}
.blog-list-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:55px}
.blog-list-heading>a{font-size:11px;border-bottom:1px solid var(--color-border);padding-bottom:8px}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:55px 30px}
.blog-card[hidden]{display:none}
.blog-card>a{display:block}
.blog-card img{aspect-ratio:1.6;transition:transform .6s cubic-bezier(.22,1,.36,1);margin-bottom:22px}
.blog-card h3{font-size:clamp(20px,1.65vw,26px);font-weight:500;line-height:1.3;letter-spacing:-.5px;margin:12px 0 25px}
.blog-card a:is(:hover,:focus-visible) img{transform:translateY(-3px) scale(1.015)}
.blog-read span{transition:transform .5s}
.blog-card a:is(:hover,:focus-visible) .blog-read span{transform:translate(3px,-3px)}
.blog-load-more{display:block;margin:45px auto 0;padding:16px 28px;border:0;border-radius:40px;background:var(--color-primary);color:var(--color-white);font:600 13px Manrope,Arial,sans-serif;cursor:pointer}
.blog-load-more[hidden]{display:none}
@media(min-width:1600px){.blog-hero,.blog-section{padding-inline:max(8vw,calc((100vw - 1500px)/2))}}
@media(max-width:1023px){.blog-section{padding-block:75px}.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.blog-hero{padding:135px 24px 65px}.blog-hero h1{font-size:64px}.blog-section{padding:65px 24px}.blog-grid{grid-template-columns:1fr;gap:40px}.blog-list-heading{align-items:flex-start;flex-direction:column;gap:20px}.blog-label{font-size:8px;margin-bottom:35px}}
@media(prefers-reduced-motion:reduce){:is(.blog-page,.vrm-section--page-hero--blog,.vrm-section--post-feature,.vrm-section--post-grid),:is(.blog-page,.vrm-section--page-hero--blog,.vrm-section--post-feature,.vrm-section--post-grid) *{transition:none!important}.blog-card a:is(:hover,:focus-visible) img{transform:none}}