.cgi-archive-head{text-align:center;max-width:720px;margin:0 auto;padding:2.5rem 1rem 1.5rem}
	.cgi-archive-head h1{font-size:2.5rem;margin:0 0 .5rem}
	.cgi-archive-head p{color:#6b7280;font-size:1.05rem;margin:0}
	.cgi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin:1.5rem 0 3rem}
	.cgi-card{display:flex;flex-direction:column;border:1px solid #ececec;border-radius:14px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s}
	.cgi-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
	.cgi-card a.cgi-thumb{display:block;aspect-ratio:4/3;overflow:hidden;background:#f3f4f6}
	.cgi-card a.cgi-thumb img{width:100%;height:100%;object-fit:cover;display:block}
	.cgi-card-body{padding:1rem 1.15rem 1.25rem;display:flex;flex-direction:column;gap:.5rem}
	.cgi-badge{align-self:flex-start;font-size:.7rem;letter-spacing:1px;text-transform:uppercase;color:#0ea5e9;font-weight:600}
	.cgi-card h2{font-size:1.15rem;line-height:1.3;margin:0}
	.cgi-card h2 a{color:inherit;text-decoration:none}
	.cgi-card p{color:#6b7280;font-size:.92rem;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
	.cgi-pagination{display:flex;justify-content:center;gap:.5rem;padding:1rem 0 3rem}
	/* (removed dead .cgi-pagination .page-numbers rules — live pagination emits .cgi-uipag-* markup, styled below) */
	/* Nuxt-UI UPagination replica: joined 48px group, -space-x-px, sky current */
	.cgi-uipag{display:flex;align-items:center}
	.cgi-uipag-c{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:3rem;padding:0 .8rem;background:#fff;color:#171717;font-size:1rem;font-weight:500;line-height:1;text-decoration:none!important;box-shadow:inset 0 0 0 1px #d4d4d4;margin-left:-1px;position:relative}
	.cgi-uipag-c:first-child{border-radius:6px 0 0 6px;margin-left:0}
	.cgi-uipag-c:last-child{border-radius:0 6px 6px 0}
	a.cgi-uipag-c:hover{background:#f5f5f5;color:#171717;z-index:1}
	.cgi-uipag-cur{background:#0ea5e9;color:#fff;box-shadow:none;z-index:2}
	.cgi-uipag-dots{color:#171717}
	.cgi-uipag-prev,.cgi-uipag-next{width:3rem;padding:0}
	.cgi-uipag-prev::after,.cgi-uipag-next::after{content:"";box-sizing:border-box;width:.7rem;height:.7rem;border:solid currentColor;border-width:0}
	.cgi-uipag-prev::after{border-width:0 0 2px 2px;transform:rotate(45deg);margin-left:3px}
	.cgi-uipag-next::after{border-width:0 2px 2px 0;transform:rotate(-45deg);margin-right:3px}
	span.cgi-uipag-prev.is-dis,span.cgi-uipag-next.is-dis{color:#d4d4d4;cursor:not-allowed}
	html.cgi-dark .cgi-uipag-c{background:#171717;color:#e5e5e5;box-shadow:inset 0 0 0 1px #404040}
	html.cgi-dark a.cgi-uipag-c:hover{background:#262626;color:#fff}
	html.cgi-dark .cgi-uipag-cur{background:#38bdf8;color:#171717;box-shadow:none}
	html.cgi-dark span.cgi-uipag-prev.is-dis,html.cgi-dark span.cgi-uipag-next.is-dis{color:#525252}
	@media(max-width:600px){.cgi-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}.cgi-archive-head h1{font-size:1.9rem}}
	/* ---- services landing ---- */
	.cgi-svc-hero{text-align:center;max-width:60rem;margin:0 auto;padding:3rem 1rem 1rem}
	.cgi-svc-hero h1{font-size:clamp(2.25rem,1.5rem + 3vw,3.5rem);margin:0 0 1rem;font-weight:600}
	.cgi-svc-hero p{color:#4b5563;font-size:1.15rem;line-height:1.7;max-width:48rem;margin:0 auto}
	.cgi-svc-lead{font-size:1.5rem;font-weight:700;margin:3rem 0 1.5rem}
	.cgi-svc-group{margin:0 0 3rem}
	.cgi-svc-gname{font-size:1.25rem;color:#0284c7;font-weight:700;margin:0 0 1.25rem}
	/* /services CardServiceGroup layout */
	.cgi-csg-wrap{max-width:1536px;margin:0 auto;padding:0 2rem}
	.cgi-csg-lead{font-size:1.5rem;font-weight:700;margin:2.5rem 0 0}
	.cgi-csg{border-top:1px solid #e5e7eb;padding:1.5rem 0 2rem;display:flex;flex-direction:column;gap:1.5rem;scroll-margin-top:6rem}
	@media(min-width:1280px){.cgi-csg{flex-direction:row;gap:3rem;padding-bottom:6rem}}
	/* mobile: auto height (column parent) — basis only becomes a WIDTH on desktop (row parent); otherwise flex:0 0 18rem forced a 288px-tall gap */
	.cgi-csg-aside{flex:0 0 auto;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
	@media(min-width:1280px){.cgi-csg-aside{flex:0 0 18rem;flex-direction:column;align-items:stretch;position:sticky;top:7rem;align-self:flex-start;height:max-content}.cgi-csg-demo{align-self:flex-start}}
	/* reference CardServiceGroup link: flex row (name + arrow gap-5); xl:hover bg-gray-100 + padding shift;
	   arrow (heroicons arrow-right w-5) opacity-30→100 scale-150 slide; hint slide; text colour NEVER changes on hover */
	.cgi-csg-group{display:block;text-decoration:none;border-radius:.75rem}
	.cgi-csg-group,.cgi-csg-group:hover,.cgi-csg-group:focus{color:#0f172a!important}
	.cgi-csg-row{display:flex;gap:1.25rem;align-items:flex-start}
	.cgi-csg-gname{font-weight:700;font-size:1.6rem;line-height:1.15;font-family:var(--cgi-font-display,sans-serif);margin:0;color:inherit}
	.cgi-csg-arr{flex:0 0 auto;width:1.25rem;height:1.25rem;margin-top:.5rem;opacity:.3;transform:translateX(-.75rem);transition:opacity .2s,transform .2s}
	.cgi-csg-group:hover .cgi-csg-arr{opacity:1;transform:translateX(0) scale(1.5)}
	.cgi-csg-hint{display:block;margin-top:.5rem;color:#6b7280;font-size:.95rem;transform:translateY(-.25rem);transition:transform .2s}
	.cgi-csg-group:hover .cgi-csg-hint{transform:translateY(0)}
	@media(min-width:1280px){
		.cgi-csg-group{margin:.75rem 0;padding:.25rem;transition:background .2s,padding .2s,margin .2s}
		.cgi-csg-group:hover{background:#f3f4f6;margin:0;padding:1rem;padding-right:0}
	}
	.cgi-csg-demo{display:inline-block;border:1px solid #0a0a0a;border-radius:.6rem;padding:.6rem 1.2rem;text-decoration:none;color:#0a0a0a;font-weight:600;white-space:nowrap}
	@media(min-width:1280px){.cgi-csg-demo{margin-top:1.5rem}}
	.cgi-csg-demo:hover{background:#0a0a0a;color:#fff}
	.cgi-csg-list{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2.5rem}
	.cgi-csg-desc{font-size:1.1rem;margin:0 0 1rem}
	/* align the group description text with the media visible edge (the .cgi-cs-card .75rem padding insets the image) */
	@media(min-width:640px){.cgi-csg-desc{padding-left:.75rem;padding-right:.75rem}}
	.cgi-cs-card{border-radius:1.5rem;overflow:hidden;transition:background .3s}
	@media(min-width:640px){.cgi-cs-card{padding:.75rem}.cgi-cs-card:hover{background:#f3f4f6}}
	/* transparent so the clip-offset gap reveals the (transparent) card/page bg → offset is invisible until hover, like the reference */
	.cgi-cs-media{position:relative;border-radius:1rem;overflow:hidden;background:transparent;aspect-ratio:16/9}
	.cgi-cs-media img{width:100%;height:100%;object-fit:cover;display:block}
	/* reference CardService media: clip-offset-3 → group-hover:clip-offset-0 (inset reveal, NOT a scale zoom) */
	@media(min-width:640px){
		/* reference: clip-offset-3 (spacing.3 = .75rem) clip-rounded-2xl (1rem) → group-hover:clip-offset-0 */
		.cgi-cs-media>img,.cgi-cs-media>.cgi-cs-vid,.cgi-cs-media>.cgi-cs-poster{clip-path:inset(.75rem round 1rem);transition:clip-path .3s ease}
		.cgi-cs-card:hover .cgi-cs-media>img,.cgi-cs-card:hover .cgi-cs-media>.cgi-cs-vid,.cgi-cs-card:hover .cgi-cs-media>.cgi-cs-poster{clip-path:inset(0 round 1rem)}
	}
	.cgi-cs-vid{width:100%;height:100%;border:0;display:block;object-fit:cover}
	/* vertical (social-media reels) video = phone-shaped portrait, centered in the 16:9 box */
	/* vertical (social-media reels): reference shows the FULL video object-contain in the 16:9 box (not cropped by height) */
	video.cgi-cs-vid-vert{width:100%;height:100%;object-fit:contain}
	iframe.cgi-cs-vid-vert{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:auto;aspect-ratio:9/16;max-width:100%}
	.cgi-cs-media>.cgi-cs-vid-vert,.cgi-cs-card:hover .cgi-cs-media>.cgi-cs-vid-vert{clip-path:none}
	.cgi-cs-model{width:100%;height:100%;display:block;background:#f3f4f6;--poster-color:transparent}
	html.cgi-dark .cgi-cs-model{background:#262626}
	/* click-to-load poster + button (360 spin / 3D model) */
	.cgi-cs-poster{width:100%;height:100%;object-fit:cover;display:block}
	.cgi-cs-media img.cgi-cs-poster-fit{object-fit:contain;padding:1.5rem}
	/* reference Spinner360/GlbViewer (!loaded): poster + centred solid-black button → click loads the live media */
	.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}
	/* prod pill: #171717/white, 48px, radius 6, 16px */
	.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:24px;height:24px}
	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-cs-load-pill svg{width:1.25rem;height:1.25rem;flex:0 0 auto}
	/* 360 arrow icon kept bottom-right in every state; video play/pause button (reference NativeVideoPlayer) */
	.cgi-cs-corner{position:absolute;right:1rem;bottom:1rem;color:#d4d4d4;pointer-events:none;display:flex;z-index:2}
	@media(min-width:640px){.cgi-cs-corner{right:2rem;bottom:2rem}}
	.cgi-cs-corner svg{width:2.5rem;height:2.5rem}
	/* reference NativeVideoPlayer control: link button, no bg, 40px heroicons play/pause solid, gray-300→white,
	   pinned bottom-right at p-4 (16px) mobile / sm:p-8 (32px) desktop */
	.cgi-cs-vbtn{position:absolute;right:1rem;bottom:1rem;z-index:3;background:transparent;border:0;cursor:pointer;padding:0;color:#d4d4d4;line-height:0;transition:color .1s}
	@media(min-width:640px){.cgi-cs-vbtn{right:2rem;bottom:2rem}}
	.cgi-cs-vbtn:hover,.cgi-cs-vbtn:focus{color:#fff;background:transparent!important;box-shadow:none}
	.cgi-cs-load:hover,.cgi-cs-load:focus{background:transparent!important;box-shadow:none}
	.cgi-cs-vbtn svg{width:2.5rem;height:2.5rem}
	.cgi-cs-vbtn .cgi-cs-vbtn-play{display:none}
	.cgi-cs-vbtn[data-vstate="paused"] .cgi-cs-vbtn-pause{display:none}
	.cgi-cs-vbtn[data-vstate="paused"] .cgi-cs-vbtn-play{display:inline-flex}
	.cgi-cs-spin{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
	.cgi-cs-spin:active{cursor:grabbing}
	.cgi-cs-spin-hint{position:absolute;bottom:.6rem;right:.6rem;background:rgba(0,0,0,.55);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.03em;padding:.25rem .6rem;border-radius:999px;pointer-events:none;backdrop-filter:blur(2px)}
	.cgi-cs-body{padding:1.5rem .5rem .5rem}
	.cgi-cs-name{font-style:italic;font-weight:700;font-size:1.6rem;margin:0 0 .75rem}
	.cgi-cs-desc{font-size:1.125rem;line-height:1.6;max-width:65ch;margin:0 0 1.25rem;color:#374151}
	/* reference UButton variant=outline color=white: thin gray ring, dark text, subtle gray hover, icon LEADING */
	.cgi-cs-more{display:inline-flex;align-items:center;gap:.4rem;border:1px solid #d4d4d8;border-radius:.5rem;padding:.55rem 1rem;text-decoration:none;color:#111827;font-weight:500;font-size:.95rem}
	.cgi-cs-more:hover{background:#f4f4f5;color:#111827}
	.cgi-cs-more-arr{flex:0 0 auto;width:1.05rem;height:1.05rem}
	.cgi-hidden{display:none!important}
	html.cgi-dark .cgi-csg{border-top-color:#262626}
	html.cgi-dark .cgi-csg-group,html.cgi-dark .cgi-csg-group:hover{color:#fafafa!important}
	@media(min-width:1280px){html.cgi-dark .cgi-csg-group:hover{background:#111827}}
	html.cgi-dark .cgi-csg-hint,html.cgi-dark .cgi-cs-desc{color:#9ca3af}
	html.cgi-dark .cgi-csg-demo{border-color:#0ea5e9!important;color:#38bdf8!important}
	html.cgi-dark .cgi-csg-demo:hover{background:#27272a!important;color:#7dd3fc!important}
	html.cgi-dark .cgi-cs-more{border-color:#3f3f46;color:#e5e7eb}
	html.cgi-dark .cgi-cs-more:hover{background:#27272a;color:#fff}
	@media(min-width:640px){html.cgi-dark .cgi-cs-card:hover{background:#171717}}
	html.cgi-dark .cgi-cs-media{background:transparent}
	.cgi-tpl-faq{margin:4rem 0}
	.cgi-tpl-faq>h2{font-size:clamp(1.75rem,1rem + 2.5vw,2.5rem);font-weight:700;text-align:center;margin:0 0 2rem}
	.cgi-tpl-faq-cols{display:grid;gap:0 4rem;grid-template-columns:1fr}
	@media(min-width:900px){.cgi-tpl-faq-cols{grid-template-columns:1fr 1fr}}
	.cgi-tpl-faq-item{border-bottom:1px solid #e5e7eb}
	.cgi-tpl-faq-item:first-child{border-top:1px solid #e5e7eb}
	.cgi-tpl-faq-item summary{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;cursor:pointer;list-style:none;font-weight:700;font-size:1rem;line-height:1.5;padding:1.25rem 2rem 1.25rem 0}
	.cgi-tpl-faq-item summary::-webkit-details-marker{display:none}
	/* reference chevron-right (heroicons); flips to chevron-down on open.
	   NOTE: Chrome does not paint summary::after here, so the chevron is a
	   background-image on the summary itself (right-centered in the reserved padding). */
	.cgi-tpl-faq-item summary::after{display:none}
	.cgi-tpl-faq-item summary{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzBhMGEwYSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4yMiA1LjIyYS43NS43NSAwIDAgMSAxLjA2IDBsNC4yNSA0LjI1YS43NS43NSAwIDAgMSAwIDEuMDZsLTQuMjUgNC4yNWEuNzUuNzUgMCAwIDEtMS4wNi0xLjA2TDExLjk0IDEwIDguMjIgNi4yOGEuNzUuNzUgMCAwIDEgMC0xLjA2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+);background-repeat:no-repeat;background-position:right center;background-size:1.5rem 1.5rem}
	.cgi-tpl-faq-item[open] summary{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzBhMGEwYSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS4yMiA4LjIyYS43NS43NSAwIDAgMSAxLjA2IDBMMTAgMTEuOTRsMy43Mi0zLjcyYS43NS43NSAwIDEgMSAxLjA2IDEuMDZsLTQuMjUgNC4yNWEuNzUuNzUgMCAwIDEtMS4wNiAwTDUuMjIgOS4yOGEuNzUuNzUgMCAwIDEgMC0xLjA2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+)}
	/* reserve room for the chevron so long questions never run under it (beats .entry-content .wp-block-details summary) */
	.entry-content .wp-block-details.cgi-tpl-faq-item summary,.cgi-tpl-faq-item summary{padding-right:2rem}
	/* article FAQ questions are H3s like prod (accordion heading semantics) — typography inherits from summary;
	   the article h3 scale (24/700) must NOT apply, hence the importants */
	.entry-content .wp-block-details summary h3.cgi-faq-sq,.wp-block-details summary h3.cgi-faq-sq{display:inline!important;font-size:inherit!important;font-weight:inherit!important;font-family:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;color:inherit!important;margin:0!important;padding:0!important}
	.cgi-tpl-faq-a{padding:.25rem 3rem 1rem 0;color:#000;font-size:1rem;line-height:1.75}
	.cgi-tpl-faq-a p{line-height:1.75;margin:0 0 .65rem}.cgi-tpl-faq-a p:last-child{margin-bottom:0}
	/* smooth collapse (Chrome 129+; older browsers snap, no regression) */
	.cgi-tpl-faq-item{interpolate-size:allow-keywords}
	.cgi-tpl-faq-item::details-content{block-size:0;overflow:hidden;transition:block-size .3s ease,content-visibility .3s allow-discrete;content-visibility:hidden}
	.cgi-tpl-faq-item[open]::details-content{block-size:auto;content-visibility:visible}
	.cgi-fullbleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
	/* guide CTA styled globally in cgi-zz-design-system */
	html.cgi-dark .cgi-svc-hero p{color:#9ca3af}
	html.cgi-dark .cgi-tpl-faq-a{color:#fff;font-weight:300}
	html.cgi-dark .cgi-tpl-faq-item summary{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4yMiA1LjIyYS43NS43NSAwIDAgMSAxLjA2IDBsNC4yNSA0LjI1YS43NS43NSAwIDAgMSAwIDEuMDZsLTQuMjUgNC4yNWEuNzUuNzUgMCAwIDEtMS4wNi0xLjA2TDExLjk0IDEwIDguMjIgNi4yOGEuNzUuNzUgMCAwIDEgMC0xLjA2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+)}
	html.cgi-dark .cgi-tpl-faq-item[open] summary{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS4yMiA4LjIyYS43NS43NSAwIDAgMSAxLjA2IDBMMTAgMTEuOTRsMy43Mi0zLjcyYS43NS43NSAwIDEgMSAxLjA2IDEuMDZsLTQuMjUgNC4yNWEuNzUuNzUgMCAwIDEtMS4wNiAwTDUuMjIgOS4yOGEuNzUuNzUgMCAwIDEgMC0xLjA2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+)}
	html.cgi-dark .cgi-tpl-faq-item,html.cgi-dark .cgi-tpl-faq-item:first-child{border-color:#262626}
	html.cgi-dark .cgi-card{background:#171717;border-color:#262626}
	html.cgi-dark .cgi-card a.cgi-thumb{background:#262626}
	html.cgi-dark .cgi-card p{color:#9ca3af}
	/* ---- blog index (reference blog/index.vue) ---- */
	body.blog,body.home.blog,body.post-type-archive-case{background:#fff}
	.blog .content-area,.home .content-area,.post-type-archive-case .content-area{margin-top:0!important;margin-bottom:0!important}
	.cgi-bl-inner{max-width:1536px;margin:0 auto;padding:0 2rem}
	.cgi-bl-hero{background:linear-gradient(to top right,#e2e8f0,#fff);padding:5.75rem 0 5vw;text-align:center}
	/* inner vertical padding = reference pt-8 pb-16 sm:pb-40 lg:py-24 (on top of section pt-header + pb-5vw) */
	.cgi-bl-hero .cgi-bl-inner{padding-top:2rem;padding-bottom:4rem}
	@media(min-width:640px){.cgi-bl-hero .cgi-bl-inner{padding-bottom:10rem}}
	@media(min-width:1024px){.cgi-bl-hero .cgi-bl-inner{padding-top:6rem;padding-bottom:6rem}}
	.cgi-bl-hero h1{font-family:var(--cgi-font-display,sans-serif);font-weight:600;color:#262626;margin:0;font-size:clamp(3rem,1.5rem + 5vw,4.5rem);line-height:1}
	.blog .cgi-bl-hero h1{font-size:4.5rem}/* prod blog hero keeps 72px at every width */
	.cgi-bl-hero p{max-width:48rem;margin:3rem auto 0;line-height:1.6;color:#374151;font-size:clamp(1.1rem,1rem + .6vw,1.5rem)}
	.cgi-bl-sec{position:relative;z-index:1;background:#fff;border-radius:5vw 5vw 0 0;margin-top:-5vw;padding:2rem 0 1rem}
	/* search pill */
	.cgi-bl-search{position:relative;display:flex;align-items:center;border:1px solid #e5e7eb;border-radius:2rem;overflow:hidden;margin:0 0 2rem;transition:box-shadow .15s}
	@media(min-width:640px){.cgi-bl-search{margin-bottom:4rem}}
	.cgi-bl-search:focus-within{box-shadow:0 10px 30px -10px rgba(0,0,0,.2);border-color:transparent}
	html.cgi-dark .cgi-bl-search{background:#171717;border-color:#404040}/* dark input surface (gray-900 + gray-700 ring) — was transparent */
	.cgi-bl-search-ico{display:flex;padding:1rem;color:#9ca3af}
	.cgi-bl-search-ico svg{width:1.6rem;height:1.6rem}
	.cgi-bl-search-input{flex:1;border:0!important;outline:none!important;box-shadow:none!important;background:transparent!important;font-size:1rem;padding:1.1rem .5rem!important;color:#111827;height:auto!important}
	.cgi-bl-search-input::-webkit-search-cancel-button{-webkit-appearance:none}
	/* featured */
	.cgi-bl-featured{display:grid;grid-template-columns:1fr;gap:1rem;background:#f3f4f6;border-radius:1rem;padding:.75rem;margin-bottom:6rem;text-decoration:none;color:inherit}
	@media(min-width:1024px){.cgi-bl-featured{grid-template-columns:1fr 32rem}}
	.cgi-bl-feat-imgwrap{display:block;border-radius:.75rem;overflow:hidden;background:transparent;min-height:18rem}
	.cgi-bl-feat-img,.cgi-bl-featured .cgi-bl-feat-imgwrap img{width:100%;height:100%;object-fit:cover;display:block;clip-path:inset(8px round 12px);transition:clip-path .3s}
	.cgi-bl-featured:hover .cgi-bl-feat-img{clip-path:inset(0 round 12px)}
	.cgi-bl-feat-body{display:flex;flex-direction:column;justify-content:center;padding:1.5rem 1.5rem 2.5rem}
	.cgi-bl-pill{display:inline-block;align-self:flex-start;border:1px solid #0a0a0a;border-radius:999px;padding:.75rem 1rem;font-size:1rem;margin-bottom:1rem;line-height:1;transition:background .3s,color .3s}
	.cgi-bl-featured .cgi-bl-pill{padding:1rem 1.5rem;font-size:1.125rem;margin-bottom:1.5rem}
	.cgi-bl-featured:hover .cgi-bl-pill,.cgi-bl-card:hover .cgi-bl-pill{background:#0a0a0a;color:#fff}
	.cgi-bl-feat-top{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
	.cgi-bl-feat-h{font-size:clamp(1.4rem,1rem + 1.6vw,1.875rem);font-weight:800;line-height:1.2;margin:0;font-family:"Plus Jakarta Sans",sans-serif;color:inherit;letter-spacing:normal}
	.cgi-bl-arrow{width:2.5rem;height:2.5rem;opacity:.3;flex:0 0 auto;transition:opacity .3s,transform .3s}
	.cgi-bl-featured:hover .cgi-bl-arrow,.cgi-bl-card:hover .cgi-bl-arrow{opacity:1;transform:translateX(.5rem)}
	.cgi-bl-feat-p{margin-top:1.5rem;color:#374151;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
	/* category dropdown */
	.cgi-bl-filter{margin-bottom:4rem;max-width:21.5rem;padding-left:1.5rem;padding-right:0}
	.cgi-dd ul,.cgi-dd-list,:is(.entry-content,.entry-content-wrap) .cgi-dd ul{padding-left:0!important;margin:0!important;list-style:none!important}/* theme ul{padding-left:2em} leaked into the dropdown menu — options sat 34px right of the trigger */
	.cgi-dd-opt{padding:.5rem 1rem!important}/* text aligns with the trigger 16px pad *//* wrapper indent only; the trigger keeps its own 12px pad (prod) — was reading as doubled left padding */
	.cgi-bl-filter .cgi-dd-btn,.cgi-bl-filter .cgi-dd{width:100%}/* prod USelectMenu trigger = full 272px width, not shrink-to-fit */
	.cgi-bl-filter-lbl{display:block;font-size:.9rem;color:#374151;margin:0 0 .5rem}
	/* reference USelectMenu trigger = gray UButton: white, ring-1 gray-300, rounded-md, shadow-sm, chevron-down gray-400 */
	.cgi-bl-filter label{font-size:.875rem;font-weight:500;color:#404040;display:block;margin-bottom:.25rem}
	.cgi-bl-select{width:100%;appearance:none;-webkit-appearance:none;background-color:#fafafa;border:0;border-radius:.375rem;box-shadow:inset 0 0 0 1px #d4d4d4,0 1px 2px 0 rgba(0,0,0,.05);padding:.6875rem 2.5rem .75rem .875rem;font-size:1rem;font-weight:500;cursor:pointer;color:#374151;background-image:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 24 24%27 stroke-width=%271.5%27 stroke=%27%239ca3af%27><path stroke-linecap=%27round%27 stroke-linejoin=%27round%27 d=%27M19.5 8.25l-7.5 7.5-7.5-7.5%27/></svg>");background-repeat:no-repeat;background-position:right .75rem center;background-size:1.25rem}
	.cgi-bl-select:hover{background-color:#f9fafb}
	/* posts grid (staggered) */
	.cgi-bl-grid{list-style:none;margin:0 0 2rem;padding:0;display:grid;grid-template-columns:1fr;gap:2rem}
	@media(min-width:1024px){.cgi-bl-grid{grid-template-columns:1fr 1fr;gap:1.5rem 1.5rem;padding-bottom:6rem}.cgi-bl-cell:nth-child(even){transform:translateY(6rem)}}
	.cgi-bl-card{display:flex;flex-direction:column;border-radius:1rem;padding:.75rem;text-decoration:none;color:inherit;min-height:100%;transition:background .2s}
	@media(min-width:640px){.cgi-bl-card:hover{background:#f3f4f6}}
	.cgi-bl-card-body{padding:.5rem 1rem 0}
	.cgi-bl-card-h{font-size:1.25rem;font-weight:700;line-height:1.4;margin:0;font-family:"Plus Jakarta Sans",sans-serif;color:inherit;letter-spacing:normal}
	.cgi-bl-arrow-sm{width:2rem;height:2rem;display:none}
	@media(min-width:640px){.cgi-bl-arrow-sm{display:block}}
	.cgi-bl-card-p{display:block;margin-top:1rem;color:#374151;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
	.cgi-bl-card-imgwrap{display:block;margin-top:3rem;border-radius:.75rem;overflow:hidden;background:#f3f4f6;max-height:30rem}
	/* Case-studies grid: a 3-line title used to eat into the image because the wrapper
	   was a flex child with no size of its own — pin the ratio so every image keeps the
	   same height, and drop the 3rem gap under the title. */
	/* margin-top:auto pins the image to the bottom of the card, so a 2-line and a
	   3-line title still leave every image ending on the same line. */
	body.cgi-cases-page .cgi-bl-card-imgwrap{margin-top:auto;flex:0 0 auto;aspect-ratio:3/2;max-height:none}
	body.cgi-cases-page .cgi-bl-card-body{padding-bottom:1.25rem}/* keeps a gap when the title is long */
	body.cgi-cases-page .cgi-bl-card-img{height:100%}/* prod: 48px title→image */
	html.cgi-dark .cgi-bl-card-imgwrap{background:#262626}
	.cgi-bl-card-img{width:100%;height:100%;max-height:30rem;object-fit:cover;display:block;clip-path:inset(8px round 12px);transition:clip-path .3s}
	.cgi-bl-card:hover .cgi-bl-card-img{clip-path:inset(0 round 12px)}
	.cgi-bl-pager{margin-top:2rem}
	/* blog FAQ (reference SectionFaq) */
	.cgi-bl-faq{background:#fff;padding:3rem 0}
	@media(min-width:640px){.cgi-bl-faq{padding:8rem 0}}
	/* prod container gutters (px-4 / sm:px-6) — the shared 2rem inner was 32px on phones */
	@media(max-width:639px){.cgi-bl-faq .cgi-bl-inner{padding-left:1rem;padding-right:1rem}}
	@media(min-width:640px) and (max-width:1023px){.cgi-bl-faq .cgi-bl-inner{padding-left:1.5rem;padding-right:1.5rem}}
	.cgi-bl-faq-head{display:flex;flex-direction:column;gap:.75rem}
	.cgi-bl-faq-eyebrow{font-size:.875rem;text-transform:uppercase;letter-spacing:.1em;margin:0!important;color:inherit}/* !important: .entry-content p mb2rem на блокових сторінках */
	.cgi-tpl-faq-q{display:inline!important;font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;margin:0!important;color:inherit!important;letter-spacing:inherit!important}
	.cgi-bl-faq-desc{color:#525252;font-size:1.05rem;line-height:1.6;max-width:44rem;margin:.75rem 0 0}
	html.cgi-dark .cgi-bl-faq-desc{color:#9ca3af}
	:is(.entry-content,.entry-content-wrap) .cgi-bl-faq-h{font-size:clamp(1.875rem,1rem + 2.5vw,3rem);font-weight:700;font-family:var(--cgi-font-display,sans-serif);letter-spacing:-.02em;line-height:1;text-align:left;margin:0!important}/* prod leading-none */
	.cgi-bl-faq-cols{display:grid;grid-template-columns:1fr;gap:0 4rem;margin-top:5rem}
	.cgi-bl-faq-eyebrow:empty{display:none}
	@media(min-width:1024px){.cgi-bl-faq-cols{grid-template-columns:1fr 1fr}}
	/* divide-y like home/reference: dividers BETWEEN items only (no line above first / below last) */
	.cgi-bl-faq-cols .cgi-tpl-faq-item:first-child{border-top:0}
	.cgi-bl-faq-cols .cgi-tpl-faq-item:last-child{border-bottom:0}
	/* the .cgi-iap captured preflight (.cgi-iap *{border-width:0}) strips the divide-y borders on the
	   home FAQ — restore them so the block reads 1:1 with the blog/landing FAQ */
	.cgi-iap .cgi-bl-faq-cols .cgi-tpl-faq-item{border-bottom-width:1px!important}
	.cgi-iap .cgi-bl-faq-cols .cgi-tpl-faq-item:first-child{border-top-width:0!important}
	.cgi-iap .cgi-bl-faq-cols .cgi-tpl-faq-item:last-child{border-bottom-width:0!important}
	.cgi-bl-faq-more{margin-top:2rem}
	.cgi-bl-faq-link{display:inline-flex;align-items:center;gap:.4rem;color:#0ea5e9;font-weight:600;font-size:1.05rem;text-decoration:none}/* prod sky-500 */
	html.cgi-dark .cgi-bl-faq-link{color:#38bdf8}/* prod dark sky-400 */
	/* home (.cgi-iap) otherwise paints this dark like a body link — keep prod sky like the blog */
	body.cgi-iap-page .cgi-bl-faq-link{color:#0ea5e9!important}
	html.cgi-dark body.cgi-iap-page .cgi-bl-faq-link{color:#38bdf8!important}
	.cgi-bl-faq-link:hover{text-decoration:underline}
	.cgi-bl-faq-arr{width:1.15rem;height:1.15rem;flex:none;display:block}
	/* dark */
	html.cgi-dark body.blog,html.cgi-dark body.home{background:#0a0a0a}
	html.cgi-dark .cgi-bl-hero{background:linear-gradient(to top right,#171717,#0a0a0a)}
	html.cgi-dark .cgi-bl-hero h1{color:#fafafa}
	html.cgi-dark .cgi-bl-hero p{color:#d4d4d4}
	html.cgi-dark .cgi-bl-sec,html.cgi-dark .cgi-bl-faq{background:#0a0a0a}
	html.cgi-dark .cgi-iap .cgi-bl-faq-h{color:#f1f5f9!important}/* home-scoped: .cgi-iap :is(h) inherit rule breaks it only here; blog FAQ already light */
	html.cgi-dark .cgi-iap .cgi-bl-faq summary,html.cgi-dark .cgi-iap .cgi-bl-faq .cgi-tpl-faq-q{color:#f1f5f9}
	html.cgi-dark .cgi-bl-search{border-color:#262626}
	html.cgi-dark .cgi-bl-search-input{color:#e5e7eb}
	html.cgi-dark .cgi-bl-featured{background:#171717}
	html.cgi-dark .cgi-bl-feat-p,html.cgi-dark .cgi-bl-card-p{color:#9ca3af}
	html.cgi-dark .cgi-bl-pill{border-color:#fff}
	html.cgi-dark .cgi-bl-featured:hover .cgi-bl-pill,html.cgi-dark .cgi-bl-card:hover .cgi-bl-pill{background:#fff;color:#0a0a0a}/* donor dark:group-hover:bg-white + text-black */
	html.cgi-dark .cgi-bl-select{background-color:#111827;border-color:#374151;color:#e5e7eb;box-shadow:none}
	html.cgi-dark .cgi-bl-select:hover{background-color:#262626}
	html.cgi-dark .cgi-bl-filter-lbl{color:#d4d4d4}
	@media(min-width:640px){html.cgi-dark .cgi-bl-card:hover{background:#171717}}
	/* ---- Case Studies archive: featured card = equal halves (reference md:grid-cols-2, not blog 1fr 32rem) ---- */
	@media(min-width:1024px){.cgi-cs-feat.cgi-bl-featured{grid-template-columns:1fr 1fr}}
	/* ---- Case Studies archive: card image grows to fill (reference flex-1) so all images
	   in a row are equal height; card body stays natural, card stretches to row height ---- */
	.cgi-cs-grid .cgi-bl-card{height:100%}
	.cgi-cs-grid .cgi-bl-card-imgwrap{flex:1 1 0%;min-height:0}
	.cgi-cs-grid .cgi-bl-card-img{height:100%}
	/* ---- Case Studies archive: 3-col grid, no stagger (reference md:grid-cols-2 xl:grid-cols-3) ---- */
	.cgi-cs-grid{gap:4rem 2rem}
	.cgi-cs-grid .cgi-bl-cell:nth-child(even){transform:none}
	@media(min-width:768px){.cgi-cs-grid{grid-template-columns:1fr 1fr;gap:4rem 2rem}}
	@media(min-width:1024px){.cgi-cs-grid{grid-template-columns:1fr 1fr;gap:4rem 2rem;padding-bottom:4rem}}
	@media(min-width:1280px){.cgi-cs-grid{grid-template-columns:repeat(3,1fr);gap:5rem 3rem;padding-bottom:6rem}}
	.cgi-cs-intro{background:#fff;padding:2rem 0 4rem}
	.cgi-cs-intro p{color:#374151;line-height:1.7;font-size:1.0625rem;margin:0;max-width:none}
	html.cgi-dark .cgi-cs-intro{background:#0a0a0a}
	html.cgi-dark .cgi-cs-intro p{color:#d4d4d4}
	/* ---- 3D Rendering Guide index (reference 3d-rendering-guide/index.vue) ---- */
	.cgi-gx-inner{max-width:1536px;margin:0 auto;padding:0 2rem}
	/* hero matches reference 3d-rendering-guide/index.vue: section pt-header pb-[5vw],
	   inner pt-8 sm:py-12 lg:py-24 pb-16 (h1 starts ~188px down at desktop, like prod) */
	.cgi-gx-hero{position:relative;overflow:hidden;background:linear-gradient(to top right,#e2e8f0,#fff);padding:5.75rem 0 5vw}
	.cgi-gx-hero .cgi-gx-inner{position:relative;z-index:1;padding-top:2rem;padding-bottom:4rem}
	@media(min-width:640px){.cgi-gx-hero .cgi-gx-inner{padding-top:3rem;padding-bottom:3rem}}
	@media(min-width:1024px){.cgi-gx-hero .cgi-gx-inner{padding-top:6rem;padding-bottom:6rem}}
	.cgi-gx-hero h1{font-family:var(--cgi-font-display,sans-serif);font-weight:600;color:#262626;margin:0;font-size:clamp(3rem,1.5rem + 5vw,4.5rem);line-height:1}
	.cgi-gx-hero p{max-width:48rem;margin:3rem 0 0;line-height:1.6;color:#374151;font-size:clamp(1.1rem,1rem + .6vw,1.5rem)}
	/* 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)}
	.cgi-gx-sec{position:relative;z-index:1;background:#fff;border-radius:5vw 5vw 0 0;margin-top:-5vw;padding:4rem 0 6rem;margin-bottom:4rem}
	@media(min-width:1024px){.cgi-gx-sec{padding:6rem 0 6rem}}
	.cgi-gx-prose{max-width:none}
	.cgi-gx-prose p{font-size:1.25rem;line-height:1.75;color:#374151;margin:0 0 1.5rem}
	.cgi-gx-prose a{color:#111827;text-decoration:underline}
	.cgi-gx-prose a:hover{color:#0f172a}/* prod: prose links stay dark on hover (not sky) */
	html.cgi-dark .cgi-gx-prose a{color:#e2e8f0}html.cgi-dark .cgi-gx-prose a:hover{color:#e2e8f0}
	.cgi-gx-video{position:relative;width:100%;aspect-ratio:16/9;margin:4rem 0;border-radius:1rem;overflow:hidden;background:#000}
	.cgi-gx-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
	.cgi-gx-hr{border:0;border-top:1px dashed #d1d5db;margin:6rem 0!important}/* !important: entry-content hr каскад на блоковій сторінці */
	.cgi-gx-contents-h{font-family:var(--cgi-font-display,sans-serif);font-weight:700;font-size:clamp(1.75rem,1rem + 2.5vw,2.5rem);text-align:center;margin:0 0 3rem!important;line-height:1.2!important;color:#262626}/* !important: entry-content h2 каскад на блоковій сторінці */
	.cgi-gx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
	.cgi-gx-chap{display:flex;gap:1rem;align-items:center;background:#f3f4f6;border-radius:1rem;padding:2rem 1rem;text-decoration:none;color:inherit;transition:background .2s,transform .2s}
	@media(min-width:640px){.cgi-gx-chap{gap:3rem;padding:2rem}}
	.cgi-gx-chap:hover{background:#e5e7eb;transform:translateX(.5rem)}
	.cgi-gx-chap-num{width:5rem;flex:0 0 auto;text-align:center;color:#262626}
	.cgi-gx-chap-lbl{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#6b7280}
	.cgi-gx-chap-n{display:block;font-size:3rem;font-weight:200;line-height:1.1}
	.cgi-gx-chap-h{display:block;font-family:var(--cgi-font-display,sans-serif);font-weight:600;font-size:clamp(1.25rem,1rem + 1vw,1.875rem);line-height:1.25;color:#262626}
	.cgi-gx-chap-sub{display:block;margin-top:.5rem;color:#4b5563;font-size:1rem}
	.cgi-gx-start{display:flex;justify-content:center;margin-top:3rem}
	.cgi-gx-btn{display:inline-block;background:#0ea5e9;color:#fff;font-weight:600;padding:1rem 2.5rem;border-radius:6px;text-decoration:none;font-size:1.125rem;transition:background .15s}
	html.cgi-dark .cgi-gx-btn{background:#38bdf8!important;color:#171717!important}/* dark sky-button convention (= header CTA / cta-btn / demo submit): sky-400 bg + near-black text */
	body.post-type-archive-guide_chapter .content-area,body.cgi-guide-index-page .content-area{margin-bottom:0!important}
	body.post-type-archive-guide_chapter .entry-content-wrap,body.cgi-guide-index-page .entry-content-wrap{padding-bottom:0!important}/* prod btn->footer gap = 160 (section pb96+mb64); wrap pb32 + area mb80 added 112 */
	.cgi-gx-btn:hover{background:#0284c7;color:#fff}
	.cgi-gx-cube i{border-color:#475569}
	html.cgi-dark .cgi-gx-cube{opacity:.06}
	/* guide archive + chapter single: white body + zero Kadence content-area margin
	   (kills the grey body + grey band before the footer; chapter single has no Guide CTA) */
	body.post-type-archive-guide_chapter,body.single-guide_chapter{background:#fff}
	.post-type-archive-guide_chapter .content-area{margin-top:0!important;margin-bottom:0!important}
	.single-guide_chapter .content-area{margin-bottom:0!important}/* top margin = -5vw (rounded section over hero), set in the single styles */
	html.cgi-dark body.post-type-archive-guide_chapter,html.cgi-dark body.single-guide_chapter{background:#0a0a0a}
	html.cgi-dark .cgi-gx-hero{background:linear-gradient(to top right,#171717,#0a0a0a)}
	html.cgi-dark .cgi-gx-hero h1,html.cgi-dark .cgi-gx-contents-h,html.cgi-dark .cgi-gx-chap-h,html.cgi-dark .cgi-gx-chap-num{color:#fafafa}
	html.cgi-dark .cgi-gx-hero p,html.cgi-dark .cgi-gx-prose p,html.cgi-dark .cgi-gx-chap-sub{color:#d4d4d4}
	html.cgi-dark .cgi-gx-sec{background:#0a0a0a}
	html.cgi-dark .cgi-gx-chap{background:#171717}
	html.cgi-dark .cgi-gx-chap:hover{background:#262626}
	html.cgi-dark .cgi-gx-hr{border-top-color:#374151}