/* 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}html.cgi-dark .single-case .cgi-case-media,html.cgi-dark .single-post .cgi-case-media{background:#0a0a0a}/* cases end with the content (no Guide CTA) — give breathing room before the footer */ body.single-case #primary{padding-bottom:6rem}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}/* prod: грід mb-40 перед низом секції */ @media(max-width:1279px){.cgi-bl-related-grid{grid-template-columns:repeat(2,1fr);gap:3rem 2rem}}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}/* ── 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-single-content .cgi-cs-galfig .cgi-cs-gallery,.cgi-cs-galfig .cgi-cs-gallery{margin:0!important}/* 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}}html.cgi-dark .cgi-cs-stat-v,html.cgi-dark .cgi-cs-stat-l{color:#e5e7eb}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}.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: .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)} }html.cgi-dark .cgi-spec{background:#0a0a0a;border-top:1px solid #171717}.cgi-spec-side{display:none}@media(min-width:1024px){.cgi-spec-side{display:block;flex:0 0 18rem}}.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}/* 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-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}}html.cgi-dark .cgi-spec-desc,html.cgi-dark .cgi-spec-name,html.cgi-dark .cgi-spec-ind-name{color:#fafafa}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}/* 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}/* 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} }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-pgnext{text-align:right}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}@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}}/* 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}/* 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}}html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-wf-horiz .cgi-wf-body{background:#262626}html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-wf-horiz .cgi-wf-ghost{color:rgba(255,255,255,.08)}/* 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.full .cgi-wf-num-inner{opacity:0}:is(.entry-content,.entry-content-wrap) .cgi-wf-num.full .cgi-wf-num-n{color:#fff}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}html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-feat-row .wp-block-column{background:#262626!important}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}html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-csec-gray{background:#171717}/* 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}}html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-stat-l{color:#e5e7eb}html.cgi-dark :is(.entry-content,.entry-content-wrap) .cgi-cta-card{background:#082f49}/* dark CTA button = sky-400 + dark text, for both the link and the "Schedule a demo"