/* ========================================================================== Exact Core Group — premium interaction layer Loaded into the Elementor Global Kit custom CSS. Justification for custom CSS (brief permits it only where Elementor cannot): concentric double-bezel radii need calc(); ambient multi-layer shadows, magnetic hover physics, sweep underlines and staggered reveals have no native Elementor control. Structure stays in Elementor containers. ========================================================================== */ :root{ --ec-e: cubic-bezier(.32,.72,0,1); /* spring-ish, no ease-in-out */ --ec-e-out: cubic-bezier(.16,1,.3,1); --ec-amb-1: 0 1px 2px rgba(1,62,127,.04), 0 6px 16px -6px rgba(1,62,127,.08); --ec-amb-2: 0 2px 4px rgba(1,62,127,.05), 0 18px 40px -12px rgba(1,62,127,.14); --ec-amb-3: 0 4px 8px rgba(1,62,127,.06), 0 36px 80px -20px rgba(1,62,127,.20); } /* The header CTA must never wrap to 3 lines. It did after the nav grew to 7 items and the right column was narrowed to 17% — the button hit 82px inside an 83px header and filled it. nowrap + a height cap makes the failure impossible regardless of what the label is changed to. */ #header-cta{ white-space:nowrap!important; max-height:48px;line-height:1.2!important; padding-top:13px!important;padding-bottom:13px!important} /* ---------- responsive CTA pair (Elementor 4.2 hide_* controls are broken) Brief item 3's combined label "Get in Touch / Free Audit" measures 225px at the old 15px/26px button — 95px wider than the label it replaced. The header is a boxed 1320px row, so the button pushed past the viewport and gave the WHOLE PAGE a horizontal scrollbar at every common laptop width. Measured before fixing: 1024px overflowed by 62px, 1100px by 49px, 1280px by 19px; only ~1300px+ fitted. Proven causal by shrinking the label in-page and watching scrollWidth drop back to exactly the viewport width. Two changes, because either alone is not enough: 1. the button is tightened (14px text, 20px sides) to buy back ~30px 2. below 1200px the short "Free Audit" twin is used instead — the full label genuinely cannot sit beside the nav at those widths The swap point moved 767 -> 1199 for that reason. */ #header-cta{ font-size:13.5px!important;letter-spacing:-.1px!important; padding-left:16px!important;padding-right:16px!important} /* 1359/1360, measured. The full nav needs 1360px before it clears the logo: at 1320 the first item touches the mark and at 1280 it overlaps it by 40px. The compact CTA therefore stays until the full nav can actually appear. */ @media(max-width:1359px){ #header-cta{display:none!important} #header-cta-m{white-space:nowrap} } @media(min-width:1360px){#header-cta-m{display:none!important}} /* ---------- the brand mark must never be squeezed ------------------------ kit.css gives every widget min-width:0 so a long string cannot force the page to scroll sideways. For the logo that rule is actively harmful: in a flex row under pressure it let the mark shrink to 34x8 at 375px, which is not a small logo, it is an unreadable one. The brand holds its size and the nav gives way instead. */ #site-header .ecg-w--image, #dark-header .ecg-w--image{flex:0 0 auto} /* kit.css caps every image at max-width:100% of its box. For the logo that is circular — the box is sized by the image — so flex resolves it against whatever space is left and the mark ends up arbitrarily small. The logo's width is specified per breakpoint by the builder; let it hold. */ #site-header .ecg-w--image img, #dark-header .ecg-w--image img{max-width:none} /* ---------- a post written in the editor -------------------------------- The three hand-built articles under /blog/ carry their measure in builder settings: a 760px column holding 712px of 17px text. A post has no builder settings to inherit, so single.php would hand the_content the full 1280px column — which is exactly what the first published post did, 1440px of unbroken line length and no heading at all. Same measure here, so an editor-written post sits beside the designed ones instead of looking like a different site. Left-aligned, not centred, to match them. */ /* A hand-written template section gets no per-element CSS, so it has none of the page padding the generated sections carry — the first post rendered with its breadcrumb jammed into the top-left corner of the viewport. These are the designed articles' own measurements, read off /blog/undercoding/: hero 104/80/44, body 0/80/88, h1 50px. The horizontal value is the same boxed expression render_html emits, so the column lands in the same place. */ .ecg-post__hero {padding:104px max(32px,calc((100% - 1280px)/2)) 44px} .ecg-post__media{padding:0 max(32px,calc((100% - 1280px)/2)) 8px} .ecg-post__body {padding:0 max(32px,calc((100% - 1280px)/2)) 88px} .ecg-post__rel {padding:0 max(32px,calc((100% - 1280px)/2)) 96px} .ecg-post__hero > .ecg-con, .ecg-post__body > .ecg-con{max-width:772px;margin-right:auto} .ecg-post__body .ecg-prose{max-width:712px} /* 50px, not the kit's 66px h1: an article title is a sentence, and at 66px this one ran to five lines before the reader saw a word of it. */ .ecg-post__hero .ecg-h{font-size:50px;line-height:1.08;letter-spacing:-1.1px} .ecg-post__hero .ecg-postmeta{margin-top:4px} @media(max-width:1024px){ .ecg-post__hero{padding:76px max(32px,calc((100% - 1280px)/2)) 36px} .ecg-post__hero .ecg-h{font-size:38px} } @media(max-width:767px){ .ecg-post__hero{padding:56px max(20px,calc((100% - 1280px)/2)) 28px} .ecg-post__media{padding:0 max(20px,calc((100% - 1280px)/2)) 6px} .ecg-post__body {padding:0 max(20px,calc((100% - 1280px)/2)) 56px} .ecg-post__rel {padding:0 max(20px,calc((100% - 1280px)/2)) 64px} .ecg-post__hero .ecg-h{font-size:30px} } /* the_content emits bare tags, so give them the prose treatment the generated articles get from their own markup */ .ecg-prose h3{ font-family:Manrope,sans-serif;font-size:21px;font-weight:600; letter-spacing:-.3px;color:var(--e-global-color-secondary); margin:30px 0 10px} .ecg-prose ul,.ecg-prose ol{margin:0 0 24px;padding-left:22px;list-style-position:outside} .ecg-prose li{margin:0 0 8px} .ecg-prose a{text-decoration:underline;text-underline-offset:3px} .ecg-prose img{border-radius:16px;margin:8px 0 24px} .ecg-prose blockquote{ margin:24px 0;padding:18px 24px;border-left:3px solid var(--e-global-color-teal_500); background:var(--e-global-color-slate_50);border-radius:0 12px 12px 0} .ecg-prose blockquote p:last-child{margin-bottom:0} /* ---------- skip link (WCAG 2.4.1) --------------------------------------- header.php emits this as the first focusable element. It was never styled, so it rendered as visible blue text in the top-left corner of every page. Off-screen until focused, then anchored to the top-left where it is expected. Not display:none — that would take it out of the tab order and defeat the point of having it. */ .ecg-skip{ position:absolute;top:0;left:-9999px;z-index:200; padding:12px 20px;border-radius:0 0 12px 0; background:#fff;color:var(--e-global-color-primary); font-family:Inter,sans-serif;font-size:15px;font-weight:600; text-decoration:none;box-shadow:0 8px 24px -8px rgba(1,62,127,.45)} .ecg-skip:focus,.ecg-skip:focus-visible{left:0} /* ---------- WCAG 2.4.7 focus visible (Elementor ships outline:0) ---------- */ :is(a,button,.ecg-btn,summary,[tabindex]):focus-visible{ outline:2px solid var(--e-global-color-teal_600)!important; outline-offset:3px!important;border-radius:6px} .ecg-input:focus,.ecg-field select:focus{ outline:2px solid var(--e-global-color-teal_600)!important; outline-offset:1px!important; border-color:var(--e-global-color-teal_600)!important} /* ---------- ambient mesh (depth without heavy gradients, Bible §5) -------- */ .ecg-mesh{position:relative;isolation:isolate} .ecg-mesh::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(46% 40% at 12% 0%,rgba(4,161,162,.07),transparent 62%), radial-gradient(40% 36% at 92% 8%,rgba(1,62,127,.06),transparent 60%)} /* ---------- card affordance: an arrow that answers "is this clickable?" --- */ .ecg-shell .ecg-core{position:relative} .ecg-shell .ecg-core::after{ content:"→";position:absolute;right:26px;bottom:26px; font-size:15px;line-height:1;color:var(--e-global-color-teal_600); opacity:0;transform:translateX(-6px); transition:opacity .5s var(--ec-e),transform .5s var(--ec-e)} .ecg-shell:hover .ecg-core::after{opacity:1;transform:translateX(0)} .ecg-shell.ecg-noarrow .ecg-core::after{content:none} /* ---------- eyebrow pill -------------------------------------------------- Replaces bare uppercase text. Hairline capsule, optical padding. */ .ecg-pill .ecg-h{ display:inline-flex;align-items:center;gap:8px; padding:6px 14px 6px 12px;border-radius:999px; background:var(--e-global-color-teal_50); box-shadow:inset 0 0 0 1px rgba(4,161,162,.18); font-size:11px!important;letter-spacing:.16em!important; } .ecg-pill .ecg-h::before{ content:"";width:5px;height:5px;border-radius:50%; background:var(--e-global-color-teal_500);flex:none} /* keep the eyebrow on one line at phone widths */ @media(max-width:520px){ .ecg-pill .ecg-h{ font-size:10px!important;letter-spacing:.10em!important; padding:5px 12px 5px 10px} } .ecg-pill-dark .ecg-h{ background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); color:var(--e-global-color-teal_200)!important} /* ---------- discipline strip: hand-drawn inline SVG icons ---------------- Inline SVG (not an icon font) so each mark inherits currentColor and its stroke can animate. Hairline separators, generous target size. */ .ecg-disciplines{ display:grid;grid-template-columns:repeat(4,1fr);width:100%} .ecg-disc{ display:flex;flex-direction:column;align-items:center;gap:14px; padding:34px 14px;text-decoration:none;text-align:center; color:var(--e-global-color-slate_600); border-left:1px solid var(--e-global-color-slate_200); transition:color .5s var(--ec-e),background-color .5s var(--ec-e)} .ecg-disc:first-child{border-left:0} /* 8 disciplines now (brief item 5), so the strip is 4x2 at desktop: reset the left border at the start of each row and add a top border on the second */ .ecg-disc:nth-child(4n+1){border-left:0} .ecg-disc:nth-child(n+5){border-top:1px solid var(--e-global-color-slate_200)} .ecg-disc__icon{ color:var(--e-global-color-teal_600); transition:color .5s var(--ec-e),transform .6s var(--ec-e)} .ecg-disc__icon svg{display:block;width:34px;height:34px} /* slate_600 on slate_50 measured 4.35:1 — just under AA for normal text. `text` is the next token up and lands at 8.65:1. */ .ecg-disc__label{ font-family:Inter,sans-serif;font-size:13.5px;font-weight:500; letter-spacing:-.01em;line-height:1.35; /* the kit styles all with the accent colour; the label must stay slate */ color:var(--e-global-color-text);transition:color .5s var(--ec-e)} .ecg-disc:hover .ecg-disc__label{color:var(--e-global-color-secondary)} .ecg-disc:hover{color:var(--e-global-color-secondary);background:rgba(4,161,162,.045)} .ecg-disc:hover .ecg-disc__icon{ color:var(--e-global-color-primary);transform:translateY(-3px)} .ecg-disc:focus-visible{outline:2px solid var(--e-global-color-teal_600);outline-offset:-2px} @media(max-width:1024px){ .ecg-disciplines{grid-template-columns:repeat(3,1fr)} .ecg-disc:nth-child(3n+1){border-left:0} .ecg-disc:nth-child(n+4){border-top:1px solid var(--e-global-color-slate_200)} } @media(max-width:560px){ .ecg-disciplines{grid-template-columns:repeat(2,1fr)} .ecg-disc{padding:24px 10px} .ecg-disc:nth-child(3n+1){border-left:1px solid var(--e-global-color-slate_200)} .ecg-disc:nth-child(odd){border-left:0} .ecg-disc:nth-child(n+3){border-top:1px solid var(--e-global-color-slate_200)} .ecg-disc__icon svg{width:28px;height:28px} .ecg-disc__label{font-size:12px} } /* ---------- double-bezel card (outer shell + inner core) ------------------ */ /* shell/core must stretch so an asymmetric bento never leaves dead space */ .ecg-shell{display:flex} .ecg-shell > .ecg-core, .ecg-shell > .ecg-con{flex:1;width:100%} .ecg-shell{ border-radius:26px!important; background:linear-gradient(180deg,rgba(1,62,127,.05),rgba(1,62,127,.02))!important; box-shadow:inset 0 0 0 1px rgba(1,62,127,.07); transition:transform .6s var(--ec-e),box-shadow .6s var(--ec-e); } .ecg-core{ border-radius:calc(26px - 7px)!important; background:#fff!important; box-shadow:var(--ec-amb-1), inset 0 1px 0 rgba(255,255,255,.9); transition:box-shadow .6s var(--ec-e); } .ecg-shell:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(4,161,162,.35)} .ecg-shell:hover .ecg-core{box-shadow:var(--ec-amb-3), inset 0 1px 0 rgba(255,255,255,.9)} /* card interior detail: index numeral + rule that grows on hover */ .ecg-shell .ecg-idx .ecg-h{ font-variant-numeric:tabular-nums;opacity:.55;transition:opacity .5s var(--ec-e)} .ecg-shell:hover .ecg-idx .ecg-h{opacity:1} /* On navy, .55 blends teal_200 down to ~4.0:1 — under AA for 12px text. .8 puts it at ~6.5:1 while keeping the numeral subordinate to the title. */ .ecg-shell-dark .ecg-idx .ecg-h{opacity:.8} .ecg-rule{position:relative;padding-bottom:16px} /* the rule must sit BELOW the heading, not under the first word like an underline — hence the padding-bottom reserving space for it */ .ecg-rule::after{ content:"";position:absolute;left:0;bottom:0;height:2px;width:28px; background:var(--e-global-color-teal_500);border-radius:2px; transform-origin:left center;transition:transform .6s var(--ec-e)} .ecg-shell:hover .ecg-rule::after{transform:scaleX(2.1)} /* ---------- dark variant for the navy sections --------------------------- */ .ecg-shell-dark{ background:rgba(255,255,255,.04)!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)} .ecg-shell-dark .ecg-core{ background:rgba(255,255,255,.03)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06)} .ecg-shell-dark:hover{box-shadow:inset 0 0 0 1px rgba(4,161,162,.5)} .ecg-shell-dark:hover .ecg-core{box-shadow:inset 0 1px 0 rgba(255,255,255,.1)} /* ---------- button-in-button: nested arrow, magnetic hover --------------- */ .ecg-cta .ecg-btn{ border-radius:999px!important;position:relative; padding-right:14px!important; display:inline-flex;align-items:center;gap:14px; transition:transform .4s var(--ec-e),background-color .4s var(--ec-e),box-shadow .4s var(--ec-e); box-shadow:var(--ec-amb-2)} .ecg-cta .ecg-btn::after{ content:"→";flex:none;width:32px;height:32px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; background:rgba(255,255,255,.16);font-size:15px;line-height:1; transition:transform .5s var(--ec-e),background-color .5s var(--ec-e)} .ecg-cta .ecg-btn:hover::after{ transform:translate3d(3px,-1px,0) scale(1.06);background:rgba(255,255,255,.26)} .ecg-cta .ecg-btn:active{transform:scale(.985)} .ecg-cta-light .ecg-btn::after{background:rgba(1,62,127,.08)} .ecg-cta-light .ecg-btn:hover::after{background:rgba(1,62,127,.14)} /* ghost / secondary button */ .ecg-ghost .ecg-btn{ border-radius:999px!important; transition:transform .4s var(--ec-e),box-shadow .4s var(--ec-e),background-color .4s var(--ec-e); box-shadow:inset 0 0 0 1px var(--e-global-color-slate_200)} .ecg-ghost .ecg-btn:hover{ box-shadow:inset 0 0 0 1px var(--e-global-color-navy_800);transform:translateY(-1px)} .ecg-ghost .ecg-btn:active{transform:scale(.985)} /* ---------- hero video ---------------------------------------------------- */ .ecg-hero-video{position:relative;overflow:hidden} /* The section is content_width:boxed, and Elementor sizes the background-video container to that BOXED width — 1280px inside a 1728px section — so the video sat centred with the poster showing through as lighter bands down both edges. The container has to be full-bleed regardless of the content width. Elementor centres the

