/* reference single hero = light slate→white gradient, left-aligned (service/case/[id].vue) */
	/* shared CPT-single hero matches reference [id].vue: section pt-header pb-[5vw],
	   inner pt-8 sm:py-12 lg:py-24 pb-16 + decorative tilt cube (all singles have it). */
	.cgi-single-hero{position:relative;overflow:hidden;padding:5.75rem 0 5vw;background:linear-gradient(to top right,#e2e8f0,#ffffff)}
	.cgi-single-hero-inner{position:relative;z-index:1;max-width:1536px;margin:0 auto;padding:2rem 2rem 4rem}
	@media(min-width:640px){.cgi-single-hero-inner{padding-top:3rem;padding-bottom:3rem}}
	@media(min-width:1024px){.cgi-single-hero-inner{padding-top:6rem;padding-bottom:6rem}}
	/* prod guide-chapter hero is 48px taller below the h1 */
	@media(min-width:1024px){.single-guide_chapter .cgi-single-hero-inner{padding-bottom:9rem}}
	/* decorative wireframe cube (reference Prism, opacity-10 blur), tilts toward the cursor */
	.cgi-gx-cube{position:absolute;top:50%;right:25%;width:360px;height:360px;margin:-180px -180px 0 0;transform-style:preserve-3d;opacity:.1;filter:blur(.5px);z-index:0;pointer-events:none;transform:rotateX(-25deg) rotateY(-45deg);transition:transform .12s ease-out}
	@media(max-width:1023px){.cgi-gx-cube{display:none}}
	.cgi-gx-cube i{position:absolute;inset:0;border:1.5px solid #475569;background:rgba(71,85,105,.03);display:block}
	.cgi-gx-cube i:nth-child(1){transform:translateZ(180px)}
	.cgi-gx-cube i:nth-child(2){transform:rotateY(180deg) translateZ(180px)}
	.cgi-gx-cube i:nth-child(3){transform:rotateY(90deg) translateZ(180px)}
	.cgi-gx-cube i:nth-child(4){transform:rotateY(-90deg) translateZ(180px)}
	.cgi-gx-cube i:nth-child(5){transform:rotateX(90deg) translateZ(180px)}
	.cgi-gx-cube i:nth-child(6){transform:rotateX(-90deg) translateZ(180px)}
	html.cgi-dark .cgi-gx-cube{opacity:.06}
	/* case-study header (reference case-study/[id].vue) differs from service/guide: no cube,
	   narrower max-w-7xl (1280), smaller heading (text-3xl→xl:text-6xl), mt-6 subtitle,
	   no base pt-8/pb-16 — just sm:py-12 lg:py-24 + mb-16 */
	.single-case .cgi-single-hero-inner,.single-post .cgi-single-hero-inner{max-width:80rem;padding-top:0;padding-bottom:0;margin-bottom:4rem}
	@media(min-width:640px){.single-case .cgi-single-hero-inner,.single-post .cgi-single-hero-inner{padding-top:3rem;padding-bottom:3rem}}
	@media(min-width:1024px){.single-case .cgi-single-hero-inner,.single-post .cgi-single-hero-inner{padding-top:6rem;padding-bottom:6rem}}
	/* blog posts + case studies: the raised featured image (-translate-y-5rem) overlaps up into the hero, so the hero needs enough bottom room that the image clears the title/subtitle (reference: mb-16 + pb-[5vw]) */
	.single-post .cgi-single-hero-inner,.single-case .cgi-single-hero-inner{margin-bottom:0;padding-bottom:3rem}
	@media(min-width:640px){.single-post .cgi-single-hero-inner,.single-case .cgi-single-hero-inner{padding-bottom:5.5rem}}
	@media(min-width:1024px){.single-post .cgi-single-hero-inner,.single-case .cgi-single-hero-inner{padding-bottom:10rem}}
	.single-case .cgi-single-hero h1,.single-post .cgi-single-hero h1{font-size:clamp(1.875rem,1rem + 2.6vw,3.75rem)} /* 36px at 768 like prod */
	.single-case .cgi-single-hero p.cgi-sub{font-size:clamp(1.125rem,1rem + .6vw,1.5rem);margin-top:1.5rem}
	/* all CPT singles use a white body like the reference (the Kadence boxed grey #F7FAFC otherwise peeks between/around sections) */
	body.single-service,body.single-case,body.single-portfolio,body.single-industry_service,body.single-guide_chapter,body.single-post{background:#fff}
	html.cgi-dark body.single-service,html.cgi-dark body.single-case,html.cgi-dark body.single-portfolio,html.cgi-dark body.single-industry_service,html.cgi-dark body.single-guide_chapter,html.cgi-dark body.single-post{background:#0a0a0a}
	/* guide chapter + portfolio singles have no Guide CTA → zero the content-area bottom margin so the
	   last block is flush with the footer like every other single (service/case/industry flush via the
	   universal .content-area:has(+ .cgi-tpl-guide) rule). Guide chapter also zeroes the top (content sits under the hero). */
	.single-guide_chapter .content-area{margin-top:-5vw!important;margin-bottom:0!important}/* -5vw: rounded section overlaps the hero (prod) */
	.single-portfolio .content-area{margin-bottom:0!important}
	.cgi-single-hero .cgi-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;font-size:.875rem;color:#6b7280;margin:0 0 2rem}
	/* prod mobile service hero: px-4 gutters + single-line crumbs (each segment ellipsized) */
	@media(max-width:639px){
	.single-service .cgi-single-hero-inner{padding-left:1rem;padding-right:1rem}
	.single-service .cgi-single-hero .cgi-crumbs{flex-wrap:nowrap}
	.single-service .cgi-single-hero .cgi-crumbs :is(a,span){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
	.single-service .cgi-single-hero .cgi-crumbs svg{flex-shrink:0}
	}
	:is(.single-case,.single-post) .cgi-crumbs{margin-bottom:3rem}/* prod case/post hero: crumb->h1 gap 48px (mb-12) */
	/* prod booking-landing cases (10916-10920) render the hero WITHOUT a breadcrumb */
	:is(.postid-10916,.postid-10917,.postid-10918,.postid-10919,.postid-10920) .cgi-single-hero .cgi-crumbs{display:none}
	/* prod: case body ends ~128px above the footer (pb only) — Kadence margin-bottom 5rem removed */
	.single-case .content-area{margin-bottom:0!important}
	/* and h1 sits at 188px like the standard page hero (inner pt trimmed by the crumb+padding delta) */
	:is(.postid-10916,.postid-10917,.postid-10918,.postid-10919,.postid-10920) .cgi-single-hero-inner{padding-top:0!important}
	@media(min-width:1024px){:is(.postid-10916,.postid-10917,.postid-10918,.postid-10919,.postid-10920) .cgi-single-hero-inner{padding-top:1rem!important}}
	.cgi-single-hero .cgi-crumbs a{color:#6b7280;text-decoration:none}
	.cgi-single-hero .cgi-crumbs a:hover{color:#374151}
	.cgi-crumb-sep{width:1.25rem;height:1.25rem;flex:none;color:inherit}
	.cgi-single-hero h1{font-size:clamp(2.25rem,1.5rem + 3.5vw,4.5rem);line-height:1;margin:0;color:#262626;font-weight:600}
	@media(max-width:1023px){:is(.single-case,.single-post) .cgi-single-hero h1{line-height:1.2}}/* prod mobile text-3xl = 30/36 */
	.cgi-single-hero p.cgi-sub{font-size:clamp(1.1rem,1rem + .8vw,1.5rem);color:#374151;margin:2rem 0 0;max-width:48rem;line-height:1.75rem}
	@media(min-width:1024px){.cgi-single-hero p.cgi-sub{line-height:2rem}}
	.single-service .cgi-single-hero p.cgi-sub{margin-top:3rem}/* reference service hero = mt-12 (48px) */
	.cgi-single-hero .cgi-tax{margin:1.5rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
	.cgi-single-hero .cgi-tax a{font-size:.8rem;background:rgba(0,0,0,.06);color:#374151;padding:.4rem .9rem;border-radius:999px;text-decoration:none}
	/* reference: post-hero content sits in a white panel with a big rounded top (rounded-t-[5vw]=64px) pulled up over the gradient hero (-mt-[5vw]); featured image raised inside */
	.single-case .cgi-case-media,.single-post .cgi-case-media{max-width:none;background:#fff;border-radius:5vw 5vw 0 0;margin:-5vw 0 0;padding:0 2rem;position:relative;z-index:2}
	html.cgi-dark .single-case .cgi-case-media,html.cgi-dark .single-post .cgi-case-media{background:#0a0a0a}
	/* reference: the featured image is raised (-translate-y-8 sm:-translate-y-20) so it overflows above the panel edge up into the hero */
	.single-case .cgi-case-media,.single-post .cgi-case-media{padding-top:.5rem}
	.cgi-case-media img{max-width:76rem;width:100%;height:auto;margin:0 auto;border-radius:1.5rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);border:1px solid #e5e7eb;display:block;transform:translateY(-2rem)}
	@media(min-width:640px){.cgi-case-media img{transform:translateY(-5rem)}}
	/* cases end with the content (no Guide CTA) — give breathing room before the footer */
	body.single-case #primary{padding-bottom:6rem}
	.cgi-case-meta-wrap{max-width:64rem;margin:0 auto;padding:0 2rem}
	.cgi-case-meta{list-style:none;display:flex;flex-wrap:wrap;gap:1rem 2rem;margin:0;padding:0;font-size:.9rem;font-style:italic;color:#4b5563}
	.cgi-case-meta li{display:flex;align-items:center;gap:.4rem}
	.cgi-case-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 0;padding:0}
	.cgi-case-tags a{display:block;background:#e5e7eb;color:#262626;border-radius:999px;padding:.35rem .9rem;font-size:.85rem;text-decoration:none}
	.cgi-case-tags a:hover{background:#d1d5db}
	html.cgi-dark .cgi-case-meta{color:#9ca3af}
	html.cgi-dark .cgi-case-tags a{background:#262626;color:#e5e7eb}
	.cgi-single-content{padding-top:3rem}
	/* service singles: spec section already separates the hero; cgi_lp content starts right after it (reference services-section mb-16 collapses with first content my-24, no +80px wrapper) */
	body.single-service .cgi-single-content{padding-top:0;margin-top:0}
	/* case & blog article body = reference reading column (max-w-[60rem] ≈ 960px, centered);
	   was running the full content width (~1242). Featured image (cgi-case/post-media) is outside this. */
	.single-case .cgi-single-content,.single-post .cgi-single-content{max-width:60rem;margin-left:auto;margin-right:auto}
	/* Kadence uses a narrow content width for blog posts (~794) — widen it (centered) so the 60rem reading column sits like the reference */
	.single-post .content-container.site-container{max-width:1290px!important;margin-left:auto!important;margin-right:auto!important}
	/* guide 2-col layout is capped at 1536 but the Kadence content-container (1290) traps it — widen so prose reaches the reference 1024/64 */
	.single-guide_chapter .content-container.site-container{max-width:1536px!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}
	/* article PROSE headings (case/guide/blog body) = reference 30px / 56px top margin
	   (Kadence default was 28px / 42px); exclude converted section headings (.cgi-sec-h). */
	.cgi-single-content h2.wp-block-heading:not(.cgi-sec-h):not(.cgi-lp-brands-h):not(.cgi-lp-h-md):not(.cgi-lp-h-sm):not(.cgi-eyebrow):not(.cgi-bl-faq-h):not(.cgi-iap *):not(.cgi-lp-2col *){margin-top:3.5rem}
	.cgi-single-content h2.wp-block-heading:not(.cgi-sec-h):not(.cgi-lp-brands-h):not(.cgi-lp-h-md):not(.cgi-lp-h-sm):not(.cgi-eyebrow):not(.cgi-bl-faq-h):not([style*="font-size"]):not(.cgi-iap *):not(.cgi-lp-2col *){font-size:1.875rem;line-height:1.25}
	/* ── blog single body 1:1 with prod ── */
	@media(min-width:1024px){.single-post .cgi-single-hero h1,.single-case .cgi-single-hero h1{font-size:3.75rem}}
	/* service hero h1 = fixed 72px on desktop (prod), not the clamp (68.8px at 1280) */
	.single-service .cgi-single-hero h1{font-size:3rem} /* prod text-5xl at mobile */
	@media(min-width:640px){.single-service .cgi-single-hero h1{font-size:4.5rem}} /* prod jumps to 72px at sm, not lg */
	/* prod container gutter sm:px-6 (24px) between 640-1023; base 2rem = lg px-8 */
	@media(min-width:640px) and (max-width:1023px){.single-service .cgi-single-hero-inner{padding-left:1.5rem;padding-right:1.5rem}}
	/* case h1: match prod +0.4px tracking (a global negative letter-spacing otherwise tightens it into 2 lines vs prod 3 lines) */
	.single-case .cgi-single-hero h1{letter-spacing:.4px}
	/* prod mobile gutter is px-4 (16px); Kadence wraps give 24px+ */
	@media(max-width:639px){:is(.single-post,.single-guide_chapter) :is(.entry-content-wrap,.content-container.site-container){padding-left:1rem!important;padding-right:1rem!important}
	/* prod case articles use a narrower 279px column at 375 (48px gutters) */
	.single-case :is(.entry-content-wrap,.content-container.site-container){padding-left:3rem!important;padding-right:3rem!important}}
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content p{font-size:1.125rem;line-height:2rem;margin-bottom:1.5rem}
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content li{font-size:1.125rem;line-height:2rem}
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content :is(ol,ul).wp-block-list{padding-left:1.75rem}
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content :is(ol,ul).wp-block-list>li{padding-left:.5rem}/* prod prose: marker gap */
	/* floated embed (e.g. LinkedIn iframe): prose wraps around it; stacks full-width on mobile */
	.cgi-single-content .cgi-embed-float{float:left;width:50%;margin:.5rem 2rem 1.25rem 0;aspect-ratio:24/37;overflow:hidden;border-radius:8px}
	.cgi-single-content .cgi-embed-float iframe{display:block;width:100%;border:none}
	.cgi-single-content h2.wp-block-heading{clear:both}
	@media (max-width:767px){.cgi-single-content .cgi-embed-float{float:none;width:100%;max-width:504px;margin:1.5rem auto}}
	.single-guide_chapter .cgi-single-content h3{font-weight:600;margin-top:2.5rem;margin-bottom:1rem}/* prod: h3 mb16, mt40 */
	.single-post .cgi-single-content h2.wp-block-heading:not(.cgi-sec-h):not(.cgi-lp-brands-h):not(.cgi-lp-h-md):not(.cgi-lp-h-sm):not(.cgi-eyebrow):not(.cgi-bl-faq-h):not(.cgi-iap *):not(.cgi-lp-2col *){line-height:1.333}
	.single-post .cgi-single-content h3.wp-block-heading{font-weight:700;font-size:1.5rem;line-height:1.4}
	/* media framed like prod: rounded-3xl + shadow-xl, centred by default */
	.single-post .cgi-single-content :is(img,video,iframe){display:block;margin-left:auto;margin-right:auto;max-width:100%;height:auto;border-radius:.75rem}
	/* reference BlockImage/GridGallery/Carousel: every body image has a 1px neutral-200 border + rounded-xl (posts AND cases) */
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content :is(img,iframe){border:1px solid #e5e5e5}
	/* single body images (reference BlockImage): max-width, centred, rounded-xl + gray-200 border + gray-50 bg — NOT full-width/shadow */
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content :is(.cgi-cs-fig .cgi-cs-img,.cgi-cs-fig>img){max-width:100%;width:auto;border:1px solid #e5e5e5;background:#f9fafb}
	html.cgi-dark :is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content :is(.cgi-cs-fig .cgi-cs-img,.cgi-cs-fig>img){border-color:#262626;background:#171717}/* prod dark */
	/* prod guide chapters: image figs AND grid-gallery cells carry border #e5e5e5 + rounded-xl (slider slides do NOT) */
	.single-guide_chapter .cgi-single-content :is(figure.wp-block-image img,.wp-block-gallery img,.cgi-cs-gimg){border:1px solid #e5e5e5;border-radius:.75rem}
	html.cgi-dark .single-guide_chapter .cgi-single-content :is(figure.wp-block-image img,.wp-block-gallery img,.cgi-cs-gimg){border-color:#262626}
	/* slider slides, video, and the CTA poster are framed by their own wrapper (or intentionally borderless), so the img itself gets no border */
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content :is(.cgi-vid-wrap,.cgi-cs-slide,.cgi-bl-cta,.cgi-bl-cta-poster,.cgi-cta-card,.cgi-cta-poster) :is(img,video,iframe){border:0}
	html.cgi-dark :is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content :is(img,iframe){border-color:#262626}
	.single-post .cgi-single-content video{width:100%;height:auto;background:#000}
	.single-post .cgi-single-content figure{text-align:center;margin-left:auto;margin-right:auto}
	/* in-content links: prod = slate-900, medium, underlined by default */
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content a:not(.wp-block-button__link):not(.cgi-cta-card-btn):not(.cgi-bl-cta-btn),
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content a:not(.wp-block-button__link):not(.cgi-cta-card-btn):not(.cgi-bl-cta-btn):hover{color:#0f172a!important;font-weight:500;text-decoration:underline}
	html.cgi-dark :is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content a:not(.wp-block-button__link):not(.cgi-cta-card-btn):not(.cgi-bl-cta-btn),
	html.cgi-dark :is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content a:not(.wp-block-button__link):not(.cgi-cta-card-btn):not(.cgi-bl-cta-btn):hover{color:#d4d4d4!important}
	/* client feedback blockquote (reference: 4px slate-200 left border, italic, curly quotes) */
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content blockquote{border-left:4px solid #e2e8f0;padding:0 0 0 1.125rem;margin:2rem 0;font-style:italic;color:#262626;quotes:"\201C" "\201D"}
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content blockquote p{margin:0}
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content blockquote p:first-of-type::before{content:open-quote}
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content blockquote p:last-of-type::after{content:close-quote}
	html.cgi-dark :is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content blockquote{border-left-color:#334155;color:#d4d4d4}
	/* content bulleted lists (reference: disc, ul pl 28px, li mb 12px + pl 8px, lh 32px, 18px) */
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content ul:not([class*=cgi-]){list-style:disc;padding-left:1.75rem;margin:0 0 2rem}
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content ul:not([class*=cgi-])>li{margin-bottom:.75rem;padding-left:.5rem;line-height:2rem;font-size:1.125rem}
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content ul:not([class*=cgi-])>li::marker{color:#d4d4d4}
	html.cgi-dark :is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content ul:not([class*=cgi-])>li::marker{color:#d4d4d4}
	/* content-embedded comparison tables (guide chapters carry their own inline styles with a
	   blue #2c3e50 header + #333 text) — dark override: neutral surfaces + brighter text */
	html.cgi-dark .comparison-table-wrap{color:#e5e5e5!important}
	html.cgi-dark .comparison-table-wrap table,html.cgi-dark .comparison-table{background:transparent!important}
	html.cgi-dark .comparison-table-wrap th{background:#171717!important;color:#fafafa!important;border-color:#404040!important}
	html.cgi-dark .comparison-table-wrap td{background:transparent!important;color:#e5e5e5!important;border-color:#404040!important}
	html.cgi-dark .comparison-table-wrap tr:nth-child(even) td{background:#171717!important}
	html.cgi-dark .comparison-table-wrap td :is(b,strong),html.cgi-dark .comparison-table-wrap td:first-child{color:#fafafa!important}
	/* content tables with inline LIGHT cell backgrounds (e.g. #f7f8fa header rows in
	   product-3d-modeling) keep their light bg in dark -> text must be near-black there */
	html.cgi-dark :is(td,th,tr)[style*="background:#f"] :is(td,th),html.cgi-dark :is(td,th,tr)[style*="background-color:#f"] :is(td,th),
	html.cgi-dark :is(td,th,tr)[style*="background:#e"] :is(td,th),html.cgi-dark :is(td,th,tr)[style*="background-color:#e"] :is(td,th),
	html.cgi-dark :is(td,th)[style*="background:#f"],html.cgi-dark :is(td,th)[style*="background-color:#f"],
	html.cgi-dark :is(td,th)[style*="background:#e"],html.cgi-dark :is(td,th)[style*="background-color:#e"],
	html.cgi-dark :is(td,th,tr)[style*="background-color:#f"] *,html.cgi-dark :is(td,th,tr)[style*="background:#f"] *,
	html.cgi-dark :is(td,th,tr)[style*="background-color:#e"] *,html.cgi-dark :is(td,th,tr)[style*="background:#e"] *{color:#171717!important}
	/* ── author bio block ── */
	.cgi-bl-author{border-top:1px solid #e5e7eb;padding:6rem 0}
	.cgi-bl-author-inner{max-width:64rem;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:8rem 1fr;column-gap:1.5rem;row-gap:1rem;align-items:start}
	.cgi-bl-author-av{grid-column:1;grid-row:1/3}
	.cgi-bl-author-av img,.cgi-bl-author-av-ph{width:8rem;height:8rem;border-radius:.75rem;object-fit:cover;border:2px solid #e5e7eb;display:block}
	.cgi-bl-author-av-ph{display:flex;align-items:center;justify-content:center;background:#d1d5db;border:0}
	.cgi-bl-author-av-ph svg{width:3rem;height:3rem;color:#6b7280}
	.cgi-bl-author-head{grid-column:2;grid-row:1}
	.cgi-bl-author-by{font-size:.875rem;color:#6b7280;margin:0}
	.cgi-bl-author-name{font-size:1.25rem;font-weight:600;color:#262626;margin:.1rem 0 0;font-family:var(--cgi-font-display,sans-serif)}
	.cgi-bl-author-role{color:#4b5563;font-style:italic;font-size:.875rem;margin:.25rem 0 0}
	.cgi-bl-author-bio{grid-column:2;grid-row:2}
	.cgi-bl-author-bio p{color:#374151;line-height:1.65;margin:0}
	@media(max-width:639px){.cgi-bl-author-inner{grid-template-columns:1fr}.cgi-bl-author-av,.cgi-bl-author-head,.cgi-bl-author-bio{grid-column:1;grid-row:auto}}
	/* ── you may also like ── */
	/* reference [id].vue "You may also like": 3-col, card = p-3 rounded-2xl hover:bg-gray-100, outlined-pill badge → title → 5:3 image */
	.cgi-bl-related{padding:6rem 0;background:#f5f5f5}
	.cgi-bl-related-inner{max-width:1536px;margin:0 auto;padding:0 2rem}
	.cgi-bl-related-h{font-size:1.875rem;font-weight:700;margin:0 0 4rem;color:#0a0a0a;padding:0 .75rem;line-height:1.1;font-family:Amulya,"Plus Jakarta Sans",sans-serif}
	@media(min-width:640px){.cgi-bl-related-h{font-size:2.25rem}}
	@media(min-width:1280px){.cgi-bl-related-h{font-size:3rem;margin-bottom:4rem}}
	.cgi-bl-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4rem 2rem;list-style:none;margin:0 0 10rem;padding:0}/* prod: грід mb-40 перед низом секції */
	@media(max-width:1279px){.cgi-bl-related-grid{grid-template-columns:repeat(2,1fr);gap:3rem 2rem}}
	@media(max-width:767px){.cgi-bl-related-grid{grid-template-columns:1fr;max-width:32rem;margin:0 auto}}
	.cgi-bl-rcard{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;padding:.75rem;border-radius:1rem;transition:background .2s}
	.cgi-bl-rcard:hover{background:#f3f4f6}
	.cgi-bl-rcard-cat{align-self:flex-start;border:1px solid #0a0a0a;border-radius:999px;padding:.65rem 1rem;margin:.5rem 1rem 1rem;font-size:1rem;line-height:1;color:#0a0a0a;transition:background .3s,color .3s}
	.cgi-bl-rcard:hover .cgi-bl-rcard-cat{background:#0a0a0a;color:#fff}
	.cgi-bl-rcard-row{display:flex;justify-content:space-between;gap:.5rem;align-items:flex-start;padding:0 1rem}
	.cgi-bl-rcard-title{flex:1 1 auto;font-size:1.25rem;font-weight:700;color:#111827;line-height:1.3}
	.cgi-bl-rcard-arr{flex:0 0 auto;width:2rem;height:2rem;color:#111827;opacity:.3;transition:opacity .3s,transform .3s}
	.cgi-bl-rcard:hover .cgi-bl-rcard-arr{opacity:1;transform:translateX(.5rem)}
	@media(max-width:639px){.cgi-bl-rcard-arr{display:none}}
	.cgi-bl-rcard-desc{margin:2rem 1rem 0;padding:0;color:#374151;line-height:1.55;font-size:1rem;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
	.cgi-bl-rcard-img{display:block;width:100%;height:auto;flex:1 1 auto;object-fit:cover;border-radius:.75rem;margin-top:1rem}/* prod: img flex-1 w-full h-auto — природна пропорція */
	.cgi-bl-rcard-img-ph{min-height:14rem;background:#e5e7eb;border-radius:.75rem;margin-top:1rem}
	html.cgi-dark .cgi-bl-author{border-color:#262626}
	html.cgi-dark .cgi-bl-author-name{color:#e5e7eb}
	html.cgi-dark .cgi-bl-author-role{color:#9ca3af}
	html.cgi-dark .cgi-bl-author-bio p{color:#d1d5db}
	html.cgi-dark .cgi-bl-related{background:#171717}
	html.cgi-dark .cgi-bl-related-h,html.cgi-dark .cgi-bl-rcard-title{color:#fafafa}
	/* prod dark: ALL related-card text neutral-50, cat pill white border, no hover fills */
	html.cgi-dark .cgi-bl-rcard-desc,html.cgi-dark .cgi-bl-rcard-arr{color:#fafafa}
	html.cgi-dark .cgi-bl-rcard:hover{background:transparent}
	html.cgi-dark .cgi-bl-rcard:hover{background:#262626}
	html.cgi-dark .cgi-bl-rcard-cat{border-color:#fff;color:#fafafa}
	html.cgi-dark .cgi-bl-rcard:hover .cgi-bl-rcard-cat{background:transparent;color:#fafafa}
	.cgi-meta-i{width:1.05rem;height:1.05rem;display:inline-block;vertical-align:-.15rem}
	/* ── case body media (re-imported Strapi blocks: image / slider / grid-gallery) ── */
	.cgi-single-content .cgi-cs-fig{margin:2rem 0}
	.cgi-single-content :is(.cgi-cs-img,.cgi-cs-fig>img){max-width:100%;height:auto;border-radius:.75rem;display:block;margin:0 auto} /* prod BlockImage = w-max-full centered; >img = core/image (wp-image-N) після figure-конверсії */
	.cgi-single-content :is(.cgi-cs-fig,.cgi-cs-galfig,.cgi-model-fig){display:flex;flex-direction:column;align-items:center}/* prod figure flex-col items-center gap-2 */
	.cgi-single-content :is(.cgi-cs-fig,.cgi-cs-galfig,.cgi-model-fig) > :is(img,div){width:100%}
	.cgi-single-content :is(.cgi-cs-fig,.cgi-cs-galfig,.cgi-model-fig) figcaption{text-align:start;color:#737373;font-size:.875rem;margin-top:.5rem;width:auto;max-width:100%}/* prod: shrink-to-fit centred block, start text, gap-2 */
	html.cgi-dark .cgi-single-content :is(.cgi-cs-fig,.cgi-cs-galfig,.cgi-model-fig) figcaption{color:#a3a3a3}/* prod dark neutral-400 */
	.cgi-cs-gallery{margin:2rem 0;column-gap:1rem}
	.cgi-cs-galfig{margin:2rem 0}.cgi-single-content .cgi-cs-galfig .cgi-cs-gallery,.cgi-cs-galfig .cgi-cs-gallery{margin:0!important}.cgi-cs-galfig figcaption{margin-top:.5rem}/* gallery caption wrapper (blocks.grid-gallery caption) */
	.cgi-model-fig{margin:2rem 0}.cgi-model-fig figcaption{margin-top:.5rem}/* [cgi_model caption=] (blocks.model-viewer caption) */
	.cgi-cs-gallery-1{column-count:1}.cgi-cs-gallery-2{column-count:2}.cgi-cs-gallery-3{column-count:3}.cgi-cs-gallery-4{column-count:4}.cgi-cs-gallery-5{column-count:5}.cgi-cs-gallery-6{column-count:6}
	/* blocks.grid-gallery width=full|wide (донор: w-screen px-6 sm:px-8 xl:px-16 -translate-x-1/2; wide += max-w-screen-2xl) */
	.cgi-single-content .cgi-cs-gallery:is(.cgi-cs-gw-full,.cgi-cs-gw-wide){position:relative;left:50%;transform:translateX(-50%);width:calc(100vw - 3rem)}
	@media(min-width:640px){.cgi-single-content .cgi-cs-gallery:is(.cgi-cs-gw-full,.cgi-cs-gw-wide){width:calc(100vw - 4rem)}}
	@media(min-width:1280px){.cgi-single-content .cgi-cs-gallery:is(.cgi-cs-gw-full,.cgi-cs-gw-wide){width:calc(100vw - 8rem)}}
	.cgi-single-content .cgi-cs-gallery.cgi-cs-gw-wide{max-width:1408px}
	/* reference BlockCallToActionForm breaks out of the reading column at 2xl (2xl:-mx-12 → +96px) */
	@media(min-width:1536px){:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content .cgi-cta-card-form{margin-left:-3rem;margin-right:-3rem}}
	.cgi-cs-gcell{break-inside:avoid;margin-bottom:1rem}
	/* case stats block (prod how-bdi "Impact in Numbers": value 72px thin, label 24px/500) */
	.cgi-cs-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem 2rem;margin:2.5rem 0}
	@media(min-width:768px){.cgi-cs-stats{grid-template-columns:repeat(4,1fr)}}
	.cgi-cs-stat{display:flex;flex-direction:column}
	.cgi-cs-stat-v{font-size:clamp(3rem,5vw,4.5rem);font-weight:200;line-height:1.05;color:#0a0a0a}
	.cgi-cs-stat-l{font-size:1.25rem;font-weight:500;color:#0a0a0a;margin-top:.35rem}
	html.cgi-dark .cgi-cs-stat-v,html.cgi-dark .cgi-cs-stat-l{color:#e5e7eb}
	/* case quote */
	.cgi-cs-quote{border-left:4px solid #e2e8f0;padding-left:1.5rem;font-style:italic;margin:2rem 0}
	/* case icon grid (prod "Visuals in Action": grid sm:2 xl:4, 64px stroke icons + label) */
	.cgi-cs-icogrid{display:grid;grid-template-columns:1fr;gap:2rem 1rem;margin:2rem 0 3rem}
	@media(min-width:640px){.cgi-cs-icogrid{grid-template-columns:repeat(2,1fr)}}
	@media(min-width:1280px){.cgi-cs-icogrid{grid-template-columns:repeat(4,1fr)}}
	.cgi-cs-ico{display:flex;flex-direction:column;gap:.75rem}
	.cgi-cs-ico-svg svg{width:64px;height:64px;color:#0a0a0a}
	.cgi-cs-ico-l{font-weight:600;color:#0a0a0a}
	html.cgi-dark .cgi-cs-ico-svg svg,html.cgi-dark .cgi-cs-ico-l{color:#e5e7eb}
	/* reference BlockGridGallery view prop: fixed aspect crops for non-masonry galleries */
	.cgi-cs-gv-landscape .cgi-cs-gimg{aspect-ratio:3/2;object-fit:cover;width:100%}
	.cgi-cs-gv-portrait .cgi-cs-gimg{aspect-ratio:2/3;object-fit:cover;width:100%}
	.cgi-cs-gv-square .cgi-cs-gimg{aspect-ratio:1/1;object-fit:cover;width:100%}
	.cgi-cs-gimg{width:100%;height:auto;border-radius:.75rem;display:block;cursor:pointer}/* prod: pointer, not zoom-in */
	:is(.cgi-single-content,.entry-content) .wp-block-gallery img{cursor:pointer}
	/* gallery lightbox (reference BlockGridGallery openModal → ModalMediaViewer): full-screen dark overlay above everything */
	.cgi-glb{position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:2rem}
	.cgi-glb.open{display:flex}
	.cgi-glb-img{max-width:92vw;max-height:88vh;width:auto;height:auto;border-radius:1rem;object-fit:contain;display:block;box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}
	.cgi-glb-btn{position:absolute;background:rgba(255,255,255,.14);border:0;color:#fff;width:3rem;height:3rem;border-radius:999px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;z-index:2}
	.cgi-glb-btn:hover{background:rgba(255,255,255,.28)}
	.cgi-glb-btn svg{width:1.4rem;height:1.4rem}
	.cgi-glb-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.5rem;z-index:3}
	.cgi-glb-cap{color:#fff;font-size:1rem;font-weight:500;opacity:.92;line-height:1.3}
	.cgi-glb-close{position:relative;flex:0 0 auto}
	.cgi-glb-prev{left:1.5rem;top:50%;transform:translateY(-50%)}
	.cgi-glb-next{right:1.5rem;top:50%;transform:translateY(-50%)}
	@media(max-width:640px){.cgi-glb-prev{left:.5rem}.cgi-glb-next{right:.5rem}.cgi-glb-btn{width:2.5rem;height:2.5rem}}
	/* case slider (reference blocks.slider): embla FADE one-at-a-time, rounded-xl gray-200 border frame, round black arrows + outlined-dot bullets, autoplay 4s loop. Enhanced by wp_footer JS. */
	.cgi-cs-slidewrap{margin:2rem 0;display:flex;flex-direction:column;align-items:center;gap:.5rem}
	.single-guide_chapter .cgi-cs-slidewrap{margin:3rem 0 6.5rem}/* prod: 48 above / 104 below */
	/* prod: on CASE STUDIES the content slider breaks OUT of the 60rem reading column to the
	   full container width (text/images stay 960; slider = min(100vw-128, 1472) centered on the
	   viewport). Blog posts keep the slider at content width (960) — no breakout there. */
	/* USER OVERRIDE 2026-07-13: ALL case sliders stay container-width (960) — breakout disabled
	   even though prod shows 74 sliders wide (1312). The cgi-cs-wide classes remain in content, inert.
	   To re-enable: .single-case .cgi-cs-slidewrap.cgi-cs-wide{position:relative;left:50%;transform:translateX(-50%);width:clamp(960px,100vw - 8rem,1472px);max-width:none} @1024+ */
	/* кейс/пост-cover (шаблонний featured у .cgi-case-media): прод = img 1472, rounded-3xl + shadow-xl.
	   Панель лишається на всю ширину: її верхній радіус заданий у 5vw, тож обрізання панелі на 1536
	   лишало радіус рости разом з екраном — на широкому моніторі кути опинялись біля картинки
	   замість країв. Ширину тепер тримає сама картинка. */
	@media(min-width:1024px){:is(.single-case,.single-post) .cgi-case-media{max-width:none}
	:is(.single-case,.single-post) .cgi-case-media img{width:100%;max-width:1472px;margin-left:auto;margin-right:auto;height:auto;border-radius:1.5rem;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}}
	.cgi-cs-slider{position:relative;width:100%;border:1px solid #e5e5e5;border-radius:.75rem;overflow:hidden;line-height:0}
	.cgi-cs-slider:not(.cgi-cs-ready) .cgi-cs-slide:not(:first-child){display:none}
	.cgi-cs-slide{padding:.25rem}
	.cgi-cs-slider.cgi-cs-ready .cgi-cs-slide{opacity:0;transition:opacity .6s ease}
	.cgi-cs-slider.cgi-cs-ready .cgi-cs-slide:first-child{position:relative}
	.cgi-cs-slider.cgi-cs-ready .cgi-cs-slide:not(:first-child){position:absolute;inset:0}
	.cgi-cs-slider.cgi-cs-ready .cgi-cs-slide.on{opacity:1}
	.cgi-cs-slide img,.cgi-cs-simg{width:100%;height:100%;object-fit:contain;border-radius:.5rem;border:0;display:block}
	.cgi-cs-controls{display:flex;justify-content:center;align-items:center;gap:1rem;width:100%;margin-top:.25rem}
	@media(min-width:640px){.cgi-cs-controls{justify-content:space-between}}
	.cgi-cs-arrows{display:none;gap:.75rem}
	@media(min-width:640px){.cgi-cs-arrows{display:flex}}
	.cgi-cs-arrow{width:3rem;height:3rem;border-radius:999px;background:#171717!important;color:#fff!important;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:12px}/* prod: 48px, #171717 */
	.cgi-cs-arrow:hover,.cgi-cs-arrow:focus,.cgi-cs-arrow:active{background:#0a0a0a!important;color:#fff!important;box-shadow:none!important}
	.cgi-cs-arrow svg{width:1.5rem;height:1.5rem}
	.cgi-cs-dots{display:flex;list-style:none;margin:0;padding:0}
	.cgi-cs-dots li{margin:0}
	.cgi-cs-dot{padding:.5rem;background:transparent!important;border:0;cursor:pointer;display:flex;line-height:0;border-radius:999px}
	.cgi-cs-dot:hover{background:rgba(0,0,0,.06)!important}
	.cgi-cs-dot:hover span{border-color:#6b7280}
	.cgi-cs-dot span{width:.875rem;height:.875rem;border-radius:999px;border:2px solid #d4d4d4;transition:border-color .2s}
	.cgi-cs-dot.on span{border-color:#000}
	html.cgi-dark .cgi-cs-slider{border-color:#262626}
	html.cgi-dark .cgi-cs-dot.on span{border-color:#fff}
	/* reference BlockGridGallery: <lg = ceil(cols/2), <sm = ceil(cols/4) (in-content) */
	@media(max-width:1023px){.cgi-cs-gallery-2{column-count:1}.cgi-cs-gallery-3,.cgi-cs-gallery-4{column-count:2}.cgi-cs-gallery-5,.cgi-cs-gallery-6{column-count:3}}
	/* reference masonry keeps natural image aspect — neutralize is-cropped uniform rows */
	.cgi-single-content .wp-block-gallery.is-cropped :is(img,figure.wp-block-image){height:auto!important}
	.cgi-single-content .wp-block-gallery{align-items:flex-start!important}
	/* same reference breakpoints for core wp:gallery markup (fresh converter output) */
	@media(max-width:1023px){
	.cgi-single-content .wp-block-gallery.columns-2 figure.wp-block-image{width:100%!important}
	.cgi-single-content :is(.wp-block-gallery.columns-3,.wp-block-gallery.columns-4) figure.wp-block-image{width:calc(50% - 8px)!important}
	}
	@media(max-width:639px){
	.cgi-single-content :is(.wp-block-gallery.columns-2,.wp-block-gallery.columns-3,.wp-block-gallery.columns-4) figure.wp-block-image{width:100%!important}
	.cgi-single-content :is(.wp-block-gallery.columns-5,.wp-block-gallery.columns-6) figure.wp-block-image{width:calc(50% - 8px)!important}
	}
	@media(max-width:639px){.cgi-cs-gallery-2,.cgi-cs-gallery-3,.cgi-cs-gallery-4{column-count:1}.cgi-cs-gallery-5,.cgi-cs-gallery-6{column-count:2}}
	.cgi-single-content p:empty{display:none}
	/* before/after comparison slider (reference blocks.comparison-slider) */
	.cgi-cmp{position:relative;width:100%;border-radius:.75rem;overflow:hidden;margin:2rem 0;line-height:0;user-select:none}/* prod .rounded-xl = 12px */
	.cgi-cmp-base{width:100%;height:auto;display:block}
	.cgi-cmp-top{position:absolute;top:0;left:0;height:100%;width:50%;overflow:hidden}
	.cgi-cmp-top img{height:100%;width:auto;max-width:none;display:block}
	.cgi-cmp-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none;z-index:2}
	/* prod: circular handle with < > chevrons (neutral-600 on neutral-50), not a plain dot */
	.cgi-cmp-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2.5rem;height:2.5rem;border-radius:999px;background:#fafafa;box-shadow:0 1px 5px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;color:#525252}
	.cgi-cmp-handle svg{width:.95rem;height:.95rem;display:block}
	/* prod: "Color swap" pill labels, bottom-left + bottom-right, neutral-50/75% */
	.cgi-cmp-label{position:absolute;bottom:2rem;background:rgba(250,250,250,.75);color:#0a0a0a;border-radius:6px;font-size:.875rem;line-height:1.25;font-weight:500;padding:8px 16px;z-index:2;pointer-events:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
	.cgi-cmp-label-l{left:2rem}.cgi-cmp-label-r{right:2rem}
	.cgi-cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
	/* embeds (youtube/vimeo) 16:9 */
	.cgi-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:1rem;overflow:hidden;background:#000}
	.cgi-embed iframe{position:absolute;inset:0;width:100%;height:100%!important;border:0}/* !important: prose img/video/iframe height:auto rule collapses replaced iframes to intrinsic 150px */
	.cgi-single-content .cgi-cs-vid{width:100%;height:auto;border-radius:.75rem;display:block;background:#000}
	/* video: poster + centred play-button overlay (reference blocks.video) */
	/* reference NativeVideoPlayer: rounded-xl + gray-200 border frame, play/pause LINK button bottom-right (gray-300→white) */
	.cgi-single-content .cgi-vid-wrap{position:relative;border-radius:.75rem;overflow:hidden;border:1px solid #e5e7eb;line-height:0}
	.cgi-single-content .cgi-vid-wrap .cgi-cs-vid{border-radius:0;border:0}
	.cgi-single-content .cgi-vid-ctrl,.cgi-vid-ctrl{position:absolute;bottom:1rem;right:1rem;background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;-webkit-appearance:none;appearance:none;padding:0;margin:0;min-width:0;min-height:0;color:#d4d4d4;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:color .1s}/* prod: neutral-300, r6 */
	.cgi-single-content .cgi-vid-ctrl:hover,.cgi-vid-ctrl:hover{color:#fff;background:transparent!important}
	.cgi-vid-ctrl svg{width:2.5rem;height:2.5rem}
	@media(min-width:640px){.cgi-single-content .cgi-vid-ctrl,.cgi-vid-ctrl{bottom:2rem;right:2rem}}
	html.cgi-dark .cgi-single-content .cgi-vid-wrap{border-color:#262626}
	/* in-content CTA card (reference blocks.call-to-action) */
	.cgi-bl-cta{display:flex;flex-direction:column;gap:3rem;background:#171717;border-radius:.75rem;padding:3rem 1.5rem;margin:4rem 0;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);overflow:hidden;position:relative;isolation:isolate}
	@media(min-width:640px){.cgi-bl-cta{margin:6rem 0}}/* donor my-16 sm:my-24 */
	@media(min-width:768px){.cgi-bl-cta{padding-left:6rem;padding-right:6rem}}/* donor @2xl:px-24 */
	/* demo band as the LAST content block: drop its own bottom margin + the content-area tail so the
	   author section (own 6rem padding-top) provides the only separation */
	.cgi-single-content > .cgi-bl-cta:last-child,.cgi-single-content .wp-block-group.cgi-bl-cta:last-child{margin-bottom:0!important}
	.content-area:has(.cgi-single-content > .cgi-bl-cta:last-child){padding-bottom:0}
	/* прод 2026-07: на 2xl текстова карта розтягнута 2xl:-mx-12 (1056 ≥ container-5xl) → py-20 */
	@media(min-width:1536px){:is(.single-post,.single-case) .cgi-bl-cta:not(:has(.cgi-bl-cta-poster)){padding-top:5rem;padding-bottom:5rem}}
	/* reference CTA glow: centred 64rem circle, radial #7775D6→#20a6e7 at .7 opacity (BlockCallToAction svg) */
	.cgi-bl-cta::before{content:"";position:absolute;left:50%;top:50%;width:64rem;height:64rem;transform:translateX(-50%);background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxjaXJjbGUgY3g9IjUxMiIgY3k9IjUxMiIgcj0iNTEyIiBmaWxsPSJ1cmwoI2cpIiBmaWxsLW9wYWNpdHk9IjAuNyIvPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0iZyIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSg1MTIgNTEyKSByb3RhdGUoOTApIHNjYWxlKDUxMikiPjxzdG9wIHN0b3AtY29sb3I9IiM3Nzc1RDYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMyMEE2RTciIHN0b3Atb3BhY2l0eT0iMCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==) center/contain no-repeat;z-index:-1;pointer-events:none}/* exact prod svg (circle + radialGradient), only X-shifted: glow rises from below centre */
	@media(min-width:1152px){.cgi-bl-cta:has(.cgi-bl-cta-poster){flex-direction:row;align-items:center;justify-content:center;gap:4rem;padding:5rem 3rem 5rem 6rem}}/* donor @5xl: card>=1024 = vw 1152 (card=100vw-128); prod: only media CTAs get the wide row treatment */
	/* reference: the CTA breaks out of the 960 reading column to the full content width (min(100vw-128,1408), centred on the viewport) */
	@media(min-width:1024px){.cgi-bl-cta:has(.cgi-bl-cta-poster){width:min(calc(100vw - 128px),1408px);margin-left:50%;margin-right:0;transform:translateX(-50%)}}/* posterless CTAs stay in the 960 column (prod) */
	@media(min-width:1536px){.cgi-bl-cta.cgi-bl-cta:not(:has(.cgi-bl-cta-poster)){margin-left:-3rem;margin-right:-3rem;width:calc(100% + 6rem)}}/* donor 2xl:-mx-12: posterless CTA bleeds 48px past the column (also guides; doubled class beats the guide width:auto override) */
	/* guide chapters: prod keeps the CTA banner in the main column (no viewport breakout — it would overlap
	   the sidebar); reference non-wide BlockCallToAction pokes out 3rem each side from 2xl (2xl:-mx-12) */
	.single-guide_chapter .cgi-bl-cta{width:auto;margin-left:0;margin-right:0;transform:none}
	/* prod uses @container queries: in the 928px guide column the card stays COLUMN —
	   big poster on top (full width, px-24 gutters), title + button below, glow at the bottom */
	.single-guide_chapter .cgi-bl-cta{flex-direction:column;align-items:stretch;padding:3rem 1.5rem;gap:3rem}
	@container (min-width:42rem){.single-guide_chapter .cgi-bl-cta{padding-left:6rem;padding-right:6rem}}/* donor @2xl:px-24 */
	.single-guide_chapter .cgi-bl-cta .cgi-bl-cta-poster{flex:none;width:100%;max-width:none;order:0}/* prod column card: image on top */
	.single-guide_chapter .cgi-bl-cta .cgi-bl-cta-poster img{width:100%;height:auto;border-radius:.75rem}
	.single-guide_chapter .cgi-bl-cta .cgi-bl-cta-body{max-width:none}
	/* real container query like prod (@5xl): when the guide column is wide (1920 viewports) the card
	   switches back to ROW — text left, poster right */
	.single-guide_chapter .cgi-gd-main{container-type:inline-size}
	@container (min-width:64rem){
		.single-guide_chapter .cgi-bl-cta{flex-direction:row;align-items:center;gap:4rem;padding:5rem 3rem 5rem 6rem}/* prod @5xl:py-20 + pr-12 with poster */
		.single-guide_chapter .cgi-bl-cta .cgi-bl-cta-poster{order:2;width:auto;flex:0 0 50%}
		.single-guide_chapter .cgi-bl-cta .cgi-bl-cta-body{order:1;flex:1 1 0}
	}
	@media(min-width:1536px){.single-guide_chapter .cgi-bl-cta{margin-left:-3rem;margin-right:-3rem}}
	/* prod gutters: px-4 sm:px-6 lg:px-8 (16/24/32). Kadence container gives 16 below 640, 0 above */
	@media(max-width:639px){.single-guide_chapter .cgi-gd-layout{padding-left:0;padding-right:0}}
	@media(min-width:640px) and (max-width:1023px){.single-guide_chapter .cgi-gd-layout{padding-left:1.5rem;padding-right:1.5rem}}
	@media(max-width:767px){.single-case .cgi-single-content .cgi-bl-cta{margin-left:-1.5rem;margin-right:-1.5rem}}/* prod case CTA breaks out of the 294 col to 342 on mobile *//* single 16px gutter on mobile, as prod (col 358 vs prod 380-with-overflow) */
	.cgi-bl-cta-body{order:1;flex:1 1 0;min-width:0;display:flex;flex-direction:column}
	.cgi-bl-cta:not(:has(.cgi-bl-cta-poster)) .cgi-bl-cta-body{align-items:center}/* prod: posterless CTA centres its content */
	/* must out-specify the align-self:flex-start on the prose .cgi-bl-cta-btn rule below */
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content .cgi-bl-cta:not(:has(.cgi-bl-cta-poster)) .cgi-bl-cta-btn,.cgi-bl-cta:not(:has(.cgi-bl-cta-poster)) .cgi-bl-cta-btn{align-self:center}
	.cgi-bl-cta-poster{order:0;flex:0 0 auto;width:100%}/* mobile: image on top, as prod */
	@media(min-width:1152px){.cgi-bl-cta-poster{order:2;width:50%}}
	.cgi-bl-cta-poster img{width:100%;height:auto;border-radius:.75rem;display:block}
	/* video CTA (reference BlockCallToAction with a video): 16:9 cover. Ordering follows the base poster
	   rule (media on TOP when stacked on mobile, right column on desktop) - prod stacks the video above
	   the text on mobile, same as the image CTAs */
	.cgi-bl-cta-poster video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:.75rem;display:block}
	.cgi-bl-cta-poster-vid .cgi-vid-wrap{border:0!important;border-radius:.75rem;overflow:hidden}
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content .cgi-bl-cta-title,.cgi-bl-cta-title{font-size:1.5rem;font-weight:600;color:#fff;margin:0;line-height:2rem;letter-spacing:-.01em;max-width:48rem}
	@media(min-width:768px){:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content .cgi-bl-cta-title,.cgi-bl-cta-title{font-size:1.875rem;line-height:2.25rem}}
	@media(min-width:1024px){:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content .cgi-bl-cta-title,.cgi-bl-cta-title{font-size:2.25rem;line-height:2.5rem}}
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content .cgi-bl-cta-desc,.cgi-bl-cta-desc{margin:1.5rem 0 0;font-size:1rem;line-height:1.5rem;color:#d4d4d4;max-width:32rem}/* donor text-base sm:text-lg */
	@media(min-width:640px){:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content .cgi-bl-cta-desc,.cgi-bl-cta-desc{font-size:1.125rem;line-height:1.75rem}}
	.single-post .cgi-single-content .cgi-bl-cta-btn,.cgi-bl-cta-btn{align-self:flex-start;margin-top:3rem;background:#0ea5e9;color:#fff!important;border-radius:.375rem;padding:1rem 1.5rem;font-size:1.125rem;font-weight:500;text-decoration:none!important;line-height:1.75rem}
	.single-post .cgi-single-content .cgi-bl-cta-btn:hover,.cgi-bl-cta-btn:hover{background:#0284c7;color:#fff!important}
	/* FAQ accordion (reference blocks.faq) */
	/* (removed dead .cgi-bl-faq* legacy accordion CSS — no markup emits these classes; used non-painting +/- summary::after) */
	html.cgi-dark .cgi-bl-cta{background:#082f49}html.cgi-dark :is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content .cgi-bl-cta-title,html.cgi-dark .cgi-bl-cta-title{color:#fff}html.cgi-dark :is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content .cgi-bl-cta-desc,html.cgi-dark .cgi-bl-cta-desc{color:#d4d4d4}html.cgi-dark :is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content .cgi-bl-cta-btn,html.cgi-dark .cgi-bl-cta-btn{background:#38bdf8;color:#171717!important}html.cgi-dark :is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content .cgi-bl-cta-btn:hover,html.cgi-dark .cgi-bl-cta-btn:hover{background:#7dd3fc;color:#171717!important}/* prod dark: primary-950 card, sky-400 btn dark text */
	html.cgi-dark .cgi-single-hero{background:linear-gradient(to top right,#171717,#0a0a0a)}
	html.cgi-dark .cgi-single-hero h1{color:#fafafa}
	html.cgi-dark .cgi-single-hero p.cgi-sub{color:#d4d4d4}
	html.cgi-dark .cgi-single-hero .cgi-crumbs,html.cgi-dark .cgi-single-hero .cgi-crumbs a{color:#9ca3af}
	html.cgi-dark .cgi-single-hero .cgi-tax a{background:rgba(255,255,255,.1);color:#d4d4d4}
	html.cgi-dark .cgi-case-media img{border-color:#262626}
	/* guide CTA (also appended after service/case single bodies) */
	.cgi-fullbleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
	/* guide CTA styled globally in cgi-zz-design-system */
	/* service single: sticky group nav + specialization grid */
	/* service group nav = reference fixed-on-scroll bar: hidden above the viewport, slides in
	   once you scroll past the hero, stays through the content. The JS driver keeps it glued to the
	   main header bottom edge (translateY = header height when the header bar is revealed, 0 when hidden),
	   matching the header .3s ease so both move as one unit. */
	.cgi-svc-nav{position:fixed;top:0;left:0;right:0;z-index:35;background:linear-gradient(to right,#082032,#0e3050);transform:translateY(-100%);transition:transform .3s ease;will-change:transform}
	.cgi-svc-nav.on{transform:translateY(0)}
	/* service single, SMALLER SCREENS ONLY (desktop keeps its original header): pin the header so the slide-in
	   service nav (top:80px) sits directly below it instead of floating over a strip of content */
	@media(max-width:1024px){
		body.single-service #masthead{position:fixed!important;top:0;left:0;right:0;z-index:36;transition:background .25s ease}
		/* solid WHITE on scroll (matches the desktop Kadence sticky header); dark logo/menu stay visible */
		body.single-service.cgi-svcnav-on #masthead,
		body.single-service.cgi-svcnav-on #masthead .site-header-row-container-inner{background:#fff!important}
		body.single-service.cgi-svcnav-on #masthead{box-shadow:0 1px 0 rgba(0,0,0,.06)}
		/* dark mode: keep the scrolled header dark (light logo/menu stay visible), not white-on-white */
		html.cgi-dark body.single-service.cgi-svcnav-on #masthead,
		html.cgi-dark body.single-service.cgi-svcnav-on #masthead .site-header-row-container-inner{background:#0a0a0a!important}
		html.cgi-dark body.single-service.cgi-svcnav-on #masthead{box-shadow:0 1px 0 rgba(255,255,255,.08)}
	}
	.cgi-svc-nav-inner{max-width:1536px;margin:0 auto;display:flex;align-items:center;gap:1.5rem;padding:0 2rem;overflow-x:auto;scrollbar-width:none}
	.cgi-svc-nav-inner::-webkit-scrollbar{display:none}
	.cgi-svc-nav-group{color:#fff;font-weight:600;white-space:nowrap;padding:1rem 1.5rem 1rem 0;flex:0 0 auto;border-right:1px solid rgba(255,255,255,.2)}
	.cgi-svc-nav-tabs{display:flex;gap:1.5rem}
	.cgi-svc-nav-tabs a{color:#d4d4d4;text-decoration:none;white-space:nowrap;padding:1.1rem 0;border-bottom:3px solid transparent;font-size:.9rem}
	.cgi-svc-nav-tabs a:hover{color:#fff}
	.cgi-svc-nav-tabs a.on{color:#fff;border-bottom-color:#0ea5e9}
	/* categories section = reference rounded-t-[5vw] white card pulled up over the hero */
	/* bottom spacing is a MARGIN (not padding) so it collapses with the next section, like prod (mb-16) */
	.cgi-spec{position:relative;z-index:2;background:#fff;border-radius:5vw 5vw 0 0;margin-top:-5vw;margin-bottom:4rem;padding:0}
	html.cgi-dark .cgi-spec{background:#0a0a0a;border-top:1px solid #171717}
	.cgi-spec-wrap{max-width:1536px;margin:0 auto;padding:32px 1rem 0}
	@media(min-width:640px){.cgi-spec-wrap{padding:32px 1.5rem 0}}
	@media(min-width:1024px){.cgi-spec-wrap{padding:32px 2rem 0}}
	.cgi-spec-h2{text-transform:uppercase;letter-spacing:.05em;color:#6b7280;font-size:1rem;font-weight:400;margin:0 0 64px;padding:0 .75rem}
	.cgi-spec-layout{display:flex;flex-direction:column;gap:2rem}
	@media(min-width:1024px){.cgi-spec-layout{flex-direction:row;gap:3rem}}
	.cgi-spec-side{display:none}
	@media(min-width:1024px){.cgi-spec-side{display:block;flex:0 0 18rem}}
	.cgi-spec-side-sticky{position:sticky;top:9.5rem;max-height:calc(100vh - 11rem);overflow-y:auto;padding-right:.5rem}
	.cgi-spec-ind{margin-bottom:1.5rem}
	.cgi-spec-ind-name{font-weight:600;font-size:.85rem;margin:0 0 .5rem;color:#0a0a0a}
	.cgi-spec-side ul{list-style:none;margin:0;padding:0}
	.cgi-spec-side li a{display:block;padding:.35rem .6rem;color:#404040;text-decoration:none;border-radius:.4rem;font-size:.9rem}
	.cgi-spec-side li a:hover{color:#0a0a0a}
	.cgi-spec-side li a.on{color:#0284c7;font-weight:600}
	.cgi-spec-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5rem}
	/* reference CardSpecialization: transparent card -> bg-gray-100 on hover (sm+), rounded-3xl, p-3 */
	.cgi-spec-card{scroll-margin-top:9.5rem;border-radius:1.5rem;transition:background .3s ease}
	/* prod cards end with a pb-6 button wrapper — inside the list the gap absorbs it, but the LAST card needs it */
	.cgi-spec-card:last-child{padding-bottom:1.5rem}
	/* prod MOBILE (bg-gray-100 rounded-3xl overflow-hidden, no p-3): the card gets a gray fill and CLIPS the
	   full-bleed media to the card radius (media itself carries no radius) - text/button keep their gutter */
	@media(max-width:639px){.cgi-spec-card{background:#f5f5f5;overflow:hidden;padding-bottom:1.5rem}
		.cgi-spec-card .cgi-spec-media,.cgi-spec-card .cgi-spec-media-vid,.cgi-spec-card .cgi-spec-media-spin,.cgi-spec-card .cgi-spec-media-ar{border-radius:0}
		.cgi-spec-card .cgi-spec-media :is(img,video,iframe),.cgi-spec-card .cgi-spec-media-vid :is(img,video,iframe){border-radius:0}}
	html.cgi-dark .cgi-spec-card{background:transparent}
	@media(max-width:639px){html.cgi-dark .cgi-spec-card{background:#262626}}
	@media(min-width:640px){.cgi-spec-card{padding:.75rem}.cgi-spec-card:last-child{padding-bottom:2.25rem}.cgi-spec-card:hover{background:#f3f4f6}}
	html.cgi-dark .cgi-spec-card:hover{background:#262626}
	.cgi-spec-name{font-style:italic;font-weight:700;font-size:1.5rem;line-height:2rem;letter-spacing:normal;margin:0;padding:0 1.5rem;color:#0a0a0a}
	.cgi-spec-media-vid{aspect-ratio:16/9}
	/* prod mobile shows spec videos at their NATURAL ratio (portrait socials = 9:16); ≥640 crops to 16:9 */
	@media(max-width:639px){.cgi-spec-media-vid:has(video){aspect-ratio:auto}.cgi-spec-media-vid video{height:auto;aspect-ratio:auto;object-fit:cover;max-height:calc((100vw - 2rem)*16/9)}}
	.cgi-spec-media-vid :is(iframe,video){width:100%;height:100%;object-fit:cover;border-radius:1rem;display:block}
	/* portrait reel videos: letterbox (object-contain) so the whole phone shows, like prod. Desktop keeps
	   the 16:9 card box (phone centred with side margins); ≥640 mobile switches the box to 9:16 (full phone). */
	.cgi-spec-media-vid video{opacity:0;transition:opacity .25s}
	.cgi-spec-media-vid.cgi-spec-ready video{opacity:1}
	.cgi-spec-media-vid.cgi-spec-vvert{background:transparent}
	.cgi-spec-media-vid.cgi-spec-vvert video{object-fit:contain}
	@media(max-width:639px){.cgi-spec-media-vid.cgi-spec-vvert{aspect-ratio:9/16}.cgi-spec-media-vid.cgi-spec-vvert video{height:100%;aspect-ratio:auto;max-height:none;object-fit:contain}}
	.cgi-spec-desc{font-size:1.125rem;line-height:1.75rem;letter-spacing:.4px;color:#0a0a0a;margin:1rem 0 1.5rem;padding:0 1.5rem;max-width:calc(65ch + 3rem)}
	html.cgi-dark .cgi-spec-desc,html.cgi-dark .cgi-spec-name,html.cgi-dark .cgi-spec-ind-name{color:#fafafa}
	/* shared gate pill (.cgi-cs-load) — [cgi_model]/[cgi_spin] cards on singles need it too (main def sits in the archive/landing block) */
	.cgi-cs-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:transparent;border:0;cursor:pointer;padding:0;z-index:2;font:inherit}
	.cgi-cs-load:hover,.cgi-cs-load:focus{background:transparent!important;box-shadow:none}
	.cgi-cs-load-pill{display:inline-flex;align-items:center;gap:.75rem;background:#171717;color:#fff;border-radius:6px;padding:.75rem 1rem;font-weight:500;font-size:1rem;line-height:1.5rem;letter-spacing:.4px;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:background .15s}
	.cgi-cs-load:hover .cgi-cs-load-pill,.cgi-cs-load:focus .cgi-cs-load-pill{background:#262626}
	.cgi-cs-load-pill svg{width:1.25rem;height:1.25rem;flex:0 0 auto}
	html.cgi-dark .cgi-cs-load-pill{background:#fff;color:#171717}
	html.cgi-dark .cgi-cs-load:hover .cgi-cs-load-pill{background:#e5e5e5}
	.cgi-spec-media{border-radius:1rem;overflow:hidden;aspect-ratio:16/9}
	.cgi-spec-media img{width:100%;height:100%;object-fit:cover;display:block}
	/* 360 spec card (prod Spinner360): poster + pill; after click = drag-to-spin */
	.cgi-spec-media-spin{position:relative;user-select:none;touch-action:pan-y}
	.cgi-spec-media-spin.on{cursor:grab}
	.cgi-spec-media-spin.dragging{cursor:grabbing}
	.cgi-spec-media-spin img{pointer-events:none}
	.cgi-spec-spin-ico{position:absolute;bottom:1rem;right:1rem;z-index:2;width:2.5rem;height:2.5rem;color:#d1d5db;pointer-events:none}
	@media(min-width:640px){.cgi-spec-spin-ico{bottom:2rem;right:2rem}}
	.cgi-spec-spin-ico svg{width:100%;height:100%}
	/* AR spec card (static-reference UX): model poster + badge; controls appear after load */
	.cgi-spec-media-ar{position:relative;background:#f3f4f6}
	.cgi-spec-media-ar model-viewer{width:100%;height:100%;--poster-color:transparent;background:#f3f4f6}
	.cgi-spec-media-ar model-viewer::part(default-ar-button){display:none}
	/* AR opener = the shared centred prod gate pill (.cgi-cs-load/.cgi-cs-load-pill) */
	.cgi-spec-ar-btn,html.cgi-dark .cgi-spec-ar-btn{display:inline-flex;align-items:center;gap:.4rem;background:rgba(0,0,0,.7)!important;color:#fff!important;border:0;border-radius:9999px;padding:.45rem .9rem;font-size:.8125rem;font-weight:500;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .15s}/* !important: Kadence global button styles repaint it blue on mobile / dark-text in dark mode */
	.cgi-spec-ar-btn:hover,html.cgi-dark .cgi-spec-ar-btn:hover{background:rgba(0,0,0,.9)!important;color:#fff!important}
	.cgi-spec-ar-native{position:absolute;bottom:1rem;right:1rem;z-index:3}
	.cgi-spec-ar-ctrl{position:absolute;bottom:.75rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:.5rem}/* static ref: pill centred at bottom (12px) */
	.cgi-spec-ar-qr{position:absolute;bottom:3.5rem;left:50%;transform:translateX(-50%);background:#fff;border-radius:.75rem;padding:.75rem;box-shadow:0 4px 20px rgba(0,0,0,.25);display:none;flex-direction:column;align-items:center;gap:.375rem;font-size:.8125rem;font-weight:500;color:#333;z-index:10;max-width:calc(100% - 2rem);max-height:calc(100% - 4.5rem)}/* static ref: 156x170 box centred above the pill */
	.cgi-spec-ar-qr.open{display:flex}
	.cgi-spec-ar-qr img{width:120px;height:120px;aspect-ratio:1/1;object-fit:contain;max-width:100%;border-radius:0;display:block;flex:0 0 auto}/* static ref: 120px code *//* no rounding + qzone: keep finder patterns scannable */
	html.cgi-dark .cgi-spec-media-ar,html.cgi-dark .cgi-spec-media-ar model-viewer{background:#262626}
	/* media clip-inset reveal: image sits inset 12px, expands to fill on card hover (reference clip-offset-3 -> 0) */
	@media(min-width:640px){.cgi-spec-media img{clip-path:inset(12px round 1rem);transition:clip-path .35s ease;will-change:clip-path}.cgi-spec-card:hover .cgi-spec-media img{clip-path:inset(0 round 1rem)}}
	.cgi-spec-media .cgi-spec-ar-qr img{clip-path:none!important}/* the QR code must never be clipped by the card hover-reveal */
	/* prod: NO border - a near-black inset ring (box-shadow) + #0a0a0a text, r6 (not a light-gray border) */
	.cgi-spec-portfolio{display:inline-flex;align-items:center;gap:.75rem;margin:1.5rem 1.5rem 0;border:0;box-shadow:inset 0 0 0 1px #0a0a0a;border-radius:6px;padding:.6875rem 1rem;text-decoration:none;color:#0a0a0a;font-weight:500;font-size:1rem;line-height:1.5rem;letter-spacing:.4px}
	.cgi-spec-portfolio svg{width:24px;height:24px}
	/* reference mobile card: media first (text block is sm:order-first), 24px block gaps, li pt-8 + pb-6 between cards */
	@media(max-width:639px){
		.cgi-spec-h2{margin-bottom:40px}
		.cgi-spec-main{gap:3.5rem}
		.cgi-spec-card{display:flex;flex-direction:column}
		.cgi-spec-card :is(.cgi-spec-media,.cgi-spec-media-vid){order:-1;margin-bottom:1.5rem}
		.cgi-spec-portfolio{margin-top:0;align-self:flex-start}
	}
	.cgi-spec-portfolio:hover{background:#f4f4f5;color:#0a0a0a;box-shadow:inset 0 0 0 1px #0a0a0a}
	html.cgi-dark .cgi-spec-h2{color:#9ca3af}
	html.cgi-dark .cgi-spec-side li a{color:#e5e5e5}
	html.cgi-dark .cgi-spec-side li a:hover{color:#fff}
	html.cgi-dark .cgi-spec-side li a.on{color:#38bdf8}
	html.cgi-dark .cgi-spec-media{background:#262626}
	html.cgi-dark .cgi-spec-portfolio{box-shadow:inset 0 0 0 1px #e5e5e5;color:#e5e5e5}
	html.cgi-dark .cgi-spec-portfolio:hover{background:#27272a;color:#fff;box-shadow:inset 0 0 0 1px #e5e5e5}
	/* guide chapter: "Chapter N" eyebrow + 2-col layout (content + sticky chapters nav) + prev/next */
	/* guide chapter: prod wraps the whole post-hero content in a rounded white section pulled -5vw over the hero */
	.single-guide_chapter .content-area{position:relative;z-index:2;background:#fff;border-radius:5vw 5vw 0 0;margin-top:-5vw}
	/* prod: first content sits 64px below the rounded edge — collapse the extra entry-content spacing */
	.single-guide_chapter .content-area .entry-content{padding-top:0;margin-top:0}
	.single-guide_chapter .cgi-gd-layout{padding-top:4rem}
	html.cgi-dark .single-guide_chapter .content-area{background:#0a0a0a;border-top:1px solid #171717}
	.cgi-gd-eyebrow{text-transform:uppercase;letter-spacing:.4px;color:#0ea5e9;font-weight:400;font-size:1.5rem;line-height:2rem;margin:0 0 1rem}/* prod: text-primary xl:text-2xl fw400 mb-4 */
	.cgi-gd-layout{display:grid;grid-template-columns:1fr;gap:3rem;max-width:1536px;margin:0 auto;padding:3rem 2rem 0}
	@media(max-width:639px){.cgi-cs-arrows{display:none}}/* prod mobile sliders: dots only, no arrows */
	@media(min-width:1280px){.cgi-gd-layout{grid-template-columns:1fr 24rem;gap:4rem}}
	.cgi-gd-main{min-width:0}
	.cgi-gd-side{order:-1}.cgi-gd-main{order:1}/* mobile: TOC block above the article, as prod */
	@media(min-width:1280px){.cgi-gd-side{order:2}.cgi-gd-main{order:1}}
	.cgi-gd-side-sticky{position:static}
	@media(min-width:1280px){.cgi-gd-side-sticky{position:sticky;top:7rem;max-height:calc(100vh - 9rem);overflow-y:auto}}
	.cgi-gd-toggle{display:inline-flex;align-items:center;gap:.75rem;width:auto;background:transparent;border:0;box-shadow:inset 0 0 0 1px #0a0a0a;border-radius:6px;padding:.75rem 1rem;font-size:1rem;font-weight:500;line-height:1.5rem;cursor:pointer;color:#0a0a0a}/* prod: ghost ring pill, gap-3 px-4 py-3 */
	.cgi-gd-toggle:focus,.cgi-gd-toggle:active,.cgi-gd-toggle:hover{background:transparent!important;color:#0a0a0a!important;box-shadow:inset 0 0 0 1px #0a0a0a!important;outline:none}/* Kadence paints focused buttons blue */
	.cgi-gd-side.open .cgi-gd-toggle:focus,.cgi-gd-side.open .cgi-gd-toggle:active,.cgi-gd-side.open .cgi-gd-toggle:hover{background:#171717!important;color:#fff!important;box-shadow:none!important}
	html.cgi-dark .cgi-gd-toggle:focus,html.cgi-dark .cgi-gd-toggle:active,html.cgi-dark .cgi-gd-toggle:hover{background:transparent!important;color:#f3f4f6!important;box-shadow:inset 0 0 0 1px #d4d4d4!important}
	html.cgi-dark .cgi-gd-side.open .cgi-gd-toggle:focus,html.cgi-dark .cgi-gd-side.open .cgi-gd-toggle:active,html.cgi-dark .cgi-gd-side.open .cgi-gd-toggle:hover{background:#fff!important;color:#171717!important;box-shadow:none!important}
	.cgi-gd-toggle svg{width:1.5rem;height:1.5rem;flex:0 0 auto}
	.cgi-gd-tgl-x{display:none}
	.cgi-gd-side.open .cgi-gd-toggle{background:#171717;color:#fff;box-shadow:none}/* prod open: solid dark + x-mark */
	.cgi-gd-side.open .cgi-gd-tgl-list{display:none}.cgi-gd-side.open .cgi-gd-tgl-x{display:block}
	html.cgi-dark .cgi-gd-toggle{box-shadow:inset 0 0 0 1px #d4d4d4;color:#f3f4f6}
	html.cgi-dark .cgi-gd-side.open .cgi-gd-toggle{background:#fff;color:#171717;box-shadow:none}
	@media(max-width:1279px){.cgi-gd-side-title{display:none}.cgi-gd-side.open .cgi-gd-side-title{display:block;margin-top:2rem;font-size:1rem;font-weight:400;letter-spacing:.4px}}/* prod: title on its own row, 32px below the button */
	@media(min-width:1280px){.cgi-gd-toggle{display:none}}
	/* prod sidebar: linked guide title, plain 16px rows (px-4 py-1 r8), active = sky-700 bold, numbers = bare text */
	.cgi-gd-side-title{display:none;font-weight:400;font-size:1rem;color:#0a0a0a;text-transform:uppercase;letter-spacing:.4px;text-decoration:none;margin:0 0 1rem;padding:0 1rem}
	a.cgi-gd-side-title:hover{text-decoration:underline}
	@media(min-width:1280px){.cgi-gd-side-title{display:block}}
	.cgi-gd-navlist{list-style:none;margin:1rem 0 0;padding:0;counter-reset:none;display:none}
	@media(min-width:1280px){.cgi-gd-navlist{display:block;margin-top:0}}
	.cgi-gd-side.open .cgi-gd-navlist{display:block}
	.cgi-gd-navlist li{margin:0}
	.cgi-gd-navlist a{display:flex;gap:.5rem;align-items:flex-start;padding:.25rem 1rem;border-radius:8px;text-decoration:none;color:#0a0a0a;font-size:1rem;line-height:1.5rem}
	.cgi-gd-navlist a:hover{background:#f5f5f5}
	.cgi-gd-navlist li.on a{color:#0369a1;font-weight:700}
	.cgi-gd-num{flex:0 0 auto;width:1.5rem;font-size:1rem;color:inherit}
	/* prod guide prose: slate-700 text, Plus-Jakarta h2 (#0f172a, mb0), h3 mt0, left 14px figcaption, fw500 faq */
	.single-guide_chapter .cgi-single-content :is(p,li){color:#334155}
	.single-case .cgi-single-content h2.wp-block-heading{margin-bottom:2rem}/* prod case prose h2 mb32 (was Kadence 15) */
	.single-case .cgi-single-content h2.wp-block-heading:has(+ :is(figure,.wp-block-image,.wp-block-gallery,.cgi-cs-slidewrap,.cgi-cs-slider,.cgi-spin,.cgi-model-viewer,.cgi-model-fig,.cgi-vid-wrap,.cgi-ar-frame,.wp-block-embed,.cgi-bl-cta)){margin-bottom:0}
	.single-guide_chapter .cgi-single-content h2.wp-block-heading{font-family:var(--cgi-font-body,sans-serif);color:#0f172a;margin-bottom:2rem}/* prod prose h2 mb32 */
	.single-guide_chapter .cgi-single-content h2.wp-block-heading + h3.wp-block-heading{margin-top:0}/* prod: h3 right after h2 has no mt */
	/* prod prose chunks end before media blocks (last-child mb0) — heading directly before media keeps no mb */
	.single-guide_chapter .cgi-single-content :is(h2,h3).wp-block-heading:has(+ :is(figure,.wp-block-image,.wp-block-gallery,.cgi-cs-slidewrap,.cgi-cs-slider,.cgi-spin,.cgi-model-viewer,.cgi-vid-wrap,.cgi-ar-frame,.wp-block-embed)){margin-bottom:0}
	/* prod prose chunks restart after media (first-child mt0) — h3 right after media has no mt */
	.single-guide_chapter .cgi-single-content :is(figure,.wp-block-image,.wp-block-gallery,.cgi-cs-slidewrap,.cgi-spin,.cgi-model-viewer,.cgi-vid-wrap,.cgi-ar-frame,.wp-block-embed,.cgi-bl-cta) + :is(h2,h3).wp-block-heading{margin-top:0}
	.cgi-single-content :is(h1,h2,h3,h4) + .cgi-spin{margin-top:2rem!important}
	@media(min-width:640px){.cgi-single-content :is(h1,h2,h3,h4) + .cgi-spin{margin-top:3rem!important}}/* Kadence h3+* zeroes it; prod figure keeps my-8 sm:my-12 */
	/* article [cgi_model] card = prod blocks.model-viewer: white, 1px neutral-200 border, r12 */
	.cgi-single-content .cgi-model-viewer{background:#fff;border:1px solid #e5e5e5;border-radius:12px}
	.cgi-single-content .cgi-model-viewer model-viewer{background:#fff}
	.cgi-single-content .cgi-model-fig .cgi-model-viewer{margin:0}/* wrapper figure carries the margin */
	html.cgi-dark .cgi-single-content .cgi-model-viewer{border-color:#262626}
	/* prod media-block rhythm: figure my-8 sm:my-12 — and Kadence .single-content h+* zeroes adjacent margins */
	.cgi-single-content :is(.cgi-model-viewer,.cgi-model-fig,.cgi-cs-galfig,.cgi-cs-slidewrap,.cgi-spin,figure.cgi-cs-fig){margin-top:2rem!important;margin-bottom:2rem!important;margin-left:auto;margin-right:auto}
	@media(min-width:640px){.cgi-single-content :is(.cgi-model-viewer,.cgi-model-fig,.cgi-cs-galfig,.cgi-cs-slidewrap,.cgi-spin,figure.cgi-cs-fig){margin-top:3rem!important;margin-bottom:3rem!important}}
	.cgi-single-content .cgi-model-fig .cgi-model-viewer{margin:0!important}
	/* 360 spin inside the dark bl-CTA (prod: rounded, aspect 16/9, transparent on dark) */
	.cgi-bl-cta .cgi-bl-cta-poster-spin{flex:1;min-width:0}
	.cgi-bl-cta .cgi-bl-cta-poster .cgi-spin{margin:0!important;border-radius:.75rem;overflow:hidden;background:#fff}/* !important: the prose media-spacing rule above is !important too; prod keeps the spin card bg-white even in dark */
	html.cgi-dark .cgi-bl-cta .cgi-bl-cta-poster .cgi-spin{background:#fff;border-color:#e5e5e5}
	/* model viewer inside the dark bl-CTA (prod: transparent canvas on the dark card) */
	.cgi-bl-cta .cgi-bl-cta-poster-mv .cgi-model-viewer{background:transparent;border:0}
	.cgi-bl-cta .cgi-bl-cta-poster-mv model-viewer{background:transparent}
	.cgi-bl-cta .cgi-bl-cta-poster-mv{flex:1;min-width:0}
	.single-guide_chapter .cgi-single-content figcaption{font-size:.875rem;color:#737373;text-align:left}
	html.cgi-dark .single-guide_chapter .cgi-single-content figcaption{color:#a3a3a3}
	.single-guide_chapter .cgi-single-content summary,.single-guide_chapter .cgi-single-content .cgi-tpl-faq-item summary{font-weight:500}
	html.cgi-dark .single-guide_chapter .cgi-single-content :is(p,li){color:#d4d4d4}
	html.cgi-dark .single-guide_chapter .cgi-single-content h2.wp-block-heading{color:#f1f5f9}
	.cgi-gd-navlist li.on .cgi-gd-num{color:#0369a1}
	/* prod chapter footer: centred pair — grey ghost Previous + sky Next */
	.cgi-gd-pager{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;margin:3rem 0 10rem}/* prod: 160px to the pre-footer guide section */
	.cgi-gd-pgnext{display:inline-block;background:#0ea5e9;color:#fff;font-size:1.125rem;font-weight:500;line-height:1.75rem;padding:1rem 1.5rem;border-radius:6px;text-decoration:none;transition:background .15s}
	.cgi-gd-pgnext:hover{background:#0284c7;color:#fff}
	.cgi-gd-pgprev{display:inline-block;background:#fafafa;color:#404040;font-size:1.125rem;font-weight:500;line-height:1.75rem;padding:1rem 1.5rem;border-radius:6px;text-decoration:none;transition:background .15s;box-shadow:inset 0 0 0 1px #d4d4d4,0 1px 2px rgba(0,0,0,.05)}
	.cgi-gd-pgprev:hover{background:#f0f0f0;color:#171717}
	html.cgi-dark .cgi-gd-pgprev{background:#262626;color:#d1d5db;box-shadow:inset 0 0 0 1px #374151}
	html.cgi-dark .cgi-gd-pgprev:hover{background:#262f3f;color:#fff}
	.cgi-gd-pgbtn{display:flex;flex-direction:column;gap:.35rem;border:1px solid #e5e7eb;border-radius:.75rem;padding:1rem 1.25rem;text-decoration:none;color:inherit;transition:border-color .2s,background .2s}
	.cgi-gd-pgbtn:hover{border-color:#0ea5e9;background:rgba(14,165,233,.05)}
	.cgi-gd-pgnext{text-align:right}
	.cgi-gd-pgbtn span{font-size:.85rem;color:#6b7280}
	.cgi-gd-pgbtn b{font-size:1.05rem;color:#111827}
	html.cgi-dark .cgi-gd-eyebrow{color:#0ea5e9}/* prod dark keeps sky-500 */
	html.cgi-dark .cgi-gd-navlist a{color:#9ca3af}
	html.cgi-dark .cgi-gd-navlist a:hover{background:rgba(255,255,255,.06);color:#fff}
	html.cgi-dark .cgi-gd-navlist li.on a{color:#38bdf8}
	html.cgi-dark .cgi-gd-num{color:inherit}
	html.cgi-dark .cgi-gd-toggle{background:rgba(255,255,255,.06)}
	html.cgi-dark .cgi-gd-pager{border-top-color:#262626}
	html.cgi-dark .cgi-gd-pgbtn{border-color:#262626}
	html.cgi-dark .cgi-gd-pgbtn b{color:#f3f4f6}
	/* ---- service-content sections (converter cgi-wf / cgi-feat-icon / cgi-cta-form) ---- */
	/* Workflow = reference SectionWorkflow: 2-col grid (left heading + demo btn, sticky | right numbered steps) */
	:is(.entry-content,.entry-content-wrap) .cgi-wf2{display:grid;gap:3rem}
	@media(min-width:768px){:is(.entry-content,.entry-content-wrap) .cgi-wf2{grid-template-columns:1fr 1fr;gap:5rem}}
	@media(min-width:1024px){:is(.entry-content,.entry-content-wrap) .cgi-wf-aside{position:sticky;top:7rem;align-self:flex-start;max-width:560px}:is(.entry-content,.entry-content-wrap) .cgi-wf2:has(.brief-deck-wrap){align-items:center}:is(.entry-content,.entry-content-wrap) .cgi-wf-fig:has(.brief-deck-wrap){margin-top:2rem;max-width:560px}/* deck sits in the right column: centre it there, horizontally and against the steps */:is(.entry-content,.entry-content-wrap) .cgi-wf-aside:has(.brief-deck-wrap){margin-inline:auto;align-self:center}/* tighter step rhythm next to the full-size deck (canonical 96px gap is too airy here) */:is(.entry-content,.entry-content-wrap) .cgi-wf2:has(.brief-deck-wrap) .cgi-wf{transform:none;gap:4rem}}
	:is(.entry-content,.entry-content-wrap) .cgi-wf-left{display:flex;flex-direction:column;align-items:flex-start;height:max-content}
	@media(min-width:768px){:is(.entry-content,.entry-content-wrap) .cgi-wf-left{position:sticky;top:9rem}}
	:is(.entry-content,.entry-content-wrap) .cgi-wf-left .cgi-sec-desc{margin-top:2rem!important}
	@media(min-width:1280px){:is(.entry-content,.entry-content-wrap) .cgi-wf-left .cgi-sec-desc{margin-top:4rem!important}}
	:is(.entry-content,.entry-content-wrap) .cgi-wf-demo{margin-top:2rem;background:#0ea5e9;color:#fff;border:0;border-radius:999px;padding:1rem 2.25rem;font-size:1.05rem;font-weight:600;cursor:pointer;font-family:inherit}
	@media(min-width:1024px){:is(.entry-content,.entry-content-wrap) .cgi-wf-demo{margin-top:4rem}}
	:is(.entry-content,.entry-content-wrap) .cgi-wf-demo:hover{background:#0284c7;color:#fff}
	/* right: numbered steps */
	:is(.entry-content,.entry-content-wrap) .cgi-wf{position:relative;display:flex;flex-direction:column;gap:3rem;margin:0;max-width:none}
	@media(min-width:1024px){:is(.entry-content,.entry-content-wrap) .cgi-wf{gap:6rem}}
	@media(min-width:768px){:is(.entry-content,.entry-content-wrap) .cgi-wf{margin-bottom:4rem}}/* prod: ~192px below the last step, was ~128 (margin not padding, so the ::before connector line stays sized to the steps) */
	:is(.entry-content,.entry-content-wrap) .cgi-wf::before{content:"";position:absolute;left:1.75rem;top:1.75rem;height:var(--wf-line,calc(100% - 3.5rem));width:2px;background:#d1d5db;z-index:0}
	:is(.entry-content,.entry-content-wrap) .cgi-wf-fill{position:absolute;left:1.75rem;top:1.75rem;width:2px;background:#0ea5e9;height:0;z-index:1;transition:height .12s linear}
	:is(.entry-content,.entry-content-wrap) .cgi-wf-step{position:relative;z-index:2;display:flex;gap:1.25rem;align-items:flex-start}
	/* horizontal workflow (home): plain cards row, no connector line/circles. */
	:is(.entry-content,.entry-content-wrap) .cgi-wf.cgi-wf-horiz::before{display:none}
	@media(min-width:768px){
	:is(.entry-content,.entry-content-wrap) .cgi-wf.cgi-wf-horiz{flex-direction:row;gap:2.5rem;margin-top:2.5rem}
	:is(.entry-content,.entry-content-wrap) .cgi-wf-horiz .cgi-wf-step{flex:1 1 0;flex-direction:column;gap:1.25rem}
	}
	@media(max-width:767px){:is(.entry-content,.entry-content-wrap) .cgi-wf.cgi-wf-horiz{margin-top:2rem;gap:1.5rem}}
	/* horizontal workflow step bodies as canonical cards (match .cgi-lp-card) */
	:is(.entry-content,.entry-content-wrap) .cgi-wf-horiz .cgi-wf-body{background:#e5e7eb;border-radius:.75rem;padding:1.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.06);flex:1 1 auto;width:100%;position:relative;overflow:hidden}
	html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-wf-horiz .cgi-wf-body{background:#262626}
	/* ghost step number: full-height faint watermark in the card background */
	:is(.entry-content,.entry-content-wrap) .cgi-wf-horiz .cgi-wf-ghost{position:absolute;right:1rem;top:50%;transform:translateY(-60.9%);font-weight:200;font-size:8.5rem;line-height:.9;letter-spacing:-.03em;color:rgba(15,23,42,.09);pointer-events:none;user-select:none;z-index:0}
	html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-wf-horiz .cgi-wf-ghost{color:rgba(255,255,255,.08)}
	:is(.entry-content,.entry-content-wrap) .cgi-wf-horiz .cgi-wf-body > :not(.cgi-wf-ghost){position:relative;z-index:1}
	@media(min-width:1024px){:is(.entry-content,.entry-content-wrap) .cgi-wf-step{gap:2rem}}
	/* reference SectionWorkflow circle: gray-300 outer ring, primary fill rising by --scale, gray-100 inner (hides when full), number whitens */
	:is(.entry-content,.entry-content-wrap) .cgi-wf-num{flex:0 0 auto;width:3.5rem;height:3.5rem;border-radius:999px;background:#d1d5db;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:1.25rem}
	:is(.entry-content,.entry-content-wrap) .cgi-wf-num-fill{position:absolute;inset:0;background:#0ea5e9;transform:translateY(calc(var(--scale,100%) * -1));transition:transform .12s linear;z-index:1}
	:is(.entry-content,.entry-content-wrap) .cgi-wf-num-inner{position:absolute;inset:2px;border-radius:999px;background:#f3f4f6;z-index:2;transition:opacity .15s}
	:is(.entry-content,.entry-content-wrap) .cgi-wf-num.full .cgi-wf-num-inner{opacity:0}
	:is(.entry-content,.entry-content-wrap) .cgi-wf-num-n{position:relative;z-index:3;color:#6b7280;transition:color .15s}
	:is(.entry-content,.entry-content-wrap) .cgi-wf-num.full .cgi-wf-num-n{color:#fff}
	:is(.entry-content,.entry-content-wrap) .cgi-wf-body{display:flex;flex-direction:column;gap:.4rem}
	:is(.entry-content,.entry-content-wrap) .cgi-wf-elabel{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#6b7280}
	:is(.entry-content,.entry-content-wrap) .cgi-wf-title{margin:0;font-size:1.5rem;font-weight:700;font-family:var(--cgi-font-display,sans-serif);letter-spacing:.1px}
	:is(.entry-content,.entry-content-wrap) .cgi-wf-desc{margin:0;color:#4b5563;font-size:1.05rem}
	html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-wf::before{background:#374151}
	html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-wf-num{background:#262626}
	html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-wf-num-inner{background:#111827}
	/* icon variant in dark: keep the inner disc at the user-approved #262626 but lift the outer
	   track so the rising sky fill is visible in the ring (same reveal as the numbered circles) */
	html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-wf-num-ico{background:#404040}
	html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-wf-num-ico .cgi-wf-num-inner{background:#262626}
	html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-wf-num-n{color:#9ca3af}
	html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-wf-elabel{color:#9ca3af}
	html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-wf-desc{color:#9ca3af}
	/* Features cards (reference SectionFeatures: bg-gray-200 p-6 rounded-xl shadow-md, 48px sky icon) */
	:is(.entry-content,.entry-content-wrap) .cgi-feat-icon{margin:0 0 1rem!important;width:auto!important}
	:is(.entry-content,.entry-content-wrap) .cgi-feat-icon img{width:48px;height:48px;object-fit:contain}
	/* features grid: first row 64px below heading (mt-16), rows gap 32px (gap-y-8) */
	:is(.entry-content,.entry-content-wrap) .cgi-csec .cgi-feat-row{margin-top:2rem}
	:is(.entry-content,.entry-content-wrap) .cgi-csec .cgi-sec-desc + .cgi-feat-row,:is(.entry-content,.entry-content-wrap) .cgi-csec .cgi-sec-h + .cgi-feat-row{margin-top:4rem}
	:is(.entry-content,.entry-content-wrap) .cgi-feat-row .wp-block-column{background:#e5e7eb!important;border-radius:.75rem!important;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.06)}
	html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-feat-row .wp-block-column{background:#262626!important}
	/* CTA / Price-List form group */
	:is(.entry-content,.entry-content-wrap) .cgi-cta-form{margin-top:2rem}
	/* Price-List dark card 2-col (reference BlockCallToActionForm price_list: form left + poster right) */
	:is(.entry-content,.entry-content-wrap) .cgi-cta-card-2col{display:flex;flex-direction:column-reverse;gap:2.5rem}
	@media(min-width:1088px){:is(.entry-content,.entry-content-wrap) .cgi-cta-card-2col{flex-direction:row;align-items:center;gap:4rem}}
	:is(.entry-content,.entry-content-wrap) .cgi-cta-card-2col .cgi-cta-formcol{flex:1;min-width:0}
	@media(max-width:1087px){:is(.entry-content,.entry-content-wrap) .cgi-cta-card-2col .cgi-cta-formcol{max-width:28rem;margin:0 auto}}
	:is(.entry-content,.entry-content-wrap) .cgi-cta-card-2col .cgi-cta-formcol .cgi-cta-formwrap{max-width:32rem}
	:is(.entry-content,.entry-content-wrap) .cgi-cta-viscol{flex:1;min-width:0}
	@media(min-width:1088px){:is(.entry-content,.entry-content-wrap) .cgi-cta-viscol{max-width:50%}}
	:is(.entry-content,.entry-content-wrap) .cgi-cta-viscol img{width:100%;border-radius:.75rem;object-fit:cover;display:block}
	/* prod 2-col CTA split: the poster is 50% of the content box, the text/form column is capped at 32rem
	   (512px), and the leftover becomes the gap (space-between). That yields poster 584 in the plain card
	   and 616 in the wider price card automatically. The IMAGE plain CTA (no form) is also 32px narrower
	   each side than the price FORM CTA (1312 vs 1376 at 1440), and stays centred. */
	:is(.entry-content,.entry-content-wrap) .cgi-cta-card.cgi-cta-card-2col:not(:has(form)){max-width:calc(100% - 1rem);margin-inline:auto}
	/* CASE singles: the price CTA card sits in the 960 reading column → prod STACKS it
	   (title → 512px form → full-width image below) with 48/96 padding and 96px above */
	.single-case :is(.entry-content,.entry-content-wrap) .cgi-csec.cgi-csec-cta{margin-top:6rem;padding-bottom:2.5rem}/* prod: 96px above and below the card; specificity beats the .cgi-csec-cta{padding:0} reset */
	/* Kadence boxed-article bottom shadow leak (prod has none) */
	:is(.single-post,.single-case,.single-guide_chapter) article.entry,:is(.single-post,.single-case,.single-guide_chapter) .content-bg{box-shadow:none!important}
	/* USER OVERRIDE: case CTA stays 2-col with the poster on the RIGHT (prod stacks poster-on-top — do not "fix") */
	/* prod form labels: 14px, no asterisk styling blowup */
	.single-case .cgi-cta-card-form .cgi-zapform-field>span{font-size:.875rem}
	.single-case .cgi-cta-card-form .cgi-cta-title{margin-bottom:1.5rem}
	@media(min-width:1088px){
		:is(.entry-content,.entry-content-wrap) .cgi-cta-card.cgi-cta-card-2col:not(:has(form)){max-width:calc(100% - 4rem)}
		:is(.entry-content,.entry-content-wrap) .cgi-cta-card-2col{justify-content:space-between}
		:is(.entry-content,.entry-content-wrap) .cgi-cta-card-2col .cgi-cta-formcol{max-width:32rem}
	}
	/* ---- converter content sections (reference SectionStyled py-12 sm:py-32; gray only for contrast) ---- */
	:is(.entry-content,.entry-content-wrap) .cgi-csec{padding:3rem 0}
	@media(min-width:640px){:is(.entry-content,.entry-content-wrap) .cgi-csec{padding:8rem 0}}
	:is(.entry-content,.entry-content-wrap) .cgi-csec.cgi-csec-bare{padding:0}
	:is(.entry-content,.entry-content-wrap) .cgi-csec.cgi-csec-flush{padding:0}/* prod: some roomsets sections carry no section padding */
	/* prod service rhythm (2026-07 redesign): CTA card sections unpadded, brands py-24 */
	:is(.entry-content,.entry-content-wrap) .cgi-csec.cgi-csec-cta{padding:0}
	@media(min-width:640px){:is(.entry-content,.entry-content-wrap) .cgi-csec.cgi-csec-brands{padding:6rem 0}}
	:is(.entry-content,.entry-content-wrap) .cgi-csec-gray{background:#f3f4f6}
	html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-csec-gray{background:#171717}
	/* reference UContainer gutters (max-w-screen-2xl px-4/6/8) on the section inner-container */
	:is(.entry-content,.entry-content-wrap) .cgi-csec > .wp-block-group__inner-container{padding-left:1rem;padding-right:1rem}
	@media(min-width:640px){:is(.entry-content,.entry-content-wrap) .cgi-csec > .wp-block-group__inner-container{padding-left:1.5rem;padding-right:1.5rem}}
	@media(min-width:1024px){:is(.entry-content,.entry-content-wrap) .cgi-csec > .wp-block-group__inner-container{padding-left:2rem;padding-right:2rem}}
	/* section heading (reference Heading headingSize lg, left) + eyebrow */
	:is(.entry-content,.entry-content-wrap) .cgi-sec-h{font-family:var(--cgi-font-display,sans-serif)!important;font-weight:700;font-size:clamp(1.875rem,1rem + 2.5vw,3rem)!important;letter-spacing:-.02em;line-height:1.1;margin:0}
	:is(.entry-content,.entry-content-wrap) .cgi-eyebrow{font-size:.875rem!important;text-transform:uppercase;letter-spacing:.1em;color:#6b7280;margin:0 0 .75rem;font-weight:600}
	/* Stats "Team in Numbers" (reference SectionStats): centered, N-col desktop / 2-col mobile, big pink numbers */
	:is(.entry-content,.entry-content-wrap) .cgi-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 1rem;text-align:center;margin-top:3.5rem}
	@media(min-width:640px){:is(.entry-content,.entry-content-wrap) .cgi-stats{gap:4rem 2rem}}/* prod sm:gap-x-8 sm:gap-y-16 */
	@media(min-width:1024px){:is(.entry-content,.entry-content-wrap) .cgi-stats{grid-template-columns:repeat(var(--cols,6),1fr);gap:4rem 2rem;margin-top:5rem}}
	:is(.entry-content,.entry-content-wrap) .cgi-stat-v{display:block;font-family:var(--cgi-font-display,sans-serif);font-weight:700;font-size:clamp(3rem,1rem + 6vw,6rem);color:#db2777;line-height:1}
	:is(.entry-content,.entry-content-wrap) .cgi-stat-v.cgi-stat-v-long{font-size:clamp(2.25rem,.75rem + 4vw,4.25rem);white-space:nowrap}/* long values (>=6 chars) must not wrap */
	:is(.entry-content,.entry-content-wrap) .cgi-stat-l{display:block;font-size:1rem;color:#111827;margin-top:1rem}
	@media(min-width:640px){:is(.entry-content,.entry-content-wrap) .cgi-stat-l{font-size:1.5rem;line-height:2rem}}
	html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-stat-l{color:#e5e7eb}
	/* Call-to-action dark card (reference BlockCallToAction) */
	/* reference: blocks are CENTERED (flex column) but text inside is left-aligned */
	:is(.entry-content,.entry-content-wrap) .cgi-cta-card{position:relative;isolation:isolate;overflow:hidden;background:#171717;border-radius:.75rem;padding:3rem 1.5rem;text-align:left;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);margin:2rem 0}
	:is(.entry-content,.entry-content-wrap) .cgi-cta-card:not(.cgi-cta-card-2col){display:flex;flex-direction:column;align-items:center}
	.cgi-cta-glow{position:absolute;left:50%;top:50%;width:64rem;height:64rem;transform:translateX(-50%);z-index:-1;pointer-events:none}
	@media(min-width:768px){:is(.entry-content,.entry-content-wrap) .cgi-cta-card{padding:5rem 6rem}}
	/* prod service pages give the price-list FORM CTA ~96px breathing room each side (plain CTA cards keep 2rem) */
	.single-service :is(.entry-content,.entry-content-wrap) .cgi-cta-card-form{margin:6rem 0}
	/* plain CTA (catalog banner): prod = mb 64 mobile; mt/mb 96 desktop (mt collapses with the spec section margin 64) */
	.single-service :is(.entry-content,.entry-content-wrap) .cgi-cta-card:not(.cgi-cta-card-form){margin:2rem 0 4rem}
	@media(min-width:640px){.single-service :is(.entry-content,.entry-content-wrap) .cgi-cta-card:not(.cgi-cta-card-form){margin:6rem 0}}
	:is(.entry-content,.entry-content-wrap) .cgi-cta-title{color:#fff;font-family:var(--cgi-font-body,sans-serif);font-weight:600;font-size:clamp(1.5rem,1rem + 2vw,2.25rem);margin:0 auto;max-width:48rem;line-height:2rem;letter-spacing:-.025em;text-align:left}
	:is(.entry-content,.entry-content-wrap) .cgi-cta-sub{color:#d4d4d4;margin:1.5rem auto 0;max-width:32rem;font-size:1rem;line-height:1.5rem;letter-spacing:.4px}
	@media(min-width:768px){:is(.entry-content,.entry-content-wrap) .cgi-cta-title{line-height:2.5rem}:is(.entry-content,.entry-content-wrap) .cgi-cta-sub{font-size:1.125rem;line-height:1.75rem}}
	:is(.entry-content,.entry-content-wrap) .cgi-cta-btn{display:inline-block;margin-top:3rem;background:#0ea5e9;color:#fff;font-weight:500;font-size:1.125rem;padding:1rem 1.5rem;border-radius:6px;text-decoration:none;line-height:1.75rem;letter-spacing:.4px}
	:is(.entry-content,.entry-content-wrap) .cgi-cta-btn:hover{background:#0284c7;color:#fff}
	html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-cta-card{background:#082f49}
	/* dark CTA button = sky-400 + dark text, for both the <a> link and the "Schedule a demo" <button> */
	html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-cta-btn,html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-cta-btn:hover{background:#38bdf8;color:#171717}
	/* price-list = same dark card, left-aligned, with the form (reference BlockCallToActionForm price_list) */
	/* reference BlockCallToActionForm: gray-900 card + centred PURPLE radial glow (#7775D6 .7 → transparent); px-6 py-12 → @2xl px-24 */
	/* reference card: bg-gray-900 + glow SVG over it, rounded-xl (.75rem), shadow-2xl. The prod tailwind
	   config aliases gray to neutral, so gray-900 renders #171717 (NOT the stock #111827) - match neutral */
	:is(.entry-content,.entry-content-wrap) .cgi-cta-card-form{position:relative;isolation:isolate;overflow:hidden;text-align:left;margin:0;border-radius:.75rem;padding:3rem 1.5rem;background:#171717;box-shadow:0 25px 50px -12px rgba(0,0,0,.45)}
	/* reference glow SVG: size-[64rem], left/top-1/2, -translate-x-1/2 (circle centre sits below the card), behind the content */
	:is(.entry-content,.entry-content-wrap) .cgi-cta-glow{position:absolute;left:50%;top:50%;width:64rem;height:64rem;transform:translateX(-50%);z-index:-1;pointer-events:none}
	:is(.entry-content,.entry-content-wrap) .cgi-cta-card-form .cgi-cta-formcol,:is(.entry-content,.entry-content-wrap) .cgi-cta-card-form .cgi-cta-viscol{position:relative;z-index:1}
	/* tighter form: no reserved empty status line, button right after the inputs (reference) */
	:is(.entry-content,.entry-content-wrap) .cgi-cta-card-form .cgi-zapform-fields{margin-bottom:0}
	:is(.entry-content,.entry-content-wrap) .cgi-cta-card-form .cgi-zapform-msg{min-height:0;margin:0}
	:is(.entry-content,.entry-content-wrap) .cgi-cta-card-form .cgi-zapform-msg:empty{display:none}
	@media(min-width:768px){:is(.entry-content,.entry-content-wrap) .cgi-cta-card-form{padding:3rem 6rem}}
	@media(min-width:1088px){:is(.entry-content,.entry-content-wrap) .cgi-cta-card-form{padding:5rem 3rem 5rem 6rem}}
	:is(.entry-content,.entry-content-wrap) .cgi-cta-card-form .cgi-cta-title{margin:0;max-width:48rem}
	/* the article prose p rule (1.125rem, higher specificity) was shrinking CTA titles to 18px — prod is 36px/600 */
	:is(.single-post,.single-case,.single-guide_chapter) .cgi-single-content .cgi-cta-title{font-size:clamp(1.5rem,1rem + 2vw,2.25rem);line-height:2.5rem;font-weight:600}
	:is(.entry-content,.entry-content-wrap) .cgi-cta-card-form .cgi-cta-sub{margin:1.25rem 0 0;max-width:36rem}
	:is(.entry-content,.entry-content-wrap) .cgi-cta-formwrap{margin-top:2rem;max-width:34rem}
	/* reference FormPriceList button = UButton variant "soft": bg-primary-300 + BLACK text, hover primary-200 (not solid sky/white) */
	:is(.entry-content,.entry-content-wrap) .cgi-cta-card-form .cgi-zapform-btn{background:#7dd3fc;color:#0a0a0a;border-radius:6px;margin-top:1.5rem}
	:is(.entry-content,.entry-content-wrap) .cgi-cta-card-form .cgi-zapform-btn:hover{background:#bae6fd;color:#0a0a0a}
	/* reference: form fields sit directly on the dark card (white inputs, white labels w/ asterisk), NO sky sub-card */
	:is(.entry-content,.entry-content-wrap) .cgi-cta-card-form .cgi-cta-formwrap .cgi-zapform-field>span{color:#fff}
	:is(.entry-content,.entry-content-wrap) .cgi-cta-card-form .cgi-zapform-field .cgi-req{color:#f87171;font-style:normal}
	:is(.entry-content,.entry-content-wrap) .cgi-cta-formwrap .ff-el-input--label label,:is(.entry-content,.entry-content-wrap) .cgi-cta-formwrap .ff-el-input--content label{color:#e5e7eb!important}
	:is(.entry-content,.entry-content-wrap) .cgi-cta-formwrap input,:is(.entry-content,.entry-content-wrap) .cgi-cta-formwrap textarea,:is(.entry-content,.entry-content-wrap) .cgi-cta-formwrap select{background:#fff!important;color:#111827!important}
	/* dark theme (reference dark:bg-primary-950 card): inputs go dark (#171717 + white text) and the submit
	   deepens to sky-600 (#0284c7) with white text, matching prod */
	html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-cta-formwrap input,html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-cta-formwrap textarea,html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-cta-formwrap select{background:#171717!important;color:#fff!important}
	html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-cta-card-form .cgi-zapform-btn{background:#0284c7;color:#fff}
	html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-cta-card-form .cgi-zapform-btn:hover{background:#0ea5e9;color:#fff}
	/* spec-card hover: portfolio arrow nudge (bg + media clip handled in the spec section CSS above) */
	:is(.entry-content,.entry-content-wrap) .cgi-spec-portfolio span{display:inline-block;transition:transform .2s ease}
	:is(.entry-content,.entry-content-wrap) .cgi-spec-card:hover .cgi-spec-portfolio span{transform:translateX(.3rem)}