/* hide text logo/title beside the image logo */
.site-branding .site-title-wrap{display:none!important}

/* reference look: white section curves up over the hero (Tailwind rounded-t-[5vw] -mt-[5vw]).
   overflow:visible to match the reference exactly — the section bg+radius render the rounded
   corners; content never reaches the corners, so nothing needs clipping. (overflow:hidden here
   risked clipping the curve when paired with the negative top margin.) */
.cgi-rounded-hero{border-top-left-radius:5vw;border-top-right-radius:5vw;position:relative;z-index:2;overflow:visible}
/* negative margin needs weight — Kadence/core block-gap margins override a plain class */
.entry-content > .cgi-rounded-hero,.wp-site-blocks .cgi-rounded-hero{margin-top:-5vw!important}
/* the hero before it carries a 32px block margin-bottom → the rounded section's natural top
   sat 32px below the hero, so the -5vw pull only overlapped ~40px and the curve barely showed.
   Zero it so the section sits flush against the hero and the full 5vw curve overlaps (reference). */
.entry-content > .wp-block-cover.alignfull:has(+ .cgi-rounded-hero){margin-bottom:0!important}
/* the hero (first block) must sit BELOW the rounded section so the curve shows over it */
.entry-content > :first-child{position:relative;z-index:1}
.entry-content > .cgi-rounded-hero{z-index:2}

/* brand logo wall — matches reference: max-w-6xl mx-auto, w-32/2xl:w-36, object-contain, mix-blend-darken, hover scale */
.cgi-logo-wall{max-width:72rem;margin-left:auto;margin-right:auto}
/* fix the flex item (figure) width too — is-resized figures carry per-image inline widths,
   so rows fit a different count each (6 vs 7) and one logo wrapped to a 4th row. Uniform
   128px (w-32) figures give clean 7-per-row like the reference. */