, and the kit's h3 global typography beats the widget's own title_typography — the questions were rendering at 25px/700 instead of the 18px/600 set on the widget, which is why they sat oddly against everything else. Forced, both themes. */ .ecg-faqs .ecg-faq__item>summary{ font-size:18px!important;font-weight:600!important; letter-spacing:-.3px!important;line-height:1.45!important} @media(max-width:767px){ .ecg-faqs .ecg-faq__item>summary{font-size:16.5px!important}} /* The accordion was a bare bordered list sitting on the grey ground, which read as unstyled next to the rest of the system. Same panel construction as .ecg-review: one rounded card, hairline dividers, generous hit areas. */ .ecg-faqs{ border-radius:20px;overflow:hidden;background:#fff; box-shadow:inset 0 0 0 1px var(--e-global-color-slate_200),var(--ec-amb-1)} .ecg-faqs .ecg-faq__item{ border:0!important; border-top:1px solid var(--e-global-color-slate_200)!important; background:transparent!important} .ecg-faqs .ecg-faq__item:first-child{border-top:0!important} .ecg-faqs .ecg-faq__item>summary{ padding:24px 28px!important;cursor:pointer; transition:background-color .35s var(--ec-e),color .35s var(--ec-e)} .ecg-faqs .ecg-faq__item>summary:hover{background:var(--e-global-color-slate_50)!important} /* Elementor's border_width applies to the content pane too, which drew a rule between an open question and its own answer — reads as a mis-drawn divider. */ .ecg-faqs .ecg-faq__a{ padding:0 28px 26px!important;border-top:0!important;border-bottom:0!important} /* ---------- collage (Prima-style image mosaic), light theme -------------- */ .ecg-collage{display:grid;gap:14px;width:100%; grid-template-columns:repeat(4,1fr);grid-auto-rows:185px} .ecg-collage__tile{ position:relative;overflow:hidden;border-radius:20px; box-shadow:var(--ec-amb-2);display:block;text-decoration:none} .ecg-collage__tile img{width:100%;height:100%;object-fit:cover;display:block; transition:transform 1.1s var(--ec-e-out)} .ecg-collage__tile:hover img{transform:scale(1.06)} /* Scrim. The previous gradient only reached .86 at the very bottom EDGE, but the label sits 17px above it — so where the text actually is, the scrim was only ~.55-.70. Measured against the brightest 8px block under each label (a sheet of paper, a bright window), white text came out at 3.70-4.30:1, under AA. These stops hold ~.80-.92 across the whole label zone, which puts the same worst cases at 7.6-9.5:1. */ .ecg-collage__tile::after{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:linear-gradient(180deg, rgba(0,45,107,0) 0%, rgba(0,45,107,.06) 30%, rgba(0,45,107,.42) 55%, rgba(0,45,107,.82) 74%, rgba(0,45,107,.94) 100%); box-shadow:inset 0 0 0 1px rgba(1,62,127,.10)} .ecg-collage__label{ position:absolute;left:20px;right:20px;bottom:17px;z-index:2; font-family:Manrope,sans-serif;font-size:15px;font-weight:600; letter-spacing:-.2px;color:#fff;margin:0; text-shadow:0 1px 3px rgba(0,18,45,.55)} .ecg-collage__stat{ background:var(--e-global-color-secondary);color:#fff; display:flex;flex-direction:column;justify-content:center; padding:24px;border-radius:20px} .ecg-collage__stat b{ font-family:Manrope,sans-serif;font-size:30px;font-weight:600; letter-spacing:-1px;line-height:1.05;display:block} .ecg-collage__stat span{ font-size:13.5px;line-height:1.5;color:var(--e-global-color-slate_300); margin-top:8px;display:block} /* spans */ .ecg-collage .t-wide{grid-column:span 2} .ecg-collage .t-tall{grid-row:span 2} @media(max-width:1024px){ .ecg-collage{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px} .ecg-collage .t-wide{grid-column:span 2} } @media(max-width:600px){ .ecg-collage{grid-template-columns:1fr;grid-auto-rows:170px;gap:12px} .ecg-collage .t-wide,.ecg-collage .t-tall{grid-column:auto;grid-row:auto} } /* ---------- accordion polish -------------------------------------------- */ .ecg-faqs .ecg-faq__item>summary{transition:color .4s var(--ec-e)} .ecg-faqs .ecg-faq__icon svg, .ecg-faqs .ecg-faq__icon i{transition:transform .5s var(--ec-e)} .ecg-faqs .ecg-faq__item>summary[open] .ecg-faq__icon{transform:rotate(180deg)} /* ---------- stat / metric rail ------------------------------------------ */ .ecg-rail{position:relative;padding-left:20px} .ecg-rail::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px; border-radius:2px; background:linear-gradient(180deg,var(--e-global-color-teal_500),transparent)} /* ---------- reduced motion ---------------------------------------------- */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important;transition-duration:.01ms!important; scroll-behavior:auto!important} .ecg-frame:hover img{transform:none} } /* ========================================================================== DARK THEME — /dark/ (page-id-81) Second version, Prima Systems-inspired. Scoped so nothing leaks into the light site. Accent is the brand teal, not Prima red — see build_dark.py. ========================================================================== */ /* the global light header/footer are suppressed; the dark page ships its own */ .page-id-81 #site-header, .page-id-81 #site-footer{display:none!important} .page-id-81{background:#0A0B0D} /* floating pill nav */ .ecg-d-header{ backdrop-filter:saturate(160%) blur(16px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); transition:background-color .5s var(--ec-e),box-shadow .5s var(--ec-e)} .ecg-d-header.ecg-stuck{ background:rgba(10,11,13,.88)!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 18px 40px -22px #000} .ecg-d-nav{display:flex;gap:30px;justify-content:center;margin:0} .ecg-d-nav a{ color:#E8EAED;text-decoration:none;font-size:14px;font-weight:500; opacity:.82;transition:opacity .4s var(--ec-e),color .4s var(--ec-e)} .ecg-d-nav a:hover{opacity:1;color:#43B8B9} /* eyebrow pill on dark */ .ecg-d-pill .ecg-h{ display:inline-flex;align-items:center;gap:8px; padding:6px 15px 6px 12px;border-radius:999px; background:rgba(67,184,185,.10); box-shadow:inset 0 0 0 1px rgba(67,184,185,.30); font-size:11px!important;letter-spacing:.16em!important} .ecg-d-pill .ecg-h::before{ content:"";width:5px;height:5px;border-radius:50%;background:#43B8B9;flex:none} /* buttons */ .ecg-d-cta .ecg-btn{ border-radius:999px!important;display:inline-flex;align-items:center;gap:13px; padding-right:14px!important;font-weight:600; transition:transform .4s var(--ec-e),background-color .4s var(--ec-e),box-shadow .4s var(--ec-e); box-shadow:0 14px 34px -16px rgba(67,184,185,.75)} .ecg-d-cta .ecg-btn::after{ content:"→";flex:none;width:32px;height:32px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; background:rgba(10,11,13,.16);font-size:15px;line-height:1; transition:transform .5s var(--ec-e)} .ecg-d-cta .ecg-btn:hover::after{transform:translate3d(3px,-1px,0) scale(1.06)} .ecg-d-cta .ecg-btn:active{transform:scale(.985)} .ecg-d-ghost .ecg-btn{ border-radius:999px!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); transition:box-shadow .4s var(--ec-e),background-color .4s var(--ec-e)} .ecg-d-ghost .ecg-btn:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)} /* hero */ .ecg-d-hero{position:relative;overflow:hidden} .ecg-d-hero::after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 80% at 50% 0%,rgba(67,184,185,.16),transparent 60%)} .ecg-d-hero > .ecg-con{position:relative;z-index:2} .ecg-herocert-dark .ecg-w--image{background:rgba(255,255,255,.94)} /* bento mosaic */ .ecg-d-tile{ position:relative;overflow:hidden;border-radius:20px!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); padding:0!important;justify-content:flex-end} .ecg-d-tile .ecg-w--image{position:absolute;inset:0;margin:0} .ecg-d-tile img{width:100%;height:100%;object-fit:cover;display:block; transition:transform 1.1s var(--ec-e-out)} .ecg-d-tile:hover img{transform:scale(1.06)} /* same correction as the light collage — full strength across the label zone, not only at the bottom edge */ .ecg-d-tile::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg, rgba(10,11,13,0) 0%, rgba(10,11,13,.06) 30%, rgba(10,11,13,.44) 55%, rgba(10,11,13,.84) 74%, rgba(10,11,13,.95) 100%)} .ecg-d-tilelabel{position:relative;z-index:2;padding:0 22px 20px} .ecg-d-tilelabel .ecg-h{text-shadow:0 1px 3px rgba(0,0,0,.6)} /* marquee */ .ecg-d-marqwrap{overflow:hidden} .ecg-marquee{ overflow:hidden;border-top:1px solid rgba(255,255,255,.10); border-bottom:1px solid rgba(255,255,255,.10); padding:20px 0;transform:rotate(-1.4deg) scale(1.04); background:rgba(67,184,185,.05)} .ecg-marquee__track{ display:inline-flex;gap:26px;white-space:nowrap; will-change:transform;animation:ecg-marq 34s linear infinite} .ecg-marquee__track span, .ecg-marquee__set li{ font-family:Manrope,sans-serif;font-size:26px;font-weight:700; letter-spacing:-.6px;color:rgba(232,234,237,.62)} .ecg-marquee__track span[aria-hidden]{color:#43B8B9} /* The band carries seven DIFFERENT lines now (see marquee.py), so the halves are no longer interchangeable: the track must hold two complete sets or the -50% keyframe jumps mid-phrase. The separator is a pseudo-element rather than a real node, so the dots never reach the accessibility tree or the crawlable text -- six stray "·" between sentences read badly in both. */ .ecg-marquee__set{ display:inline-flex;align-items:center;gap:26px; margin:0;padding:0;list-style:none} .ecg-marquee__set li::after{ content:'\00B7';margin-left:26px;color:#43B8B9} @keyframes ecg-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(max-width:767px){ .ecg-marquee__track span, .ecg-marquee__set li{font-size:18px} .ecg-marquee__set{gap:16px} .ecg-marquee__set li::after{margin-left:16px} } /* Light-theme variant of the same strip (brief item 9 — bring it from /dark/ onto the white site). Navy band rather than the dark site's translucent teal, so it reads as a deliberate divider on white rather than a washed-out ghost. */ .ecg-marqwrap-light{overflow:hidden} .ecg-marquee--light{ background:var(--e-global-color-secondary); border-top:0;border-bottom:0} .ecg-marquee--light .ecg-marquee__track span, .ecg-marquee--light .ecg-marquee__set li{color:rgba(255,255,255,.72)} .ecg-marquee--light .ecg-marquee__track span[aria-hidden], .ecg-marquee--light .ecg-marquee__set li::after{color:#43B8B9} /* dark cards */ .ecg-d-card{ border-radius:20px!important;background:#131519!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); transition:transform .6s var(--ec-e),box-shadow .6s var(--ec-e)} .ecg-d-card:hover{ transform:translateY(-4px); box-shadow:inset 0 0 0 1px rgba(67,184,185,.42),0 26px 60px -30px #000} /* icon chip */ .ecg-d-chip{ display:inline-flex;align-items:center;justify-content:center; width:48px;height:48px;border-radius:14px; background:rgba(67,184,185,.12);color:#43B8B9; box-shadow:inset 0 0 0 1px rgba(67,184,185,.26); transition:background-color .5s var(--ec-e),transform .5s var(--ec-e)} .ecg-d-chip svg{width:24px;height:24px} .ecg-d-card:hover .ecg-d-chip{background:rgba(67,184,185,.22);transform:translateY(-2px)} /* Cross-links to the other five services. This class was emitted by build_services.py but never defined, so the anchors rendered as one run-together string ("Medical billingMedical codingAR recovery…"). */ .ecg-rellinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .ecg-rellinks a{ display:inline-flex;align-items:center;gap:8px; padding:9px 16px;border-radius:999px;text-decoration:none; font-size:14px;font-weight:600; color:var(--e-global-color-secondary); background:#fff;box-shadow:inset 0 0 0 1px var(--e-global-color-slate_200); transition:box-shadow .4s var(--ec-e),transform .4s var(--ec-e),color .4s var(--ec-e)} .ecg-rellinks a::after{content:"→";opacity:.45;transition:transform .4s var(--ec-e)} .ecg-rellinks a:hover{ color:var(--e-global-color-accent);transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--e-global-color-teal_500),var(--ec-amb-1)} .ecg-rellinks a:hover::after{transform:translateX(3px)} /* Service-page hero medallion. Like .ecg-rellinks, these classes were emitted by build_services.py but never defined: the wrapper was display:inline and the SVG resolved to 0x0, so all six service heroes had a dead right-hand column. Sized here, with the discipline icon set in a soft concentric ring that echoes the double-bezel cards. */ .ecg-svc-markwrap{ display:flex;align-items:center;justify-content:center;width:100%; min-height:260px} .ecg-svc-markwrap .ecg-w--text{width:auto} .ecg-svc-mark{ display:flex;align-items:center;justify-content:center; width:188px;height:188px;border-radius:50%; color:var(--e-global-color-primary); background: radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,.55)); box-shadow: inset 0 0 0 1px var(--e-global-color-slate_200), 0 0 0 14px rgba(4,161,162,.05), 0 0 0 15px rgba(4,161,162,.12), var(--ec-amb-2); transition:transform .6s var(--ec-e),box-shadow .6s var(--ec-e)} .ecg-svc-mark svg{ width:78px;height:78px;stroke:currentColor;fill:none; stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round} .ecg-svc-markwrap:hover .ecg-svc-mark{ transform:translateY(-3px); box-shadow: inset 0 0 0 1px var(--e-global-color-teal_500), 0 0 0 14px rgba(4,161,162,.07), 0 0 0 15px rgba(4,161,162,.20), var(--ec-amb-2)} @media(max-width:1024px){ .ecg-svc-markwrap{min-height:0;padding-top:8px} .ecg-svc-mark{width:132px;height:132px} .ecg-svc-mark svg{width:56px;height:56px} } /* Revenue-assessment review areas — 3x2 grid. Was six Elementor containers at width 48% inside a 46% column; Elementor ignored the width and stacked them one per row. A real CSS grid is both simpler and reliable. */ .ecg-review{ display:grid;gap:1px;width:100%; /* auto-fit, NOT repeat(3,1fr). The hairline dividers are this container's background showing through the 1px gap, so a column with no card in it renders as a solid slate block — which is the grey panel that appeared on the nine pages whose topic filter matches only two quotes. auto-fit collapses the empty track instead, and the 320px floor still yields three columns in the 1232px container (so the homepage keeps its 3x2), two at tablet and one on a phone. The media queries below stay as a backstop. */ grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); background:var(--e-global-color-slate_200); border:1px solid var(--e-global-color-slate_200); border-radius:20px;overflow:hidden} .ecg-review__cell{ background:#fff;padding:32px 30px 34px; transition:background-color .45s var(--ec-e)} .ecg-review__cell:hover{background:var(--e-global-color-slate_50)} .ecg-review__n{ display:block;font-family:Inter,sans-serif;font-size:11px;font-weight:700; letter-spacing:1.4px;color:var(--e-global-color-accent); font-variant-numeric:tabular-nums} .ecg-review__t{ margin:12px 0 0;font-family:Manrope,sans-serif;font-size:19px;font-weight:600; letter-spacing:-.3px;color:var(--e-global-color-secondary)} .ecg-review__d{ margin:8px 0 0;font-family:Inter,sans-serif;font-size:15px;line-height:1.7; color:var(--e-global-color-text)} @media(max-width:1024px){.ecg-review{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}} @media(max-width:600px){ .ecg-review{grid-template-columns:1fr} .ecg-review__cell{padding:26px 22px 28px} } /* giant outlined numeral */ .ecg-d-bignum .ecg-h{ -webkit-text-stroke:1.5px rgba(255,255,255,.20); color:transparent!important;line-height:.9; font-variant-numeric:tabular-nums; transition:-webkit-text-stroke-color .6s var(--ec-e)} .ecg-d-bignum:hover .ecg-h{-webkit-text-stroke-color:#43B8B9} /* Dark accordion. Elementor's global slots resolve to the light theme, and the kit's `:root a` rule outranks single-class selectors here too, so the dark FAQ has to be pinned rather than inherited. #E8EAED on #131519 = 15.1:1 · #9AA0A8 on #131519 = 6.9:1 · teal #43B8B9 = 7.6:1 */ /* ========================================================================== MEGA MENU — DARK .ecg-mm--dark was emitted by megamenu.py from the start but never styled, so the dark page shipped with three plain anchor links instead. Same markup and same JS as light; only the skin differs. ========================================================================== */ /* CSS sticky, for the same reason as the light header: Elementor's sticky clones the header and would duplicate every mega-menu id on this page. */ #dark-header{position:sticky;top:14px;z-index:60} /* the panel spans the header, so everything between must be static */ #dark-header .ecg-con,#dark-header .ecg-con, #dark-header .ecg-w,#dark-header .ecg-mm--dark{position:static} .ecg-mm--dark .ecg-mm__top, .ecg-mm--dark .ecg-mm__trigger{color:#E8EAED!important} /* 15.2:1 on the pill */ .ecg-mm--dark .ecg-mm__top:hover, .ecg-mm--dark .ecg-mm__trigger:hover, .ecg-mm--dark .ecg-mm__trigger[aria-expanded="true"]{ color:#fff;background:rgba(255,255,255,.08)} .ecg-mm--dark .ecg-mm__top:focus-visible, .ecg-mm--dark .ecg-mm__trigger:focus-visible{outline-color:#43B8B9} .ecg-mm--dark .ecg-mm__inner{ background:#131519;border:1px solid rgba(255,255,255,.10); box-shadow:0 30px 80px -24px rgba(0,0,0,.85)} .ecg-mm--dark .ecg-mm__eyebrow{color:#43B8B9} /* 7.9:1 on #131519 */ .ecg-mm--dark .ecg-mm__item:hover{background:rgba(255,255,255,.05)} .ecg-mm--dark .ecg-mm__ico{background:rgba(67,184,185,.14);color:#43B8B9} .ecg-mm--dark .ecg-mm__item:hover .ecg-mm__ico{background:#43B8B9;color:#0A0B0D} .ecg-mm--dark .ecg-mm__txt strong{color:#E8EAED!important} /* 15.2:1 */ .ecg-mm--dark .ecg-mm__txt em{color:#9AA0A8!important} /* 6.9:1 */ /* promo cell — teal on near-black rather than the light theme's navy card */ .ecg-mm--dark .ecg-mm__promo{background:rgba(67,184,185,.09); border:1px solid rgba(67,184,185,.20)} .ecg-mm--dark .ecg-mm__promoh{color:#E8EAED} .ecg-mm--dark .ecg-mm__promod{color:#9AA0A8} .ecg-mm--dark .ecg-mm__promocta{background:#43B8B9;color:#0A0B0D!important} /* 8.3:1 */ .ecg-mm--dark .ecg-mm__promocta:hover{background:#70D1D1} .ecg-mm--dark .ecg-mm__promoalt{color:#9AA0A8!important} .ecg-mm--dark .ecg-mm__promoalt:hover{color:#fff!important} /* Burger stays inside .ecg-mm, so it can be scoped normally. */ .ecg-mm--dark .ecg-mm__burger{ background:rgba(255,255,255,.07)!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} .ecg-mm--dark .ecg-mm__burger span{background:#E8EAED!important} /* The DRAWER is portalled to while open and leaves .ecg-mm entirely, so it carries its own modifier (set in megamenu.py). Scoping these under .ecg-mm--dark would silently revert them to light exactly when opened. */ .ecg-mm__bar--dark{background:#131519} .ecg-mm__bar--dark .ecg-mm__close{ background:rgba(255,255,255,.07)!important;color:#E8EAED!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} .ecg-mm__bar--dark .ecg-mm__top, .ecg-mm__bar--dark .ecg-mm__trigger{color:#E8EAED!important} .ecg-mm__bar--dark .ecg-mm__top:hover, .ecg-mm__bar--dark .ecg-mm__trigger:hover{background:rgba(255,255,255,.08);color:#fff} .ecg-mm__bar--dark .ecg-mm__inner{ background:#131519;border-color:rgba(255,255,255,.10)} .ecg-mm__bar--dark .ecg-mm__txt strong{color:#E8EAED!important} .ecg-mm__bar--dark .ecg-mm__txt em{color:#9AA0A8!important} .ecg-mm__bar--dark .ecg-mm__ico{background:rgba(67,184,185,.14);color:#43B8B9} .ecg-mm__bar--dark .ecg-mm__eyebrow{color:#43B8B9} .ecg-mm__bar--dark .ecg-mm__promo{ background:rgba(67,184,185,.09);border:1px solid rgba(67,184,185,.20)} .ecg-mm__bar--dark .ecg-mm__promoh{color:#E8EAED} .ecg-mm__bar--dark .ecg-mm__promod{color:#9AA0A8} .ecg-mm__bar--dark .ecg-mm__promocta{background:#43B8B9;color:#0A0B0D!important} .ecg-mm__bar--dark .ecg-mm__promoalt{color:#9AA0A8!important} /* dark: undo the light panel construction above */ .ecg-d-faq .ecg-faqs{ background:rgba(255,255,255,.03)!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)!important} .ecg-d-faq .ecg-faqs .ecg-faq__item{ border-top-color:rgba(255,255,255,.10)!important} .ecg-d-faq .ecg-faqs .ecg-faq__item>summary:hover{ background:rgba(255,255,255,.04)!important} .ecg-d-faq .ecg-faqs .ecg-faq__item>summary{ background:transparent!important; border-color:rgba(255,255,255,.12)!important} .ecg-d-faq .ecg-faqs .ecg-faq__item>summary a, .ecg-d-faq .ecg-faqs .ecg-faq__item>summary{color:#E8EAED!important} .ecg-d-faq .ecg-faqs .ecg-faq__item>summary[open], .ecg-d-faq .ecg-faqs .ecg-faq__item>summary[open] a{ color:#43B8B9!important} .ecg-d-faq .ecg-faqs .ecg-faq__a{ background:transparent!important;color:#9AA0A8!important; border-color:rgba(255,255,255,.12)!important} .ecg-d-faq .ecg-faqs .ecg-faq__item{ border-color:rgba(255,255,255,.12)!important;background:transparent!important} /* dark photograph treatment — matches .ecg-frame on light */ .ecg-d-shot img{ width:100%;display:block;border-radius:20px; box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px -24px rgba(0,0,0,.8); filter:saturate(.92) contrast(1.02)} /* certification chip on dark — marks never recoloured */ .ecg-d-certchip{ background:#fff;border-radius:14px;padding:14px 20px; display:inline-flex;align-items:center;justify-content:center; width:auto!important;align-self:center} .ecg-d-certchip img{height:62px!important;width:auto!important;display:block} /* dark cta band */ .ecg-d-ctaband{position:relative;overflow:hidden;background:#0A0B0D} .ecg-d-ctaband::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(90% 120% at 50% 100%,rgba(67,184,185,.18),transparent 62%)} .ecg-d-ctaband > .ecg-con{position:relative;z-index:2} /* The dark header is a fixed 26% / 48% / 26% row. At 375px that leaves 97px for a ~140px button, so "Get in touch" is pushed past the right edge — on the live site it causes the page to pan sideways; here it would simply be clipped. Neither is acceptable, so the three columns size to their content on a phone instead. Scoped to #dark-header: the main site's header already solves this by swapping to a compact CTA below 1200px. */ @media(max-width:767px){ #dark-header .ecg-con{width:auto;flex:0 1 auto;min-width:0} #dark-header .ecg-btn{padding:10px 15px;font-size:13.5px;white-space:nowrap} #dark-header .ecg-w--image img{width:118px} } /* dark footer links */ .ecg-d-flinks{display:flex;flex-direction:column;gap:11px;margin:0} .ecg-d-flinks a{color:#9AA0A8;text-decoration:none; transition:color .4s var(--ec-e)} .ecg-d-flinks a:hover{color:#fff} #dark-footer .ecg-d-flinks p{margin:0} @media(prefers-reduced-motion:reduce){ .ecg-marquee__track{animation:none} .ecg-d-tile:hover img{transform:none} } /* ========================================================================== MEGA MENU Hand-built: Elementor's Nav Menu cannot do icons + per-item descriptions + a promo cell. Real links inside a real