.cgi-logo-wall .wp-block-image{margin:0!important;width:128px!important;height:64px!important;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
@media(min-width:1536px){.cgi-logo-wall .wp-block-image{width:144px!important}}
.cgi-logo-wall img{object-fit:contain;mix-blend-mode:darken;transition:transform .2s ease}
.cgi-logo-wall .wp-block-image:hover img{transform:scale(1.1)}
/* base w-32 h-16 (128×64) like reference — fixed HEIGHT is what makes the rows align: without
   it, logos kept their intrinsic heights, so rows were ragged and the wall ~96px too tall. */
.cgi-logo-wall .wp-block-image img{width:128px!important;height:64px!important;object-fit:contain}
@media(min-width:1536px){.cgi-logo-wall .wp-block-image img{width:144px!important}}
@media(max-width:782px){.cgi-logo-wall .wp-block-image img{width:96px!important}}
html.cgi-dark .cgi-logo-wall img{mix-blend-mode:normal;filter:invert(1)}

/* transparent header: let the full-bleed hero on pages/singles sit flush under the
   header (kill Kadence's content-area top gap). Archives/blog keep their gap so the
   heading clears the header. */
.transparent-header.page .content-area,
.transparent-header.single .content-area{margin-top:0}
.transparent-header.page .entry-content-wrap,
.transparent-header.single .entry-content-wrap{padding-top:0}

/* =================== BRANDED DARK PALETTE =================== */
html.cgi-dark{
	--global-palette8:#0a0a0a;   /* body bg */
	--global-palette9:#171717;   /* content/surface (was white) */
	--global-palette7:#262626;   /* light-gray surface */
	--global-palette6:#737373;
	--global-palette5:#a3a3a3;
	--global-palette4:#d4d4d4;   /* body text */
	--global-palette3:#fafafa;   /* headings */
	background:#0a0a0a;
}
html.cgi-dark body{background:#0a0a0a;color:#d4d4d4}
html.cgi-dark #mobile-header .menu-toggle-open,html.cgi-dark .mobile-toggle,html.cgi-dark #masthead .menu-toggle-open{color:#fff!important}/* dark burger was #1a202c-on-dark on non-home pages (the white fix was home-scoped) */
/* content surfaces built with core/kadence bg classes */
html.cgi-dark .has-white-background-color{background-color:#171717!important}
html.cgi-dark .has-cinder-background-color{background-color:#262626!important}
/* inline-styled surfaces from the migration */
html.cgi-dark [style*="background-color:#f3f4f6"]{background-color:#171717!important}
html.cgi-dark [style*="background-color:#fff"],html.cgi-dark [style*="background:#fff"]{background-color:#171717!important}
html.cgi-dark [style*="linear-gradient(135deg,#e2e8f0"]{background:linear-gradient(135deg,#171717 0%,#0a0a0a 100%)!important}
html.cgi-dark [style*="linear-gradient(to top right,#e2e8f0"]{background:linear-gradient(to top right,#171717,#0a0a0a)!important}
/* Kadence "boxed" content wrapper: its white bg maps to #171717 (lighter than body),
   leaving a faint rounded grey ghost peeking through the gaps between full-bleed
   sections. Pages are composed of full-bleed sections that paint their own bg, so
   the article wrapper must sit flush at body colour (no surface/radius/shadow). */
html.cgi-dark article.content-bg,html.cgi-dark .content-bg.entry{background:#0a0a0a!important;box-shadow:none!important;border-radius:0!important}
/* text */
html.cgi-dark h1,html.cgi-dark h2,html.cgi-dark h3,html.cgi-dark h4,html.cgi-dark h5,html.cgi-dark h6{color:#fafafa}
html.cgi-dark p,html.cgi-dark li,html.cgi-dark .wp-block-list,html.cgi-dark figcaption,html.cgi-dark cite{color:#d4d4d4}
html.cgi-dark [style*="color:#6b7280"],html.cgi-dark [style*="color:#9ca3af"]{color:#a3a3a3!important}
html.cgi-dark [style*="color:#111"]{color:#e5e7eb!important}
/* QA 2026-08-13: always-white mockup cards keep their light-mode (dark) text in dark mode — the
   global heading/paragraph light rules above otherwise leak in and make the copy invisible on white.
   .browser-frame = fashion Amazon/PDP mockup; .sched-card = booking calendar (auto/toys/healthcare). */
html.cgi-dark .sched-card :is(h1,h2,h3,h4,h5,h6){color:#111!important}
html.cgi-dark .sched-card label,html.cgi-dark .sched-card p:not(.sched-err){color:#374151!important}
html.cgi-dark .browser-frame :is(h1,h2,h3,h4,h5,h6){color:#171717!important}
html.cgi-dark .browser-frame :is(p,li){color:#404040!important}
html.cgi-dark .browser-frame .amz-side__eyebrow,html.cgi-dark .browser-frame .amz-side__sub{color:#6b7280!important}
/* healthcare "One CAD File" island (.cgi-hcref) is a DARK section — its font-display headings lack a
   dark: colour variant, so pin them light like the rest of the dark UI. */
html.cgi-dark .cgi-hcref :is(h2,h3){color:#f3f4f6!important}
/* Home redesign 2026-08-20: canonical sections (cards/workflow/slider) now live INSIDE the apex
   .cgi-iap group, whose heading reset (.cgi-iap :is(h1..h6){color:inherit}) outranks the global
   dark heading rules → section headings went invisible in dark. Re-pin them, scoped to the
   canonical containers only (mockups like .sched-card keep their own overrides above). */
html.cgi-dark .cgi-iap .cgi-lp-head :is(h2,h3),
html.cgi-dark .cgi-iap .cgi-lp-card-t,
html.cgi-dark .cgi-iap .cgi-wf-title{color:#fafafa!important}
/* brands small-caps heading: canonical muted gray (the .cgi-iap inherit reset paints it navy) */
.cgi-iap .cgi-lp-brands-h{color:#6b7280!important}
html.cgi-dark .cgi-iap .cgi-lp-brands-h{color:#a3a3a3!important}
html.cgi-dark a{color:#e5e5e5}/* neutral dark-mode link fallback (prod); sky reserved for FAQ-CTA classes */
/* borders / dividers */
html.cgi-dark hr,html.cgi-dark .wp-block-separator{border-color:#262626!important;color:#262626}
html.cgi-dark .wp-block-details{border-bottom:1px solid #262626}
html.cgi-dark table,html.cgi-dark th,html.cgi-dark td{border-color:#262626!important;color:#d4d4d4}
/* widgets */
html.cgi-dark .cgi-card{background:#171717!important;border-color:#262626!important}
html.cgi-dark .cgi-card p{color:#a3a3a3}
html.cgi-dark .cgi-mega-inner{background:#171717!important;color:#f5f5f5!important;box-shadow:0 20px 50px rgba(0,0,0,.5)}/* the light rule also sets color:#111 — without flipping it here, every non-link label in the panel stays near-black on the dark surface */
html.cgi-dark .cgi-mega-title{color:#fafafa}
html.cgi-dark .cgi-mega-links a{color:#d4d4d4}
html.cgi-dark .cgi-trustpilot{color:#d4d4d4}
html.cgi-dark .cgi-archive-head p{color:#a3a3a3}
/* keep brand blue accents (#0ea5e9) and white-on-dark hero text as-is */

/* =================== TRANSPARENT HEADER COLOUR =================== */
/* default transparent (light theme, light hero) = dark text/logo via Kadence mod.
   Light text + white logo whenever the header sits over a dark area: */
html.cgi-dark #main-header a,
html.cgi-dark #main-header .header-navigation .menu-item > a,
body.cgi-hero-dark .item-at-start .header-navigation .menu-item > a,
body.cgi-hero-dark .item-at-start #main-header a{color:#fff!important}
html.cgi-dark .site-branding img,
body.cgi-hero-dark .item-at-start .site-branding img{filter:brightness(0) invert(1)}
/* mobile off-canvas drawer: Kadence colours the menu links via a palette slot that we
   remap to the body bg in dark, making them dark-on-dark (invisible). Force light. */
html.cgi-dark #mobile-site-navigation a,
html.cgi-dark .mobile-navigation a,
html.cgi-dark .drawer-content .menu-item > a,
html.cgi-dark .mobile-drawer-content a{color:#fff!important}
html.cgi-dark .drawer-content .menu-item,
html.cgi-dark .mobile-navigation .menu-item{border-color:#262626!important}
/* dark theme: the scrolled (solid) sticky header is hardcoded white by Kadence — darken it */
html.cgi-dark .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-header-row-container-inner,
html.cgi-dark #masthead.item-is-fixed:not(.item-at-start) .site-header-row-container-inner{background:#0a0a0a!important}
/* CTA pill stays blue in both themes (already styled) */
/* theme toggle — prod: solid moon, gray-700 light (hover gray-900), yellow-500 dark */
.cgi-theme-toggle{background:none;border:0;color:#404040;width:44px;height:44px;border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;margin-left:1.5rem;transition:color .3s,background .2s;flex:0 0 auto}
/* header CTA (Schedule a demo nav item) = reference rounded-xl, not a pill; size lg */
#masthead .header-menu-container li.menu-item-10045>a,#masthead .header-navigation li.menu-item-10045>a{border-radius:12px!important;padding:10px 14px!important;font-size:16px!important;line-height:1.5!important}
.cgi-theme-toggle:hover{background:#fafafa;color:#171717}
html.cgi-dark .cgi-theme-toggle:hover{background:#262626;color:#fff}/* prod hover:bg-gray-50 dark:hover:bg-gray-800 */
.cgi-theme-toggle svg{width:24px;height:24px}
.cgi-theme-toggle .cgi-ti-moon{fill:currentColor;stroke:none}/* prod: SOLID moon in both themes */
.cgi-theme-toggle:focus,.cgi-theme-toggle:focus-visible{outline:none;box-shadow:none}
.cgi-theme-toggle:focus:not(:hover){background:none!important}/* Kadence button:focus paints a sky square */
.cgi-theme-toggle:focus:not(:hover){color:#404040!important}/* …and button:focus color:#fff made the moon invisible on white */
.cgi-theme-toggle:focus:hover{color:#171717!important}
html.cgi-dark .cgi-theme-toggle:focus{color:#eab308!important}
html.cgi-dark .cgi-theme-toggle,html.cgi-dark .cgi-theme-toggle:hover{color:#eab308}/* prod dark: moon = text-yellow-500 (span class wins even on hover) */
/* ── reference hover behaviour: nav items + card links must NOT turn sky on hover (global a:hover=#0ea5e9) ── */
/* nav: reference UButton ghost-gray → rounded bg on hover, text colour unchanged */
#masthead .header-navigation .header-menu-container>ul>li.menu-item:not(.cgi-nav-cta)>a:hover{color:inherit!important;background:rgba(17,24,39,.06);border-radius:.5rem}
html.cgi-dark #masthead .header-navigation .header-menu-container>ul>li.menu-item:not(.cgi-nav-cta)>a:hover{background:rgba(255,255,255,.09)}
/* prod highlights the CURRENT page's top-level nav item with a static pill */
#masthead .header-navigation .header-menu-container>ul>li.menu-item:is(.current-menu-item,.current_page_item):not(.cgi-nav-cta)>a{background:#f5f5f5;color:#404040!important;border-radius:12px}
html.cgi-dark #masthead .header-navigation .header-menu-container>ul>li.menu-item:is(.current-menu-item,.current_page_item):not(.cgi-nav-cta)>a{background:#171717;color:#e5e5e5!important}
/* case + blog cards: keep text colour on hover (only the media reveals/animates) */
.cgi-cs-card:hover,.cgi-cs-card:hover .cgi-cs-name,.cgi-cs-card:hover .cgi-cs-more,.cgi-cs-feat:hover,.cgi-cs-feat:hover .cgi-cs-name,
.cgi-bl-card:hover,.cgi-bl-card:hover .cgi-bl-card-h,.cgi-bl-featured:hover,.cgi-bl-featured:hover .cgi-bl-card-h{color:inherit!important}
/* bigger, thinner reference heroicons arrow on case/blog/spec "learn more" links */
.cgi-cs-more-arr,.cgi-csg-arr{width:1.4rem!important;height:1.4rem!important;stroke-width:1.5} /* card/featured arrows (.cgi-bl-arrow) size in cgi-cpt-templates: 40/32px like prod */