/* =========================================================
IntecPros HOME PAGE CSS — cleaned/sequenced working copy
Source: complete-intepros-css-071026-1205am.txt
PURPOSE
- Home page CSS only.
- Sequenced in actual Home page visual order.
- Temporary final overrides have been folded into their sections
where safe.
- Obvious failed/legacy Home experiments have been removed from
this working copy.
- No design improvements were intentionally introduced. Values
reflect the current accepted/tuned desktop state as represented
in the uploaded CSS and recent Home page work.
IMPORTANT USE NOTE
- This is NOT a full intecpros.css replacement.
- Use this as the cleaned Home-page section replacement layer.
- Non-Home CSS sections, footer CSS, Services CSS, About/Contact/
Insights/Industries/AI page CSS are not included here.
- Before replacing production CSS, compare this against the live
front end after clearing cache.
KADENCE-FIRST NOTE
- Background images, row/column native padding, and simple background
colors should remain Kadence-controlled whenever possible.
- CSS below is used mainly where Kadence output needs stable page-wide
alignment, grid behavior, or responsive correction.
CLEANUP SUMMARY
Removed/left out from this Home-only working copy:
- Old legacy Industry experiments that targeted .intec-industry-card
and several abandoned Kadence-row structures.
- Failed Industry card-spread experiments targeting nonexistent
.kt-row-column-wrap under WordPress Columns.
- Duplicate service-card inner spacing correction that is now folded
into the Advisory + Services section.
- Failed CTA white-background overrides that affected the blue band
and removed the curved/green accent.
- Test/diagnostic outline and pink/red background rules.
- Hero background-size experiments from earlier image-ratio testing.
SECTION INDEX
01. Home page shared standards and notes
02. Hero section
03. Modernization flow section
04. Advisory + Services section
05. AI Operations + Agent Workflow section
06. Industries card section
07. Advisory depth process section
08. Final CTA section
09. Home page responsive carry-forward rules
========================================================= */
/* =========================================================
SECTION 01 | HOME PAGE SHARED STANDARDS AND NOTES
========================================================= */
/* ---------------------------------------------------------
Shared Home visual standards used by the cleaned sections.
These are comments only, not CSS variables, so they do not
change the site.
---------------------------------------------------------
Page rail:
- Desktop Home sections are visually constrained to 1240px.
Section heading standard:
- 26px / 600 / line-height 1.22
- Blue #001FB1
Body copy standard:
- 14px / 400 / line-height around 1.45–1.5
- var(--global-palette2) where possible
Card title standard:
- Service-card titles: 15px / 600
- Industry-card titles: 18px / 700
- Advisory depth circle titles: 16px / 700
Kadence-first:
- Background images and simple row/column background colors should
be adjusted in Kadence first unless CSS is required.
--------------------------------------------------------- */
/* =========================================================
SECTION 02 | HOME PAGE | HERO
========================================================= */
/* ---------------------------------------------------------
Hero bounded canvas
Keeps the Home hero inside the accepted 1240px page rail.
The actual hero background image should remain Kadence-managed.
Earlier background-size experiments were intentionally removed.
--------------------------------------------------------- */
@media (min-width: 1025px) {
.wp-block-kadence-rowlayout.intec-hero-row {
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
overflow: hidden !important;
}
}
/* ---------------------------------------------------------
Desktop hero column structure
Keeps the copy and visual field aligned if the image column is
visible. If the right image block is hidden, this remains harmless.
--------------------------------------------------------- */
@media (min-width: 1025px) {
.intec-hero-row .kt-row-column-wrap {
display: grid !important;
grid-template-columns: minmax(0, 53fr) minmax(0, 47fr) !important;
align-items: center !important;
}
.intec-hero-art-section,
.intec-hero-art-section .kt-inside-inner-col {
overflow: visible !important;
}
/* Legacy/right-column image support.
Keep for now because tablet/mobile may still rely on the image block.
Do not use this to scale the Kadence background image. */
.intec-hero-art-section img {
width: 600px !important;
max-width: none !important;
height: auto !important;
transform: translateX(-20px);
}
}
/* ---------------------------------------------------------
Hero copy spacing refinement
Requires these paragraph classes:
- .intec-hero-lead-copy
- .intec-hero-support-copy
--------------------------------------------------------- */
@media (min-width: 1025px) {
.intec-hero-row .intec-hero-lead-copy {
margin: 22px 0 16px 0 !important;
padding: 0 !important;
font-size: 16px !important;
line-height: 1.6 !important;
font-weight: 500 !important;
}
.intec-hero-row .intec-hero-support-copy {
margin: 0 0 22px 0 !important;
padding: 0 !important;
font-size: 16px !important;
line-height: 1.6 !important;
font-weight: 500 !important;
}
}
/* ---------------------------------------------------------
Tablet hero one-column background structure
The old right-side image column has been removed.
Tablet now uses the Hero Row background image only.
Alignment, width, padding, and background position should
be controlled in Kadence first.
--------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
/* Keep the hero as a single-column row */
.intec-hero-row .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1fr !important;
}
/* Preserve the accepted tablet heading scale only */
.intec-hero-heading-line,
.intec-hero-heading-line .kt-adv-heading,
.intec-hero-heading-line h1,
.intec-hero-heading-line h2 {
font-size: 42px !important;
line-height: 1.08 !important;
margin-top: 0 !important;
margin-bottom: 4px !important;
}
}
/* ---------------------------------------------------------
Tablet hero paragraph safe zone
Kadence controls text alignment, but Kadence does not expose
paragraph max-width here. This keeps hero copy from running
across the background illustration.
--------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
.intec-hero-row .intec-hero-lead-copy,
.intec-hero-row .intec-hero-support-copy {
max-width: 520px !important;
margin-left: 0 !important;
margin-right: auto !important;
text-align: left !important;
}
}
/* ---------------------------------------------------------
Mobile hero structure
Current Home hero uses a Kadence Row Layout background image.
Spacing, background size, and background position are controlled
in Kadence mobile settings.
--------------------------------------------------------- */
@media (max-width: 767px) {
.intec-hero-row {
overflow: hidden !important;
}
.intec-hero-row > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1fr !important;
}
}
/* ---------------------------------------------------------
Small-phone hero typography
Keeps the accepted mobile heading scale.
Hero spacing remains controlled in Kadence.
--------------------------------------------------------- */
@media (max-width: 480px) {
.intec-hero-heading-line,
.intec-hero-heading-line .kt-adv-heading,
.intec-hero-heading-line h1,
.intec-hero-heading-line h2 {
font-size: 30px !important;
line-height: 1.08 !important;
margin-top: 0 !important;
margin-bottom: 4px !important;
}
.intec-hero-row p {
font-size: 15px !important;
line-height: 1.55 !important;
}
}
/* =========================================================
SECTION 03 | HOME PAGE | MODERNIZATION FLOW
========================================================= */
/* ---------------------------------------------------------
Modernization section reset
Removes accidental top/bottom border or margin from this band.
--------------------------------------------------------- */
.intec-modernization-section {
margin-top: 0 !important;
margin-bottom: 0 !important;
border-top: none !important;
border-bottom: none !important;
}
/* ---------------------------------------------------------
Modernization bounded canvas
Keeps the light section background inside the 1240px rail.
--------------------------------------------------------- */
.wp-block-kadence-rowlayout.intec-modernization-flow-section {
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
overflow: hidden !important;
}
/* ---------------------------------------------------------
Modernization row height cleanup
Prevents Kadence wrappers from adding fixed height.
--------------------------------------------------------- */
.intec-modernization-section > .kt-row-layout-inner,
.intec-modernization-section > .kt-row-layout-inner > .kt-row-column-wrap,
.intec-modernization-section > .kt-row-column-wrap,
.intec-modernization-section .kt-row-column-wrap {
min-height: 0 !important;
height: auto !important;
}
/* ---------------------------------------------------------
Modernization heading
--------------------------------------------------------- */
.intec-modernization-title,
.intec-modernization-title *,
.intec-modernization-title .kt-adv-heading {
color: #001FB1 !important;
font-size: 26px !important;
line-height: 1.22 !important;
font-weight: 600 !important;
margin-top: 0 !important;
margin-bottom: 8px !important;
text-align: center !important;
}
/* ---------------------------------------------------------
Modernization intro copy
--------------------------------------------------------- */
.intec-modernization-intro,
.intec-modernization-intro *,
.intec-modernization-intro p {
max-width: 760px !important;
margin-top: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 12px !important;
text-align: center !important;
font-size: 14px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
color: var(--global-palette2) !important;
}
/* ---------------------------------------------------------
Modernization icon-flow container
Width supports seven 80px icons and six 60px arrow lanes.
--------------------------------------------------------- */
.intec-modernization-icon-flow {
max-width: 980px !important;
margin: 10px auto 0 auto !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ---------------------------------------------------------
Modernization desktop icon-flow grid
Structure: icon / arrow / icon / arrow ... / icon.
--------------------------------------------------------- */
.intec-modernization-icon-flow .kt-row-column-wrap {
display: grid !important;
grid-template-columns:
80px 60px
80px 60px
80px 60px
80px 60px
80px 60px
80px 60px
80px !important;
justify-content: center !important;
align-items: start !important;
column-gap: 0 !important;
row-gap: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ---------------------------------------------------------
Modernization step cells
--------------------------------------------------------- */
.intec-flow-step-cell,
.intec-flow-step-cell .kt-inside-inner-col {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: center !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.intec-flow-step-cell figure,
.intec-flow-step-cell figure.wp-block-image,
.intec-flow-step-cell .wp-block-image {
margin: 0 auto -3px auto !important;
padding: 0 !important;
}
.intec-flow-step-cell img {
width: 80px !important;
max-width: 80px !important;
height: 80px !important;
object-fit: contain !important;
display: block !important;
}
.intec-flow-step-cell p {
color: var(--global-palette2) !important;
font-size: 14px !important;
line-height: 1.15 !important;
font-weight: 600 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
text-align: center !important;
white-space: nowrap !important;
}
/* ---------------------------------------------------------
Modernization arrow cells and connector line
--------------------------------------------------------- */
.intec-flow-arrow-cell,
.intec-flow-arrow-cell .kt-inside-inner-col {
position: relative !important;
height: 80px !important;
min-height: 80px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.intec-flow-arrow-cell .kt-inside-inner-col::before {
content: "";
position: absolute;
top: 40px;
left: -14px;
right: -14px;
height: 2px;
background: #9BD8AC;
z-index: 0;
}
.intec-flow-arrow-cell p {
width: 22px !important;
height: 22px !important;
border-radius: 999px !important;
background: #17B35B !important;
color: #ffffff !important;
font-size: 14px !important;
line-height: 22px !important;
font-weight: 800 !important;
text-align: center !important;
margin: 0 !important;
position: relative !important;
z-index: 1 !important;
}
/* ---------------------------------------------------------
Modernization tablet and mobile flow
--------------------------------------------------------- */
/* ---------------------------------------------------------
Modernization tablet flow
Keeps the seven-step flow on one compact line on tablet.
Desktop keeps larger spacing; mobile still stacks.
--------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
.intec-modernization-icon-flow {
max-width: 820px !important;
margin-top: 12px !important;
}
.intec-modernization-icon-flow .kt-row-column-wrap {
display: grid !important;
grid-template-columns:
74px 38px
74px 38px
74px 38px
74px 38px
74px 38px
74px 38px
74px !important;
justify-content: center !important;
align-items: start !important;
column-gap: 0 !important;
row-gap: 0 !important;
}
.intec-flow-step-cell img {
width: 72px !important;
max-width: 72px !important;
height: 72px !important;
}
.intec-flow-arrow-cell,
.intec-flow-arrow-cell .kt-inside-inner-col {
height: 72px !important;
min-height: 72px !important;
}
.intec-flow-arrow-cell .kt-inside-inner-col::before {
top: 36px !important;
left: -10px !important;
right: -10px !important;
}
.intec-flow-step-cell p {
font-size: 13px !important;
line-height: 1.15 !important;
}
}
@media (max-width: 640px) {
.intec-modernization-title,
.intec-modernization-title *,
.intec-modernization-title .kt-adv-heading {
font-size: 24px !important;
line-height: 1.24 !important;
}
.intec-modernization-icon-flow .kt-row-column-wrap {
grid-template-columns: 1fr !important;
row-gap: 22px !important;
}
.intec-flow-arrow-cell {
display: none !important;
}
.intec-flow-step-cell img {
width: 82px !important;
max-width: 82px !important;
height: 82px !important;
}
}
/* ---------------------------------------------------------
Modernization mobile down-arrow connectors
Compact vertical connectors with a little breathing room
between stacked modernization icons.
--------------------------------------------------------- */
@media (max-width: 640px) {
.intec-modernization-icon-flow .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1fr !important;
justify-items: center !important;
row-gap: 0 !important;
}
.intec-flow-arrow-cell,
.intec-flow-arrow-cell .kt-inside-inner-col {
position: relative !important;
display: flex !important;
width: 100% !important;
height: 38px !important;
min-height: 38px !important;
align-items: center !important;
justify-content: center !important;
margin: 0 0 4px 0 !important;
padding: 0 !important;
}
/* Hide original horizontal/right-arrow content */
.intec-flow-arrow-cell .kt-inside-inner-col > * {
display: none !important;
}
/* Vertical green connector line */
.intec-flow-arrow-cell .kt-inside-inner-col::before {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 2px !important;
height: 46px !important;
transform: translate(-50%, -50%) translateY(6px) !important;
display: block !important;
background: rgba(22, 163, 74, 0.75) !important;
border-radius: 999px !important;
z-index: 1 !important;
}
/* Down-arrow circle centered between icons */
.intec-flow-arrow-cell .kt-inside-inner-col::after {
content: "↓" !important;
position: relative !important;
z-index: 2 !important;
transform: translateY(6px) !important;
width: 22px !important;
height: 22px !important;
border-radius: 999px !important;
background: #16A34A !important;
color: #ffffff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 15px !important;
line-height: 1 !important;
font-weight: 800 !important;
overflow: visible !important;
}
}
/* =========================================================
SECTION 04 | HOME PAGE | ADVISORY + SERVICES
========================================================= */
/* ---------------------------------------------------------
Advisory + Services section canvas
--------------------------------------------------------- */
.intec-advisory-services-section {
background: #ffffff !important;
}
.wp-block-kadence-rowlayout.intec-advisory-services-section {
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
overflow: hidden !important;
}
.intec-advisory-services-section > .kt-row-column-wrap {
max-width: 100% !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
align-items: flex-start !important;
}
/* ---------------------------------------------------------
Desktop split
Left advisory column: 34%
Right service-card column: 66%
--------------------------------------------------------- */
@media (min-width: 1025px) {
.intec-advisory-services-section > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: minmax(0, 34fr) minmax(0, 66fr) !important;
column-gap: 0 !important;
}
}
/* ---------------------------------------------------------
Left advisory column
--------------------------------------------------------- */
.intec-advisory-left {
border-right: 1px solid #DDE5EF !important;
padding-right: 32px !important;
}
.intec-advisory-left h1,
.intec-advisory-left h2,
.intec-advisory-left h3,
.intec-advisory-left .kt-adv-heading {
color: #001FB1 !important;
font-size: 26px !important;
line-height: 1.22 !important;
font-weight: 600 !important;
margin-top: 0 !important;
margin-bottom: 14px !important;
}
.intec-advisory-left > .kt-inside-inner-col > p {
color: var(--global-palette2) !important;
font-size: 14px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
margin-top: 0 !important;
margin-bottom: 24px !important;
}
/* ---------------------------------------------------------
Left advisory checklist
--------------------------------------------------------- */
.intec-advisory-checklist-grid {
margin-top: 16px !important;
}
.intec-advisory-checklist-grid .wp-block-column {
padding-left: 0 !important;
padding-right: 0 !important;
}
.intec-advisory-checklist ul {
list-style: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
margin-bottom: 0 !important;
}
.intec-advisory-checklist li {
position: relative !important;
padding-left: 28px !important;
margin-bottom: 18px !important;
color: var(--global-palette2) !important;
font-size: 14px !important;
line-height: 1.45 !important;
font-weight: 400 !important;
}
.intec-advisory-checklist li::before {
content: "\2713";
position: absolute;
left: 0;
top: 0;
color: #00B050;
font-weight: 900;
}
/* ---------------------------------------------------------
Right services column
--------------------------------------------------------- */
.intec-services-right {
padding-left: 44px !important;
}
.intec-services-panel-title,
.intec-services-panel-title *,
.intec-services-panel-title .kt-adv-heading {
color: #001FB1 !important;
font-size: 26px !important;
line-height: 1.22 !important;
font-weight: 600 !important;
margin-top: 0 !important;
margin-bottom: 14px !important;
text-align: left !important;
}
/* ---------------------------------------------------------
Service card rows
--------------------------------------------------------- */
.intec-services-card-row {
width: 100% !important;
margin-top: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
}
.intec-services-card-row-top {
margin-bottom: 8px !important;
}
.intec-services-card-row-bottom {
margin-top: 0 !important;
}
.intec-services-card-row .kt-row-column-wrap {
display: grid !important;
gap: 14px !important;
align-items: stretch !important;
justify-content: center !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.intec-services-card-row-top .kt-row-column-wrap {
grid-template-columns: repeat(4, 180px) !important;
}
.intec-services-card-row-bottom .kt-row-column-wrap {
grid-template-columns: repeat(3, 180px) !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ---------------------------------------------------------
Service cards
--------------------------------------------------------- */
.intec-services-right .intec-service-card {
background: #ffffff !important;
border: 1px solid #E5EAF1 !important;
border-radius: 14px !important;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
padding: 12px 14px 14px 14px !important;
width: 180px !important;
min-width: 180px !important;
max-width: 180px !important;
height: 320px !important;
min-height: 320px !important;
max-height: none !important;
position: relative !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
text-align: center !important;
}
.intec-services-right .intec-service-card > .kt-inside-inner-col,
.intec-services-right .intec-service-card .kt-inside-inner-col {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
flex: 1 1 auto !important;
height: 100% !important;
min-height: 100% !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
/* ---------------------------------------------------------
Service card icons
--------------------------------------------------------- */
.intec-services-right .intec-service-card .intec-service-card-image,
.intec-services-right .intec-service-card .wp-block-kadence-image.intec-service-card-image,
.intec-services-right .intec-service-card .intec-service-card-image figure {
margin-top: 0 !important;
margin-bottom: 6px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.intec-services-right .intec-service-card .intec-service-card-image,
.intec-services-right .intec-service-card .wp-block-kadence-image.intec-service-card-image,
.intec-services-right .intec-service-card .intec-service-card-image figure,
.intec-services-right .intec-service-card .intec-service-card-image .kb-image,
.intec-services-right .intec-service-card .intec-service-card-image .kb-img-wrap {
width: 68px !important;
max-width: 68px !important;
height: 68px !important;
max-height: 68px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.intec-services-right .intec-service-card .intec-service-card-image img {
width: 68px !important;
max-width: 68px !important;
height: 68px !important;
max-height: 68px !important;
object-fit: contain !important;
display: block !important;
margin: 0 auto !important;
}
/* ---------------------------------------------------------
Service card typography
--------------------------------------------------------- */
.intec-services-right .intec-service-card h1,
.intec-services-right .intec-service-card h2,
.intec-services-right .intec-service-card h3,
.intec-services-right .intec-service-card h4,
.intec-services-right .intec-service-card .kt-adv-heading {
color: #001FB1 !important;
font-size: 15px !important;
line-height: 1.2 !important;
font-weight: 600 !important;
text-align: center !important;
margin-top: 0 !important;
margin-bottom: 10px !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
.intec-services-right .intec-service-card p {
color: var(--global-palette2) !important;
font-size: 14px !important;
line-height: 1.42 !important;
font-weight: 400 !important;
text-align: center !important;
margin-top: 0 !important;
margin-bottom: 10px !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
/* ---------------------------------------------------------
Service card Learn More link
--------------------------------------------------------- */
.intec-services-right .intec-service-card > .kt-inside-inner-col > p:last-child,
.intec-services-right .intec-service-card .kt-inside-inner-col > p:last-child {
position: static !important;
margin-top: auto !important;
margin-bottom: 0 !important;
padding-top: 10px !important;
color: #001FB1 !important;
font-size: 14px !important;
line-height: 1.35 !important;
font-weight: 700 !important;
text-align: center !important;
}
.intec-services-right .intec-service-card a {
color: #001FB1 !important;
font-weight: 700 !important;
}
.intec-services-right .intec-service-card a:hover {
color: #00B050 !important;
}
/* ---------------------------------------------------------
Advisory + Services tablet
--------------------------------------------------------- */
@media (max-width: 1024px) {
.intec-advisory-services-section > .kt-row-column-wrap {
width: calc(100% - 48px) !important;
}
.intec-advisory-left {
border-right: none !important;
padding-right: 0 !important;
margin-bottom: 36px !important;
}
.intec-services-right {
padding-left: 0 !important;
}
.intec-services-card-row-top .kt-row-column-wrap,
.intec-services-card-row-bottom .kt-row-column-wrap {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
max-width: 100% !important;
}
}
/* =========================================================
ADVISORY + SERVICES | TABLET FLAT SERVICE LIST CARDS
Purpose:
On tablet, the seven service cards are too tall as vertical
cards. This converts them into compact one-card-per-row list
cards.
Structure:
- One service per row
- Icon floats top-left
- Title/body copy flow beside the icon
- Learn More sits naturally below the copy
- Manual title
breaks are hidden on tablet only because
they were created for the desktop vertical-card layout.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
/* ---------------------------------------------------------
Service card rows
Both top and bottom card rows become a single-column list.
--------------------------------------------------------- */
.intec-services-card-row-top .kt-row-column-wrap,
.intec-services-card-row-bottom .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 9px !important;
width: 100% !important;
max-width: 100% !important;
}
.intec-services-card-row-top {
margin-bottom: 9px !important;
}
.intec-services-card-row-bottom {
margin-top: 0 !important;
}
/* ---------------------------------------------------------
Service card shell
Removes desktop fixed-card behavior and creates a compact
horizontal/list-card feel.
--------------------------------------------------------- */
.intec-services-right .intec-service-card {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
padding: 9px 13px !important;
display: block !important;
text-align: left !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* ---------------------------------------------------------
Inner card wrapper
Stops the desktop flex/center behavior so floated icon and
normal text flow can work correctly.
--------------------------------------------------------- */
.intec-services-right .intec-service-card > .kt-inside-inner-col,
.intec-services-right .intec-service-card .kt-inside-inner-col {
display: block !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
text-align: left !important;
}
/* ---------------------------------------------------------
Icon
Floats top-left so title and body copy can use the remaining
card width naturally.
--------------------------------------------------------- */
.intec-services-right .intec-service-card .intec-service-card-image,
.intec-services-right .intec-service-card .wp-block-kadence-image.intec-service-card-image,
.intec-services-right .intec-service-card .intec-service-card-image figure,
.intec-services-right .intec-service-card .intec-service-card-image .kb-image,
.intec-services-right .intec-service-card .intec-service-card-image .kb-img-wrap {
float: left !important;
width: 46px !important;
max-width: 46px !important;
height: 46px !important;
max-height: 46px !important;
margin: 0 12px 4px 0 !important;
padding: 0 !important;
display: block !important;
}
.intec-services-right .intec-service-card .intec-service-card-image img {
width: 46px !important;
max-width: 46px !important;
height: 46px !important;
max-height: 46px !important;
object-fit: contain !important;
display: block !important;
margin: 0 !important;
}
/* ---------------------------------------------------------
Title
Tablet list-card title styling. Manual
breaks are
removed below so long titles can use the available width.
--------------------------------------------------------- */
.intec-services-right .intec-service-card h1,
.intec-services-right .intec-service-card h2,
.intec-services-right .intec-service-card h3,
.intec-services-right .intec-service-card h4,
.intec-services-right .intec-service-card .kt-adv-heading,
.intec-services-right .intec-service-card .kt-adv-heading * {
display: block !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
color: #001FB1 !important;
font-size: 13.5px !important;
line-height: 1.15 !important;
font-weight: 700 !important;
text-align: left !important;
margin: 0 0 3px 0 !important;
padding: 0 !important;
white-space: normal !important;
}
/* Remove desktop manual title breaks on tablet only */
.intec-services-right .intec-service-card h1 br,
.intec-services-right .intec-service-card h2 br,
.intec-services-right .intec-service-card h3 br,
.intec-services-right .intec-service-card h4 br,
.intec-services-right .intec-service-card .kt-adv-heading br {
display: none !important;
}
/* ---------------------------------------------------------
Body copy
Compact tablet copy rhythm.
--------------------------------------------------------- */
.intec-services-right .intec-service-card p {
display: block !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
color: var(--global-palette2) !important;
font-size: 12.5px !important;
line-height: 1.25 !important;
font-weight: 400 !important;
text-align: left !important;
margin: 0 0 3px 0 !important;
padding: 0 !important;
white-space: normal !important;
}
/* ---------------------------------------------------------
Tablet services heading-to-card gap
Adds breathing room between the right-column heading and
the first compact service card.
--------------------------------------------------------- */
.intec-services-card-row-top {
margin-top: 20px !important;
}
/* ---------------------------------------------------------
Advisory + Services | Tablet left checklist compression
Purpose:
The section height is being driven by the left advisory
checklist column, not by bottom padding. This tightens the
checklist rhythm slightly so the section can collapse upward
and better match the compact service-list cards.
--------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
/* Tighten intro-to-checklist spacing */
.intec-advisory-left > .kt-inside-inner-col > p {
margin-bottom: 14px !important;
}
.intec-advisory-checklist-grid {
margin-top: 10px !important;
}
/* Tighten individual checklist items */
.intec-advisory-checklist li {
margin-bottom: 4px !important;
line-height: 1.32 !important;
}
}
/* ---------------------------------------------------------
Learn More
Removes desktop bottom-pinning on tablet and aligns the
link with the text column instead of allowing it to fall
under the floated icon.
--------------------------------------------------------- */
.intec-services-right .intec-service-card > .kt-inside-inner-col > p:last-child,
.intec-services-right .intec-service-card .kt-inside-inner-col > p:last-child {
position: static !important;
clear: none !important;
/* 46px icon + 12px icon/right gap = 58px text-column offset */
margin: 10px 0 0 58px !important;
padding-top: 0 !important;
text-align: left !important;
font-size: 12.5px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
color: #001FB1 !important;
}
/* Clear floated icon at the end of each card */
.intec-services-right .intec-service-card::after {
content: "";
display: table;
clear: both;
}
}
/* ---------------------------------------------------------
Advisory + Services mobile
--------------------------------------------------------- */
@media (max-width: 640px) {
.intec-advisory-services-section > .kt-row-column-wrap {
width: calc(100% - 32px) !important;
}
.intec-advisory-left h1,
.intec-advisory-left h2,
.intec-advisory-left h3,
.intec-advisory-left .kt-adv-heading,
.intec-services-panel-title,
.intec-services-panel-title *,
.intec-services-panel-title .kt-adv-heading {
font-size: 24px !important;
line-height: 1.24 !important;
}
.intec-services-panel-title,
.intec-services-panel-title *,
.intec-services-panel-title .kt-adv-heading {
text-align: center !important;
}
.intec-advisory-checklist-grid {
gap: 0 !important;
}
.intec-advisory-checklist li {
margin-bottom: 14px !important;
}
.intec-services-card-row-top .kt-row-column-wrap,
.intec-services-card-row-bottom .kt-row-column-wrap {
grid-template-columns: 1fr !important;
}
.intec-services-right .intec-service-card {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: auto !important;
}
}
@media (max-width: 640px) {
.intec-advisory-left {
margin-bottom: 0 !important;
}
.intec-services-right {
margin-top: -34px !important;
padding-top: 0 !important;
}
}
/* =========================================================
SECTION 05 | HOME PAGE | AI OPERATIONS + AGENT WORKFLOW
========================================================= */
/* ---------------------------------------------------------
AI governance section canvas
--------------------------------------------------------- */
.intec-ai-governance-section {
background: #F3F7FC !important;
}
.wp-block-kadence-rowlayout.intec-ai-governance-section {
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
overflow: hidden !important;
}
.intec-ai-governance-section > .kt-row-column-wrap {
max-width: 100% !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
align-items: center !important;
padding-top: 22px !important;
padding-bottom: 22px !important;
position: relative !important;
}
/* ---------------------------------------------------------
AI governance desktop split
Current accepted visual balance uses 48fr / 56fr.
Do not “normalize†to 48/52 unless retesting visually.
--------------------------------------------------------- */
@media (min-width: 1025px) {
.intec-ai-governance-section > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: minmax(0, 48fr) minmax(0, 56fr) !important;
column-gap: 44px !important;
align-items: center !important;
}
/* Vertical divider between left message and right workflow.
Accepted desktop divider location: left 47%. */
.intec-ai-governance-section > .kt-row-column-wrap::before {
content: "";
position: absolute;
top: 22px;
bottom: 22px;
left: 47%;
width: 1px;
background: #DDE5EF;
opacity: 1;
z-index: 1;
pointer-events: none;
}
}
/* ---------------------------------------------------------
AI governance left column
--------------------------------------------------------- */
.intec-ai-governance-left {
max-width: none !important;
}
.intec-ai-governance-left h1,
.intec-ai-governance-left h2,
.intec-ai-governance-left h3,
.intec-ai-governance-left .kt-adv-heading {
color: #001FB1 !important;
font-size: 26px !important;
line-height: 1.22 !important;
font-weight: 600 !important;
margin-top: 0 !important;
margin-bottom: 14px !important;
}
.intec-ai-governance-left p {
color: var(--global-palette2) !important;
font-size: 14px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
max-width: 590px !important;
margin-top: 0 !important;
margin-bottom: 22px !important;
}
/* ---------------------------------------------------------
AI governance button alignment
Aligns button to the left-column text edge.
--------------------------------------------------------- */
.intec-ai-governance-left .wp-block-kadence-advancedbtn,
.intec-ai-governance-left .kb-buttons-wrap {
justify-content: flex-start !important;
align-items: flex-start !important;
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 8px !important;
}
.intec-ai-governance-left .kb-button,
.intec-ai-governance-left .kb-btn {
margin-left: 0 !important;
margin-right: auto !important;
}
/* ---------------------------------------------------------
AI workflow right column
--------------------------------------------------------- */
.intec-ai-governance-right {
border-left: none !important;
padding-left: 44px !important;
}
.intec-ai-workflow-area {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
/* Desktop workflow position nudge.
Accepted desktop position: -18px left, -12px up. */
@media (min-width: 1025px) {
.intec-ai-workflow-area {
transform: translate(-18px, -12px) !important;
}
}
/* ---------------------------------------------------------
Workflow heading
--------------------------------------------------------- */
.intec-ai-workflow-area h1,
.intec-ai-workflow-area h2,
.intec-ai-workflow-area h3,
.intec-ai-workflow-area .kt-adv-heading {
color: #001FB1 !important;
font-size: 26px !important;
line-height: 1.22 !important;
font-weight: 600 !important;
text-align: center !important;
margin-top: 10px !important;
margin-bottom: 8px !important;
}
/* ---------------------------------------------------------
Agentic workflow row and grid
--------------------------------------------------------- */
.intec-agentic-workflow-row {
max-width: 760px !important;
margin: 8px auto 6px auto !important;
}
.intec-agentic-workflow-row .kt-row-column-wrap {
display: grid !important;
grid-template-columns:
104px 30px
104px 30px
104px 30px
104px 30px
104px !important;
align-items: start !important;
justify-content: center !important;
column-gap: 0 !important;
row-gap: 0 !important;
}
/* ---------------------------------------------------------
Agentic workflow icons and labels
--------------------------------------------------------- */
.intec-agentic-step-icon,
.intec-agentic-step-icon figure,
.intec-agentic-step-icon .kb-image,
.intec-agentic-step-icon .kb-img-wrap {
width: 96px !important;
min-width: 96px !important;
max-width: 96px !important;
height: 82px !important;
min-height: 82px !important;
max-height: 82px !important;
margin: 0 auto 0 auto !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
}
.intec-agentic-step-icon img {
width: 88px !important;
max-width: 88px !important;
max-height: 76px !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
margin: 0 auto !important;
}
.intec-agentic-step-label {
color: var(--global-palette2) !important;
font-size: 14px !important;
line-height: 1.15 !important;
font-weight: 600 !important;
margin-top: -2px !important;
margin-bottom: 0 !important;
text-align: center !important;
}
/* ---------------------------------------------------------
Agentic workflow arrows
--------------------------------------------------------- */
.intec-agentic-arrow,
.intec-agentic-arrow .kt-inside-inner-col {
height: 82px !important;
min-height: 82px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.intec-agentic-arrow-symbol {
position: relative;
width: 58px !important;
height: 24px !important;
margin: 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0 !important;
line-height: 0 !important;
}
.intec-agentic-arrow-symbol::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 2px;
background: linear-gradient(
90deg,
rgba(103, 122, 148, 0) 0%,
rgba(103, 122, 148, 0.55) 18%,
rgba(103, 122, 148, 0.55) 82%,
rgba(103, 122, 148, 0) 100%
);
z-index: 0;
}
.intec-agentic-arrow-symbol::after {
content: "\27A4";
position: relative;
z-index: 1;
width: 24px;
height: 24px;
border-radius: 999px;
background: #1fbe63;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 900;
line-height: 1;
padding-left: 1px;
box-shadow: 0 0 0 2px #eef3fa;
}
/* ---------------------------------------------------------
Reinforcement statement below workflow
--------------------------------------------------------- */
.intec-agentic-principle {
color: #001FB1 !important;
font-size: 15px !important;
line-height: 1.35 !important;
font-weight: 600 !important;
margin-top: 8px !important;
margin-bottom: 0 !important;
text-align: center !important;
}
/* ---------------------------------------------------------
AI governance tablet stack support
Kadence controls the tablet stacking of the left copy and
right workflow areas. CSS only supports width, spacing, and
the workflow icon layout.
--------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1024px) {
/* Tablet section gutter */
.intec-ai-governance-section > .kt-row-column-wrap {
width: calc(100% - 48px) !important;
}
/* Space between the AI copy/button area and the workflow area */
.intec-ai-governance-right {
border-left: none !important;
padding-left: 0 !important;
margin-top: 0px !important;
}
/* Tablet workflow icon row */
.intec-agentic-workflow-row .kt-row-column-wrap {
grid-template-columns:
140px 38px 140px
38px 140px 38px 140px
38px 140px !important;
row-gap: 20px !important;
}
}
/* ---------------------------------------------------------
AI governance tablet workflow vertical tightening
Reduces the gap between the "Governed Agentic Workflow"
heading and the workflow icon row.
--------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1024px) {
/* Gap between button/copy area and workflow area */
.intec-ai-governance-right {
border-left: none !important;
padding-left: 0 !important;
margin-top: 0 !important;
}
/* Tighten heading spacing */
.intec-ai-workflow-area h1,
.intec-ai-workflow-area h2,
.intec-ai-workflow-area h3,
.intec-ai-workflow-area .kt-adv-heading {
margin-bottom: 0 !important;
}
/* Remove workflow row top margin/padding that is creating the visible gap */
.intec-ai-workflow-area .intec-agentic-workflow-row {
margin-top: 0 !important;
padding-top: 0 !important;
}
.intec-ai-workflow-area .intec-agentic-workflow-row > .kt-row-column-wrap,
.intec-ai-workflow-area .intec-agentic-workflow-row > .kt-row-layout-inner > .kt-row-column-wrap {
padding-top: 0 !important;
margin-top: 0 !important;
}
}
/* ---------------------------------------------------------
AI governance tablet copy centering
Kadence stacks the section correctly, but the left copy block
still sits against the left edge. This centers the copy block
within the tablet section while keeping the heading/body text
left-aligned inside the block. The CTA button is centered
within the same 450px copy block.
--------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1024px) {
.intec-ai-governance-left {
width: 100% !important;
max-width: 450px !important;
margin-left: auto !important;
margin-right: auto !important;
justify-self: center !important;
}
.intec-ai-governance-left > .kt-inside-inner-col {
width: 100% !important;
max-width: 450px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Keep heading and body copy left-aligned */
.intec-ai-governance-left h1,
.intec-ai-governance-left h2,
.intec-ai-governance-left h3,
.intec-ai-governance-left .kt-adv-heading,
.intec-ai-governance-left p {
text-align: left !important;
}
/* Center the CTA button within the centered copy block */
.intec-ai-governance-left .wp-block-kadence-advancedbtn,
.intec-ai-governance-left .kb-buttons-wrap {
justify-content: center !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.intec-ai-governance-left .kb-button,
.intec-ai-governance-left .kb-btn {
margin-left: auto !important;
margin-right: auto !important;
}
}
/* ---------------------------------------------------------
AI governance mobile stack support
Mobile keeps the AI copy section stacked and converts the
agentic workflow into a single vertical flow:
Analyze → Recommend → Approve → Act → Evidence.
--------------------------------------------------------- */
@media (max-width: 640px) {
/* Mobile section gutter */
.intec-ai-governance-section > .kt-row-column-wrap {
width: calc(100% - 32px) !important;
}
/* Reset desktop right-column padding on mobile */
.intec-ai-governance-right {
padding-left: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
}
.intec-ai-workflow-area {
width: 100% !important;
align-items: center !important;
text-align: center !important;
}
/* Mobile heading scale */
.intec-ai-governance-left h1,
.intec-ai-governance-left h2,
.intec-ai-governance-left h3,
.intec-ai-governance-left .kt-adv-heading,
.intec-ai-workflow-area h1,
.intec-ai-workflow-area h2,
.intec-ai-workflow-area h3,
.intec-ai-workflow-area .kt-adv-heading {
font-size: 26px !important;
line-height: 1.22 !important;
}
/* Workflow heading */
.intec-ai-workflow-area h1,
.intec-ai-workflow-area h2,
.intec-ai-workflow-area h3,
.intec-ai-workflow-area .kt-adv-heading {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 14px !important;
}
/* Mobile workflow wrapper */
.intec-agentic-workflow-row {
width: 100% !important;
max-width: 240px !important;
margin: 10px auto 18px auto !important;
padding: 0 !important;
overflow: visible !important;
}
/* Mobile workflow grid — single vertical column */
.intec-agentic-workflow-row .kt-row-column-wrap,
.wp-block-kadence-rowlayout.intec-agentic-workflow-row > .kt-row-column-wrap,
.wp-block-kadence-rowlayout.intec-agentic-workflow-row > .kt-row-layout-inner > .kt-row-column-wrap,
.intec-agentic-workflow-row.kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1fr !important;
grid-auto-flow: row !important;
justify-content: center !important;
justify-items: center !important;
align-items: center !important;
row-gap: 0 !important;
column-gap: 0 !important;
width: 100% !important;
max-width: 240px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Reset workflow steps and arrows so each item occupies one row */
.intec-agentic-step,
.intec-agentic-arrow {
grid-column: auto !important;
width: 100% !important;
max-width: 240px !important;
min-width: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
}
.intec-agentic-step .kt-inside-inner-col {
width: 100% !important;
max-width: 240px !important;
min-width: 0 !important;
text-align: center !important;
}
/* Mobile workflow icon wrapper */
.intec-agentic-step-icon,
.intec-agentic-step-icon figure,
.intec-agentic-step-icon .kb-image,
.intec-agentic-step-icon .kb-img-wrap {
width: 96px !important;
min-width: 96px !important;
max-width: 96px !important;
height: 78px !important;
min-height: 78px !important;
max-height: 78px !important;
margin: 0 auto 2px auto !important;
padding: 0 !important;
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
}
/* Mobile workflow icon image */
.intec-agentic-step-icon img {
width: 90px !important;
max-width: 90px !important;
max-height: 76px !important;
height: auto !important;
object-fit: contain !important;
object-position: center bottom !important;
display: block !important;
margin: 0 auto !important;
}
.intec-agentic-step-label {
font-size: 14px !important;
line-height: 1.15 !important;
text-align: center !important;
margin: 0 !important;
}
/* Mobile down-arrow connector row */
.intec-agentic-arrow,
.intec-agentic-arrow .kt-inside-inner-col {
position: relative !important;
display: flex !important;
width: 100% !important;
height: 34px !important;
min-height: 34px !important;
align-items: center !important;
justify-content: center !important;
margin: 10px 0 4px 0 !important;
padding: 0 !important;
overflow: visible !important;
}
/* Hide original desktop arrow symbol */
.intec-agentic-arrow-symbol {
display: none !important;
}
/* Vertical green connector line */
.intec-agentic-arrow .kt-inside-inner-col::before {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 2px !important;
height: 48px !important;
transform: translate(-50%, -50%) !important;
display: block !important;
background: rgba(22, 163, 74, 0.75) !important;
border-radius: 999px !important;
z-index: 1 !important;
}
/* Down-arrow circle */
.intec-agentic-arrow .kt-inside-inner-col::after {
content: "↓" !important;
position: relative !important;
z-index: 2 !important;
width: 22px !important;
height: 22px !important;
border-radius: 999px !important;
background: #16A34A !important;
color: #ffffff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 15px !important;
line-height: 1 !important;
font-weight: 800 !important;
}
/* Mobile principle statement */
.intec-agentic-principle {
max-width: 320px !important;
margin: 16px auto 0 auto !important;
font-size: 17px !important;
line-height: 1.35 !important;
text-align: center !important;
}
}
/* =========================================================
SECTION 06 | HOME PAGE | INDUSTRIES CARD SECTION
========================================================= */
/* ---------------------------------------------------------
Industries section canvas
Active front-end section uses .intec-industries-clean.
Background #E7EEF7 was accepted during desktop tuning.
--------------------------------------------------------- */
.wp-block-kadence-rowlayout.intec-industries-clean {
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
overflow: hidden !important;
background: #E7EEF7 !important;
}
/* ---------------------------------------------------------
Industries section native spacing
Padding values are retained from the active clean section.
Desktop side padding controls the visible inner gutter.
--------------------------------------------------------- */
.intec-industries-clean {
padding-top: 34px !important;
padding-bottom: 34px !important;
}
@media (min-width: 1025px) {
.wp-block-kadence-rowlayout.intec-industries-clean {
padding-left: 18px !important;
padding-right: 18px !important;
}
.wp-block-kadence-rowlayout.intec-industries-clean > .kt-row-column-wrap,
.wp-block-kadence-rowlayout.intec-industries-clean > .kt-row-layout-inner > .kt-row-column-wrap {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* ---------------------------------------------------------
Industries heading
Broad selector is intentional because the actual heading did
not respond to the narrower .intec-industries-clean-heading
selector during testing.
--------------------------------------------------------- */
.intec-industries-clean h1,
.intec-industries-clean h2,
.intec-industries-clean h3,
.intec-industries-clean .kt-adv-heading,
.intec-industries-clean .kt-adv-heading * {
color: #001FB1 !important;
font-size: 26px !important;
line-height: 1.22 !important;
font-weight: 600 !important;
text-align: center !important;
margin-top: 0 !important;
}
/* ---------------------------------------------------------
Industries card row
IMPORTANT:
The active card row is a WordPress Columns block:
.wp-block-columns.intec-industries-clean-grid
It is not a Kadence Row Layout. Failed .kt-row-column-wrap
spread rules were removed.
--------------------------------------------------------- */
/* No forced desktop grid is applied here.
The current desktop result is driven by WordPress Columns and
the section inner gutter rule above. */
/* ---------------------------------------------------------
Individual industry card
--------------------------------------------------------- */
.intec-industries-clean .intec-clean-industry-card {
position: relative !important;
background: #ffffff !important;
border: 1px solid #E5EAF1 !important;
border-radius: 14px !important;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
padding: 22px 24px 20px 24px !important;
min-height: 150px !important;
box-sizing: border-box !important;
display: block !important;
}
/* Bottom accent line */
.intec-industries-clean .intec-clean-industry-card::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 4px !important;
border-radius: 0 0 14px 14px !important;
background: #001FB1 !important;
}
.intec-industries-clean .intec-clean-industry-card.intec-line-green::after {
background: #16A34A !important;
}
.intec-industries-clean .intec-clean-industry-card.intec-line-blue::after {
background: #001FB1 !important;
}
/* ---------------------------------------------------------
Industry card inner icon/title/copy layout
--------------------------------------------------------- */
.intec-industries-clean .intec-clean-industry-card > .kt-inside-inner-col,
.intec-industries-clean .intec-clean-industry-card > .wp-block-group__inner-container {
display: grid !important;
grid-template-columns: 104px minmax(0, 1fr) !important;
grid-template-areas:
"icon title"
"icon copy" !important;
column-gap: 18px !important;
row-gap: 8px !important;
align-items: start !important;
width: 100% !important;
}
.intec-industries-clean .intec-clean-industry-icon {
grid-area: icon !important;
align-self: start !important;
justify-self: center !important;
margin: 0 !important;
padding-top: 0 !important;
}
.intec-industries-clean .intec-clean-industry-icon,
.intec-industries-clean .intec-clean-industry-icon figure,
.intec-industries-clean .intec-clean-industry-icon .kb-image,
.intec-industries-clean .intec-clean-industry-icon .kb-img-wrap {
width: 100px !important;
height: 100px !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
overflow: visible !important;
}
.intec-industries-clean .intec-clean-industry-icon img {
width: 96px !important;
max-width: 96px !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
}
.intec-industries-clean .intec-clean-industry-title,
.intec-industries-clean .intec-clean-industry-title .kt-adv-heading {
grid-area: title !important;
color: #001FB1 !important;
font-size: 18px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
text-align: left !important;
margin: 0 !important;
}
.intec-industries-clean .intec-clean-industry-copy {
grid-area: copy !important;
color: #334155 !important;
font-size: 15px !important;
line-height: 1.45 !important;
text-align: left !important;
margin: 0 !important;
}
/* ---------------------------------------------------------
Industries tablet stacking
Actual structure is WordPress Columns, not Kadence Row.
--------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1024px) {
.wp-block-columns.intec-industries-clean-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
max-width: 760px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
.wp-block-columns.intec-industries-clean-grid > .wp-block-column {
width: 100% !important;
max-width: 760px !important;
flex-basis: auto !important;
flex-grow: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
}
.wp-block-columns.intec-industries-clean-grid .intec-clean-industry-card {
width: 100% !important;
max-width: 760px !important;
min-height: 170px !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 24px 28px !important;
box-sizing: border-box !important;
}
.wp-block-columns.intec-industries-clean-grid .intec-clean-industry-card > .kt-inside-inner-col,
.wp-block-columns.intec-industries-clean-grid .intec-clean-industry-card > .wp-block-group__inner-container {
display: grid !important;
grid-template-columns: 104px minmax(0, 1fr) !important;
column-gap: 22px !important;
align-items: center !important;
}
.wp-block-columns.intec-industries-clean-grid .intec-clean-industry-icon,
.wp-block-columns.intec-industries-clean-grid .intec-clean-industry-icon figure,
.wp-block-columns.intec-industries-clean-grid .intec-clean-industry-icon .kb-image,
.wp-block-columns.intec-industries-clean-grid .intec-clean-industry-icon .kb-img-wrap {
width: 96px !important;
height: 96px !important;
margin: 0 auto !important;
}
.wp-block-columns.intec-industries-clean-grid .intec-clean-industry-icon img {
width: 90px !important;
max-width: 90px !important;
height: auto !important;
}
.wp-block-columns.intec-industries-clean-grid .intec-clean-industry-title,
.wp-block-columns.intec-industries-clean-grid .intec-clean-industry-title .kt-adv-heading {
text-align: left !important;
font-size: 21px !important;
line-height: 1.18 !important;
}
.wp-block-columns.intec-industries-clean-grid .intec-clean-industry-copy {
text-align: left !important;
font-size: 15px !important;
line-height: 1.45 !important;
}
}
/* ---------------------------------------------------------
Industries mobile
--------------------------------------------------------- */
@media (max-width: 640px) {
.intec-industries-clean {
padding-top: 36px !important;
padding-bottom: 36px !important;
}
.intec-industries-clean > .kt-row-column-wrap {
width: calc(100% - 32px) !important;
}
.intec-industries-clean h1,
.intec-industries-clean h2,
.intec-industries-clean h3,
.intec-industries-clean .kt-adv-heading,
.intec-industries-clean .kt-adv-heading * {
font-size: 24px !important;
line-height: 1.24 !important;
font-weight: 600 !important;
}
.intec-industries-clean .intec-clean-industry-card {
padding: 24px 22px 26px 22px !important;
min-height: auto !important;
}
.intec-industries-clean .intec-clean-industry-card > .kt-inside-inner-col,
.intec-industries-clean .intec-clean-industry-card > .wp-block-group__inner-container {
grid-template-columns: 1fr !important;
grid-template-areas:
"icon"
"title"
"copy" !important;
row-gap: 12px !important;
text-align: center !important;
}
.intec-industries-clean .intec-clean-industry-icon {
justify-self: center !important;
}
.intec-industries-clean .intec-clean-industry-title,
.intec-industries-clean .intec-clean-industry-title .kt-adv-heading,
.intec-industries-clean .intec-clean-industry-copy {
text-align: center !important;
}
.intec-industries-clean .intec-clean-industry-icon,
.intec-industries-clean .intec-clean-industry-icon figure,
.intec-industries-clean .intec-clean-industry-icon .kb-image,
.intec-industries-clean .intec-clean-industry-icon .kb-img-wrap {
width: 84px !important;
height: 84px !important;
}
.intec-industries-clean .intec-clean-industry-icon img {
width: 80px !important;
max-width: 80px !important;
}
}
/* =========================================================
SECTION 07 | HOME PAGE | ADVISORY DEPTH PROCESS
========================================================= */
/* ---------------------------------------------------------
Advisory depth section canvas and rhythm
Padding 18px / 24px was selected during desktop tuning.
--------------------------------------------------------- */
.wp-block-kadence-rowlayout.intec-advisory-depth-section {
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
overflow: hidden !important;
padding-top: 18px !important;
padding-bottom: 24px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.intec-advisory-depth-section {
background: #F3F7FC !important;
}
/* Keep Kadence inner wrappers from adding hidden vertical padding. */
.intec-advisory-depth-section > .kt-row-layout-inner,
.intec-advisory-depth-section > .kt-row-column-wrap,
.intec-advisory-depth-section > .kt-row-layout-inner > .kt-row-column-wrap {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ---------------------------------------------------------
Advisory depth heading and intro
--------------------------------------------------------- */
.intec-advisory-depth-heading,
.intec-advisory-depth-heading *,
.intec-advisory-depth-heading .kt-adv-heading {
color: #001FB1 !important;
font-size: 26px !important;
line-height: 1.22 !important;
font-weight: 600 !important;
text-align: center !important;
margin-top: 0 !important;
margin-bottom: 6px !important;
}
.intec-advisory-depth-intro,
.intec-advisory-depth-intro * {
color: var(--global-palette2) !important;
font-size: 14px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
text-align: center !important;
max-width: 900px !important;
margin-top: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 16px !important;
}
/* ---------------------------------------------------------
Advisory depth process row
--------------------------------------------------------- */
.intec-advisory-process-grid {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
@media (min-width: 1025px) {
.intec-advisory-process-grid > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 34px !important;
align-items: center !important;
}
}
/* ---------------------------------------------------------
Advisory depth circular process cards
--------------------------------------------------------- */
@media (min-width: 1025px) {
.intec-advisory-depth-section .intec-advisory-circle-step {
position: relative !important;
width: 210px !important;
height: 210px !important;
border-radius: 999px !important;
border: 1.5px solid #AFC4FF !important;
background: #ffffff !important;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
padding: 34px 22px 24px 22px !important;
margin-left: auto !important;
margin-right: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
box-sizing: border-box !important;
}
.intec-advisory-depth-section .intec-advisory-circle-step:not(:last-child)::after {
content: "\2192" !important;
font-family: Arial, Helvetica, sans-serif !important;
position: absolute !important;
top: 50% !important;
right: -34px !important;
transform: translateY(-50%) !important;
color: #001FB1 !important;
font-size: 34px !important;
line-height: 1 !important;
font-weight: 800 !important;
}
.intec-advisory-depth-section .intec-advisory-circle-step::before {
display: none !important;
}
}
/* ---------------------------------------------------------
Advisory depth circle typography
--------------------------------------------------------- */
.intec-advisory-depth-section .intec-advisory-circle-step h1,
.intec-advisory-depth-section .intec-advisory-circle-step h2,
.intec-advisory-depth-section .intec-advisory-circle-step h3,
.intec-advisory-depth-section .intec-advisory-circle-step h4,
.intec-advisory-depth-section .intec-advisory-circle-step .kt-adv-heading {
color: #001FB1 !important;
font-size: 16px !important;
line-height: 1.18 !important;
font-weight: 700 !important;
text-align: center !important;
margin: 0 0 7px 0 !important;
}
.intec-advisory-depth-section .intec-advisory-circle-step p {
color: var(--global-palette2) !important;
font-size: 14px !important;
line-height: 1.38 !important;
font-weight: 400 !important;
text-align: center !important;
margin: 0 !important;
}
/* ---------------------------------------------------------
Advisory depth tablet
--------------------------------------------------------- */
@media (max-width: 1024px) {
.intec-advisory-process-grid > .kt-row-column-wrap {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 24px !important;
}
.intec-advisory-depth-section .intec-advisory-circle-step {
max-width: 360px !important;
min-height: 180px !important;
border-radius: 18px !important;
border: 1px solid #D9E2EC !important;
background: #ffffff !important;
padding: 24px 22px !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
.intec-advisory-depth-section .intec-advisory-circle-step::after,
.intec-advisory-depth-section .intec-advisory-circle-step::before {
display: none !important;
}
}
/* ---------------------------------------------------------
Advisory depth tablet arrows
Restores directional arrows between process cards on tablet.
Desktop already has arrows; mobile remains arrow-free.
--------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
.intec-advisory-process-grid,
.intec-advisory-process-grid > .kt-row-column-wrap {
overflow: visible !important;
}
.intec-advisory-depth-section .intec-advisory-circle-step {
position: relative !important;
}
.intec-advisory-depth-section .intec-advisory-circle-step:not(:last-child)::after {
content: "\2192" !important;
display: block !important;
font-family: Arial, Helvetica, sans-serif !important;
position: absolute !important;
top: 50% !important;
right: -31px !important;
transform: translateY(-50%) !important;
color: #001FB1 !important;
font-size: 26px !important;
line-height: 1 !important;
font-weight: 800 !important;
z-index: 5 !important;
}
.intec-advisory-depth-section .intec-advisory-circle-step::before {
display: none !important;
}
}
/* ---------------------------------------------------------
Advisory depth mobile
--------------------------------------------------------- */
@media (max-width: 640px) {
.intec-advisory-process-grid > .kt-row-column-wrap {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
.intec-advisory-depth-section .intec-advisory-circle-step {
max-width: 100% !important;
min-height: auto !important;
border-radius: 16px !important;
padding: 22px 20px !important;
}
}
/* ---------------------------------------------------------
Advisory depth mobile down arrows
Mobile stacks the advisory cards vertically, so the desktop/
tablet side arrows become simple blue down arrows.
--------------------------------------------------------- */
@media (max-width: 640px) {
.intec-advisory-process-grid,
.intec-advisory-process-grid > .kt-row-column-wrap {
overflow: visible !important;
}
.intec-advisory-depth-section .intec-advisory-circle-step {
position: relative !important;
}
.intec-advisory-depth-section .intec-advisory-circle-step:not(:last-child)::after {
content: "\2193" !important;
display: block !important;
position: absolute !important;
left: 50% !important;
bottom: -28px !important;
transform: translateX(-50%) !important;
color: #001FB1 !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 28px !important;
line-height: 1 !important;
font-weight: 800 !important;
z-index: 5 !important;
}
.intec-advisory-depth-section .intec-advisory-circle-step::before {
display: none !important;
}
}
/* =========================================================
SECTION 08 | HOME PAGE | FINAL CTA
========================================================= */
/* ---------------------------------------------------------
Final CTA section canvas
Keeps CTA section inside the accepted 1240px page rail.
--------------------------------------------------------- */
.wp-block-kadence-rowlayout.intec-final-cta-section {
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
overflow: hidden !important;
padding-top: 28px !important;
padding-bottom: 1px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ---------------------------------------------------------
Final CTA base section
Background should be controlled in Kadence if changed later.
CSS background-change experiments were removed because they
conflicted with the decorative blue band.
--------------------------------------------------------- */
.intec-final-cta-section {
background: #ffffff !important;
}
.intec-final-cta-section > .kt-row-column-wrap {
max-width: 100% !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
display: grid !important;
grid-template-columns: 38% 62% !important;
gap: 34px !important;
align-items: center !important;
}
/* Prevent Kadence inner wrappers from adding extra vertical space. */
.intec-final-cta-section > .kt-row-layout-inner,
.intec-final-cta-section > .kt-row-column-wrap,
.intec-final-cta-section > .kt-row-layout-inner > .kt-row-column-wrap {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ---------------------------------------------------------
Final CTA left credibility area
--------------------------------------------------------- */
.intec-final-cta-left {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
.intec-final-cta-left-heading,
.intec-final-cta-left-heading *,
.intec-final-cta-left-heading .kt-adv-heading {
color: #001FB1 !important;
font-size: 26px !important;
line-height: 1.22 !important;
font-weight: 600 !important;
max-width: 520px !important;
margin: 0 0 10px 0 !important;
}
.intec-final-cta-left-copy,
.intec-final-cta-left-copy p {
color: var(--global-palette2) !important;
font-size: 14px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
max-width: 600px !important;
margin-top: 0 !important;
}
/* ---------------------------------------------------------
Final CTA decorative blue band
The original SVG background is preserved. Do not replace this
background with a flat color, or the curve/green accent will
disappear.
--------------------------------------------------------- */
.intec-final-cta-band {
position: relative !important;
overflow: hidden !important;
width: 100% !important;
min-height: 250px !important;
/* Left padding increased to 210px to perfectly clear the wider top curve */
padding: 50px 60px 50px 210px !important;
background-color: transparent !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 100% 100% !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
border-radius: 0 !important;
/*
MATHEMATICAL PATH ANALYSIS:
- Bottom-left of Green starts at x=0 (y=250)
- Blue now overlaps the green slightly to remove the white seam/triangle.
- Top-left of Green ends at x=110 (y=0)
- Top-left of Blue now starts at x=148 (y=0), overlapping the prior shared edge.
*/
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 250' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpattern id='dotPattern' width='12' height='12' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff' fill-opacity='0.15'/%3E%3C/pattern%3E%3C/defs%3E%3Cg%3E%3C!-- Green Convex Curve --%3E%3Cpath fill='%2316E316' d='M110,0 C15,50 0,150 0,250 H4 C4,150 30,50 150,0 Z'/%3E%3C!-- Main Blue Body with slight overlap to eliminate white seam --%3E%3Cpath fill='%230021B9' d='M148,0 H982 A18,18 0 0,1 1000,18 V232 A18,18 0 0,1 982,250 H2 C2,150 28,50 148,0 Z'/%3E%3C!-- Dotted Wave Pattern on Right --%3E%3Cpath fill='url(%23dotPattern)' d='M750,0 C800,50 850,200 1000,250 V0 Z'/%3E%3C/g%3E%3C/svg%3E") !important;
}
/* Inner wrapper alignment */
.intec-final-cta-band > .kt-inside-inner-col {
position: relative !important;
z-index: 5 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
}
/* Heading Typography */
.intec-final-cta-band-heading,
.intec-final-cta-band-heading .kt-adv-heading {
color: #ffffff !important;
font-size: clamp(24px, 4vw, 32px) !important;
line-height: 1.15 !important;
font-weight: 800 !important;
margin: 0 0 25px 0 !important;
text-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
}
/* Vibrant Button Style */
.intec-final-cta-band-button .kb-button,
.intec-final-cta-band-button a {
background: #16E316 !important;
color: #ffffff !important;
border-radius: 6px !important;
padding: 16px 42px !important;
font-size: 16px !important;
font-weight: 700 !important;
text-transform: none !important;
transition: all 0.3s ease !important;
box-shadow: 0 10px 20px rgba(22, 227, 22, 0.25) !important;
}
.intec-final-cta-band-button .kb-button:hover,
.intec-final-cta-band-button a:hover {
transform: translateY(-2px) !important;
background: #12C912 !important;
box-shadow: 0 12px 24px rgba(22, 227, 22, 0.35) !important;
}
/* ---------------------------------------------------------
Final CTA blue-band height refinement
Keeps the decorative band but reduces visual height.
--------------------------------------------------------- */
.intec-final-cta-section .intec-final-cta-band {
min-height: 0 !important;
height: auto !important;
padding-top: 22px !important;
padding-bottom: 22px !important;
display: flex !important;
align-items: center !important;
}
/* ---------------------------------------------------------
Final CTA typography correction
Generic CTA heading rules are scoped so the blue-band heading
remains white while the left heading remains blue.
--------------------------------------------------------- */
.intec-final-cta-section .intec-final-cta-band-heading,
.intec-final-cta-section .intec-final-cta-band-heading *,
.intec-final-cta-section .intec-final-cta-band-heading .kt-adv-heading,
.intec-final-cta-section .intec-final-cta-band h1,
.intec-final-cta-section .intec-final-cta-band h2,
.intec-final-cta-section .intec-final-cta-band h3,
.intec-final-cta-section .intec-final-cta-band .kt-adv-heading,
.intec-final-cta-section .intec-final-cta-band .kt-adv-heading * {
color: #ffffff !important;
font-size: 26px !important;
line-height: 1.22 !important;
font-weight: 600 !important;
}
/* CTA button text standardization */
.intec-final-cta-section .kb-button,
.intec-final-cta-section .kb-btn,
.intec-final-cta-section .kb-button span,
.intec-final-cta-section .kb-btn span {
font-size: 14px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
}
/* ---------------------------------------------------------
Final CTA mobile
Stacks left copy and blue band. On mobile the complex SVG band
is intentionally simplified to a rounded blue card.
--------------------------------------------------------- */
@media (max-width: 767px) {
.intec-final-cta-section > .kt-row-column-wrap,
.intec-final-cta-grid > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 28px !important;
width: calc(100% - 32px) !important;
max-width: 420px !important;
margin-left: auto !important;
margin-right: auto !important;
align-items: start !important;
}
.intec-final-cta-section .wp-block-kadence-column,
.intec-final-cta-grid .wp-block-kadence-column {
width: 100% !important;
max-width: 100% !important;
flex-basis: 100% !important;
}
.intec-final-cta-left,
.intec-final-cta-left > .kt-inside-inner-col {
width: 100% !important;
text-align: center !important;
}
.intec-final-cta-left-heading,
.intec-final-cta-left-heading .kt-adv-heading {
font-size: 28px !important;
line-height: 1.12 !important;
text-align: center !important;
margin-bottom: 16px !important;
}
.intec-final-cta-left-copy,
.intec-final-cta-left-copy p {
font-size: 16px !important;
line-height: 1.55 !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.intec-final-cta-band {
width: 100% !important;
max-width: 420px !important;
min-height: auto !important;
padding: 32px 24px !important;
margin-left: auto !important;
margin-right: auto !important;
background-image: none !important;
background-color: #0021B9 !important;
border-radius: 20px !important;
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16) !important;
}
.intec-final-cta-band > .kt-inside-inner-col {
width: 100% !important;
min-height: auto !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.intec-final-cta-band-heading,
.intec-final-cta-band-heading .kt-adv-heading {
font-size: 25px !important;
line-height: 1.18 !important;
text-align: center !important;
margin: 0 0 22px 0 !important;
max-width: 100% !important;
}
.intec-final-cta-band-button {
align-self: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.intec-final-cta-band-button .kb-button,
.intec-final-cta-band-button a,
.intec-final-cta-band-button .wp-block-button__link {
padding: 13px 30px !important;
font-size: 15px !important;
border-radius: 7px !important;
}
}
/* =========================================================
SECTION 09 | HOME PAGE | RESPONSIVE REVIEW NOTES
========================================================= */
/* ---------------------------------------------------------
Nothing below this line intentionally changes layout.
During tablet/mobile testing, check in this order:
1. Hero
- Confirm background/legacy art behavior on tablet/mobile.
- If the Kadence background image is now the only intended image,
legacy .intec-hero-art-section rules may be removable later.
2. Modernization
- Confirm icon-flow wrapping at tablet.
- Confirm mobile one-column stack and hidden arrows.
3. Advisory + Services
- Confirm tablet 2-column service cards and mobile one-column cards.
- Watch card min-height on tablet.
4. AI Operations + Agent Workflow
- Confirm divider is desktop-only.
- Confirm workflow wraps correctly at tablet/mobile.
5. Industries
- Confirm WordPress Columns row stacks at tablet.
- Do not re-add failed .kt-row-column-wrap card-spread rules.
6. Advisory Depth
- Confirm circle-to-card transformation on tablet/mobile.
7. Final CTA
- Preserve decorative desktop SVG band.
- Mobile intentionally uses simple rounded blue card.
--------------------------------------------------------- */
/* =========================================================
SECTION 38 | SERVICES PAGE
Services Page Hero
Purpose:
Controls the Services page hero layout, copy position,
heading stack, divider, paragraph, and compact pillar area.
Classes used:
- intec-services-hero
- intec-services-hero-copy
- intec-services-eyebrow
- intec-services-title
========================================================= */
/* Outer hero section */
.intec-services-hero {
position: relative;
overflow: hidden;
min-height: 455px !important;
padding-top: 42px !important;
padding-right: 24px !important;
padding-bottom: 18px !important;
padding-left: 24px !important;
background-position: right center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
/* Force Kadence row contents toward the top */
.intec-services-hero .kt-row-column-wrap {
align-items: flex-start !important;
}
/* Hero copy container */
.intec-services-hero-copy {
max-width: 620px !important;
margin-left: 0 !important;
margin-right: auto !important;
margin-top: -52px !important;
padding-top: 0 !important;
text-align: left !important;
}
/* SERVICES eyebrow label */
.intec-services-eyebrow {
position: relative;
z-index: 2;
color: #00A83B !important;
font-size: 13px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: 0.7px !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
Services Page Hero Background Width Control
Purpose:
Prevents the hero background image from stretching endlessly
on wide browser screens. Keeps the visual field contained
while allowing the hero section itself to remain full width.
========================================================= */
@media (min-width: 1025px) {
.intec-services-hero {
background-size: 1360px auto !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-color: #f6f9fd !important;
overflow: hidden !important;
}
}
/* =========================================================
Services Page Hero Pillar Vertical Spacing
Purpose:
Moves the hero pillar cards slightly lower so the space
between the intro paragraph and cards feels more balanced.
========================================================= */
@media (min-width: 1025px) {
.intec-services-pillars {
position: relative !important;
transform: translateY(2px) !important;
}
}
/* =========================================================
Services Page Hero Content Horizontal Alignment
Purpose:
Aligns the Services hero copy and pillar cards with the
outer gray service section rail while keeping the hero
background decorative and full width.
========================================================= */
@media (min-width: 1025px) {
.intec-services-hero-copy {
position: relative !important;
transform: translateX(-58px) !important;
}
}
/* =========================================================
SECTION 39 | SERVICES PAGE
Services Page Hero Title Position and Visual Scale
Purpose:
Visually reduces the main Services hero title, softens
the weight, and restores breathing room under SERVICES.
========================================================= */
.intec-services-title {
position: relative;
top: -8px;
margin-top: 0 !important;
margin-bottom: -14px !important;
padding-top: 0 !important;
color: #001FB1 !important;
font-weight: 700 !important;
max-width: 590px !important;
text-align: left !important;
transform: scale(0.87);
transform-origin: left top;
}
.intec-services-title * {
font-weight: 700 !important;
}
/* Hero paragraph */
.intec-services-hero-copy p {
color: #24324A !important;
font-size: 16px !important;
line-height: 1.42 !important;
max-width: 560px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
text-align: left !important;
}
/* =========================================================
SECTION 40 | SERVICES PAGE
Services Page Hero Divider
Purpose:
Creates a short, visible blue-to-green divider aligned
with the left edge of the hero heading and paragraph, with
tighter spacing above and below.
========================================================= */
.intec-services-hero-divider {
width: 120px !important;
max-width: 120px !important;
height: 3px !important;
min-height: 3px !important;
margin-top: 3px !important;
margin-bottom: 6px !important;
margin-left: 0 !important;
margin-right: auto !important;
padding: 0 !important;
background: linear-gradient(90deg, #001FB1 0%, #16E316 100%) !important;
border: none !important;
border-radius: 999px !important;
display: block !important;
}
/* Targets inner Kadence divider line if Kadence wraps the visual line */
.intec-services-hero-divider * {
width: 120px !important;
max-width: 120px !important;
height: 3px !important;
min-height: 3px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: auto !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
/* Tablet adjustments */
@media (max-width: 1024px) {
.intec-services-hero {
min-height: 520px !important;
padding-top: 38px !important;
padding-bottom: 34px !important;
}
.intec-services-hero-copy {
margin-top: -40px !important;
max-width: 590px !important;
}
.intec-services-title,
.intec-services-title * {
font-size: 31px !important;
line-height: 1.1 !important;
}
}
/* Mobile adjustments */
@media (max-width: 767px) {
.intec-services-hero {
min-height: auto !important;
padding-top: 34px !important;
padding-bottom: 42px !important;
background-position: center top !important;
}
.intec-services-hero-copy {
margin-top: 0 !important;
max-width: 100% !important;
}
.intec-services-title {
top: -10px;
margin-bottom: -4px !important;
}
.intec-services-title,
.intec-services-title * {
font-size: 29px !important;
line-height: 1.12 !important;
}
.intec-services-hero-copy p {
font-size: 15.5px !important;
line-height: 1.45 !important;
}
}
/* =========================================================
SECTION 41 | SERVICES PAGE
Services Page Hero Pillar Cards
Purpose:
Styles the three Services hero pillars as flatter compact
cards, visually aligned with the homepage industry cards
while keeping them inside the hero image area.
========================================================= */
.intec-services-pillars {
margin-top: 12px !important;
width: 820px !important;
max-width: 820px !important;
transform: translateY(-10px);
}
/* Controls spacing between the three cards */
.intec-services-pillars .kt-row-column-wrap {
column-gap: 14px !important;
row-gap: 10px !important;
align-items: stretch !important;
}
/* Makes Kadence columns stretch evenly */
.intec-services-pillars .wp-block-kadence-column {
display: flex !important;
}
/* Card body */
.intec-services-pillars .wp-block-kadence-column > .kt-inside-inner-col {
position: relative;
width: 100% !important;
min-height: 92px !important;
padding: 11px 14px 13px 14px !important;
background: rgba(255, 255, 255, 0.78) !important;
border: 1px solid rgba(210, 225, 245, 0.95) !important;
border-radius: 13px !important;
box-shadow: 0 7px 18px rgba(0, 31, 177, 0.065) !important;
overflow: hidden !important;
}
/* Bottom accent line */
.intec-services-pillars .wp-block-kadence-column > .kt-inside-inner-col::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background: #001FB1;
}
/* First card green accent, similar to homepage pattern */
.intec-services-pillars .wp-block-kadence-column:nth-child(1) > .kt-inside-inner-col::after {
background: #00A83B;
}
/* Pillar headings */
.intec-services-pillars h1,
.intec-services-pillars h2,
.intec-services-pillars h3,
.intec-services-pillars h4,
.intec-services-pillars h5,
.intec-services-pillars h6 {
color: #001FB1 !important;
font-size: 14.5px !important;
line-height: 1.05 !important;
font-weight: 800 !important;
margin-top: 0 !important;
margin-bottom: 5px !important;
}
/* Pillar descriptions */
.intec-services-pillars p {
color: #24324A !important;
font-size: 13px !important;
line-height: 1.22 !important;
margin: 0 !important;
}
/* =========================================================
SECTION 42 | SERVICES PAGE
Services Page Hero Pillar Icon
Purpose:
Styles compact in-card icons for the Services hero pillars.
Test on first card only.
========================================================= */
.intec-pillar-icon {
margin-bottom: 6px !important;
line-height: 1 !important;
}
.intec-pillar-icon svg,
.intec-pillar-icon i {
width: 18px !important;
height: 18px !important;
color: #00A83B !important;
}
/* =========================================================
SECTION 43 | SERVICES PAGE
Services Page Hero Final Height Control
Purpose:
Locks the compact hero height after visual tuning so the
selector bar and service panel appear higher on the page.
========================================================= */
.intec-services-hero {
min-height: 320px !important;
height: 320px !important;
max-height: 320px !important;
}
/* =========================================================
SECTION 44 | SERVICES PAGE
Services Selector Section
Purpose:
Holds the service selector tiles and selected service slide.
Kadence Tabs remains the content-switching engine.
========================================================= */
.intec-services-selector-section {
/* Previous value before Cloud image blend cleanup: background: #F6F9FD */
background: #ffffff !important;
padding: 2px 12px 12px 12px !important;
margin-top: 0 !important;
border-top: 1px solid rgba(0, 31, 177, 0.08);
border-bottom: 1px solid rgba(0, 31, 177, 0.10);
overflow-x: hidden !important;
box-sizing: border-box !important;
}
/* =========================================================
Services Page Selector Outer Width Control
Purpose:
Uses the same standard content width as the homepage so the
Services page follows the site-wide layout rhythm.
========================================================= */
.intec-services-selector-section > .kt-row-layout-inner > .kt-row-column-wrap,
.wp-block-kadence-rowlayout.intec-services-selector-section > .kt-row-layout-inner > .kt-row-column-wrap {
max-width: 1360px !important;
width: calc(100% - 80px) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/* =========================================================
Services Page Tabs Width Lock
Purpose:
Keeps selector tiles and service slide aligned within the
standard homepage content width.
========================================================= */
.intec-services-tabs {
max-width: 1360px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/* =========================================================
Services Page Selector Content Vertical Position
Purpose:
Moves the service selector navbar and slide upward inside
the gray selector section without changing hero height or
pulling the selector section into the hero.
========================================================= */
@media (min-width: 1025px) {
.intec-services-tabs {
position: relative !important;
transform: translateY(-10px) !important;
}
}
/* =========================================================
SECTION 45 | SERVICES PAGE
Services Selector Tiles
Purpose:
Converts Kadence tab navigation into compact service
selector tiles using full homepage service names.
========================================================= */
.intec-services-tabs .kt-tabs-title-list,
.intec-services-tabs ul.kt-tabs-title-list {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
align-items: stretch !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
overflow: visible !important;
}
.intec-services-tabs .kt-title-item {
flex: 0 0 calc(25% - 8px) !important;
max-width: calc(25% - 8px) !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-services-tabs .kt-tab-title {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
/* Previous value before navbar height reduction: min-height: 54px */
min-height: 48px !important;
/* Previous value before navbar height reduction: padding: 10px 14px 10px 64px */
padding: 7px 14px 7px 64px !important;
border-radius: 14px !important;
border: 1px solid rgba(0, 31, 177, 0.14) !important;
background: rgba(255, 255, 255, 0.96) !important;
color: #24324A !important;
/* Previous value before selector text reduction: font-size: 12.5px */
font-size: 11.5px !important;
line-height: 1.18 !important;
font-weight: 750 !important;
text-align: left !important;
white-space: normal !important;
text-decoration: none !important;
box-shadow: 0 6px 14px rgba(0, 31, 177, 0.045) !important;
}
.intec-services-tabs .kt-title-item.kt-tab-title-active .kt-tab-title,
.intec-services-tabs .kt-tab-title.kt-tab-title-active,
.intec-services-tabs .kt-tab-title[aria-selected="true"] {
background: #001FB1 !important;
border-color: #001FB1 !important;
color: #ffffff !important;
box-shadow: 0 8px 18px rgba(0, 31, 177, 0.18) !important;
}
.intec-services-tabs .kt-tab-title:hover {
border-color: #001FB1 !important;
color: #001FB1 !important;
transform: translateY(-1px);
}
.intec-services-tabs .kt-title-item.kt-tab-title-active .kt-tab-title:hover,
.intec-services-tabs .kt-tab-title[aria-selected="true"]:hover {
color: #ffffff !important;
}
.intec-services-tabs .kt-tabs-content-wrap {
width: 100% !important;
max-width: 100% !important;
margin-top: 16px !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* =========================================================
Services Page Selector Tile Alignment
Purpose:
Aligns the service selector tile row with the white service
slide and hero content without changing the slide width.
========================================================= */
.intec-services-tabs .kt-tabs-title-list,
.intec-services-tabs ul.kt-tabs-title-list {
padding-left: 18px !important;
padding-right: 18px !important;
box-sizing: border-box !important;
}
/* =========================================================
SECTION 46 | SERVICES PAGE
Services Selector Tile Icons
Purpose:
Adds homepage service icons to the selector tiles.
IMPORTANT:
Icon mapping assumes the tab order remains unchanged.
========================================================= */
.intec-services-tabs .kt-tab-title::before {
content: "" !important;
position: absolute !important;
left: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
/* Previous value before selector height reduction: 36px */
width: 30px !important;
height: 30px !important;width: 36px !important;
height: 36px !important;
display: block !important;
border-radius: 8px !important;
background-color: rgba(255, 255, 255, 0.98) !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
box-shadow: 0 2px 8px rgba(0, 31, 177, 0.10) !important;
z-index: 5 !important;
}
/* 1. Technology Transformation Advisory */
.intec-services-tabs .kt-title-item:nth-child(1) .kt-tab-title::before {
background-image: url("/wp-content/uploads/2026/05/ChatGPT-Image-May-4-2026-03_25_18-PM-1-e1777924953866.png") !important;
}
/* 2. Cloud, Hybrid, and Data Center Modernization */
.intec-services-tabs .kt-title-item:nth-child(2) .kt-tab-title::before {
background-image: url("/wp-content/uploads/2026/05/02_cloud_hybrid_data_center_modernization.png") !important;
}
/* 3. Operational Resilience, Disaster Recovery, and Compliance Enablement */
.intec-services-tabs .kt-title-item:nth-child(3) .kt-tab-title::before {
background-image: url("/wp-content/uploads/2026/05/03_operational_resilience_dr_compliance.png") !important;
}
/* 4. FinOps, TBM, and Technology Value Management */
.intec-services-tabs .kt-title-item:nth-child(4) .kt-tab-title::before {
background-image: url("/wp-content/uploads/2026/05/04_finops_tbm_value_management.png") !important;
}
/* 5. Observability Capacity, Demand, and Performance Planning */
.intec-services-tabs .kt-title-item:nth-child(5) .kt-tab-title::before {
background-image: url("/wp-content/uploads/2026/05/05_observability_capacity_performance.png") !important;
}
/* 6. AI-Enabled and Agentic Operations */
.intec-services-tabs .kt-title-item:nth-child(6) .kt-tab-title::before {
background-image: url("/wp-content/uploads/2026/05/06_ai_enabled_agentic_operations.png") !important;
}
/* 7. Fractional CIO and CTO Advisory */
.intec-services-tabs .kt-title-item:nth-child(7) .kt-tab-title::before {
background-image: url("/wp-content/uploads/2026/05/07_fractional_cio_cto_advisory.png") !important;
}
/* =========================================================
SECTION 47 | SERVICES PAGE
Service Slide Canvas
Purpose:
Creates the white slide-like service detail panel inside
the selected Kadence tab.
========================================================= */
.intec-service-slide {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
background: #ffffff !important;
border-top: 1px solid rgba(0, 31, 177, 0.10);
border-bottom: 5px solid #001FB1;
box-shadow: 0 12px 30px rgba(0, 31, 177, 0.06);
box-sizing: border-box !important;
transform: none !important;
}
.intec-service-slide > .kt-row-column-wrap,
.intec-service-slide > .kt-row-layout-inner > .kt-row-column-wrap {
width: 100% !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 10px 8px 10px 8px !important;
box-sizing: border-box !important;
}
/* =========================================================
Services Page Service Slide Canvas Expansion
Purpose:
Expands the white service slide closer to the gray selector
section edges by offsetting Kadence tab-content inset.
Keeps the slide within the page rhythm without using 100vw.
========================================================= */
.intec-services-tabs .kt-tabs-content-wrap {
padding-left: 0 !important;
padding-right: 0 !important;
overflow: visible !important;
}
.intec-service-slide {
width: calc(100% + 40px) !important;
max-width: calc(100% + 40px) !important;
margin-left: -20px !important;
margin-right: -20px !important;
}
/* =========================================================
Services Page Service Slide Vertical Alignment
Purpose:
Moves the white service slide canvas upward so it sits
closer to the top divider line, reducing the gray band
without changing navbar position or navbar spacing.
========================================================= */
.intec-service-slide {
margin-top: -18px !important;
}
/* =========================================================
SECTION 48 | SERVICES PAGE
Service Slide Grid
Purpose:
Creates the three-column slide layout:
left rail, problem column, and solution column.
========================================================= */
.intec-service-slide-grid {
min-height: 390px !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
.intec-service-slide-grid > .kt-row-column-wrap,
.intec-service-slide-grid > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 18% 34% 48% !important;
column-gap: 4px !important;
align-items: stretch !important;
padding-top: 0 !important;
margin-top: 0 !important;
box-sizing: border-box !important;
}
.intec-service-slide-grid .wp-block-kadence-column > .kt-inside-inner-col {
min-height: 100% !important;
padding-top: 0 !important;
}
/* =========================================================
SECTION 49 | SERVICES PAGE
Slide Left Rail
Purpose:
Styles the SERVICE rail inside the service slide.
========================================================= */
.intec-service-rail {
border-right: 1px solid rgba(0, 31, 177, 0.14);
padding: 4px 18px 8px 0 !important;
}
.intec-service-rail h1:not(.intec-service-label),
.intec-service-rail h2:not(.intec-service-label),
.intec-service-rail h3:not(.intec-service-label),
.intec-service-rail h4:not(.intec-service-label),
.intec-service-rail h5:not(.intec-service-label),
.intec-service-rail h6:not(.intec-service-label) {
color: #001FB1 !important;
margin-top: 0 !important;
margin-bottom: 12px !important;
font-weight: 800 !important;
line-height: 1.12 !important;
}
.intec-service-rail p {
color: #24324A !important;
font-size: 14px !important;
line-height: 1.45 !important;
margin-top: 0 !important;
margin-bottom: 14px !important;
}
.intec-service-rail em {
color: #001FB1 !important;
font-style: italic !important;
font-weight: 500 !important;
}
.intec-service-rail .intec-service-label,
.intec-service-rail .intec-service-label *,
.intec-service-label,
.intec-service-label * {
color: #00A83B !important;
font-size: 13px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: 0.7px !important;
margin-top: 0 !important;
margin-bottom: 12px !important;
padding: 0 !important;
text-transform: uppercase !important;
background: transparent !important;
outline: none !important;
}
.intec-service-label {
display: inline-block !important;
width: auto !important;
}
.intec-service-rail-divider {
width: 120px !important;
max-width: 120px !important;
height: 3px !important;
min-height: 3px !important;
margin-top: 12px !important;
margin-bottom: 16px !important;
margin-left: 0 !important;
margin-right: auto !important;
padding: 0 !important;
background: linear-gradient(90deg, #001FB1 0%, #16E316 100%) !important;
border: none !important;
border-radius: 999px !important;
display: block !important;
}
.intec-service-rail-divider * {
width: 120px !important;
max-width: 120px !important;
height: 3px !important;
min-height: 3px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
/* =========================================================
Services Page Slide Left Rail Paragraph Hierarchy
Purpose:
Separates the primary service description from the smaller
trust/proof statement so the left rail has clearer hierarchy.
========================================================= */
/* Primary service description beneath the divider */
.intec-service-rail p.intec-service-rail-primary,
.intec-service-rail .intec-service-rail-primary,
.intec-service-rail .intec-service-rail-primary *,
p.intec-service-rail-primary,
.intec-service-rail-primary * {
color: #24324A !important;
font-size: 13.5px !important;
line-height: 1.45 !important;
font-weight: 400 !important;
margin-top: 0 !important;
margin-bottom: 14px !important;
}
/* Smaller trust/proof statement near the bottom of the rail */
.intec-service-rail p.intec-service-rail-proof,
.intec-service-rail .intec-service-rail-proof,
.intec-service-rail .intec-service-rail-proof *,
p.intec-service-rail-proof,
.intec-service-rail-proof * {
color: #24324A !important;
font-size: 10.5px !important;
line-height: 1.28 !important;
font-weight: 500 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* =========================================================
SECTION 50 | SERVICES PAGE
Slide Content Columns and Titles
Purpose:
Styles the middle and right content columns and section
headers such as Problem, Solution, Outcome, and Focus.
========================================================= */
/* Middle column */
.intec-service-middle {
padding: 0 10px 0 4px !important;
border-right: 1px solid rgba(0, 31, 177, 0.12);
}
/* Right column */
.intec-service-right {
padding: 0 0 0 12px !important;
}
/* Section titles: A, B, C, D */
.intec-service-block-title,
.intec-service-block-title .kt-adv-heading {
position: relative !important;
color: #001FB1 !important;
font-size: 18px !important;
line-height: 1.22 !important;
font-weight: 800 !important;
margin-top: 0 !important;
margin-bottom: 8px !important;
padding-left: 34px !important;
}
/* Circular letter badges */
.intec-service-block-title::before {
position: absolute;
left: 0;
top: -2px;
width: 24px;
height: 24px;
border-radius: 999px;
background: #001FB1;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 1;
font-weight: 800;
box-shadow: 0 3px 8px rgba(0, 31, 177, 0.18);
}
.intec-badge-a::before {
content: "A";
}
.intec-badge-b::before {
content: "B";
}
/* Standard body copy in middle and right columns */
.intec-service-block-copy,
.intec-service-middle p,
.intec-service-right p {
color: #24324A !important;
font-size: 13.5px !important;
line-height: 1.45 !important;
margin-top: 0 !important;
margin-bottom: 14px !important;
}
/* =========================================================
Services Page Outcome Section Spacing
Purpose:
Adds breathing room between the Problem Map and Outcome
section so Section C feels intentionally separated.
========================================================= */
.intec-service-middle .intec-service-block-title.intec-badge-c {
margin-top: 14px !important;
}
/* =========================================================
SECTION 51 | SERVICES PAGE
Problem Map
Purpose:
Creates a compact diagnostic diagram showing fragmented
technology inputs crossing into downstream execution risks.
========================================================= */
.intec-problem-map {
position: relative !important;
margin-top: 10px !important;
padding: 0 !important;
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
border: 1px solid rgba(0, 31, 177, 0.13) !important;
border-radius: 12px !important;
box-shadow: 0 6px 14px rgba(0, 31, 177, 0.045) !important;
overflow: hidden !important;
}
/* Central tangled connector field */
/* Central tangled connector field */
.intec-problem-map::before {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 240px !important;
height: 104px !important;
transform: translate(-50%, -50%) !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 100% 100% !important;
opacity: 0.95 !important;
pointer-events: none !important;
z-index: 1 !important;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20260%20110%27%3E%3Cpath%20d%3D%27M6%2010%20C80%2010%20170%2090%20254%2020%27%20stroke%3D%27%23386BDA%27%20stroke-width%3D%271.55%27%20stroke-opacity%3D%270.68%27%20stroke-dasharray%3D%274%204%27%20fill%3D%27none%27/%3E%3Cpath%20d%3D%27M6%2010%20C90%2025%20160%2035%20254%2050%27%20stroke%3D%27%23E46A6A%27%20stroke-width%3D%271.55%27%20stroke-opacity%3D%270.62%27%20stroke-dasharray%3D%274%204%27%20fill%3D%27none%27/%3E%3Cpath%20d%3D%27M6%2010%20C90%2040%20160%2070%20254%2090%27%20stroke%3D%27%23386BDA%27%20stroke-width%3D%271.55%27%20stroke-opacity%3D%270.62%27%20stroke-dasharray%3D%274%204%27%20fill%3D%27none%27/%3E%3Cpath%20d%3D%27M6%2030%20C90%2010%20170%2080%20254%2010%27%20stroke%3D%27%23E46A6A%27%20stroke-width%3D%271.55%27%20stroke-opacity%3D%270.62%27%20stroke-dasharray%3D%274%204%27%20fill%3D%27none%27/%3E%3Cpath%20d%3D%27M6%2030%20C80%2030%20170%2050%20254%2070%27%20stroke%3D%27%23386BDA%27%20stroke-width%3D%271.55%27%20stroke-opacity%3D%270.68%27%20stroke-dasharray%3D%274%204%27%20fill%3D%27none%27/%3E%3Cpath%20d%3D%27M6%2050%20C90%2010%20170%2020%20254%2030%27%20stroke%3D%27%23386BDA%27%20stroke-width%3D%271.55%27%20stroke-opacity%3D%270.62%27%20stroke-dasharray%3D%274%204%27%20fill%3D%27none%27/%3E%3Cpath%20d%3D%27M6%2050%20C85%2050%20170%2050%20254%2050%27%20stroke%3D%27%23E46A6A%27%20stroke-width%3D%271.55%27%20stroke-opacity%3D%270.66%27%20stroke-dasharray%3D%274%204%27%20fill%3D%27none%27/%3E%3Cpath%20d%3D%27M6%2050%20C85%2090%20170%2080%20254%2090%27%20stroke%3D%27%23386BDA%27%20stroke-width%3D%271.55%27%20stroke-opacity%3D%270.62%27%20stroke-dasharray%3D%274%204%27%20fill%3D%27none%27/%3E%3Cpath%20d%3D%27M6%2070%20C90%2030%20170%2020%20254%2010%27%20stroke%3D%27%23E46A6A%27%20stroke-width%3D%271.55%27%20stroke-opacity%3D%270.62%27%20stroke-dasharray%3D%274%204%27%20fill%3D%27none%27/%3E%3Cpath%20d%3D%27M6%2070%20C80%2070%20170%2070%20254%2070%27%20stroke%3D%27%23386BDA%27%20stroke-width%3D%271.55%27%20stroke-opacity%3D%270.68%27%20stroke-dasharray%3D%274%204%27%20fill%3D%27none%27/%3E%3Cpath%20d%3D%27M6%2090%20C90%2010%20170%2040%20254%2020%27%20stroke%3D%27%23386BDA%27%20stroke-width%3D%271.55%27%20stroke-opacity%3D%270.62%27%20stroke-dasharray%3D%274%204%27%20fill%3D%27none%27/%3E%3Cpath%20d%3D%27M6%2090%20C90%2070%20170%2050%20254%2050%27%20stroke%3D%27%23E46A6A%27%20stroke-width%3D%271.55%27%20stroke-opacity%3D%270.62%27%20stroke-dasharray%3D%274%204%27%20fill%3D%27none%27/%3E%3Cpath%20d%3D%27M6%2090%20C90%2090%20170%2090%20254%2090%27%20stroke%3D%27%23386BDA%27%20stroke-width%3D%271.55%27%20stroke-opacity%3D%270.68%27%20stroke-dasharray%3D%274%204%27%20fill%3D%27none%27/%3E%3C/svg%3E") !important;
}
.intec-problem-map > .kt-row-column-wrap,
.intec-problem-map > .kt-row-layout-inner > .kt-row-column-wrap {
position: relative !important;
z-index: 2 !important;
display: grid !important;
grid-template-columns: 33% 33% !important;
justify-content: space-between !important;
column-gap: 0 !important;
align-items: stretch !important;
padding: 0 !important;
margin: 0 !important;
}
/* Force Kadence columns inside the problem map to respect the compact endpoint layout */
.intec-problem-map .wp-block-kadence-column,
.intec-problem-map .wp-block-kadence-column > .kt-inside-inner-col {
width: 100% !important;
max-width: 100% !important;
min-height: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* List containers */
.intec-problem-map-left,
.intec-problem-map-right {
position: relative !important;
z-index: 3 !important;
height: 100% !important;
padding: 6px 6px !important;
background: rgba(255, 255, 255, 0.94) !important;
border: 1px solid rgba(0, 31, 177, 0.10) !important;
border-radius: 9px !important;
box-shadow: 0 3px 8px rgba(0, 31, 177, 0.025) !important;
}
.intec-problem-map-right {
border-color: rgba(239, 68, 68, 0.16) !important;
}
.intec-problem-map ul,
.intec-problem-map-left ul,
.intec-problem-map-right ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-problem-map li,
.intec-problem-map-left li,
.intec-problem-map-right li,
.intec-problem-map p,
.intec-problem-map-left p,
.intec-problem-map-right p {
position: relative !important;
color: #24324A !important;
font-size: 9.7px !important;
line-height: 1.14 !important;
font-weight: 600 !important;
margin: 0 0 5px 0 !important;
padding-left: 17px !important;
white-space: normal !important;
}
/* Left-side blue icon markers */
.intec-problem-map-left li::before,
.intec-problem-map-left p::before {
position: absolute !important;
left: 0 !important;
top: 0px !important;
width: 11px !important;
height: 11px !important;
border-radius: 4px !important;
background: rgba(0, 31, 177, 0.06) !important;
border: 1px solid rgba(0, 31, 177, 0.25) !important;
color: #001FB1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 7px !important;
line-height: 1 !important;
font-weight: 800 !important;
}
/* Specific left-side markers */
.intec-problem-map-left li:nth-child(1)::before,
.intec-problem-map-left p:nth-child(1)::before {
content: "▦" !important;
}
.intec-problem-map-left li:nth-child(2)::before,
.intec-problem-map-left p:nth-child(2)::before {
content: "▣" !important;
}
.intec-problem-map-left li:nth-child(3)::before,
.intec-problem-map-left p:nth-child(3)::before {
content: "▤" !important;
}
.intec-problem-map-left li:nth-child(4)::before,
.intec-problem-map-left p:nth-child(4)::before {
content: "▥" !important;
}
.intec-problem-map-left li:nth-child(5)::before,
.intec-problem-map-left p:nth-child(5)::before {
content: "⚙" !important;
}
/* Right-side red consequence markers */
.intec-problem-map-right li::before,
.intec-problem-map-right p::before {
content: "!" !important;
position: absolute !important;
left: 0 !important;
top: 0px !important;
width: 11px !important;
height: 11px !important;
border-radius: 999px !important;
background: rgba(239, 68, 68, 0.08) !important;
border: 1px solid rgba(239, 68, 68, 0.55) !important;
color: #EF4444 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 7px !important;
line-height: 1 !important;
font-weight: 900 !important;
}
/* =========================================================
SECTION 52 | SERVICES PAGE
Solution Flow
Purpose:
Creates a compact five-step process ribbon inside the
right service slide column.
========================================================= */
.intec-solution-flow {
margin-top: 10px !important;
margin-bottom: 8px !important;
}
.intec-solution-flow > .kt-row-column-wrap,
.intec-solution-flow > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
column-gap: 5px !important;
align-items: stretch !important;
padding: 0 !important;
margin: 0 !important;
}
.intec-solution-flow .wp-block-kadence-column > .kt-inside-inner-col {
position: relative !important;
min-height: 72px !important;
padding: 10px 7px 8px 7px !important;
background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%) !important;
border: 1px solid rgba(0, 31, 177, 0.16) !important;
border-radius: 11px !important;
text-align: center !important;
box-shadow: 0 6px 14px rgba(0, 31, 177, 0.055) !important;
overflow: visible !important;
}
.intec-solution-flow .wp-block-kadence-column:not(:last-child) > .kt-inside-inner-col::after {
content: "" !important;
position: absolute !important;
right: -11px !important;
top: 50% !important;
width: 18px !important;
height: 32px !important;
transform: translateY(-50%) !important;
background: linear-gradient(90deg, rgba(0, 31, 177, 0.95), rgba(0, 112, 255, 0.72)) !important;
clip-path: polygon(0 0, 100% 50%, 0 100%, 35% 50%) !important;
z-index: 5 !important;
filter: drop-shadow(0 2px 4px rgba(0, 31, 177, 0.18)) !important;
}
.intec-solution-flow h1,
.intec-solution-flow h2,
.intec-solution-flow h3,
.intec-solution-flow h4,
.intec-solution-flow h5,
.intec-solution-flow h6,
.intec-solution-flow .kt-adv-heading {
color: #001FB1 !important;
font-size: 11.2px !important;
line-height: 1.08 !important;
font-weight: 800 !important;
margin-top: 0 !important;
margin-bottom: 4px !important;
text-align: center !important;
}
.intec-solution-flow p {
color: #24324A !important;
font-size: 9.2px !important;
line-height: 1.16 !important;
margin: 0 !important;
text-align: center !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
.intec-solution-flow .wp-block-kadence-column:last-child > .kt-inside-inner-col {
background: linear-gradient(180deg, #ffffff 0%, rgba(22, 227, 22, 0.09) 100%) !important;
border-color: rgba(0, 168, 59, 0.34) !important;
box-shadow: 0 6px 14px rgba(0, 168, 59, 0.08) !important;
}
/* =========================================================
SECTION 53 | SERVICES PAGE
Selector and Slide Responsive Rules
Purpose:
Keeps selector tiles and service slide usable on tablet
and mobile screens.
========================================================= */
@media (max-width: 1024px) {
.intec-services-selector-section > .kt-row-layout-inner > .kt-row-column-wrap,
.wp-block-kadence-rowlayout.intec-services-selector-section > .kt-row-layout-inner > .kt-row-column-wrap {
width: calc(100% - 40px) !important;
}
.intec-services-tabs .kt-title-item {
flex: 0 0 calc(50% - 6px) !important;
max-width: calc(50% - 6px) !important;
}
.intec-service-slide-grid > .kt-row-column-wrap,
.intec-service-slide-grid > .kt-row-layout-inner > .kt-row-column-wrap {
grid-template-columns: 1fr !important;
row-gap: 22px !important;
}
.intec-service-rail,
.intec-service-middle {
border-right: none !important;
border-bottom: 1px solid rgba(0, 31, 177, 0.12);
padding-right: 0 !important;
padding-bottom: 20px !important;
}
.intec-service-right {
padding-left: 0 !important;
}
}
@media (max-width: 767px) {
.intec-services-selector-section {
padding: 12px 16px 14px 16px !important;
}
.intec-services-tabs .kt-tabs-title-list,
.intec-services-tabs ul.kt-tabs-title-list {
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: none;
}
.intec-services-tabs .kt-tabs-title-list::-webkit-scrollbar {
display: none;
}
.intec-services-tabs .kt-title-item {
flex: 0 0 260px !important;
max-width: 260px !important;
}
.intec-solution-flow > .kt-row-column-wrap,
.intec-solution-flow > .kt-row-layout-inner > .kt-row-column-wrap {
grid-template-columns: 1fr !important;
row-gap: 8px !important;
}
.intec-solution-flow .wp-block-kadence-column:not(:last-child) > .kt-inside-inner-col::after {
display: none !important;
}
}
/* =========================================================
SECTION 54 | SERVICES PAGE
Outcome Cards
Purpose:
Creates a compact 2x2 outcome grid under the Problem
section without consuming excessive vertical space.
========================================================= */
.intec-badge-c::before {
content: "C";
}
.intec-outcome-grid {
margin-top: 10px !important;
}
.intec-outcome-grid > .kt-row-column-wrap,
.intec-outcome-grid > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
padding: 0 !important;
margin: 0 !important;
}
.intec-outcome-grid .wp-block-kadence-column > .kt-inside-inner-col {
min-height: 82px !important;
padding: 10px 10px 9px 10px !important;
background: #ffffff !important;
border: 1px solid rgba(0, 31, 177, 0.12) !important;
border-radius: 10px !important;
box-shadow: 0 5px 12px rgba(0, 31, 177, 0.04) !important;
border-bottom: 3px solid rgba(0, 168, 59, 0.55) !important;
}
.intec-outcome-grid h1,
.intec-outcome-grid h2,
.intec-outcome-grid h3,
.intec-outcome-grid h4,
.intec-outcome-grid h5,
.intec-outcome-grid h6,
.intec-outcome-grid .kt-adv-heading {
color: #001FB1 !important;
font-size: 11.5px !important;
line-height: 1.12 !important;
font-weight: 800 !important;
margin-top: 0 !important;
margin-bottom: 4px !important;
}
.intec-outcome-grid p {
color: #24324A !important;
font-size: 9.7px !important;
line-height: 1.22 !important;
margin: 0 !important;
}
/* =========================================================
SECTION 55 | SERVICES PAGE
Engagement Focus Cards
Purpose:
Creates a compact four-card engagement focus area under
the Governance Framework bar in the right service slide column.
========================================================= */
.intec-badge-d::before {
content: "D";
}
/* Give D heading breathing room below the governance framework bar */
.intec-service-block-title.intec-badge-d {
margin-top: 14px !important;
margin-bottom: 11px !important;
}
/* Engagement grid alignment */
.intec-engagement-grid {
width: calc(100% + 2px) !important;
max-width: none !important;
margin: 10px 0 0 -10px !important;
box-sizing: border-box !important;
}
.intec-engagement-grid > .kt-row-column-wrap,
.intec-engagement-grid > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 8px !important;
padding: 0 !important;
margin: 0 !important;
align-items: stretch !important;
}
/* Engagement card */
.intec-engagement-grid .wp-block-kadence-column > .kt-inside-inner-col {
position: relative !important;
min-height: 136px !important;
height: 100% !important;
padding: 66px 10px 14px 10px !important;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
border: 1px solid rgba(0, 31, 177, 0.14) !important;
border-radius: 12px !important;
box-shadow: 0 6px 14px rgba(0, 31, 177, 0.05) !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Remove bottom accent line from Engagement Focus cards */
.intec-engagement-grid .wp-block-kadence-column > .kt-inside-inner-col::after {
content: none !important;
display: none !important;
}
/* Number badges */
.intec-engagement-grid .wp-block-kadence-column > .kt-inside-inner-col::before {
position: absolute !important;
top: 11px !important;
left: 10px !important;
width: 20px !important;
height: 20px !important;
border-radius: 999px !important;
background: #16A34A !important;
color: #ffffff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 850 !important;
box-shadow: 0 3px 8px rgba(22, 163, 74, 0.22) !important;
z-index: 2 !important;
}
.intec-engagement-grid .wp-block-kadence-column:nth-child(1) > .kt-inside-inner-col::before {
content: "1";
}
.intec-engagement-grid .wp-block-kadence-column:nth-child(2) > .kt-inside-inner-col::before {
content: "2";
}
.intec-engagement-grid .wp-block-kadence-column:nth-child(3) > .kt-inside-inner-col::before {
content: "3";
}
.intec-engagement-grid .wp-block-kadence-column:nth-child(4) > .kt-inside-inner-col::before {
content: "4";
}
/* Engagement card headings */
.intec-engagement-grid h1,
.intec-engagement-grid h2,
.intec-engagement-grid h3,
.intec-engagement-grid h4,
.intec-engagement-grid h5,
.intec-engagement-grid h6,
.intec-engagement-grid .kt-adv-heading {
color: #001FB1 !important;
font-size: 11px !important;
line-height: 1.12 !important;
font-weight: 800 !important;
margin-top: 0 !important;
margin-bottom: 5px !important;
}
/* Engagement card copy */
.intec-engagement-grid p {
color: #24324A !important;
font-size: 9.4px !important;
line-height: 1.18 !important;
margin: 0 !important;
}
/* Engagement card icons */
.intec-engagement-grid .intec-engagement-card-icon,
.intec-engagement-grid .intec-engagement-card-icon figure,
.intec-engagement-grid .intec-engagement-card-icon img {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.intec-engagement-grid .intec-engagement-card-icon {
position: absolute !important;
top: 10px !important;
left: 54px !important;
width: 42px !important;
height: 42px !important;
z-index: 2 !important;
}
.intec-engagement-grid .intec-engagement-card-icon img {
width: 42px !important;
height: 42px !important;
max-width: 42px !important;
max-height: 42px !important;
object-fit: contain !important;
display: block !important;
}
/* =========================================================
SECTION 55A | SERVICES PAGE
Governance Framework Bar
Purpose:
Creates a compact governance framework bar with separate
image, title, and supporting policy text.
========================================================= */
.intec-governance-framework-bar {
width: 100% !important;
max-width: none !important;
margin: 6px 0 6px 0 !important;
padding: 4px 10px !important;
min-height: 48px !important;
background: linear-gradient(
90deg,
rgba(0, 31, 177, 0.07) 0%,
rgba(246, 249, 253, 0.98) 55%,
rgba(22, 227, 22, 0.07) 100%
) !important;
border: 1px solid rgba(0, 31, 177, 0.22) !important;
border-radius: 10px !important;
box-shadow: 0 4px 10px rgba(0, 31, 177, 0.045) !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Stable two-column layout: icon + bounded text area */
.intec-governance-framework-bar > .kt-row-column-wrap,
.intec-governance-framework-bar > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 52px minmax(0, 1fr) !important;
column-gap: 6px !important;
align-items: center !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Keep Kadence columns from forcing overflow */
.intec-governance-framework-bar .wp-block-kadence-column {
min-width: 0 !important;
box-sizing: border-box !important;
}
/* Remove Kadence padding inside the bar */
.intec-governance-framework-bar .wp-block-kadence-column > .kt-inside-inner-col,
.intec-governance-framework-bar .kt-inside-inner-col {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
box-sizing: border-box !important;
}
/* Icon column alignment */
.intec-governance-framework-bar .wp-block-kadence-column:first-child > .kt-inside-inner-col {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Text column alignment */
.intec-governance-framework-bar .wp-block-kadence-column:nth-child(2) > .kt-inside-inner-col {
display: block !important;
width: 100% !important;
min-width: 0 !important;
text-align: center !important;
}
/* Image block cleanup */
.intec-governance-framework-image,
.intec-governance-framework-image figure,
.intec-governance-framework-image picture,
.intec-governance-framework-image .kb-image,
.intec-governance-framework-image .kb-img,
.intec-governance-framework-image .wp-block-kadence-image {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Actual image */
.intec-governance-framework-image img,
.intec-governance-framework-image figure img,
.intec-governance-framework-image picture img {
width: 46px !important;
height: 46px !important;
max-width: 46px !important;
max-height: 46px !important;
object-fit: contain !important;
display: block !important;
margin: 0 auto !important;
transform: none !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Governance title */
.intec-governance-framework-title,
.intec-governance-framework-title *,
.intec-governance-framework-title .kt-adv-heading,
.intec-governance-framework-title h1,
.intec-governance-framework-title h2,
.intec-governance-framework-title h3,
.intec-governance-framework-title h4,
.intec-governance-framework-title h5,
.intec-governance-framework-title h6 {
color: #001FB1 !important;
font-size: 12.2px !important;
line-height: 1.05 !important;
font-weight: 800 !important;
text-align: center !important;
margin: 0 0 2px 0 !important;
padding: 0 !important;
}
/* Governance policy line */
.intec-governance-framework-copy,
.intec-governance-framework-copy *,
.intec-governance-framework-copy p,
.intec-service-right .intec-governance-framework-bar .intec-governance-framework-copy,
.intec-service-right .intec-governance-framework-bar .intec-governance-framework-copy *,
.intec-service-right .intec-governance-framework-bar p.intec-governance-framework-copy {
color: #24324A !important;
font-size: 9.8px !important;
line-height: 1.08 !important;
font-weight: 600 !important;
letter-spacing: -0.12px !important;
text-align: center !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: clip !important;
box-sizing: border-box !important;
}
/* Fine tune governance icon horizontal placement only */
.intec-governance-framework-bar .wp-block-kadence-column:first-child > .kt-inside-inner-col {
transform: translateX(8px) !important;
}
/* Final governance icon horizontal placement without changing size */
.intec-governance-framework-bar .wp-block-kadence-column:first-child,
.intec-governance-framework-bar .wp-block-kadence-column:first-child > .kt-inside-inner-col,
.intec-governance-framework-bar .intec-governance-framework-image,
.intec-governance-framework-bar .intec-governance-framework-image figure,
.intec-governance-framework-bar .intec-governance-framework-image picture,
.intec-governance-framework-bar .intec-governance-framework-image img {
transform: translateX(10px) !important;
}
/* =========================================================
SECTION 55B | SERVICES PAGE
Solution Visual Group
Purpose:
Holds the process flow and governance framework bar as one
visual unit and nudges it left inside the right service
column without compressing the five-step flow.
========================================================= */
.intec-solution-visual-group {
width: calc(100% + 2px) !important;
max-width: none !important;
margin: 10px 0 6px -10px !important;
padding: 0 !important;
box-sizing: border-box !important;
transform: none !important;
}
/* Handles WordPress Group wrapper */
.intec-solution-visual-group > .wp-block-group__inner-container {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Handles Kadence wrapper if the visual group is ever converted to Row Layout */
.intec-solution-visual-group > .kt-row-column-wrap,
.intec-solution-visual-group > .kt-row-layout-inner > .kt-row-column-wrap {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Keep the solution flow full width inside the visual group */
.intec-solution-visual-group .intec-solution-flow {
width: 100% !important;
max-width: none !important;
margin: 0 0 7px 0 !important;
transform: none !important;
}
/* Keep the governance bar aligned with the process flow */
.intec-solution-visual-group .intec-governance-framework-bar {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
/* =========================================================
SECTION 56 | SERVICES PAGE
Left Rail Proof Box
Purpose:
Styles the lower trust/proof statement in the service rail
as a compact visual box with a custom image and supporting text.
========================================================= */
.intec-service-proof-box {
margin-top: 12px !important;
padding: 9px 10px !important;
background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%) !important;
border: 1px solid rgba(0, 31, 177, 0.12) !important;
border-radius: 12px !important;
box-shadow: 0 5px 14px rgba(0, 31, 177, 0.055) !important;
box-sizing: border-box !important;
}
.intec-service-proof-box > .kt-row-column-wrap,
.intec-service-proof-box > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 50px 1fr !important;
column-gap: 10px !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
/* Proof box image block reset */
.intec-service-proof-image,
.intec-service-proof-image figure,
.intec-service-proof-image picture,
.intec-service-proof-image .kb-image,
.intec-service-proof-image .kb-img,
.intec-service-proof-image .kb-advanced-image,
.intec-service-proof-image .wp-block-kadence-image {
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Proof box actual image */
.intec-service-proof-image img,
.intec-service-proof-image .kb-img img,
.intec-service-proof-image figure img,
.intec-service-proof-image picture img {
width: 44px !important;
height: 44px !important;
max-width: 44px !important;
max-height: 44px !important;
object-fit: contain !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Proof text */
.intec-service-proof-box .intec-service-rail-proof,
.intec-service-proof-box .intec-service-rail-proof *,
.intec-service-proof-box p.intec-service-rail-proof {
margin: 0 !important;
color: #24324A !important;
font-size: 10.5px !important;
line-height: 1.3 !important;
font-weight: 500 !important;
}
/* =========================================================
SECTION 53A | SERVICES PAGE
Tablet Service Slide Foundation Polish
Purpose:
Restores section badges and proof box behavior on tablet
using direct section classes instead of the outer slide wrapper.
========================================================= */
@media (min-device-width: 768px) and (max-device-width: 1366px) {
/* Restore A/B/C/D badge layout on tablet */
body .intec-service-block-title {
display: flex !important;
align-items: center !important;
gap: 10px !important;
position: relative !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
body .intec-service-block-title .kt-adv-heading,
body .intec-service-block-title h1,
body .intec-service-block-title h2,
body .intec-service-block-title h3,
body .intec-service-block-title h4,
body .intec-service-block-title h5,
body .intec-service-block-title h6 {
padding-left: 0 !important;
margin-left: 0 !important;
}
body .intec-service-block-title::before {
position: static !important;
transform: none !important;
flex: 0 0 28px !important;
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
border-radius: 999px !important;
background: #001FB1 !important;
color: #ffffff !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 13px !important;
line-height: 1 !important;
font-weight: 850 !important;
margin: 0 !important;
box-shadow: 0 4px 10px rgba(0, 31, 177, 0.18) !important;
}
body .intec-badge-a::before {
content: "A" !important;
}
body .intec-badge-b::before {
content: "B" !important;
}
body .intec-badge-c::before {
content: "C" !important;
}
body .intec-badge-d::before {
content: "D" !important;
}
/* Restore left proof box on tablet */
body .intec-service-proof-box {
width: 100% !important;
max-width: none !important;
margin-top: 22px !important;
padding: 10px 14px !important;
background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%) !important;
border: 1px solid rgba(0, 31, 177, 0.12) !important;
border-radius: 12px !important;
box-shadow: 0 5px 14px rgba(0, 31, 177, 0.055) !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
body .intec-service-proof-box > .kt-row-column-wrap,
body .intec-service-proof-box > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 56px minmax(0, 1fr) !important;
column-gap: 14px !important;
align-items: center !important;
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
body .intec-service-proof-box .wp-block-kadence-column,
body .intec-service-proof-box .wp-block-kadence-column > .kt-inside-inner-col {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
body .intec-service-proof-image,
body .intec-service-proof-image figure,
body .intec-service-proof-image picture,
body .intec-service-proof-image .kb-image,
body .intec-service-proof-image .kb-img,
body .intec-service-proof-image .kb-advanced-image,
body .intec-service-proof-image .wp-block-kadence-image {
margin: 0 !important;
padding: 0 !important;
width: 46px !important;
max-width: 46px !important;
height: 46px !important;
max-height: 46px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body .intec-service-proof-image img,
body .intec-service-proof-image .kb-img img,
body .intec-service-proof-image figure img,
body .intec-service-proof-image picture img {
width: 46px !important;
height: 46px !important;
max-width: 46px !important;
max-height: 46px !important;
object-fit: contain !important;
display: block !important;
}
body .intec-service-proof-box .intec-service-rail-proof,
body .intec-service-proof-box .intec-service-rail-proof *,
body .intec-service-proof-box p.intec-service-rail-proof {
font-size: 12px !important;
line-height: 1.35 !important;
margin: 0 !important;
}
}
/* =========================================================
SECTION 57T | SERVICES PAGE
Tablet Problem Map Simplification
Purpose:
Simplifies the Section A diagnostic map on tablet by
removing the tangled connector field and making the two
endpoint lists easier to read.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
/* Make the problem map read as two clear diagnostic cards on tablet */
.intec-problem-map {
margin-top: 18px !important;
margin-bottom: 22px !important;
padding: 34px 12px 12px 12px !important;
overflow: visible !important;
}
/* Hide tangled connector lines on tablet */
.intec-problem-map::before {
display: none !important;
content: none !important;
}
.intec-problem-map > .kt-row-column-wrap,
.intec-problem-map > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
justify-content: stretch !important;
align-items: stretch !important;
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
.intec-problem-map-left,
.intec-problem-map-right {
position: relative !important;
width: 100% !important;
min-height: 104px !important;
padding: 10px 12px 9px 12px !important;
background: rgba(255, 255, 255, 0.96) !important;
border-radius: 11px !important;
box-sizing: border-box !important;
}
/* Labels sit outside the inner boxes but inside the outer map */
.intec-problem-map-left::before,
.intec-problem-map-right::before {
position: absolute !important;
top: -21px !important;
left: 2px !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
.intec-problem-map-left::before {
content: "Current Landscape" !important;
color: #001FB1 !important;
}
.intec-problem-map-right::before {
content: "Execution Risks" !important;
color: #EF4444 !important;
}
.intec-problem-map li,
.intec-problem-map-left li,
.intec-problem-map-right li,
.intec-problem-map p,
.intec-problem-map-left p,
.intec-problem-map-right p {
font-size: 10.8px !important;
line-height: 1.26 !important;
margin-bottom: 5px !important;
padding-left: 18px !important;
}
.intec-problem-map-left li::before,
.intec-problem-map-left p::before,
.intec-problem-map-right li::before,
.intec-problem-map-right p::before {
top: 1px !important;
}
}
/* =========================================================
SECTION 58T | SERVICES PAGE
Tablet Card Typography Refinement
Purpose:
Improves readability of Outcome, Solution Flow, and
Engagement Focus cards on tablet without affecting desktop.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
/* Outcome cards - tablet readability */
body .intec-outcome-grid .wp-block-kadence-column > .kt-inside-inner-col {
min-height: 92px !important;
}
body .intec-outcome-grid h1,
body .intec-outcome-grid h2,
body .intec-outcome-grid h3,
body .intec-outcome-grid h4,
body .intec-outcome-grid h5,
body .intec-outcome-grid h6,
body .intec-outcome-grid .kt-adv-heading,
body .intec-outcome-grid .kt-adv-heading *,
body .intec-outcome-grid strong {
font-size: 13.8px !important;
line-height: 1.18 !important;
margin-bottom: 6px !important;
}
body .intec-outcome-grid p,
body .intec-outcome-grid p *,
body .intec-outcome-grid .kt-inside-inner-col p,
body .intec-outcome-grid .kt-inside-inner-col p * {
font-size: 12px !important;
line-height: 1.32 !important;
}
/* Solution process cards - tablet readability */
body .intec-solution-flow .wp-block-kadence-column > .kt-inside-inner-col {
min-height: 84px !important;
}
body .intec-solution-flow h1,
body .intec-solution-flow h2,
body .intec-solution-flow h3,
body .intec-solution-flow h4,
body .intec-solution-flow h5,
body .intec-solution-flow h6,
body .intec-solution-flow .kt-adv-heading,
body .intec-solution-flow .kt-adv-heading *,
body .intec-solution-flow strong {
font-size: 12.8px !important;
line-height: 1.14 !important;
margin-bottom: 5px !important;
}
body .intec-solution-flow p,
body .intec-solution-flow p *,
body .intec-solution-flow .kt-inside-inner-col p,
body .intec-solution-flow .kt-inside-inner-col p * {
font-size: 12px !important;
line-height: 1.22 !important;
}
/* Engagement Focus cards - tablet readability */
body .intec-engagement-grid h1,
body .intec-engagement-grid h2,
body .intec-engagement-grid h3,
body .intec-engagement-grid h4,
body .intec-engagement-grid h5,
body .intec-engagement-grid h6,
body .intec-engagement-grid .kt-adv-heading,
body .intec-engagement-grid .kt-adv-heading *,
body .intec-engagement-grid strong {
font-size: 13px !important;
line-height: 1.18 !important;
margin-bottom: 6px !important;
}
body .intec-engagement-grid p,
body .intec-engagement-grid p *,
body .intec-engagement-grid .kt-inside-inner-col p,
body .intec-engagement-grid .kt-inside-inner-col p * {
font-size: 12px !important;
line-height: 1.26 !important;
}
}
/* =========================================================
SECTION 59M | SERVICES PAGE
Mobile Governance and Engagement Recovery
Purpose:
Restores the mobile Governance Framework and Engagement
Focus fixes only. Does not touch hero or selector navbar.
========================================================= */
@media (max-width: 767px) {
/* =========================
Mobile Governance Framework
========================= */
.intec-solution-visual-group {
width: 100% !important;
max-width: 100% !important;
margin: 14px 0 8px 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.intec-governance-framework-bar {
width: 100% !important;
max-width: 100% !important;
min-height: auto !important;
padding: 9px 10px !important;
margin: 8px 0 12px 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
.intec-governance-framework-bar > .kt-row-column-wrap,
.intec-governance-framework-bar > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1fr !important;
row-gap: 4px !important;
justify-items: center !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
}
.intec-governance-framework-bar .wp-block-kadence-column:first-child,
.intec-governance-framework-bar .wp-block-kadence-column:first-child > .kt-inside-inner-col,
.intec-governance-framework-bar .intec-governance-framework-image,
.intec-governance-framework-bar .intec-governance-framework-image figure,
.intec-governance-framework-bar .intec-governance-framework-image picture,
.intec-governance-framework-bar .intec-governance-framework-image img {
transform: none !important;
}
.intec-governance-framework-image img,
.intec-governance-framework-image figure img,
.intec-governance-framework-image picture img {
width: 38px !important;
height: 38px !important;
max-width: 38px !important;
max-height: 38px !important;
}
.intec-governance-framework-title,
.intec-governance-framework-title *,
.intec-governance-framework-title .kt-adv-heading {
font-size: 11.6px !important;
line-height: 1.08 !important;
margin-bottom: 3px !important;
text-align: center !important;
}
.intec-governance-framework-copy,
.intec-governance-framework-copy *,
.intec-governance-framework-copy p,
.intec-service-right .intec-governance-framework-bar .intec-governance-framework-copy,
.intec-service-right .intec-governance-framework-bar .intec-governance-framework-copy *,
.intec-service-right .intec-governance-framework-bar p.intec-governance-framework-copy {
font-size: 9.2px !important;
line-height: 1.22 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: -0.08px !important;
max-width: 290px !important;
text-align: center !important;
}
/* =========================
Mobile Engagement Focus
========================= */
.intec-engagement-grid {
width: 100% !important;
max-width: 100% !important;
margin: 10px 0 0 0 !important;
}
.intec-engagement-grid > .kt-row-column-wrap,
.intec-engagement-grid > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
}
.intec-engagement-grid .wp-block-kadence-column > .kt-inside-inner-col {
min-height: 150px !important;
padding: 62px 10px 12px 10px !important;
}
.intec-engagement-grid .intec-engagement-card-icon {
top: 11px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 42px !important;
height: 42px !important;
}
.intec-engagement-grid .intec-engagement-card-icon img {
width: 42px !important;
height: 42px !important;
max-width: 42px !important;
max-height: 42px !important;
}
.intec-engagement-grid h1,
.intec-engagement-grid h2,
.intec-engagement-grid h3,
.intec-engagement-grid h4,
.intec-engagement-grid h5,
.intec-engagement-grid h6,
.intec-engagement-grid .kt-adv-heading,
.intec-engagement-grid .kt-adv-heading * {
font-size: 11.8px !important;
line-height: 1.14 !important;
margin-bottom: 5px !important;
}
.intec-engagement-grid p,
.intec-engagement-grid p * {
font-size: 10.2px !important;
line-height: 1.25 !important;
}
}
/* =========================================================
SECTION 60M | SERVICES PAGE
Mobile Hero and Selector Targeted Fix
Purpose:
Fixes only the Services mobile hero and selector navbar.
Restores hero theme cards in a mobile-safe format.
Does not touch service slide content below.
========================================================= */
@media (max-width: 767px) {
/* =========================
Mobile page width guardrail
========================= */
body,
.site,
.site-content,
.content-area,
.entry-content {
overflow-x: hidden !important;
}
/* =========================
Mobile hero
========================= */
.intec-services-hero {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 30px 24px 26px 24px !important;
background-size: 680px auto !important;
background-position: 64% top !important;
background-repeat: no-repeat !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.intec-services-hero .kt-row-layout-inner,
.intec-services-hero .kt-row-column-wrap,
.intec-services-hero .wp-block-kadence-column,
.intec-services-hero .wp-block-kadence-column > .kt-inside-inner-col,
.intec-services-hero .kt-inside-inner-col {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
box-sizing: border-box !important;
}
.intec-services-hero .kt-row-column-wrap {
align-items: flex-start !important;
align-content: flex-start !important;
}
.intec-services-hero-copy {
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
text-align: left !important;
}
.intec-services-title,
.intec-services-title *,
.intec-services-title .kt-adv-heading {
max-width: 310px !important;
font-size: 29px !important;
line-height: 1.06 !important;
margin-top: 0 !important;
margin-bottom: 10px !important;
text-align: left !important;
transform: none !important;
}
.intec-services-hero-divider {
width: 118px !important;
max-width: 118px !important;
margin: 10px 0 10px 0 !important;
}
.intec-services-hero-copy p {
max-width: 320px !important;
font-size: 15px !important;
line-height: 1.45 !important;
margin-bottom: 0 !important;
text-align: left !important;
}
/* =========================
Mobile hero theme cards
========================= */
.intec-services-pillars {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 18px 0 0 0 !important;
padding: 0 !important;
transform: none !important;
box-sizing: border-box !important;
}
.intec-services-pillars .kt-row-column-wrap,
.intec-services-pillars > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-services-pillars .wp-block-kadence-column {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.intec-services-pillars .wp-block-kadence-column > .kt-inside-inner-col {
min-height: 72px !important;
padding: 10px 12px 12px 12px !important;
border-radius: 12px !important;
box-sizing: border-box !important;
}
.intec-services-pillars h1,
.intec-services-pillars h2,
.intec-services-pillars h3,
.intec-services-pillars h4,
.intec-services-pillars h5,
.intec-services-pillars h6,
.intec-services-pillars .kt-adv-heading {
font-size: 13.5px !important;
line-height: 1.12 !important;
margin-bottom: 4px !important;
}
.intec-services-pillars p {
font-size: 12px !important;
line-height: 1.24 !important;
}
/* =========================
Mobile selector/navbar
========================= */
.intec-services-selector-section {
padding: 10px 0 14px 0 !important;
margin-top: 0 !important;
overflow-x: hidden !important;
}
.intec-services-selector-section > .kt-row-layout-inner > .kt-row-column-wrap,
.wp-block-kadence-rowlayout.intec-services-selector-section > .kt-row-layout-inner > .kt-row-column-wrap {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.intec-services-tabs,
.intec-services-tabs .kt-tabs-wrap,
.intec-services-tabs .kt-tabs-title-list-wrap {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.intec-services-tabs .kt-tabs-title-list,
.intec-services-tabs ul.kt-tabs-title-list {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
overflow-x: auto !important;
gap: 10px !important;
padding: 8px 16px 12px 16px !important;
margin: 0 !important;
scroll-padding-left: 16px !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
box-sizing: border-box !important;
}
.intec-services-tabs .kt-tabs-title-list::-webkit-scrollbar {
display: none !important;
}
.intec-services-tabs .kt-title-item {
flex: 0 0 260px !important;
max-width: 260px !important;
scroll-snap-align: start !important;
}
.intec-services-tabs .kt-title-item:first-child {
margin-left: 0 !important;
}
}
/* =========================================================
SECTION 61M | SERVICES PAGE
Mobile Service Slide Width Fix
Purpose:
Widens the outer service slide canvas on mobile while
keeping the inner content centered and readable.
========================================================= */
@media (max-width: 767px) {
/* Widen only the outer service slide canvas */
.intec-service-slide {
width: calc(100% + 44px) !important;
max-width: calc(100% + 44px) !important;
margin-left: -22px !important;
margin-right: -22px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Re-center the actual inner content area */
.intec-service-slide > .kt-row-column-wrap,
.intec-service-slide > .kt-row-layout-inner > .kt-row-column-wrap {
width: calc(100% - 44px) !important;
max-width: calc(100% - 44px) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
/* Keep the service grid centered inside the inner content */
.intec-service-slide-grid {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.intec-service-slide-grid > .kt-row-column-wrap,
.intec-service-slide-grid > .kt-row-layout-inner > .kt-row-column-wrap {
width: 100% !important;
max-width: 100% !important;
grid-template-columns: 1fr !important;
box-sizing: border-box !important;
}
/* Remove desktop column padding/nudges on mobile */
.intec-service-right,
.intec-service-middle,
.intec-service-rail {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
/* Keep the solution visual group inside the centered content */
.intec-solution-visual-group {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
}
/* =========================================================
SECTION 62M | SERVICES PAGE
Mobile Problem Map and Outcome Card Refinement
Purpose:
Simplifies the Section A problem map on mobile and improves
Outcome card height/readability without affecting desktop
or tablet.
========================================================= */
@media (max-width: 767px) {
/* =========================
Mobile Problem Map
========================= */
.intec-problem-map {
margin-top: 16px !important;
margin-bottom: 22px !important;
padding: 34px 12px 12px 12px !important;
overflow: visible !important;
}
/* Hide tangled connector lines on mobile */
.intec-problem-map::before {
display: none !important;
content: none !important;
}
.intec-problem-map > .kt-row-column-wrap,
.intec-problem-map > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 26px !important;
justify-content: stretch !important;
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.intec-problem-map-left,
.intec-problem-map-right {
position: relative !important;
width: 100% !important;
min-height: 106px !important;
padding: 10px 12px 9px 12px !important;
background: rgba(255, 255, 255, 0.96) !important;
border-radius: 11px !important;
box-sizing: border-box !important;
}
/* Labels sit above each mobile list card */
.intec-problem-map-left::before,
.intec-problem-map-right::before {
position: absolute !important;
top: -20px !important;
left: 2px !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
.intec-problem-map-left::before {
content: "Current Landscape" !important;
color: #001FB1 !important;
}
.intec-problem-map-right::before {
content: "Execution Risks" !important;
color: #EF4444 !important;
}
.intec-problem-map li,
.intec-problem-map-left li,
.intec-problem-map-right li,
.intec-problem-map p,
.intec-problem-map-left p,
.intec-problem-map-right p {
font-size: 11px !important;
line-height: 1.28 !important;
margin-bottom: 5px !important;
padding-left: 18px !important;
}
.intec-problem-map-left li::before,
.intec-problem-map-left p::before,
.intec-problem-map-right li::before,
.intec-problem-map-right p::before {
top: 1px !important;
}
/* =========================
Mobile Outcome Cards
========================= */
.intec-outcome-grid {
margin-top: 14px !important;
}
.intec-outcome-grid > .kt-row-column-wrap,
.intec-outcome-grid > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
}
.intec-outcome-grid .wp-block-kadence-column > .kt-inside-inner-col {
min-height: 128px !important;
padding: 11px 10px 12px 10px !important;
box-sizing: border-box !important;
}
.intec-outcome-grid h1,
.intec-outcome-grid h2,
.intec-outcome-grid h3,
.intec-outcome-grid h4,
.intec-outcome-grid h5,
.intec-outcome-grid h6,
.intec-outcome-grid .kt-adv-heading,
.intec-outcome-grid .kt-adv-heading * {
font-size: 12.2px !important;
line-height: 1.14 !important;
margin-bottom: 6px !important;
}
.intec-outcome-grid p,
.intec-outcome-grid p * {
font-size: 10.6px !important;
line-height: 1.26 !important;
}
}
/* =========================================================
SECTION 63M | SERVICES PAGE
Mobile Solution Card Typography
Purpose:
Increases paragraph readability in the mobile Solution
process cards without affecting desktop or tablet.
========================================================= */
@media (max-width: 767px) {
/* Give solution cards a little more breathing room */
.intec-solution-flow .wp-block-kadence-column > .kt-inside-inner-col {
min-height: 92px !important;
padding: 14px 12px 13px 12px !important;
}
/* Keep solution card headings stable */
.intec-solution-flow h1,
.intec-solution-flow h2,
.intec-solution-flow h3,
.intec-solution-flow h4,
.intec-solution-flow h5,
.intec-solution-flow h6,
.intec-solution-flow .kt-adv-heading {
font-size: 13px !important;
line-height: 1.16 !important;
margin-bottom: 6px !important;
}
/* Increase solution card paragraph text */
.intec-solution-flow p,
.intec-solution-flow p *,
.intec-solution-flow .kt-inside-inner-col p,
.intec-solution-flow .kt-inside-inner-col p * {
font-size: 12px !important;
line-height: 1.3 !important;
}
}
/* =========================================================
CSS-SVC-01
INTECPROS SERVICES PAGE
Page Width Standard
Purpose:
Aligns the Services hero, selector, and service detail area
to the same visual page width.
========================================================= */
.intec-services-hero,
.intec-services-tabs-shell {
width: 1240px !important;
max-width: calc(100% - 80px) !important;
margin-left: auto !important;
margin-right: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
}
/* Keep Kadence inner wrappers from expanding wider */
.intec-services-hero .kt-row-layout-inner,
.intec-services-hero .kt-row-column-wrap,
.intec-services-tabs-shell .kt-row-layout-inner,
.intec-services-tabs-shell .kt-row-column-wrap {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Tablet */
@media (max-width: 1024px) {
.intec-services-hero,
.intec-services-tabs-shell {
width: auto !important;
max-width: calc(100% - 48px) !important;
}
}
/* Mobile */
@media (max-width: 767px) {
.intec-services-hero,
.intec-services-tabs-shell {
width: auto !important;
max-width: calc(100% - 32px) !important;
}
}
/* =========================================================
CSS-SVC-02
INTECPROS SERVICES PAGE
Services Hero Copy Alignment Only
Purpose:
Aligns only the SERVICES label, main heading, divider,
and hero paragraph.
Does NOT affect the pillar cards or page width.
========================================================= */
.intec-services-hero-copy > :not(.intec-services-pillars) {
margin-left: 28px !important;
margin-right: 0 !important;
max-width: 560px !important;
}
/* Tablet */
@media (max-width: 1024px) {
.intec-services-hero-copy > :not(.intec-services-pillars) {
margin-left: 32px !important;
max-width: 100% !important;
}
}
/* Mobile */
@media (max-width: 767px) {
.intec-services-hero-copy > :not(.intec-services-pillars) {
margin-left: 20px !important;
max-width: 100% !important;
}
}
/* =========================================================
CSS-SVC-03
Former CSS-SVC-03 pillar-card horizontal alignment override.
Disabled during cleanup because SECTION 41 already controls
.intec-services-pillars positioning and transform.
.intec-services-hero-copy .intec-services-pillars {
transform: translateX(28px) !important;
}
@media (max-width: 1024px) {
.intec-services-hero-copy .intec-services-pillars {
transform: translateX(0) !important;
}
}
@media (max-width: 767px) {
.intec-services-hero-copy .intec-services-pillars {
transform: translateX(0) !important;
}
}
========================================================= */
/* =========================================================
CSS-SVC-04
SERVICES PAGE
Cloud Service Detail Background Reset
Purpose:
Removes the gray canvas from only the Cloud service detail
intro area so the illustration blends into the page.
Does NOT affect the global hero or selector/navbar.
.intec-service-cloud,
.intec-service-cloud > .kt-row-column-wrap,
.intec-service-cloud > .kt-row-layout-inner,
.intec-service-cloud > .kt-row-layout-inner > .kt-row-column-wrap,
.intec-service-cloud .cloud-service-intro,
.intec-service-cloud .cloud-service-intro > .kt-row-column-wrap,
.intec-service-cloud .cloud-service-intro > .kt-row-layout-inner,
.intec-service-cloud .cloud-service-intro > .kt-row-layout-inner > .kt-row-column-wrap {
background: #ffffff !important;
}
========================================================= */
/* =========================================================
CSS-SVC-04
SERVICES PAGE
Cloud Intro Row Horizontal Alignment Only
Purpose:
Moves only the Cloud service intro row slightly left so
the left text aligns better with the Services hero copy.
Does NOT change page width, hero, selector, image size,
columns, padding, height, or vertical spacing.
Applies to:
cloud-service-intro
========================================================= */
.intec-service-cloud .cloud-service-intro {
transform: translateX(-32px) !important;
}
/* Tablet and mobile: avoid horizontal overflow */
@media (max-width: 1024px) {
.intec-service-cloud .cloud-service-intro {
transform: none !important;
}
}
/* =========================================================
CSS-SVC-05
SERVICES PAGE
Reusable Accent Divider
Purpose:
Creates a short left-aligned IntecPros blue-to-green
accent line for service detail sections.
Applies to:
intec-accent-divider
========================================================= */
.intec-accent-divider,
.intec-accent-divider.wp-block-separator,
.intec-accent-divider hr,
.wp-block-separator.intec-accent-divider {
width: 88px !important;
max-width: 88px !important;
height: 3px !important;
min-height: 3px !important;
margin-left: 0 !important;
margin-right: auto !important;
/* Previous value before service intro spacing standard: margin-top: 18px */
margin-top: 8px !important;
/* Previous value before tighter service intro spacing: margin-bottom: 18px */
margin-bottom: 8px !important;
border: none !important;
background: linear-gradient(90deg, #001FB1 0%, #00B050 100%) !important;
opacity: 1 !important;
}
/* =========================================================
CSS-SVC-06
Cloud, Hybrid, and Data Center Modernization Intro
Clean production version
Services hero section is not touched.
========================================================= */
/* ---------------------------------------------------------
Main Cloud intro row
Background image is handled by ::after, not Kadence.
--------------------------------------------------------- */
.intec-service-cloud .cloud-service-intro-new {
position: relative !important;
isolation: isolate !important;
/* Align intro section with the A/B card row width */
transform: translateX(-32px) !important;
width: calc(100% + 64px) !important;
max-width: calc(100% + 64px) !important;
background-color: #ffffff !important;
/* Tested desktop spacing */
min-height: 315px !important;
padding-top: 0 !important;
padding-bottom: 18px !important;
/* Keep intro tightly connected to following A/B row */
margin-bottom: 0 !important;
margin-block-end: 0 !important;
overflow: visible !important;
}
/* ---------------------------------------------------------
Image layer
The image is intentionally placed on ::after so it can be
positioned and faded independently from the intro copy.
--------------------------------------------------------- */
.intec-service-cloud .cloud-service-intro-new::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
pointer-events: none !important;
background-image: url("/wp-content/uploads/2026/05/ChatGPT-Image-May-21-2026-04_21_13-PM.png") !important;
background-repeat: no-repeat !important;
background-size: 940px auto !important;
background-position: right -40px center !important;
/* Moves image up slightly without disturbing horizontal position */
transform: translateY(-10px) !important;
/* Softens the image canvas so it does not read as a hard rectangle */
-webkit-mask-image: radial-gradient(
ellipse 70% 56% at 74% 52%,
rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 46%,
rgba(0,0,0,0.72) 60%,
rgba(0,0,0,0.34) 74%,
rgba(0,0,0,0.10) 88%,
rgba(0,0,0,0) 100%
) !important;
mask-image: radial-gradient(
ellipse 70% 56% at 74% 52%,
rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 46%,
rgba(0,0,0,0.72) 60%,
rgba(0,0,0,0.34) 74%,
rgba(0,0,0,0.10) 88%,
rgba(0,0,0,0) 100%
) !important;
}
/* ---------------------------------------------------------
White fade layer
Keeps the intro copy clean and readable over the image.
--------------------------------------------------------- */
.intec-service-cloud .cloud-service-intro-new::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
background: linear-gradient(
90deg,
rgba(255,255,255,1) 0%,
rgba(255,255,255,1) 30%,
rgba(255,255,255,0.96) 42%,
rgba(255,255,255,0.78) 54%,
rgba(255,255,255,0.42) 68%,
rgba(255,255,255,0.12) 80%,
rgba(255,255,255,0) 94%
) !important;
}
/* ---------------------------------------------------------
Content layering
Keeps Kadence row content above the image and fade layers.
--------------------------------------------------------- */
.intec-service-cloud .cloud-service-intro-new > .kt-row-column-wrap,
.intec-service-cloud .cloud-service-intro-copy-new {
position: relative !important;
z-index: 2 !important;
}
/* ---------------------------------------------------------
Intro copy width
Prevents copy from spilling into the illustration area.
--------------------------------------------------------- */
.intec-service-cloud .cloud-service-intro-copy-new,
.intec-service-cloud .cloud-service-intro-copy-new .kt-inside-inner-col {
max-width: 540px !important;
width: min(540px, 100%) !important;
}
/* ---------------------------------------------------------
SERVICE eyebrow spacing
Scoped only to the Cloud intro copy.
--------------------------------------------------------- */
.intec-service-cloud .cloud-service-intro-copy-new .cloud-intro-eyebrow-new {
margin-top: 0 !important;
margin-bottom: 9px !important;
padding-bottom: 0 !important;
line-height: 1.1 !important;
}
/* ---------------------------------------------------------
Main intro title spacing
Scoped only to the Cloud intro title.
--------------------------------------------------------- */
.intec-service-cloud .cloud-service-intro-copy-new .cloud-intro-title-new,
.intec-service-cloud .cloud-service-intro-copy-new .cloud-intro-title-new .kt-title-text {
margin-top: 0 !important;
margin-bottom: 16px !important;
padding-top: 0 !important;
}
/* ---------------------------------------------------------
Intro paragraph spacing
Avoid broad resets against all p/h2/h4 elements.
--------------------------------------------------------- */
.intec-service-cloud .cloud-service-intro-copy-new p:not(.cloud-intro-eyebrow-new) {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ---------------------------------------------------------
Intro copy vertical placement
Gives SERVICE label breathing room after row top padding
was removed.
--------------------------------------------------------- */
.intec-service-cloud .cloud-service-intro-copy-new {
transform: translateY(16px) !important;
}
/* =========================================================
CSS-SVC-06A
Cloud Intro Position Inside Kadence Tabs
Pulls the Cloud intro upward to reduce excess spacing
created by the Tabs content structure.
========================================================= */
.intec-services-tabs .intec-service-cloud .cloud-service-intro-new {
margin-top: -18px !important;
margin-block-start: -18px !important;
}
/* =========================================================
CSS-SVC-06B
Cloud Intro to A/B Row Spacing Alignment
Removes external block spacing between intro and A/B row.
========================================================= */
.intec-service-cloud .cloud-service-ab-row {
margin-top: 0 !important;
margin-block-start: 0 !important;
}
/* =========================================================
Tablet Protection
========================================================= */
@media (max-width: 1024px) {
.intec-service-cloud .cloud-service-intro-new {
transform: none !important;
width: 100% !important;
max-width: 100% !important;
min-height: 340px !important;
padding-top: 38px !important;
padding-bottom: 30px !important;
margin-top: 0 !important;
margin-block-start: 0 !important;
}
.intec-service-cloud .cloud-service-intro-new::after {
background-size: 720px auto !important;
background-position: right -180px center !important;
transform: none !important;
}
}
/* =========================================================
Mobile Protection
========================================================= */
@media (max-width: 767px) {
.intec-service-cloud .cloud-service-intro-new {
min-height: auto !important;
padding-top: 34px !important;
padding-bottom: 34px !important;
margin-top: 0 !important;
margin-block-start: 0 !important;
}
.intec-service-cloud .cloud-service-intro-new::after {
background-size: 520px auto !important;
background-position: right -220px bottom !important;
transform: none !important;
}
.intec-service-cloud .cloud-service-intro-copy-new {
transform: none !important;
}
.intec-service-cloud .cloud-service-intro-copy-new,
.intec-service-cloud .cloud-service-intro-copy-new .kt-inside-inner-col {
max-width: 100% !important;
width: 100% !important;
}
}
/* =========================================================
CSS-SVC-07
SERVICES PAGE
Cloud A/B Problem and Solution Cards
Purpose:
Styles the A and B sections below the Cloud intro as
balanced executive cards.
Applies to:
cloud-service-ab-row
cloud-ab-card
intec-ab-badge
cloud-ab-header-row
cloud-ab-body-row
cloud-ab-icon
Notes:
- Card container styling remains handled in Kadence.
- This section does not touch the Services hero.
- Desktop row alignment matches the Cloud intro section.
========================================================= */
/* =========================================================
A/B Row Placement and Width
Aligns A/B card row with the widened Cloud intro row.
========================================================= */
.intec-service-cloud .cloud-service-ab-row {
transform: translateX(-32px) !important;
width: calc(100% + 64px) !important;
max-width: calc(100% + 64px) !important;
margin-top: 0 !important;
margin-block-start: 0 !important;
}
/* =========================================================
Card Container Styling
Handled in Kadence:
- Background: #ffffff
- Border: #D8E2F3, 1px
- Border radius: 16px
- Padding: 28px 30px 28px 30px
- Shadow: soft/light
========================================================= */
/* =========================================================
Section Badge
Used for A/B and may also be reused by C/D if desired.
========================================================= */
.intec-service-cloud p.intec-ab-badge,
.intec-service-cloud .intec-ab-badge {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
border-radius: 999px !important;
background: #001FB1 !important;
color: #ffffff !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16px !important;
font-weight: 800 !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
A/B Card Internal Row Spacing
Kadence structure should keep narrow left columns for badge
and icon, with heading/body content in flexible right columns.
Important:
Do not set a fixed width on the right heading or paragraph
columns.
========================================================= */
.intec-service-cloud .cloud-service-ab-row .cloud-ab-header-row {
margin-bottom: 30px !important;
padding-bottom: 0 !important;
}
.intec-service-cloud .cloud-service-ab-row .cloud-ab-body-row {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* =========================================================
A/B Card Headings
========================================================= */
.intec-service-cloud .cloud-service-ab-row .cloud-ab-card h1,
.intec-service-cloud .cloud-service-ab-row .cloud-ab-card h2,
.intec-service-cloud .cloud-service-ab-row .cloud-ab-card h3,
.intec-service-cloud .cloud-service-ab-row .cloud-ab-card h4,
.intec-service-cloud .cloud-service-ab-row .cloud-ab-card h5,
.intec-service-cloud .cloud-service-ab-row .cloud-ab-card h6 {
color: #0B1F4D !important;
font-size: 19px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* =========================================================
A/B Card Body Paragraphs
Avoids styling the circular badge paragraph.
========================================================= */
.intec-service-cloud .cloud-service-ab-row .cloud-ab-card p:not(.intec-ab-badge) {
color: #24324A !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.42 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* =========================================================
A/B Card Body Icon
Applies positioning to the icon wrapper only.
Prevents nested image elements from being double-shifted.
========================================================= */
.intec-service-cloud .cloud-service-ab-row .cloud-ab-icon {
width: 72px !important;
max-width: 72px !important;
min-width: 72px !important;
margin-left: -10px !important;
margin-right: 0 !important;
display: block !important;
}
.intec-service-cloud .cloud-service-ab-row .cloud-ab-icon img,
.intec-service-cloud .cloud-service-ab-row .cloud-ab-icon .kb-img,
.intec-service-cloud .cloud-service-ab-row .cloud-ab-icon .kb-advanced-image,
.intec-service-cloud .cloud-service-ab-row .cloud-ab-icon figure {
width: 100% !important;
max-width: 72px !important;
height: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
display: block !important;
}
/* =========================================================
Tablet Protection
Removes desktop widening and allows Kadence stacking.
The 24px top margin is intentional for responsive breathing room.
========================================================= */
@media (max-width: 1024px) {
.intec-service-cloud .cloud-service-ab-row {
transform: none !important;
width: 100% !important;
max-width: 100% !important;
margin-top: 24px !important;
margin-block-start: 24px !important;
}
}
/* =========================================================
Mobile Protection
Keeps cards within the viewport on small screens.
========================================================= */
@media (max-width: 767px) {
.intec-service-cloud .cloud-service-ab-row {
transform: none !important;
width: 100% !important;
max-width: 100% !important;
margin-top: 24px !important;
margin-block-start: 24px !important;
}
.intec-service-cloud .cloud-service-ab-row .cloud-ab-header-row {
margin-bottom: 22px !important;
}
.intec-service-cloud .cloud-service-ab-row .cloud-ab-icon {
width: 64px !important;
max-width: 64px !important;
min-width: 64px !important;
margin-left: 0 !important;
}
.intec-service-cloud .cloud-service-ab-row .cloud-ab-icon img,
.intec-service-cloud .cloud-service-ab-row .cloud-ab-icon .kb-img,
.intec-service-cloud .cloud-service-ab-row .cloud-ab-icon .kb-advanced-image,
.intec-service-cloud .cloud-service-ab-row .cloud-ab-icon figure {
max-width: 64px !important;
}
}
/* =========================================================
CSS-SVC-07C
Tablet A/B Equal Height Fix
Keeps A and B cards visually balanced when side-by-side.
Desktop and mobile stacking behavior are not changed.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.intec-service-cloud .cloud-service-ab-row > .kt-row-column-wrap {
align-items: stretch !important;
}
.intec-service-cloud .cloud-service-ab-row > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-cloud .cloud-service-ab-row > .kt-row-column-wrap > .kadence-column {
display: flex !important;
align-items: stretch !important;
}
.intec-service-cloud .cloud-service-ab-row .cloud-ab-card {
height: 100% !important;
min-height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
.intec-service-cloud .cloud-service-ab-row .cloud-ab-card > .kt-inside-inner-col {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
}
/* =========================================================
CSS-SVC-08
SERVICES PAGE
Cloud / Hybrid / Data Center Modernization
C/D Outcomes, Engagement Focus, and Trust Bar
Purpose:
Styles the shared C/D panel below the A/B cards:
- C: Outcome timeline
- D: Engagement focus cards
- Trust bar
Applies to:
cloud-service-cd-row
cloud-cd-panel
cloud-cd-inner
cloud-cd-title-row
cloud-outcome-row
cloud-engagement-item
cloud-trust-row
Notes:
- Scoped to .intec-service-cloud to avoid affecting
future service sections.
- Preserves current working desktop visual behavior.
- Services hero section is not touched.
========================================================= */
/* =========================================================
08A — SHARED C/D PANEL
========================================================= */
/* C/D shared row placement */
.intec-service-cloud .cloud-service-cd-row {
margin-top: 18px !important;
transform: translate(-32px, -24px) !important;
width: calc(100% + 64px) !important;
max-width: calc(100% + 64px) !important;
margin-bottom: -24px !important;
}
/* One shared C/D panel */
.intec-service-cloud .cloud-cd-panel {
background: #ffffff !important;
border: 1px solid #D8E2F3 !important;
border-radius: 16px !important;
box-shadow: 0 14px 34px rgba(0, 31, 177, 0.05) !important;
padding: 30px 32px !important;
box-sizing: border-box !important;
}
/* Internal two-column C/D layout */
.intec-service-cloud .cloud-cd-inner {
position: relative !important;
}
/* Vertical divider between C and D */
.intec-service-cloud .cloud-cd-inner::before {
content: "" !important;
position: absolute !important;
top: 8px !important;
bottom: 8px !important;
left: 50% !important;
width: 1px !important;
background: #D8E2F3 !important;
transform: translateX(-50%) !important;
}
/* =========================================================
08B — C/D TITLE ROWS
Badge rail | title text
========================================================= */
.intec-service-cloud .cloud-cd-title-row {
padding: 0 !important;
margin: 0 0 14px 0 !important;
}
.intec-service-cloud .cloud-cd-title-row > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 34px 1fr !important;
column-gap: 14px !important;
align-items: center !important;
padding: 0 !important;
margin: 0 !important;
}
.intec-service-cloud .cloud-cd-title-row .kt-inside-inner-col {
text-align: left !important;
justify-content: flex-start !important;
}
.intec-service-cloud .cloud-cd-title-row h1,
.intec-service-cloud .cloud-cd-title-row h2,
.intec-service-cloud .cloud-cd-title-row h3,
.intec-service-cloud .cloud-cd-title-row h4,
.intec-service-cloud .cloud-cd-title-row h5,
.intec-service-cloud .cloud-cd-title-row h6 {
color: #0B1F4D !important;
font-size: 19px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
margin: 0 !important;
text-align: left !important;
justify-content: flex-start !important;
}
/* =========================================================
08C — C OUTCOME ROWS
Stable three-part system:
icon lane | timeline dot lane | text lane
========================================================= */
/* Outcome row outer control */
.intec-service-cloud .cloud-outcome-row {
padding: 0 !important;
margin: 12px 0 0 0 !important;
transform: translateX(-22px) !important;
width: calc(100% + 22px) !important;
min-height: 0 !important;
}
/* Outcome row internal layout */
.intec-service-cloud .cloud-outcome-row > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 86px 18px 1fr !important;
column-gap: 12px !important;
align-items: start !important;
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
}
/* Remove extra Kadence vertical space inside outcome rows */
.intec-service-cloud .cloud-outcome-row .kt-inside-inner-col,
.intec-service-cloud .cloud-outcome-row .wp-block-kadence-column,
.intec-service-cloud .cloud-outcome-row .kadence-column,
.intec-service-cloud .cloud-outcome-row .inner-column-1,
.intec-service-cloud .cloud-outcome-row .inner-column-2,
.intec-service-cloud .cloud-outcome-row .inner-column-3 {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
min-height: 0 !important;
}
/* Outcome icon column */
.intec-service-cloud .cloud-outcome-icon-col {
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
transform: none !important;
}
/* Outcome icon image */
.intec-service-cloud .cloud-outcome-icon-col img,
.intec-service-cloud .cloud-outcome-icon-col figure,
.intec-service-cloud .cloud-outcome-icon-col .kb-img,
.intec-service-cloud .cloud-outcome-icon-col .kb-advanced-image,
.intec-service-cloud .cloud-outcome-icon-col .kb-img-wrap {
width: 72px !important;
max-width: 72px !important;
min-width: 72px !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
/* Outcome timeline rail column */
.intec-service-cloud .cloud-outcome-rail-col {
position: relative !important;
min-height: 0 !important;
display: block !important;
padding: 0 !important;
margin: 0 !important;
transform: translateX(-18px) !important;
}
/* Hide any leftover Kadence separator/line inside the rail column */
.intec-service-cloud .cloud-outcome-rail-col .wp-block-separator,
.intec-service-cloud .cloud-outcome-rail-col hr,
.intec-service-cloud .cloud-outcome-rail-col .kt-divider,
.intec-service-cloud .cloud-outcome-rail-col .kb-divider,
.intec-service-cloud .cloud-outcome-rail-col .kb-separator {
display: none !important;
}
/* Outcome vertical timeline line */
.intec-service-cloud .cloud-outcome-rail-col::after {
content: "" !important;
position: absolute !important;
top: 7px !important;
left: 50% !important;
width: 2px !important;
height: 88px !important;
background: rgba(0, 166, 81, 0.42) !important;
transform: translateX(-50%) !important;
z-index: 1 !important;
}
/* Stop the vertical line after the last outcome row */
.intec-service-cloud .cloud-outcome-last .cloud-outcome-rail-col::after {
display: none !important;
}
/* Outcome timeline dot */
.intec-service-cloud .cloud-outcome-rail-col::before {
content: "" !important;
width: 9px !important;
height: 9px !important;
border-radius: 999px !important;
background: #00A651 !important;
position: absolute !important;
top: 3px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 2 !important;
}
/* Outcome text column */
.intec-service-cloud .cloud-outcome-text-col {
transform: translateX(-18px) !important;
width: calc(100% + 18px) !important;
padding: 0 !important;
margin: 0 !important;
}
/* Outcome text */
.intec-service-cloud .cloud-outcome-text-col p,
.intec-service-cloud .cloud-outcome-text-col li {
color: #24324A !important;
font-size: 14.5px !important;
line-height: 1.38 !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-service-cloud .cloud-outcome-text-col strong {
color: #007A3D !important;
font-weight: 700 !important;
}
/* =========================================================
08D — D ENGAGEMENT ROWS
Working D structure:
cloud-engagement-item
├── cloud-engagement-icon-rail
│ └── cloud-engagement-icon
└── cloud-engagement-card
└── cloud-engagement-card-inner
├── cloud-engagement-text
└── cloud-engagement-arrow
Notes:
- Parent row is the visible card.
- Right-side card wrappers are structural only.
- Current icon and text offsets are preserved.
========================================================= */
/* Parent engagement card */
.intec-service-cloud .cloud-engagement-item {
background: #ffffff !important;
border: 1px solid #D8E2F3 !important;
border-radius: 10px !important;
box-shadow: 0 8px 20px rgba(0, 31, 177, 0.035) !important;
padding: 0 !important;
margin: 14px 0 12px 0 !important;
min-height: 62px !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* Main layout: icon rail | card content */
.intec-service-cloud .cloud-engagement-item > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 72px 1fr !important;
column-gap: 0 !important;
align-items: center !important;
min-height: 62px !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
/* Reset Kadence inner wrappers inside engagement items */
.intec-service-cloud .cloud-engagement-item .kt-inside-inner-col {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
overflow: visible !important;
}
/* Icon rail */
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon-rail {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 62px !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
/* Engagement icon standard
Preserves current visual offset from the working layout. */
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon,
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon img,
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon figure,
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon .kb-img,
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon .kb-advanced-image,
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon .kb-img-wrap {
width: 72px !important;
max-width: 72px !important;
min-width: 72px !important;
height: auto !important;
max-height: none !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
transform: translateX(-10px) !important;
overflow: visible !important;
}
/* Right card section is structural only */
.intec-service-cloud .cloud-engagement-item .cloud-engagement-card,
.intec-service-cloud .cloud-engagement-item .cloud-engagement-card > .kt-inside-inner-col {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
min-height: 62px !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* Inner row is layout only */
.intec-service-cloud .cloud-engagement-item .cloud-engagement-card-inner,
.intec-service-cloud .cloud-engagement-item .cloud-engagement-card-inner > .kt-row-column-wrap,
.intec-service-cloud .cloud-engagement-item .cloud-engagement-card-inner .kt-inside-inner-col {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
}
/* Text + arrow layout */
.intec-service-cloud .cloud-engagement-item .cloud-engagement-card-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1fr 22px !important;
column-gap: 12px !important;
align-items: center !important;
min-height: 62px !important;
padding: 0 14px 0 12px !important;
margin: 0 !important;
/* Current final alignment offset for D text + arrow */
transform: translateY(12px) !important;
}
/* Engagement text */
.intec-service-cloud .cloud-engagement-item .cloud-engagement-text {
color: #24324A !important;
font-size: 14px !important;
line-height: 1.32 !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-service-cloud .cloud-engagement-item .cloud-engagement-text strong {
color: #0B1F4D !important;
font-weight: 700 !important;
}
/* Engagement arrow */
.intec-service-cloud .cloud-engagement-item .cloud-engagement-arrow {
color: #00A651 !important;
font-size: 24px !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
/* Current final alignment offset for D arrow */
transform: translateY(6px) !important;
}
/* =========================================================
08E — TRUST BAR
Lightweight proof line with top/bottom rules
Current working treatment:
centered icon + trust statement
full-width horizontal rules
========================================================= */
.intec-service-cloud .cloud-trust-row {
background: transparent !important;
border: 0 !important;
border-top: 1px solid #D8E2F3 !important;
border-bottom: 1px solid #D8E2F3 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 10px 0 !important;
margin: 10px 0 0 0 !important;
transform: translateY(-28px) !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.intec-service-cloud .cloud-trust-row > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 72px auto !important;
column-gap: 14px !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 auto !important;
max-width: 820px !important;
}
.intec-service-cloud .cloud-trust-row .kt-inside-inner-col {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
}
/* Trust icon */
.intec-service-cloud .cloud-trust-icon,
.intec-service-cloud .cloud-trust-icon img,
.intec-service-cloud .cloud-trust-icon figure,
.intec-service-cloud .cloud-trust-icon .kb-img,
.intec-service-cloud .cloud-trust-icon .kb-advanced-image,
.intec-service-cloud .cloud-trust-icon .kb-img-wrap {
width: 72px !important;
max-width: 72px !important;
min-width: 72px !important;
height: auto !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
/* Trust text */
.intec-service-cloud .cloud-trust-text {
color: #007A3D !important;
font-size: 15px !important;
line-height: 1.35 !important;
font-weight: 700 !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
08F — RESPONSIVE RULES
========================================================= */
@media (max-width: 1024px) {
.intec-service-cloud .cloud-service-cd-row {
margin-top: 28px !important;
margin-bottom: 0 !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
}
.intec-service-cloud .cloud-cd-panel {
padding: 26px 24px !important;
}
.intec-service-cloud .cloud-cd-inner::before {
display: none !important;
}
.intec-service-cloud .cloud-outcome-row {
transform: none !important;
width: 100% !important;
}
.intec-service-cloud .cloud-outcome-rail-col,
.intec-service-cloud .cloud-outcome-text-col {
transform: none !important;
}
.intec-service-cloud .cloud-outcome-text-col {
width: 100% !important;
}
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon,
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon img,
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon figure,
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon .kb-img,
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon .kb-advanced-image,
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon .kb-img-wrap {
transform: none !important;
}
.intec-service-cloud .cloud-trust-row {
transform: none !important;
}
}
@media (max-width: 767px) {
.intec-service-cloud .cloud-cd-panel {
padding: 24px 18px !important;
}
.intec-service-cloud .cloud-cd-title-row > .kt-row-column-wrap {
grid-template-columns: 34px 1fr !important;
column-gap: 12px !important;
}
.intec-service-cloud .cloud-outcome-row > .kt-row-column-wrap {
grid-template-columns: 72px 16px 1fr !important;
column-gap: 10px !important;
}
.intec-service-cloud .cloud-outcome-icon-col img,
.intec-service-cloud .cloud-outcome-icon-col figure,
.intec-service-cloud .cloud-outcome-icon-col .kb-img,
.intec-service-cloud .cloud-outcome-icon-col .kb-advanced-image,
.intec-service-cloud .cloud-outcome-icon-col .kb-img-wrap {
width: 64px !important;
max-width: 64px !important;
min-width: 64px !important;
}
.intec-service-cloud .cloud-engagement-item > .kt-row-column-wrap {
grid-template-columns: 64px 1fr !important;
}
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon,
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon img,
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon figure,
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon .kb-img,
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon .kb-advanced-image,
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon .kb-img-wrap {
width: 64px !important;
max-width: 64px !important;
min-width: 64px !important;
}
.intec-service-cloud .cloud-trust-row > .kt-row-column-wrap {
grid-template-columns: 64px auto !important;
column-gap: 12px !important;
max-width: 100% !important;
}
.intec-service-cloud .cloud-trust-icon,
.intec-service-cloud .cloud-trust-icon img,
.intec-service-cloud .cloud-trust-icon figure,
.intec-service-cloud .cloud-trust-icon .kb-img,
.intec-service-cloud .cloud-trust-icon .kb-advanced-image,
.intec-service-cloud .cloud-trust-icon .kb-img-wrap {
width: 64px !important;
max-width: 64px !important;
min-width: 64px !important;
}
}
/* =========================================================
CSS-SVC-08G
Mobile Fixes for Cloud C/D Section
Purpose:
- Stack C and D sections cleanly on iPhone.
- Prevent D engagement card text from overflowing.
- Make C timeline green rail connect across variable text heights.
Desktop/tablet behavior is not changed.
========================================================= */
@media (max-width: 767px) {
/* Stack C and D into one column on mobile */
.intec-service-cloud .cloud-cd-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
row-gap: 28px !important;
align-items: stretch !important;
}
.intec-service-cloud .cloud-cd-inner > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-cloud .cloud-cd-inner > .kt-row-column-wrap > .kadence-column {
width: 100% !important;
max-width: 100% !important;
}
/* Outcome rows need flexible height so the green rail can connect */
.intec-service-cloud .cloud-outcome-row > .kt-row-column-wrap {
align-items: stretch !important;
grid-template-columns: 64px 16px minmax(0, 1fr) !important;
}
.intec-service-cloud .cloud-outcome-rail-col {
align-self: stretch !important;
height: 100% !important;
min-height: 100% !important;
position: relative !important;
}
/* Replace fixed 88px rail with flexible rail */
.intec-service-cloud .cloud-outcome-rail-col::after {
top: 8px !important;
bottom: -18px !important;
height: auto !important;
}
.intec-service-cloud .cloud-outcome-last .cloud-outcome-rail-col::after {
display: none !important;
}
/* Let D cards grow naturally with wrapped mobile text */
.intec-service-cloud .cloud-engagement-item {
min-height: auto !important;
height: auto !important;
margin: 14px 0 !important;
overflow: visible !important;
}
.intec-service-cloud .cloud-engagement-item > .kt-row-column-wrap {
grid-template-columns: 64px minmax(0, 1fr) !important;
min-height: auto !important;
align-items: stretch !important;
}
.intec-service-cloud .cloud-engagement-item .cloud-engagement-icon-rail {
min-height: auto !important;
align-items: center !important;
}
.intec-service-cloud .cloud-engagement-item .cloud-engagement-card,
.intec-service-cloud .cloud-engagement-item .cloud-engagement-card > .kt-inside-inner-col {
min-height: auto !important;
height: auto !important;
}
/* Remove desktop vertical offset that causes mobile overflow */
.intec-service-cloud .cloud-engagement-item .cloud-engagement-card-inner > .kt-row-column-wrap {
min-height: auto !important;
padding: 12px 12px 12px 8px !important;
transform: none !important;
align-items: center !important;
grid-template-columns: minmax(0, 1fr) 22px !important;
}
.intec-service-cloud .cloud-engagement-item .cloud-engagement-text {
font-size: 13.5px !important;
line-height: 1.34 !important;
overflow-wrap: break-word !important;
}
.intec-service-cloud .cloud-engagement-item .cloud-engagement-arrow {
transform: none !important;
align-self: center !important;
}
}
/* =========================================================
CSS-SVC-08H
Tablet / Small-Screen C/D Layout Fix
Purpose:
Stack C and D earlier so tablet layouts do not become cramped.
Desktop behavior is not changed.
========================================================= */
@media (max-width: 1024px) {
/* Stack C and D sections vertically on tablet/small screens */
.intec-service-cloud .cloud-cd-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
row-gap: 30px !important;
align-items: stretch !important;
}
.intec-service-cloud .cloud-cd-inner > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-cloud .cloud-cd-inner > .kt-row-column-wrap > .kadence-column {
width: 100% !important;
max-width: 100% !important;
}
/* Keep outcome rows readable after stacking */
.intec-service-cloud .cloud-outcome-row > .kt-row-column-wrap {
grid-template-columns: 72px 18px minmax(0, 1fr) !important;
align-items: stretch !important;
}
.intec-service-cloud .cloud-outcome-rail-col {
align-self: stretch !important;
height: 100% !important;
min-height: 100% !important;
position: relative !important;
}
.intec-service-cloud .cloud-outcome-rail-col::after {
top: 8px !important;
bottom: -18px !important;
height: auto !important;
}
.intec-service-cloud .cloud-outcome-last .cloud-outcome-rail-col::after {
display: none !important;
}
/* Let D cards breathe on tablet */
.intec-service-cloud .cloud-engagement-item {
min-height: auto !important;
height: auto !important;
margin: 14px 0 !important;
overflow: visible !important;
}
.intec-service-cloud .cloud-engagement-item > .kt-row-column-wrap {
grid-template-columns: 72px minmax(0, 1fr) !important;
min-height: auto !important;
align-items: stretch !important;
}
.intec-service-cloud .cloud-engagement-item .cloud-engagement-card-inner > .kt-row-column-wrap {
min-height: auto !important;
padding: 12px 14px 12px 10px !important;
transform: none !important;
align-items: center !important;
grid-template-columns: minmax(0, 1fr) 22px !important;
}
.intec-service-cloud .cloud-engagement-item .cloud-engagement-arrow {
transform: none !important;
align-self: center !important;
}
}
/* =========================================================
CSS-SVC-09
SERVICES PAGE
Operational Resilience Intro Desktop Cleanup
Purpose:
Match the proven Cloud intro rhythm while using the
two-layer class model:
- shared reusable service classes
- resilience-specific identity classes
Does not touch:
- Services hero
- Services selector/navbar
- Cloud service
- A/B/C/D sections
========================================================= */
/* ---------------------------------------------------------
Main Resilience intro row
Same logical role as cloud-service-intro-new.
Background image remains controlled by Kadence.
--------------------------------------------------------- */
.intec-service-resilience.resilience-service-intro-new,
.intec-service-resilience .resilience-service-intro-new {
position: relative !important;
isolation: isolate !important;
transform: translateX(-32px) !important;
width: calc(100% + 64px) !important;
max-width: calc(100% + 64px) !important;
min-height: 315px !important;
background-color: #ffffff !important;
padding-top: 0 !important;
padding-right: 24px !important;
padding-bottom: 18px !important;
padding-left: 24px !important;
margin-top: -18px !important;
margin-bottom: 0 !important;
margin-block-start: -18px !important;
margin-block-end: 0 !important;
overflow: visible !important;
}
/* ---------------------------------------------------------
White readability fade
Keeps the left text area clean over the Kadence background.
--------------------------------------------------------- */
.intec-service-resilience.resilience-service-intro-new::before,
.intec-service-resilience .resilience-service-intro-new::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
background: linear-gradient(
90deg,
rgba(255,255,255,1) 0%,
rgba(255,255,255,1) 30%,
rgba(255,255,255,0.96) 42%,
rgba(255,255,255,0.78) 54%,
rgba(255,255,255,0.42) 68%,
rgba(255,255,255,0.12) 80%,
rgba(255,255,255,0) 94%
) !important;
}
/* ---------------------------------------------------------
Content layer
Keeps text above the fade/background image.
--------------------------------------------------------- */
.intec-service-resilience.resilience-service-intro-new > .kt-row-column-wrap,
.intec-service-resilience .resilience-service-intro-new > .kt-row-column-wrap,
.intec-service-resilience .intec-service-intro-copy.resilience-service-intro-copy-new,
.intec-service-resilience .resilience-service-intro-copy-new {
position: relative !important;
z-index: 2 !important;
}
/* ---------------------------------------------------------
Copy block width, alignment, and Kadence gap reset
This is where Kadence lacked the needed max-width control.
--------------------------------------------------------- */
.intec-service-resilience .intec-service-intro-copy.resilience-service-intro-copy-new,
.intec-service-resilience .resilience-service-intro-copy-new {
max-width: 540px !important;
width: min(540px, 100%) !important;
margin-left: 0 !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: left !important;
transform: translateY(16px) !important;
}
.intec-service-resilience .resilience-service-intro-copy-new > .kt-inside-inner-col {
display: block !important;
max-width: 540px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
row-gap: 0 !important;
text-align: left !important;
}
/* ---------------------------------------------------------
Eyebrow
--------------------------------------------------------- */
.intec-service-resilience .intec-service-eyebrow.resilience-intro-eyebrow-new,
.intec-service-resilience .resilience-intro-eyebrow-new {
margin-top: 0 !important;
margin-bottom: 9px !important;
padding: 0 !important;
color: #00a83b !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: 0.7px !important;
text-transform: uppercase !important;
line-height: 1.1 !important;
text-align: left !important;
}
/* ---------------------------------------------------------
Main title
--------------------------------------------------------- */
.intec-service-resilience .intec-service-title.resilience-intro-title-new,
.intec-service-resilience .resilience-intro-title-new,
.intec-service-resilience .resilience-intro-title-new .kt-title-text {
margin-top: 0 !important;
margin-bottom: 12px !important;
padding: 0 !important;
color: #081f4d !important;
font-size: 26px !important;
font-weight: 800 !important;
line-height: 1.1 !important;
text-align: left !important;
}
/* ---------------------------------------------------------
Divider
Matches the reusable IntecPros accent divider behavior.
--------------------------------------------------------- */
.intec-service-resilience .intec-service-divider.resilience-intro-divider-new,
.intec-service-resilience .resilience-intro-divider-new,
.intec-service-resilience .resilience-intro-divider-new.wp-block-separator,
.intec-service-resilience hr.resilience-intro-divider-new,
.intec-service-resilience .resilience-intro-divider-new .kt-divider {
display: block !important;
width: 88px !important;
max-width: 88px !important;
height: 3px !important;
min-height: 3px !important;
margin-top: 0 !important;
margin-right: auto !important;
margin-bottom: 12px !important;
margin-left: 0 !important;
padding: 0 !important;
border: none !important;
background: linear-gradient(90deg, #001FB1 0%, #00B050 100%) !important;
opacity: 1 !important;
}
/* ---------------------------------------------------------
Lead statement
--------------------------------------------------------- */
.intec-service-resilience .intec-service-lead.resilience-intro-lead-new,
.intec-service-resilience .resilience-intro-lead-new,
.intec-service-resilience .resilience-intro-lead-new .kt-title-text {
margin-top: 0 !important;
margin-bottom: 8px !important;
padding: 0 !important;
color: #53657f !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: 0.4px !important;
text-align: left !important;
}
/* ---------------------------------------------------------
Body paragraph
--------------------------------------------------------- */
.intec-service-resilience .intec-service-body.resilience-intro-body-new,
.intec-service-resilience .resilience-intro-body-new {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
color: #24324a !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.42 !important;
text-align: left !important;
max-width: 540px !important;
}
/* ---------------------------------------------------------
Extra guard against default block spacing inside the copy area.
--------------------------------------------------------- */
.intec-service-resilience .resilience-service-intro-copy-new p,
.intec-service-resilience .resilience-service-intro-copy-new h1,
.intec-service-resilience .resilience-service-intro-copy-new h2,
.intec-service-resilience .resilience-service-intro-copy-new h3,
.intec-service-resilience .resilience-service-intro-copy-new h4,
.intec-service-resilience .resilience-service-intro-copy-new h5,
.intec-service-resilience .resilience-service-intro-copy-new h6,
.intec-service-resilience .resilience-service-intro-copy-new hr {
margin-block-start: 0 !important;
}
/* =========================================================
CSS-SVC-09C
Operational Resilience Intro Fine Alignment Patch
Purpose:
Uses verified child classes after diagnostics confirmed
all Resilience intro elements are being targeted.
========================================================= */
.intec-service-resilience .resilience-service-intro-copy-new {
transform: translate(-12px, 16px) !important;
}
.intec-service-resilience .resilience-intro-title-new,
.intec-service-resilience .resilience-intro-title-new .kt-title-text {
margin-bottom: 10px !important;
}
.intec-service-resilience .resilience-intro-divider-new,
.intec-service-resilience .intec-accent-divider.resilience-intro-divider-new,
.intec-service-resilience hr.resilience-intro-divider-new {
margin-top: 0 !important;
margin-bottom: 10px !important;
}
.intec-service-resilience .resilience-intro-lead-new,
.intec-service-resilience .resilience-intro-lead-new .kt-title-text {
margin-top: 0 !important;
margin-bottom: 6px !important;
padding-bottom: 0 !important;
}
.intec-service-resilience .resilience-intro-body-new {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* =========================================================
CSS-SVC-09D
Shared Service Intro Standard
Purpose:
Promotes the completed Operational Resilience intro styling
into reusable standard service intro classes.
Applies to:
- intec-service-panel
- intec-service-intro
- intec-service-intro-copy
- intec-service-eyebrow
- intec-service-title
- intec-service-divider / intec-accent-divider
- intec-service-lead
- intec-service-body
Service-specific classes remain identity hooks only.
========================================================= */
/* =========================================================
CSS-SVC-09D
Shared Service Intro Standard
========================================================= */
/* Main shared service intro row */
.intec-service-panel.intec-service-intro,
.intec-service-panel .intec-service-intro {
position: relative !important;
isolation: isolate !important;
transform: translateX(-32px) !important;
width: calc(100% + 64px) !important;
max-width: calc(100% + 64px) !important;
min-height: 315px !important;
background-color: #ffffff !important;
padding-top: 0 !important;
padding-right: 24px !important;
padding-bottom: 18px !important;
padding-left: 24px !important;
margin-top: -18px !important;
margin-bottom: 0 !important;
margin-block-start: -18px !important;
margin-block-end: 0 !important;
overflow: visible !important;
}
/* White readability fade */
.intec-service-panel.intec-service-intro::before,
.intec-service-panel .intec-service-intro::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
background: linear-gradient(
90deg,
rgba(255,255,255,1) 0%,
rgba(255,255,255,1) 30%,
rgba(255,255,255,0.96) 42%,
rgba(255,255,255,0.78) 54%,
rgba(255,255,255,0.42) 68%,
rgba(255,255,255,0.12) 80%,
rgba(255,255,255,0) 94%
) !important;
}
/* Keep content above fade/background */
.intec-service-panel.intec-service-intro > .kt-row-column-wrap,
.intec-service-panel.intec-service-intro > .kt-row-layout-inner > .kt-row-column-wrap,
.intec-service-panel .intec-service-intro > .kt-row-column-wrap,
.intec-service-panel .intec-service-intro > .kt-row-layout-inner > .kt-row-column-wrap,
.intec-service-intro .intec-service-intro-copy {
position: relative !important;
z-index: 2 !important;
}
/* Copy block width and alignment */
.intec-service-intro .intec-service-intro-copy {
max-width: 540px !important;
width: min(540px, 100%) !important;
margin-left: 0 !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: left !important;
transform: translate(-12px, 16px) !important;
}
.intec-service-intro .intec-service-intro-copy > .kt-inside-inner-col {
display: block !important;
max-width: 540px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
row-gap: 0 !important;
text-align: left !important;
}
/* Eyebrow */
.intec-service-intro .intec-service-eyebrow {
margin-top: 0 !important;
margin-bottom: 9px !important;
padding: 0 !important;
color: #00a83b !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: 0.7px !important;
text-transform: uppercase !important;
line-height: 1.1 !important;
text-align: left !important;
}
/* Main title */
.intec-service-intro .intec-service-title,
.intec-service-intro .intec-service-title .kt-title-text {
margin-top: 0 !important;
margin-bottom: 10px !important;
padding: 0 !important;
color: #081f4d !important;
font-size: 26px !important;
font-weight: 800 !important;
line-height: 1.1 !important;
text-align: left !important;
}
/* Divider */
.intec-service-intro .intec-service-divider,
.intec-service-intro .intec-accent-divider,
.intec-service-intro .intec-service-divider.wp-block-separator,
.intec-service-intro .intec-accent-divider.wp-block-separator,
.intec-service-intro hr.intec-service-divider,
.intec-service-intro hr.intec-accent-divider,
.intec-service-intro .intec-service-divider .kt-divider,
.intec-service-intro .intec-accent-divider .kt-divider {
display: block !important;
width: 88px !important;
max-width: 88px !important;
height: 3px !important;
min-height: 3px !important;
margin-top: 0 !important;
margin-right: auto !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
padding: 0 !important;
border: none !important;
background: linear-gradient(90deg, #001FB1 0%, #00B050 100%) !important;
opacity: 1 !important;
}
/* Lead statement */
.intec-service-intro .intec-service-lead,
.intec-service-intro .intec-service-lead .kt-title-text {
margin-top: 0 !important;
margin-bottom: 6px !important;
padding: 0 !important;
padding-bottom: 0 !important;
color: #53657f !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: 0.4px !important;
text-align: left !important;
}
/* Body paragraph */
.intec-service-intro .intec-service-body {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
padding-top: 0 !important;
color: #24324a !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.42 !important;
text-align: left !important;
max-width: 540px !important;
}
/* Guard against default block spacing inside copy area */
.intec-service-intro .intec-service-intro-copy p,
.intec-service-intro .intec-service-intro-copy h1,
.intec-service-intro .intec-service-intro-copy h2,
.intec-service-intro .intec-service-intro-copy h3,
.intec-service-intro .intec-service-intro-copy h4,
.intec-service-intro .intec-service-intro-copy h5,
.intec-service-intro .intec-service-intro-copy h6,
.intec-service-intro .intec-service-intro-copy hr {
margin-block-start: 0 !important;
}
/* =========================================================
CSS-SVC-09E
Fractional Intro Background Size + Edge Fade Tune
Purpose:
Reduces the Fractional intro background image size and
increases the fade on top, right, and bottom while
preserving the left-side text readability.
========================================================= */
.intec-service-fractional.fractional-service-intro {
position: relative !important;
overflow: hidden !important;
/* keep your existing background image URL */
background-repeat: no-repeat !important;
background-position: right 70px top -18px !important;
/* about 25% smaller */
background-size: 50% auto !important;
}
/* Keep all intro content above the fade layer */
.intec-service-fractional.fractional-service-intro > * {
position: relative !important;
z-index: 1 !important;
}
/* Fade the image more on top, right, and bottom */
.intec-service-fractional.fractional-service-intro::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
pointer-events: none !important;
background:
/* left-side text protection */
linear-gradient(to right,
rgba(255,255,255,1.00) 0%,
rgba(255,255,255,1.00) 20%,
rgba(255,255,255,0.96) 34%,
rgba(255,255,255,0.62) 50%,
rgba(255,255,255,0.10) 62%,
rgba(255,255,255,0.00) 70%
),
/* top fade */
linear-gradient(to bottom,
rgba(255,255,255,0.68) 0%,
rgba(255,255,255,0.00) 18%
),
/* right fade */
linear-gradient(to left,
rgba(255,255,255,0.72) 0%,
rgba(255,255,255,0.00) 14%
),
/* bottom fade */
linear-gradient(to top,
rgba(255,255,255,0.78) 0%,
rgba(255,255,255,0.00) 20%
);
}
/* =========================================================
CSS-SVC-10A
Operational Resilience A/B Cards
Header + Badge Foundation
Purpose:
Styles A/B badge circles and header alignment using the
shared class + Resilience identity class model.
========================================================= */
/* A/B row spacing */
.intec-service-resilience .resilience-service-ab-row {
margin-top: -14px !important;
}
/* Card heading */
.intec-service-resilience .resilience-ab-title,
.intec-service-resilience .resilience-ab-title .kt-title-text {
color: #0b1f4d !important;
font-size: 19px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Badge circle */
.intec-service-resilience .resilience-ab-badge,
.intec-service-resilience .intec-ab-badge.resilience-ab-badge {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 999px !important;
background: #001fb1 !important;
color: #ffffff !important;
font-size: 15px !important;
font-weight: 800 !important;
line-height: 1 !important;
text-align: center !important;
}
/* Header row alignment */
.intec-service-resilience .resilience-ab-header-row {
margin: 0 0 16px 0 !important;
padding: 0 !important;
}
.intec-service-resilience .resilience-ab-header-row > .kt-row-column-wrap {
align-items: center !important;
}
/* Remove default paragraph spacing inside badge cell */
.intec-service-resilience .resilience-ab-badge-cell p {
margin: 0 !important;
}
/* =========================================================
CSS-SVC-10L
Shared Service Section Badge Standard
Purpose:
Promotes A/B/C/D service badge styling into one reusable
standard class so service-specific badge classes remain
identity hooks only.
Applies to:
- intec-service-badge
Service-specific classes:
- observability-badge-a
- observability-badge-b
- observability-badge-c
- observability-badge-d
========================================================= */
.intec-service-badge {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 999px !important;
background: #001fb1 !important;
color: #ffffff !important;
font-size: 15px !important;
font-weight: 800 !important;
line-height: 1 !important;
text-align: center !important;
}
/* =========================================================
CSS-SVC-10M
Shared Service A/B Header Row Standard
Purpose:
Promotes A/B badge + title row alignment into the reusable
shared A/B header row class.
Applies to:
- intec-service-ab-header-row
Service-specific classes remain identity hooks only.
========================================================= */
.intec-service-ab-header-row {
margin: 0 0 16px 0 !important;
padding: 0 !important;
}
.intec-service-ab-header-row > .kt-row-column-wrap,
.intec-service-ab-header-row > .kt-row-layout-inner > .kt-row-column-wrap {
align-items: center !important;
}
/* =========================================================
CSS-SVC-10N
Shared Service A/B Title Standard
Purpose:
Promotes A/B card title typography into the reusable
shared A/B title class.
Applies to:
- intec-service-ab-title
Service-specific classes remain identity hooks only.
========================================================= */
.intec-service-ab-title,
.intec-service-ab-title .kt-title-text {
color: #0b1f4d !important;
font-size: 19px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
CSS-SVC-10C
Operational Resilience Card A Image Position + Visual Scale
Purpose:
Centers Card A visual in its image cell and enlarges the
visible object without changing the row structure.
========================================================= */
.intec-service-resilience .resilience-ab-visual-cell > .kt-inside-inner-col {
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
}
.intec-service-resilience .resilience-ab-icon-a {
display: block !important;
margin: 0 auto !important;
overflow: visible !important;
}
.intec-service-resilience .resilience-ab-icon-a img {
display: block !important;
width: 160px !important;
max-width: 160px !important;
height: auto !important;
margin: 0 auto !important;
transform: translateX(-12px) scale(1.15) !important;
transform-origin: center center !important;
}
/* CSS-SVC-10D-2
Force proof emphasis phrase to brand blue
*/
.intec-service-resilience .resilience-ab-proof strong,
.resilience-ab-proof strong {
color: #001FB1 !important;
font-weight: 800 !important;
}
/* =========================================================
CSS-SVC-10P
Shared Service A/B Visual Cell Standard
Purpose:
Promotes A/B image/visual cell alignment into the reusable
shared A/B visual cell class.
Applies to:
- intec-service-ab-visual-cell
Service-specific classes remain identity hooks only.
========================================================= */
.intec-service-ab-visual-cell > .kt-inside-inner-col {
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
}
/* =========================================================
CSS-SVC-10D — Resilience A/B card B image control
========================================================= */
.intec-service-resilience .resilience-ab-icon-b {
display: flex;
justify-content: center;
align-items: flex-start;
}
.intec-service-resilience .resilience-ab-icon-b img {
display: block;
width: 100%;
max-width: none;
height: auto;
margin: 0 auto;
}
/* =========================================================
CSS-SVC-10E
Operational Resilience Card A Body-to-Proof Gap Tightening
Purpose:
Removes hidden default spacing between the body row and proof row.
========================================================= */
.intec-service-resilience .resilience-ab-body-row {
margin-bottom: 4px !important;
padding-bottom: 0 !important;
}
.intec-service-resilience .resilience-ab-body-row > .kt-row-column-wrap,
.intec-service-resilience .resilience-ab-body-row .kt-inside-inner-col {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.intec-service-resilience .resilience-ab-copy {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.intec-service-resilience .resilience-ab-proof-row {
margin-top: 0 !important;
}
/* =========================================================
CSS-SVC-10O
Shared Service A/B Body Row Standard
Purpose:
Promotes A/B body-row spacing and Kadence gap reset into
the reusable shared A/B body row class.
Applies to:
- intec-service-ab-body-row
Service-specific classes remain identity hooks only.
========================================================= */
.intec-service-ab-body-row {
margin-bottom: 4px !important;
padding-bottom: 0 !important;
}
.intec-service-ab-body-row > .kt-row-column-wrap,
.intec-service-ab-body-row > .kt-row-layout-inner > .kt-row-column-wrap,
.intec-service-ab-body-row .kt-inside-inner-col {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* =========================================================
CSS-SVC-10F
Operational Resilience Card B Copy Rhythm
Purpose:
Controls two-paragraph spacing in Card B where Kadence only
allows one shared paragraph margin value.
========================================================= */
.intec-service-resilience .resilience-ab-card-b .resilience-ab-copy-b {
color: #24324A !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.42 !important;
margin-top: 0 !important;
padding: 0 !important;
}
.intec-service-resilience .resilience-ab-card-b .resilience-ab-copy-b-first {
margin-bottom: 14px !important;
}
.intec-service-resilience .resilience-ab-card-b .resilience-ab-copy-b-second {
margin-bottom: 0 !important;
}
/* =========================================================
CSS-SVC-10Q
Shared Service A/B Copy Standard
Purpose:
Controls A/B card paragraph typography through the shared
copy-cell parent because Kadence may render the visible
text inside nested generated elements.
========================================================= */
.intec-service-ab-copy-cell p,
.intec-service-ab-copy-cell .kt-title-text,
.intec-service-ab-copy-cell .kt-adv-heading,
.intec-service-ab-copy-cell .wp-block-kadence-advancedheading,
.intec-service-ab-copy-cell .wp-block-kadence-advancedheading * {
color: #24324A !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.32 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
/* =========================================================
CSS-SVC-10R
Shared Service A/B Multi-Paragraph Copy Rhythm
Purpose:
Promotes two-paragraph A/B card copy spacing into reusable
shared modifier classes.
Applies to:
- intec-service-ab-copy-first
- intec-service-ab-copy-second
Service-specific classes remain identity hooks only.
========================================================= */
.intec-service-ab-copy-first {
margin-bottom: 14px !important;
}
.intec-service-ab-copy-second {
margin-bottom: 0 !important;
}
/* =========================================================
CSS-SVC-10S
Observability A/B Icon Size + Left Position
Purpose:
Keeps Observability A/B icons from shrinking with Kadence
column width and moves the whole icon group left so it
does not collide with the copy column.
========================================================= */
.intec-service-observability .observability-ab-visual-cell-a > .kt-inside-inner-col,
.intec-service-observability .observability-ab-visual-cell-b > .kt-inside-inner-col {
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
}
.intec-service-observability .observability-ab-icon-a,
.intec-service-observability .observability-ab-icon-b {
display: block !important;
width: 157px !important;
max-width: 157px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
text-align: center !important;
transform: translateX(-6px) !important;
transform-origin: center center !important;
}
.intec-service-observability .observability-ab-icon-a figure,
.intec-service-observability .observability-ab-icon-b figure,
.intec-service-observability .observability-ab-icon-a .kb-img-wrap,
.intec-service-observability .observability-ab-icon-b .kb-img-wrap {
width: 157px !important;
max-width: 157px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.intec-service-observability .observability-ab-icon-a img,
.intec-service-observability .observability-ab-icon-b img,
.intec-service-observability .observability-ab-icon-a .kb-img,
.intec-service-observability .observability-ab-icon-b .kb-img {
display: block !important;
width: 157px !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
/* =========================================================
CSS-SVC-10G
Operational Resilience Card B Image Sizing + Position
Purpose:
Restores B infinity visual size and centers it after local migration.
========================================================= */
.intec-service-resilience .resilience-ab-card-b .resilience-ab-visual-cell > .kt-inside-inner-col {
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
}
.intec-service-resilience .resilience-ab-card-b .resilience-ab-icon-b {
display: block !important;
margin: 0 auto !important;
overflow: visible !important;
text-align: center !important;
}
.intec-service-resilience .resilience-ab-card-b .resilience-ab-icon-b img {
display: block !important;
width: 230px !important;
max-width: 230px !important;
height: auto !important;
margin: 0 auto !important;
transform: translateX(-18px) translateY(-4px) scale(1) !important;
transform-origin: center center !important;
}
/* =========================================================
CSS-SVC-10H
Operational Resilience A/B Equal Card Height
Purpose:
Keeps Card A and Card B visually equal in height without
adding fake padding to either card.
========================================================= */
.intec-service-resilience.resilience-service-ab-row > .kt-row-column-wrap {
align-items: stretch !important;
}
.intec-service-resilience.resilience-service-ab-row .resilience-ab-card {
height: 100% !important;
min-height: 100% !important;
}
.intec-service-resilience.resilience-service-ab-row .resilience-ab-card > .kt-inside-inner-col {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
/* =========================================================
CSS-SVC-10K
Shared Service A/B Equal Card Height Standard
Purpose:
Promotes the completed Operational Resilience A/B equal-height
behavior into reusable standard A/B service classes.
Applies to:
- intec-service-ab-row
- intec-service-ab-card
Service-specific classes remain identity hooks only.
========================================================= */
.intec-service-ab-row > .kt-row-column-wrap,
.intec-service-ab-row > .kt-row-layout-inner > .kt-row-column-wrap {
align-items: stretch !important;
}
.intec-service-ab-row .intec-service-ab-card {
height: 100% !important;
min-height: 100% !important;
}
.intec-service-ab-row .intec-service-ab-card > .kt-inside-inner-col {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
/* =========================================================
CSS-SVC-10T
Fractional A/B Visual Tune
Purpose:
Enlarges Fractional CIO/CTO A/B visual panels and gives
the image column more presence without changing shared
A/B standards for other services.
========================================================= */
@media (min-width: 1025px) {
/* Fractional A/B body column balance */
.intec-service-fractional
.fractional-ab-body-row > .kt-row-column-wrap,
.intec-service-fractional
.fractional-ab-body-row > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 34% minmax(0, 1fr) !important;
column-gap: 16px !important;
align-items: center !important;
width: 100% !important;
}
/* Neutralize Kadence column width behavior */
.intec-service-fractional
.fractional-ab-body-row > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-fractional
.fractional-ab-body-row > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* Visual cell: anchor icon left, vertically centered */
.intec-service-fractional
.fractional-ab-visual-cell > .kt-inside-inner-col {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 0 !important;
margin: 0 !important;
transform: translateX(-6px) !important;
}
/* A/B icon panel sizing */
.intec-service-fractional
.fractional-ab-icon,
.intec-service-fractional
.fractional-ab-icon figure,
.intec-service-fractional
.fractional-ab-icon .kb-img-wrap {
width: 220px !important;
max-width: 220px !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-service-fractional
.fractional-ab-icon img,
.intec-service-fractional
.fractional-ab-icon .kb-img {
display: block !important;
width: 220px !important;
max-width: 220px !important;
height: auto !important;
margin: 0 !important;
}
}
/* =========================================================
CSS-SVC-11A
Operational Resilience C/D Equal Card Shell
Purpose:
Keeps C and D cards equal height and aligned as a paired row.
========================================================= */
.intec-service-resilience.resilience-service-cd-row > .kt-row-column-wrap {
align-items: stretch !important;
}
.intec-service-resilience.resilience-service-cd-row .resilience-cd-card {
height: 100% !important;
min-height: 100% !important;
}
.intec-service-resilience.resilience-service-cd-row .resilience-cd-card > .kt-inside-inner-col {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
/* =========================================================
CSS-SVC-11G
Shared Service C/D Equal Card Shell Standard
Purpose:
Promotes C/D equal-height card shell behavior into reusable
shared C/D service classes.
Applies to:
- intec-service-cd-row
- intec-service-cd-card
Service-specific classes remain identity hooks only.
========================================================= */
.intec-service-cd-row > .kt-row-column-wrap,
.intec-service-cd-row > .kt-row-layout-inner > .kt-row-column-wrap {
align-items: stretch !important;
}
.intec-service-cd-row .intec-service-cd-card {
height: 100% !important;
min-height: 100% !important;
}
.intec-service-cd-row .intec-service-cd-card > .kt-inside-inner-col {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
/* =========================================================
CSS-SVC-11B
Operational Resilience C/D Header Badge + Title
Purpose:
Creates consistent C/D card header badge and heading styling.
========================================================= */
.intec-service-resilience .resilience-cd-badge {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
border-radius: 999px !important;
background: #001FB1 !important;
color: #ffffff !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16px !important;
font-weight: 800 !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
//* =========================================================
CSS-SVC-11H
Shared Service C/D Header Row Standard
Purpose:
Standardizes C/D badge + title row alignment using a fixed
badge column and flexible heading column so spacing remains
consistent regardless of card width.
Applies to:
- intec-service-cd-header-row
Service-specific classes remain identity hooks only.
========================================================= */
.intec-service-cd-header-row {
margin: 0 0 18px 0 !important;
padding: 0 !important;
}
.intec-service-cd-header-row > .kt-row-column-wrap,
.intec-service-cd-header-row > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 40px minmax(0, 1fr) !important;
column-gap: 12px !important;
align-items: center !important;
width: 100% !important;
}
.intec-service-cd-header-row > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-cd-header-row > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-service-cd-header-row .intec-service-badge {
margin: 0 !important;
}
/* =========================================================
CSS-SVC-11I
Shared Service Outcome Tile Grid Standard
Purpose:
Creates reusable compact outcome tiles for service C sections.
Applies to:
- intec-service-outcome-list
- intec-service-outcome-list-wide
- intec-service-outcome-tile-grid
- intec-service-outcome-tile
- intec-service-outcome-tile-icon
- intec-service-outcome-tile-copy
Service-specific classes remain identity hooks only.
========================================================= */
.intec-service-outcome-list {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-service-outcome-list > .kt-inside-inner-col {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-service-outcome-list.intec-service-outcome-list-wide > .kt-inside-inner-col {
width: 100% !important;
max-width: none !important;
}
.intec-service-outcome-tile-grid {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-service-outcome-tile-grid > .kt-row-layout-inner,
.intec-service-outcome-tile-grid > .kt-row-column-wrap,
.intec-service-outcome-tile-grid > .kt-row-layout-inner > .kt-row-column-wrap {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-service-outcome-tile-grid > .kt-row-column-wrap,
.intec-service-outcome-tile-grid > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
column-gap: 8px !important;
row-gap: 8px !important;
align-items: stretch !important;
}
.intec-service-outcome-tile-grid > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-outcome-tile-grid > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-service-outcome-tile {
position: relative !important;
height: 100% !important;
min-height: 150px !important;
background: #ffffff !important;
border: 1px solid #D8E2F3 !important;
border-radius: 12px !important;
overflow: hidden !important;
}
.intec-service-outcome-tile > .kt-inside-inner-col {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
padding: 10px 9px 12px 9px !important;
}
.intec-service-outcome-tile::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 3px !important;
background: linear-gradient(90deg, #001FB1 0%, #00B050 100%) !important;
}
.intec-service-outcome-tile-icon,
.intec-service-outcome-tile-icon figure,
.intec-service-outcome-tile-icon .kb-img-wrap {
width: 58px !important;
max-width: 58px !important;
height: 58px !important;
max-height: 58px !important;
margin: 0 auto 8px auto !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.intec-service-outcome-tile-icon img,
.intec-service-outcome-tile-icon .kb-img {
display: block !important;
width: auto !important;
max-width: 58px !important;
max-height: 58px !important;
height: auto !important;
margin: 0 auto !important;
object-fit: contain !important;
}
.intec-service-outcome-tile-copy,
.intec-service-outcome-tile-copy p,
.intec-service-outcome-tile-copy .kt-title-text,
.intec-service-outcome-tile-copy .kt-adv-heading,
.intec-service-outcome-tile-copy .wp-block-kadence-advancedheading,
.intec-service-outcome-tile-copy .wp-block-kadence-advancedheading * {
color: #24324A !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.24 !important;
letter-spacing: -0.01em !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-service-outcome-tile-copy .intec-outcome-tile-lead {
display: block !important;
width: 100% !important;
color: #001FB1 !important;
font-weight: 400 !important;
text-align: center !important;
margin-bottom: 4px !important;
}
/* Optional modifier for dense four-tile layouts */
.intec-service-outcome-list.intec-service-outcome-list-wide {
margin-left: -20px !important;
margin-right: -20px !important;
width: calc(100% + 40px) !important;
max-width: calc(100% + 40px) !important;
}
/* =========================================================
CSS-SVC-11J
Shared Service Engagement Rail Standard
Purpose:
Adds a reusable vertical green rail with dots for service
engagement-list sections without affecting all engagement
lists by default.
Applies to:
- intec-service-engagement-rail
- intec-service-engagement-item
========================================================= */
.intec-service-engagement-rail {
position: relative !important;
}
.intec-service-engagement-rail::before {
content: "" !important;
position: absolute !important;
top: 20px !important;
bottom: 20px !important;
left: -2px !important;
width: 2px !important;
background: linear-gradient(180deg, #00B050 0%, #007A3D 100%) !important;
border-radius: 999px !important;
opacity: 0.85 !important;
z-index: 0 !important;
}
.intec-service-engagement-rail .intec-service-engagement-item {
position: relative !important;
z-index: 1 !important;
}
.intec-service-engagement-rail .intec-service-engagement-item::before {
content: "" !important;
position: absolute !important;
left: -8px !important;
top: 50% !important;
width: 12px !important;
height: 12px !important;
border-radius: 999px !important;
background: #00B050 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1px rgba(0, 176, 80, 0.25) !important;
transform: translateY(-50%) !important;
z-index: 3 !important;
}
/* =========================================================
CSS-SVC-11K
Shared Service Engagement Boxed Row Standard
Purpose:
Creates reusable boxed engagement rows with icon circles,
compact text rhythm, and right arrows.
Applies only when wrapper has:
- intec-service-engagement-boxed
========================================================= */
.intec-service-engagement-boxed {
margin: 0 !important;
padding: 0 !important;
}
.intec-service-engagement-boxed .intec-service-engagement-item {
position: relative !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
}
.intec-service-engagement-boxed .intec-service-engagement-item:last-child {
margin-bottom: 0 !important;
}
.intec-service-engagement-boxed .intec-service-engagement-item > .kt-row-column-wrap,
.intec-service-engagement-boxed .intec-service-engagement-item > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 64px minmax(0, 1fr) !important;
column-gap: 12px !important;
align-items: center !important;
width: 100% !important;
}
.intec-service-engagement-boxed .intec-service-engagement-item > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-engagement-boxed .intec-service-engagement-item > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-service-engagement-boxed .intec-engagement-icon-tile {
width: 52px !important;
height: 52px !important;
min-width: 52px !important;
min-height: 52px !important;
border-radius: 999px !important;
background: #ffffff !important;
border: 1px solid #C9D8F2 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
z-index: 2 !important;
}
.intec-service-engagement-boxed .intec-engagement-icon-tile .kt-inside-inner-col,
.intec-service-engagement-boxed .intec-engagement-icon-tile figure,
.intec-service-engagement-boxed .intec-engagement-icon-tile .kb-img-wrap {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 42px !important;
max-width: 42px !important;
height: 42px !important;
max-height: 42px !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-service-engagement-boxed .intec-engagement-icon-tile img,
.intec-service-engagement-boxed .intec-engagement-icon-tile .kb-img {
display: block !important;
width: 42px !important;
max-width: 42px !important;
height: auto !important;
margin: 0 !important;
}
/* Engagement text box standard */
.intec-service-engagement-boxed .intec-engagement-text-box {
width: 100% !important;
max-width: none !important;
min-height: 44px !important;
background: #ffffff !important;
border: 1px solid #D8E2F3 !important;
border-radius: 10px !important;
padding: 7px 38px 7px 14px !important;
margin: 0 !important;
position: relative !important;
display: flex !important;
align-items: center !important;
}
/* Keep Kadence inner wrapper from adding its own spacing */
.intec-service-engagement-boxed .intec-engagement-text-box > .kt-inside-inner-col,
.intec-service-engagement-boxed .intec-engagement-text-box .kt-inside-inner-col {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Engagement arrow standard */
.intec-service-engagement-boxed .intec-engagement-text-box::after {
content: "›" !important;
position: absolute !important;
right: 16px !important;
top: 50% !important;
transform: translateY(-52%) !important;
color: #178A2F !important;
font-size: 28px !important;
font-weight: 300 !important;
line-height: 1 !important;
}
/* Engagement copy standard */
.intec-service-engagement-boxed .intec-engagement-text-box p,
.intec-service-engagement-boxed .intec-engagement-text-box .kt-title-text,
.intec-service-engagement-boxed .intec-engagement-text-box .kt-adv-heading,
.intec-service-engagement-boxed .intec-engagement-text-box .wp-block-kadence-advancedheading,
.intec-service-engagement-boxed .intec-engagement-text-box .wp-block-kadence-advancedheading * {
color: #24324A !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.22 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Bold lead phrase standard */
.intec-service-engagement-boxed .intec-engagement-text-box strong {
color: #24324A !important;
font-weight: 800 !important;
}
/* =========================================================
CSS-SVC-11L
Observability D Engagement Rail + Row Position Fine Tune
Purpose:
Moves the Observability D engagement row cluster slightly right while
nudging the green rail left, preserving icon-to-box spacing.
========================================================= */
.intec-service-observability
.observability-engagement-list-d
.intec-service-engagement-item {
transform: translateX(8px) !important;
}
.intec-service-observability
.observability-engagement-list-d.intec-service-engagement-rail::before {
left: -8px !important;
}
.intec-service-observability
.observability-engagement-list-d.intec-service-engagement-rail
.intec-service-engagement-item::before {
left: -22px !important;
}
/* =========================================================
CSS-SVC-11O
Fractional D Engagement Content Position Fine Tune
Purpose:
Keeps the Fractional D green rail anchored left while moving
the icon/text row content right for better badge alignment.
Also normalizes five-row spacing and Fractional D text rhythm.
========================================================= */
/* Move only the D row content area right, not the rail wrapper.
Use wrapper gap to control vertical row spacing. */
.intec-service-fractional
.fractional-engagement-list-d > .kt-inside-inner-col {
padding-left: 30px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
/* Let wrapper gap control row spacing instead of inherited row margins */
.intec-service-fractional
.fractional-engagement-list-d
.intec-service-engagement-item {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Align Fractional D rail under the D badge center */
.intec-service-fractional
.fractional-engagement-list-d.intec-service-engagement-rail::before {
left: 14px !important;
}
/* Move dots with the rail, without moving icons/text boxes */
.intec-service-fractional
.fractional-engagement-list-d.intec-service-engagement-rail
.intec-service-engagement-item::before {
left: -21px !important;
}
/* Fractional D text box rhythm.
Keep the box and arrow where they are.
Move only the inner text content. */
.intec-service-fractional
.fractional-engagement-list-d
.intec-engagement-text-box {
padding: 7px 0 !important;
min-height: 50px !important;
display: flex !important;
align-items: center !important;
}
/* Add breathing room inside the Kadence inner content wrapper */
.intec-service-fractional
.fractional-engagement-list-d
.intec-engagement-text-box > .kt-inside-inner-col,
.intec-service-fractional
.fractional-engagement-list-d
.intec-engagement-text-box .kt-inside-inner-col {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 4px 52px 4px 14px !important;
}
/* Keep the text itself controlled inside that padded space */
.intec-service-fractional
.fractional-engagement-list-d
.intec-engagement-text-box p,
.intec-service-fractional
.fractional-engagement-list-d
.intec-engagement-copy,
.intec-service-fractional
.fractional-engagement-list-d
.intec-engagement-text-box .kt-title-text,
.intec-service-fractional
.fractional-engagement-list-d
.intec-engagement-text-box .kt-adv-heading,
.intec-service-fractional
.fractional-engagement-list-d
.intec-engagement-text-box .wp-block-kadence-advancedheading,
.intec-service-fractional
.fractional-engagement-list-d
.intec-engagement-text-box .wp-block-kadence-advancedheading * {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.24 !important;
}
/* Fractional D lead phrase */
.intec-service-fractional
.fractional-engagement-list-d
.intec-engagement-text-box strong {
color: #0021B9 !important;
font-weight: 800 !important;
}
/* =========================================================
CSS-SVC-11C
Operational Resilience Section C Outcome Item Prototype
Purpose:
Overrides Kadence 10/10/80 outcome row for Section C.
Uses CSS grid for:
check | icon tile | text box
========================================================= */
.intec-service-resilience .resilience-outcome-list,
.intec-service-resilience .resilience-outcome-list-c {
margin: 0 !important;
padding: 0 !important;
}
/* Each outcome item row */
.intec-service-resilience .resilience-outcome-item,
.intec-service-resilience .resilience-outcome-item-c {
margin: 0 0 7px 0 !important;
padding: 0 !important;
}
.intec-service-resilience .resilience-outcome-list-c .resilience-outcome-item-c:last-child {
margin-bottom: 0 !important;
}
/* ===== DESKTOP/TABLET OVERRIDE =====
This is the key override that defeats Kadence 10/10/80.
*/
/* Pull the C outcome rows left and let the text box stretch right */
.intec-service-resilience .resilience-outcome-list-c {
width: calc(100% + 44px) !important;
max-width: none !important;
margin-left: -20px !important;
padding: 0 !important;
}
/* Override Kadence columns for the unique C outcome row */
.intec-service-resilience .resilience-outcome-item > .kt-row-column-wrap,
.intec-service-resilience .resilience-outcome-item-c > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 24px 42px minmax(0, 1fr) !important;
column-gap: 7px !important;
align-items: center !important;
width: 100% !important;
max-width: none !important;
}
/* Kill Kadence width/flex-basis behavior inside this one row */
.intec-service-resilience .resilience-outcome-item > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-resilience .resilience-outcome-item-c > .kt-row-column-wrap > .wp-block-kadence-column {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* Let third column stretch */
.intec-service-resilience .resilience-outcome-item > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(3),
.intec-service-resilience .resilience-outcome-item-c > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(3) {
width: 100% !important;
min-width: 0 !important;
}
/* Normalize inner column wrappers */
.intec-service-resilience .resilience-outcome-item .kt-inside-inner-col,
.intec-service-resilience .resilience-outcome-item-c .kt-inside-inner-col {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Check */
.intec-service-resilience .resilience-outcome-check {
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
border-radius: 999px !important;
background: #2BA84A !important;
color: #ffffff !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Icon tile */
.intec-service-resilience .resilience-outcome-icon-tile {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
background: rgba(0, 230, 0, 0.08) !important;
border: 1px solid rgba(0, 230, 0, 0.20) !important;
border-radius: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
.intec-service-resilience .resilience-outcome-icon-image,
.intec-service-resilience .resilience-outcome-icon-image figure,
.intec-service-resilience .resilience-outcome-icon-image .kb-advanced-image-link {
width: 24px !important;
max-width: 24px !important;
height: 24px !important;
max-height: 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
/* The icon image itself */
.intec-service-resilience .resilience-outcome-icon-image img {
display: block !important;
width: 38px !important;
max-width: 38px !important;
height: auto !important;
margin: 0 !important;
transform: scale(1.55) !important;
transform-origin: center center !important;
}
/* Text box */
.intec-service-resilience .resilience-outcome-text-box {
width: 100% !important;
max-width: none !important;
background: #ffffff !important;
border: 1px solid #D8E2F3 !important;
border-radius: 10px !important;
padding: 7px 12px !important;
margin: 0 !important;
}
/* Copy */
.intec-service-resilience .resilience-outcome-copy {
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 1.42 !important;
}
.intec-service-resilience .resilience-outcome-copy strong {
color: #178A2F !important;
font-weight: 400 !important;
}
/* =========================================================
CSS-SVC-11D
Operational Resilience Section D Engagement Row Prototype
Purpose:
Styles the unique D engagement pattern:
left icon rail, green connector dot, boxed text row, and arrow.
========================================================= */
.intec-service-resilience .resilience-engagement-list,
.intec-service-resilience .resilience-engagement-list-d {
position: relative !important;
margin: 0 !important;
padding: 0 !important;
}
/* Each D engagement item */
.intec-service-resilience .resilience-engagement-item,
.intec-service-resilience .resilience-engagement-item-d {
position: relative !important;
margin: 0 0 10px 0 !important;
padding: 0 !important;
}
/* Override Kadence columns for the unique D row */
.intec-service-resilience .resilience-engagement-item > .kt-row-column-wrap,
.intec-service-resilience .resilience-engagement-item-d > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 70px minmax(0, 1fr) !important;
column-gap: 14px !important;
align-items: center !important;
width: 100% !important;
}
/* Neutralize Kadence width behavior inside this one row */
.intec-service-resilience .resilience-engagement-item > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-resilience .resilience-engagement-item-d > .kt-row-column-wrap > .wp-block-kadence-column {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-service-resilience .resilience-engagement-item .kt-inside-inner-col,
.intec-service-resilience .resilience-engagement-item-d .kt-inside-inner-col {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Left icon circle */
.intec-service-resilience .resilience-engagement-icon-tile {
width: 54px !important;
height: 54px !important;
min-width: 54px !important;
min-height: 54px !important;
border-radius: 999px !important;
background: #ffffff !important;
border: 1px solid #C9D8F2 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
z-index: 2 !important;
}
/* Icon image inside circle */
.intec-service-resilience .resilience-engagement-icon-image,
.intec-service-resilience .resilience-engagement-icon-image figure,
.intec-service-resilience .resilience-engagement-icon-image .kb-advanced-image-link {
width: 42px !important;
max-width: 42px !important;
height: 42px !important;
max-height: 42px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-service-resilience .resilience-engagement-icon-image img {
display: block !important;
width: 42px !important;
max-width: 42px !important;
height: auto !important;
margin: 0 !important;
transform: scale(1.18) !important;
transform-origin: center center !important;
}
/* Boxed text row */
.intec-service-resilience .resilience-engagement-text-box {
width: 100% !important;
max-width: none !important;
background: #ffffff !important;
border: 1px solid #D8E2F3 !important;
border-radius: 10px !important;
padding: 7px 38px 7px 14px !important;
margin: 0 !important;
position: relative !important;
}
/* Right arrow */
.intec-service-resilience .resilience-engagement-text-box::after {
content: "›" !important;
position: absolute !important;
right: 16px !important;
top: 50% !important;
transform: translateY(-52%) !important;
color: #178A2F !important;
font-size: 30px !important;
font-weight: 300 !important;
line-height: 1 !important;
}
/* Copy */
.intec-service-resilience .resilience-engagement-copy {
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 1.38 !important;
}
.intec-service-resilience .resilience-engagement-copy strong {
color: #001FB1 !important;
font-weight: 400 !important;
}
/* D vertical engagement rail */
.intec-service-resilience .resilience-engagement-list-d {
position: relative !important;
}
/* Vertical green rail between icon column and text boxes */
.intec-service-resilience .resilience-engagement-list-d::before {
content: "" !important;
position: absolute !important;
left: 76px !important;
top: 34px !important;
bottom: 34px !important;
width: 2px !important;
background: rgba(43, 168, 74, 0.70) !important;
border-radius: 999px !important;
z-index: 1 !important;
}
/* Green dot aligned to each engagement row */
.intec-service-resilience .resilience-engagement-item-d::before {
content: "" !important;
position: absolute !important;
left: 72px !important;
top: 50% !important;
width: 10px !important;
height: 10px !important;
border-radius: 999px !important;
background: #2BA84A !important;
transform: translateY(-50%) !important;
z-index: 3 !important;
box-shadow: 0 0 0 3px rgba(43, 168, 74, 0.12) !important;
}
/* =========================================================
CSS-SVC-11D-TUNE
Operational Resilience Section D spacing refinement
Purpose:
Creates breathing room around the green vertical rail by
shifting icon circles left and text boxes right.
========================================================= */
.intec-service-resilience .resilience-engagement-item-d {
position: relative !important;
}
/* Move text box a bit right */
.intec-service-resilience .resilience-engagement-item-d .resilience-engagement-text-box,
.intec-service-resilience .resilience-engagement-item-d .intec-service-engagement-text-box {
margin-left: 12px !important;
}
/* Optional: make sure the text box uses available width cleanly */
.intec-service-resilience .resilience-engagement-item-d .resilience-engagement-text-box .kt-inside-inner-col,
.intec-service-resilience .resilience-engagement-item-d .intec-service-engagement-text-box .kt-inside-inner-col {
width: 100% !important;
}
/* Move the D icon column left using actual Kadence column structure */
.intec-service-resilience .resilience-engagement-item-d > .kt-row-column-wrap > .wp-block-kadence-column:first-child {
transform: translateX(-8px) !important;
}
/* =========================================================
CSS-SVC-11E
Operational Resilience Sections C/D Height Tightening
Purpose:
Removes excess bottom whitespace in Sections C and D
without disturbing row structure.
========================================================= */
.intec-service-resilience .resilience-outcome-list-c,
.intec-service-resilience .resilience-engagement-list-d {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.intec-service-resilience .resilience-outcome-list-c .resilience-outcome-item:last-child,
.intec-service-resilience .resilience-engagement-list-d .resilience-engagement-item-d:last-child {
margin-bottom: 0 !important;
}
.intec-service-resilience .resilience-card-c > .kt-inside-inner-col,
.intec-service-resilience .resilience-card-d > .kt-inside-inner-col {
padding-bottom: 12px !important;
}
/* =========================================================
CSS-SVC-10I
Operational Resilience A/B Tablet Two-Column Fix
Purpose:
Keeps A and B cards side-by-side on tablet while giving
both cards tablet-specific internal image/text layouts.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
/* Keep A/B parent row as two columns */
.intec-service-resilience .resilience-service-ab-row > .kt-row-column-wrap,
.intec-service-resilience .resilience-service-ab-row > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
column-gap: 16px !important;
row-gap: 0 !important;
align-items: stretch !important;
width: 100% !important;
max-width: none !important;
}
.intec-service-resilience .resilience-service-ab-row > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-resilience .resilience-service-ab-row > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
flex: 0 0 auto !important;
flex-basis: auto !important;
}
/* Keep A/B card shells aligned */
.intec-service-resilience .resilience-service-ab-row .resilience-ab-card {
height: 100% !important;
min-height: 100% !important;
}
.intec-service-resilience .resilience-service-ab-row .resilience-ab-card > .kt-inside-inner-col {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
/* Shared tablet body-row behavior for both A and B */
.intec-service-resilience .resilience-ab-card-a .resilience-ab-body-row > .kt-row-column-wrap,
.intec-service-resilience .resilience-ab-card-a .resilience-ab-body-row > .kt-row-layout-inner > .kt-row-column-wrap,
.intec-service-resilience .resilience-ab-card-b .resilience-ab-body-row > .kt-row-column-wrap,
.intec-service-resilience .resilience-ab-card-b .resilience-ab-body-row > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 132px minmax(0, 1fr) !important;
column-gap: 10px !important;
align-items: center !important;
width: 100% !important;
max-width: none !important;
}
.intec-service-resilience .resilience-ab-card-a .resilience-ab-body-row > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-resilience .resilience-ab-card-a .resilience-ab-body-row > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-resilience .resilience-ab-card-b .resilience-ab-body-row > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-resilience .resilience-ab-card-b .resilience-ab-body-row > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
flex: 0 0 auto !important;
flex-basis: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* Card A image sizing */
.intec-service-resilience .resilience-ab-card-a .resilience-ab-icon,
.intec-service-resilience .resilience-ab-card-a .resilience-ab-icon figure,
.intec-service-resilience .resilience-ab-card-a .resilience-ab-icon .kb-img-wrap {
width: 126px !important;
max-width: 126px !important;
margin: 0 auto !important;
padding: 0 !important;
}
.intec-service-resilience .resilience-ab-card-a .resilience-ab-icon img,
.intec-service-resilience .resilience-ab-card-a .resilience-ab-icon .kb-img {
display: block !important;
width: 126px !important;
max-width: 126px !important;
height: auto !important;
margin: 0 auto !important;
transform: none !important;
}
/* Card B image sizing */
.intec-service-resilience .resilience-ab-card-b .resilience-ab-icon,
.intec-service-resilience .resilience-ab-card-b .resilience-ab-icon figure,
.intec-service-resilience .resilience-ab-card-b .resilience-ab-icon .kb-img-wrap {
width: 130px !important;
max-width: 130px !important;
margin: 0 auto !important;
padding: 0 !important;
}
.intec-service-resilience .resilience-ab-card-b .resilience-ab-icon img,
.intec-service-resilience .resilience-ab-card-b .resilience-ab-icon .kb-img {
display: block !important;
width: 130px !important;
max-width: 130px !important;
height: auto !important;
margin: 0 auto !important;
transform: none !important;
}
/* Tablet copy tightening for both A and B */
.intec-service-resilience .resilience-ab-card-a .resilience-ab-copy,
.intec-service-resilience .resilience-ab-card-b .resilience-ab-copy {
font-size: 13.5px !important;
line-height: 1.38 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Keep Card A proof bar compact on tablet */
.intec-service-resilience .resilience-ab-card-a .resilience-ab-proof {
margin-top: 8px !important;
}
}
/* Tablet-only: lift only Card B internal content, not the card shell */
.intec-service-resilience .resilience-ab-card-b > .kt-inside-inner-col > .wp-block-kadence-rowlayout,
.intec-service-resilience .resilience-ab-card-b > .kt-inside-inner-col > .wp-block-kadence-advancedheading,
.intec-service-resilience .resilience-ab-card-b > .kt-inside-inner-col > .wp-block-kadence-advancedbtn,
.intec-service-resilience .resilience-ab-card-b > .kt-inside-inner-col > .wp-block-group,
.intec-service-resilience .resilience-ab-card-b > .kt-inside-inner-col > p {
transform: translateY(-20px) !important;
}
/* =========================================================
CSS-SVC-11F
Operational Resilience C/D Tablet Alignment Tune
Purpose:
Lifts only Card D internal content on tablet so D aligns
better with Card C without moving the card shell.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.intec-service-resilience .resilience-card-d .resilience-cd-header-row-d,
.intec-service-resilience .resilience-card-d .resilience-engagement-list-d,
.intec-service-resilience .resilience-cd-card-d .resilience-cd-header-row-d,
.intec-service-resilience .resilience-cd-card-d .resilience-engagement-list-d {
transform: translateY(-8px) !important;
}
}
/* =========================================================
CSS-SVC-10I-DESKTOP-RESET
Operational Resilience Card B Desktop Reset
Purpose:
Ensures the tablet-only Card B internal lift does not affect
desktop layouts.
========================================================= */
@media (min-width: 1025px) {
.intec-service-resilience .resilience-ab-card-b > .kt-inside-inner-col > .wp-block-kadence-rowlayout,
.intec-service-resilience .resilience-ab-card-b > .kt-inside-inner-col > .wp-block-kadence-advancedheading,
.intec-service-resilience .resilience-ab-card-b > .kt-inside-inner-col > .wp-block-kadence-advancedbtn,
.intec-service-resilience .resilience-ab-card-b > .kt-inside-inner-col > .wp-block-group,
.intec-service-resilience .resilience-ab-card-b > .kt-inside-inner-col > p {
transform: none !important;
}
}
/* =========================================================
CSS-SVC-10J
Operational Resilience Shared Card Header Tablet Standard
Purpose:
Standardizes badge + heading spacing for A/B and C/D cards
on tablet so all service cards use the same header rhythm.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.intec-service-resilience .resilience-ab-header-row > .kt-row-column-wrap,
.intec-service-resilience .resilience-ab-header-row > .kt-row-layout-inner > .kt-row-column-wrap,
.intec-service-resilience .resilience-cd-header-row > .kt-row-column-wrap,
.intec-service-resilience .resilience-cd-header-row > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 34px minmax(0, 1fr) !important;
column-gap: 8px !important;
align-items: center !important;
width: 100% !important;
}
.intec-service-resilience .resilience-ab-header-row > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-resilience .resilience-ab-header-row > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-resilience .resilience-cd-header-row > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-resilience .resilience-cd-header-row > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
flex: 0 0 auto !important;
flex-basis: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-service-resilience .resilience-ab-header-row .resilience-ab-title,
.intec-service-resilience .resilience-cd-header-row .resilience-cd-title,
.intec-service-resilience .resilience-ab-header-row h4,
.intec-service-resilience .resilience-cd-header-row h4 {
margin: 0 !important;
padding: 0 !important;
line-height: 1.22 !important;
}
}
/* =========================================================
CSS-SVC-12A
Shared Service Foresight / Proof Bar Standard
Purpose:
Creates reusable full-width bottom proof bar used below
service detail sections.
Applies to:
- intec-service-foresight-bar
Service-specific classes remain identity hooks only.
========================================================= */
.intec-service-foresight-bar {
margin: 16px 0 0 0 !important;
padding: 0 !important;
}
.intec-service-foresight-bar > .kt-row-column-wrap,
.intec-service-foresight-bar > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1.65fr 1fr 1fr 1fr !important;
align-items: center !important;
gap: 0 !important;
width: 100% !important;
max-width: none !important;
background: #ffffff !important;
border: 1px solid #D8E2F3 !important;
border-radius: 14px !important;
padding: 16px 18px !important;
}
.intec-service-foresight-bar > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-foresight-bar > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
CSS-SVC-12B
Shared Service Foresight Bar Unit Standard
Purpose:
Standardizes icon + text alignment inside foresight/proof
bar units.
Applies to:
- intec-foresight-unit
- intec-foresight-icon-cell
- intec-foresight-text-cell
- intec-foresight-icon
- intec-foresight-text
========================================================= */
.intec-foresight-unit {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-foresight-unit > .kt-row-column-wrap,
.intec-foresight-unit > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 54px minmax(0, 1fr) !important;
column-gap: 12px !important;
align-items: center !important;
width: 100% !important;
}
.intec-foresight-unit > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-foresight-unit > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-foresight-icon-cell > .kt-inside-inner-col {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.intec-foresight-icon,
.intec-foresight-icon figure,
.intec-foresight-icon .kb-img-wrap {
width: 46px !important;
max-width: 46px !important;
height: 46px !important;
max-height: 46px !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-foresight-icon img,
.intec-foresight-icon .kb-img {
display: block !important;
width: 46px !important;
max-width: 46px !important;
height: auto !important;
margin: 0 !important;
}
.intec-foresight-text,
.intec-foresight-text p,
.intec-foresight-text .kt-title-text,
.intec-foresight-text .kt-adv-heading {
color: #001FB1 !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-foresight-lead-text,
.intec-foresight-lead-text p,
.intec-foresight-lead-text .kt-title-text,
.intec-foresight-lead-text .kt-adv-heading {
color: #001FB1 !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 1.18 !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
CSS-SVC-12C
Observability Foresight Lead Icon Size Fine Tune
Purpose:
Enlarges the first/lead shield icon without affecting the
three smaller foresight item icons.
========================================================= */
.observability-foresight-lead-unit > .kt-row-column-wrap,
.observability-foresight-lead-unit > .kt-row-layout-inner > .kt-row-column-wrap {
grid-template-columns: 76px minmax(0, 1fr) !important;
}
.observability-foresight-lead-unit .intec-foresight-icon,
.observability-foresight-lead-unit .intec-foresight-icon figure,
.observability-foresight-lead-unit .intec-foresight-icon .kb-img-wrap {
width: 70px !important;
max-width: 70px !important;
height: 70px !important;
max-height: 70px !important;
}
.observability-foresight-lead-unit .intec-foresight-icon img,
.observability-foresight-lead-unit .intec-foresight-icon .kb-img {
width: 70px !important;
max-width: 70px !important;
height: auto !important;
}
/* =========================================================
CSS-SVC-12D
Shared Service Foresight Bar Body Text Standard
Purpose:
Adds compact supporting copy under foresight bar labels.
========================================================= */
.intec-foresight-lead-body,
.intec-foresight-lead-body p,
.intec-foresight-lead-body .kt-title-text,
.intec-foresight-lead-body .kt-adv-heading {
color: #24324A !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.28 !important;
margin: 5px 0 0 0 !important;
padding: 0 !important;
}
.intec-foresight-body,
.intec-foresight-body p,
.intec-foresight-body .kt-title-text,
.intec-foresight-body .kt-adv-heading {
color: #24324A !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.25 !important;
margin: 4px 0 0 0 !important;
padding: 0 !important;
}
/* =========================================================
CSS-SVC-12E
Shared Service Foresight Bar Compact Height + Dividers
Purpose:
Reduces vertical height of the foresight/proof bar, gives
dividers breathing room, and slightly improves item text wrap.
========================================================= */
/* Make the bar slimmer and rebalance column widths */
.intec-service-foresight-bar > .kt-row-column-wrap,
.intec-service-foresight-bar > .kt-row-layout-inner > .kt-row-column-wrap {
grid-template-columns: 1.45fr 1fr 1.08fr 1fr !important;
column-gap: 20px !important;
padding-top: 7px !important;
padding-bottom: 7px !important;
}
/* Subtle dividers centered inside the column gaps */
.intec-service-foresight-bar > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-foresight-bar > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column {
position: relative !important;
}
.intec-service-foresight-bar > .kt-row-column-wrap > .wp-block-kadence-column:not(:first-child)::before,
.intec-service-foresight-bar > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column:not(:first-child)::before {
content: "" !important;
position: absolute !important;
left: -10px !important;
top: 6px !important;
bottom: 6px !important;
width: 1px !important;
background: #C9D8F2 !important;
opacity: 0.9 !important;
}
/* Slightly tighten supporting text rhythm */
.intec-foresight-lead-body,
.intec-foresight-lead-body p,
.intec-foresight-lead-body .kt-title-text,
.intec-foresight-lead-body .kt-adv-heading {
margin-top: 2px !important;
}
.intec-foresight-body,
.intec-foresight-body p,
.intec-foresight-body .kt-title-text,
.intec-foresight-body .kt-adv-heading {
font-size: 11.8px !important;
line-height: 1.2 !important;
margin-top: 2px !important;
}
/* Tighten inner foresight unit spacing */
.intec-service-foresight-bar .intec-foresight-unit {
margin: 0 !important;
padding: 0 !important;
}
.intec-service-foresight-bar .intec-foresight-unit > .kt-row-column-wrap,
.intec-service-foresight-bar .intec-foresight-unit > .kt-row-layout-inner > .kt-row-column-wrap {
padding-top: 0 !important;
padding-bottom: 0 !important;
min-height: 0 !important;
align-items: center !important;
}
.intec-service-foresight-bar .intec-foresight-icon-cell,
.intec-service-foresight-bar .intec-foresight-text-cell {
min-height: 0 !important;
}
.intec-service-foresight-bar .intec-foresight-icon-cell > .kt-inside-inner-col,
.intec-service-foresight-bar .intec-foresight-text-cell > .kt-inside-inner-col {
min-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* =========================================================
CSS-SVC-12H
Fractional Foresight Bar Five-Unit Layout
Purpose:
Allows Fractional CIO/CTO conclusion bar to support:
lead unit + four item units.
Keeps shared foresight standards intact.
========================================================= */
.fractional-foresight-bar > .kt-row-column-wrap,
.fractional-foresight-bar > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1.55fr repeat(4, minmax(0, 1fr)) !important;
column-gap: 14px !important;
row-gap: 0 !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
padding-left: 14px !important;
padding-right: 14px !important;
}
/* Keep all five direct bar columns in one row */
.fractional-foresight-bar > .kt-row-column-wrap > .wp-block-kadence-column,
.fractional-foresight-bar > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
flex: 0 0 auto !important;
}
/* Slightly tighten unit internals for five-column layout */
.fractional-foresight-bar .intec-foresight-unit > .kt-row-column-wrap,
.fractional-foresight-bar .intec-foresight-unit > .kt-row-layout-inner > .kt-row-column-wrap {
grid-template-columns: 44px minmax(0, 1fr) !important;
column-gap: 9px !important;
}
/* Keep lead unit readable but not oversized */
.fractional-foresight-lead-unit > .kt-row-column-wrap,
.fractional-foresight-lead-unit > .kt-row-layout-inner > .kt-row-column-wrap {
grid-template-columns: 50px minmax(0, 1fr) !important;
column-gap: 10px !important;
}
/* Fractional bar icon sizing */
.fractional-foresight-bar .intec-foresight-icon,
.fractional-foresight-bar .intec-foresight-icon figure,
.fractional-foresight-bar .intec-foresight-icon .kb-img-wrap {
width: 40px !important;
max-width: 40px !important;
height: 40px !important;
max-height: 40px !important;
}
.fractional-foresight-bar .intec-foresight-icon img,
.fractional-foresight-bar .intec-foresight-icon .kb-img {
width: 40px !important;
max-width: 40px !important;
height: auto !important;
}
/* Slightly compact Fractional item text */
.fractional-foresight-bar .intec-foresight-text,
.fractional-foresight-bar .intec-foresight-text p,
.fractional-foresight-bar .intec-foresight-text .kt-title-text,
.fractional-foresight-bar .intec-foresight-text .kt-adv-heading {
font-size: 12.5px !important;
line-height: 1.18 !important;
}
.fractional-foresight-bar .intec-foresight-body,
.fractional-foresight-bar .intec-foresight-body p,
.fractional-foresight-bar .intec-foresight-body .kt-title-text,
.fractional-foresight-bar .intec-foresight-body .kt-adv-heading {
font-size: 11.5px !important;
line-height: 1.18 !important;
}
/* Fractional lead heading tuning - match C/D lead phrase style */
.fractional-foresight-bar .intec-foresight-lead-text,
.fractional-foresight-bar .intec-foresight-lead-text p,
.fractional-foresight-bar .intec-foresight-lead-text .kt-title-text,
.fractional-foresight-bar .intec-foresight-lead-text .kt-adv-heading {
color: #0021B9 !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1.18 !important;
}
/* Fractional lead body tuning */
.fractional-foresight-bar .intec-foresight-lead-body,
.fractional-foresight-bar .intec-foresight-lead-body p,
.fractional-foresight-bar .intec-foresight-lead-body .kt-title-text,
.fractional-foresight-bar .intec-foresight-lead-body .kt-adv-heading {
font-size: 11.7px !important;
line-height: 1.2 !important;
}
/* Fractional foresight bar - lead shield icon only */
.intec-service-fractional
.fractional-foresight-bar
.fractional-foresight-lead-unit
.intec-foresight-icon,
.intec-service-fractional
.fractional-foresight-bar
.fractional-foresight-lead-unit
.intec-foresight-icon img,
.intec-service-fractional
.fractional-foresight-bar
.fractional-foresight-lead-unit
.intec-foresight-icon .kb-img {
width: 56px !important;
max-width: 56px !important;
height: auto !important;
}
.intec-service-fractional
.fractional-foresight-bar
.fractional-foresight-lead-unit
.intec-foresight-icon-cell {
flex: 0 0 72px !important;
max-width: 72px !important;
}
/* =========================================================
CSS-SVC-12F
Observability Responsive Fixes
Purpose:
Fixes tablet A/B icon scale and mobile foresight bar stacking
without changing the accepted desktop layout.
========================================================= */
/* ---------- Tablet: Observability A/B icon scale ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
.intec-service-observability
.intec-service-ab-body-row > .kt-row-column-wrap,
.intec-service-observability
.intec-service-ab-body-row > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 112px minmax(0, 1fr) !important;
column-gap: 14px !important;
align-items: center !important;
}
.intec-service-observability
.observability-ab-icon,
.intec-service-observability
.observability-ab-icon figure,
.intec-service-observability
.observability-ab-icon .kb-img-wrap {
width: 108px !important;
max-width: 108px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.intec-service-observability
.observability-ab-icon img,
.intec-service-observability
.observability-ab-icon .kb-img {
width: 108px !important;
max-width: 108px !important;
height: auto !important;
transform: none !important;
}
}
/* ---------- Mobile: Foresight bar stacks cleanly ---------- */
@media (max-width: 767px) {
.intec-service-foresight-bar > .kt-row-column-wrap,
.intec-service-foresight-bar > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1fr !important;
row-gap: 10px !important;
column-gap: 0 !important;
padding: 12px 14px !important;
}
.intec-service-foresight-bar > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-foresight-bar > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Convert vertical dividers into horizontal separators */
.intec-service-foresight-bar > .kt-row-column-wrap > .wp-block-kadence-column:not(:first-child)::before,
.intec-service-foresight-bar > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column:not(:first-child)::before {
left: 0 !important;
right: 0 !important;
top: -5px !important;
bottom: auto !important;
width: 100% !important;
height: 1px !important;
}
.intec-foresight-unit > .kt-row-column-wrap,
.intec-foresight-unit > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 46px minmax(0, 1fr) !important;
column-gap: 10px !important;
align-items: center !important;
}
.observability-foresight-lead-unit > .kt-row-column-wrap,
.observability-foresight-lead-unit > .kt-row-layout-inner > .kt-row-column-wrap {
grid-template-columns: 54px minmax(0, 1fr) !important;
}
.intec-foresight-icon,
.intec-foresight-icon figure,
.intec-foresight-icon .kb-img-wrap {
width: 40px !important;
max-width: 40px !important;
height: 40px !important;
max-height: 40px !important;
}
.intec-foresight-icon img,
.intec-foresight-icon .kb-img {
width: 40px !important;
max-width: 40px !important;
height: auto !important;
}
.observability-foresight-lead-unit .intec-foresight-icon,
.observability-foresight-lead-unit .intec-foresight-icon figure,
.observability-foresight-lead-unit .intec-foresight-icon .kb-img-wrap {
width: 48px !important;
max-width: 48px !important;
height: 48px !important;
max-height: 48px !important;
}
.observability-foresight-lead-unit .intec-foresight-icon img,
.observability-foresight-lead-unit .intec-foresight-icon .kb-img {
width: 48px !important;
max-width: 48px !important;
height: auto !important;
}
.intec-foresight-lead-text,
.intec-foresight-lead-text p,
.intec-foresight-lead-text .kt-title-text,
.intec-foresight-lead-text .kt-adv-heading {
font-size: 15px !important;
line-height: 1.15 !important;
}
.intec-foresight-text,
.intec-foresight-text p,
.intec-foresight-text .kt-title-text,
.intec-foresight-text .kt-adv-heading {
font-size: 12.5px !important;
line-height: 1.2 !important;
}
.intec-foresight-lead-body,
.intec-foresight-lead-body p,
.intec-foresight-lead-body .kt-title-text,
.intec-foresight-lead-body .kt-adv-heading,
.intec-foresight-body,
.intec-foresight-body p,
.intec-foresight-body .kt-title-text,
.intec-foresight-body .kt-adv-heading {
font-size: 11.5px !important;
line-height: 1.22 !important;
}
}
/* =========================================================
CSS-SVC-11M Shared C Outcome List Structure Standard
Shared standard for list-style C outcome sections:
list stack + row line + check/icon/text alignment.
Icon container visual treatment remains service-specific.
Does NOT target Observability's tile grid.
========================================================= */
/* Outcome list wrapper */
.intec-service-outcome-list:not(.intec-service-outcome-list-wide) {
margin-top: 4px !important;
}
.intec-service-outcome-list:not(.intec-service-outcome-list-wide) > .kt-inside-inner-col {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
/* Outcome line / row */
.intec-service-outcome-item {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
/* Force list-style outcome rows into tight utility columns:
check marker + icon tile + flexible text box */
.intec-service-outcome-item .kt-row-column-wrap {
width: 100% !important;
max-width: 100% !important;
display: grid !important;
grid-template-columns: 24px 56px minmax(0, 1fr) !important;
column-gap: 14px !important;
row-gap: 0 !important;
align-items: center !important;
}
/* Remove accidental inner spacing */
.intec-service-outcome-item .kt-inside-inner-col {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Kadence row inner wrapper */
.intec-service-outcome-item .kt-row-column-wrap {
width: 100% !important;
max-width: 100% !important;
align-items: center !important;
row-gap: 0 !important;
}
/* Remove accidental inner vertical spacing */
.intec-service-outcome-item .kt-inside-inner-col {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Check column alignment */
.intec-service-outcome-check > .kt-inside-inner-col,
.intec-service-outcome-check .kt-inside-inner-col {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Shared check marker standard */
.intec-outcome-checkmark {
width: 24px !important;
height: 24px !important;
margin: 0 !important;
border-radius: 999px !important;
border: 1px solid #00A83B !important;
background: #00A83B !important;
color: #ffffff !important;
font-size: 15px !important;
font-weight: 800 !important;
line-height: 1 !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Icon column alignment only.
Do not force square/circle/oval/background globally. */
.intec-service-outcome-icon-tile > .kt-inside-inner-col,
.intec-service-outcome-icon-tile .kt-inside-inner-col {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Text box structural standard */
.intec-service-outcome-text-box > .kt-inside-inner-col,
.intec-service-outcome-text-box .kt-inside-inner-col {
min-height: 50px !important;
padding: 8px 12px !important;
border-radius: 12px !important;
border: 1px solid rgba(0, 31, 177, 0.14) !important;
background: rgba(255, 255, 255, 0.94) !important;
display: flex !important;
align-items: center !important;
}
/* Outcome paragraph */
.intec-service-outcome-text-box p,
.intec-service-outcome-text {
margin: 0 !important;
color: #23314d !important;
font-size: 13px !important;
line-height: 1.26 !important;
font-weight: 400 !important;
}
/* Optional bold lead phrase */
.intec-service-outcome-text-box strong {
color: #0021B9 !important;
font-weight: 800 !important;
}
/* =========================================================
CSS-SVC-11N Fractional C Outcome List Visual Layer
Fractional-specific visual treatment only.
Keep generic row/list/text/check standards in CSS-SVC-11M.
========================================================= */
/* Fractional icon tile treatment.
Controls the pale rounded-square case only. */
.intec-service-fractional
.fractional-outcome-icon-tile > .kt-inside-inner-col,
.intec-service-fractional
.fractional-outcome-icon-tile .kt-inside-inner-col {
width: 56px !important;
height: 56px !important;
border-radius: 16px !important;
border: 1px solid rgba(0, 31, 177, 0.14) !important;
background: rgba(246, 249, 253, 0.95) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Fractional C outcome icon image sizing.
Single source of truth for icon image size. */
.intec-service-fractional
.fractional-outcome-icon,
.intec-service-fractional
.fractional-outcome-icon figure,
.intec-service-fractional
.fractional-outcome-icon .kb-img-wrap,
.intec-service-fractional
.fractional-outcome-icon-tile img,
.intec-service-fractional
.fractional-outcome-icon-tile .kb-img {
width: 42px !important;
max-width: 42px !important;
height: auto !important;
display: block !important;
margin: 0 auto !important;
padding: 0 !important;
}
/* =========================================================
CSS-SVC-12G
Observability Final Tablet / Mobile Cleanup
Purpose:
Final responsive override layer for Observability A/B/C/D
and foresight bar. Must remain at the bottom of the CSS file
so it wins over base standards.
========================================================= */
/* ---------- Tablet: A/B header spacing + C tile lead rhythm ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
.intec-service-observability .observability-ab-header-row > .kt-row-column-wrap,
.intec-service-observability .observability-ab-header-row > .kt-row-layout-inner > .kt-row-column-wrap,
.observability-ab-header-row > .kt-row-column-wrap,
.observability-ab-header-row > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 42px minmax(0, 1fr) !important;
column-gap: 14px !important;
align-items: center !important;
width: 100% !important;
}
.intec-service-observability .observability-ab-header-row > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-observability .observability-ab-header-row > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column,
.observability-ab-header-row > .kt-row-column-wrap > .wp-block-kadence-column,
.observability-ab-header-row > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-service-observability .intec-service-ab-title,
.intec-service-observability .intec-service-ab-title .kt-title-text,
.intec-service-observability .intec-service-ab-title .kt-adv-heading {
line-height: 1.12 !important;
}
.intec-service-observability .intec-service-outcome-tile-copy .intec-outcome-tile-lead {
display: block !important;
min-height: 38px !important;
text-align: center !important;
line-height: 1.08 !important;
margin-bottom: 3px !important;
}
}
/* ---------- Mobile: A/B cards, C tiles, and foresight bar ---------- */
@media (max-width: 767px) {
/* Give A/B clear separation from intro */
.observability-service-ab-row,
.intec-service-observability.observability-service-ab-row,
.intec-service-observability .observability-service-ab-row {
margin-top: 28px !important;
}
/* A/B header row: badge beside heading, not on top */
.intec-service-observability .observability-ab-header-row > .kt-row-column-wrap,
.intec-service-observability .observability-ab-header-row > .kt-row-layout-inner > .kt-row-column-wrap,
.observability-ab-header-row > .kt-row-column-wrap,
.observability-ab-header-row > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 36px minmax(0, 1fr) !important;
column-gap: 10px !important;
align-items: center !important;
width: 100% !important;
}
.intec-service-observability .observability-ab-header-row > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-observability .observability-ab-header-row > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column,
.observability-ab-header-row > .kt-row-column-wrap > .wp-block-kadence-column,
.observability-ab-header-row > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-service-observability .intec-service-badge {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
font-size: 13px !important;
}
.intec-service-observability .intec-service-ab-title,
.intec-service-observability .intec-service-ab-title .kt-title-text,
.intec-service-observability .intec-service-ab-title .kt-adv-heading {
font-size: 15.5px !important;
line-height: 1.12 !important;
}
/* C tiles: reset desktop wide modifier and force readable 2x2 grid */
.intec-service-observability .intec-service-outcome-list.intec-service-outcome-list-wide,
.observability-outcome-list-c.intec-service-outcome-list-wide {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.intec-service-observability .observability-outcome-tile-grid > .kt-row-column-wrap,
.intec-service-observability .observability-outcome-tile-grid > .kt-row-layout-inner > .kt-row-column-wrap,
.observability-outcome-tile-grid > .kt-row-column-wrap,
.observability-outcome-tile-grid > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 8px !important;
row-gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
}
.intec-service-observability .observability-outcome-tile-grid > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-observability .observability-outcome-tile-grid > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column,
.observability-outcome-tile-grid > .kt-row-column-wrap > .wp-block-kadence-column,
.observability-outcome-tile-grid > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-service-observability .intec-service-outcome-tile {
min-height: 0 !important;
}
.intec-service-observability .intec-service-outcome-tile > .kt-inside-inner-col {
padding: 9px 7px 12px 7px !important;
}
.intec-service-observability .intec-service-outcome-tile-icon,
.intec-service-observability .intec-service-outcome-tile-icon figure,
.intec-service-observability .intec-service-outcome-tile-icon .kb-img-wrap {
width: 48px !important;
max-width: 48px !important;
height: 48px !important;
max-height: 48px !important;
margin-bottom: 6px !important;
}
.intec-service-observability .intec-service-outcome-tile-icon img,
.intec-service-observability .intec-service-outcome-tile-icon .kb-img {
max-width: 48px !important;
max-height: 48px !important;
height: auto !important;
}
.intec-service-observability .intec-service-outcome-tile-copy,
.intec-service-observability .intec-service-outcome-tile-copy p,
.intec-service-observability .intec-service-outcome-tile-copy .kt-title-text,
.intec-service-observability .intec-service-outcome-tile-copy .kt-adv-heading,
.intec-service-observability .intec-service-outcome-tile-copy .wp-block-kadence-advancedheading,
.intec-service-observability .intec-service-outcome-tile-copy .wp-block-kadence-advancedheading * {
font-size: 11.2px !important;
line-height: 1.18 !important;
letter-spacing: -0.015em !important;
}
.intec-service-observability .intec-service-outcome-tile-copy .intec-outcome-tile-lead {
display: block !important;
min-height: 30px !important;
text-align: center !important;
line-height: 1.08 !important;
margin-bottom: 3px !important;
}
/* Foresight bar: stacked rows and lead icon/text alignment */
.intec-service-foresight-bar > .kt-row-column-wrap,
.intec-service-foresight-bar > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1fr !important;
row-gap: 10px !important;
column-gap: 0 !important;
padding: 12px 14px !important;
}
.intec-service-foresight-bar > .kt-row-column-wrap > .wp-block-kadence-column,
.intec-service-foresight-bar > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.intec-service-foresight-bar > .kt-row-column-wrap > .wp-block-kadence-column:not(:first-child)::before,
.intec-service-foresight-bar > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column:not(:first-child)::before {
left: 0 !important;
right: 0 !important;
top: -5px !important;
bottom: auto !important;
width: 100% !important;
height: 1px !important;
}
.intec-foresight-unit > .kt-row-column-wrap,
.intec-foresight-unit > .kt-row-layout-inner > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 46px minmax(0, 1fr) !important;
column-gap: 10px !important;
align-items: center !important;
}
.observability-foresight-lead-unit > .kt-row-column-wrap,
.observability-foresight-lead-unit > .kt-row-layout-inner > .kt-row-column-wrap {
grid-template-columns: 46px minmax(0, 1fr) !important;
column-gap: 8px !important;
}
.observability-foresight-lead-unit .intec-foresight-text-cell > .kt-inside-inner-col {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
}
.observability-foresight-lead-unit .intec-foresight-lead-text,
.observability-foresight-lead-unit .intec-foresight-lead-body {
margin-left: 0 !important;
padding-left: 0 !important;
text-align: left !important;
}
.observability-foresight-lead-unit .intec-foresight-icon,
.observability-foresight-lead-unit .intec-foresight-icon figure,
.observability-foresight-lead-unit .intec-foresight-icon .kb-img-wrap {
width: 42px !important;
max-width: 42px !important;
height: 42px !important;
max-height: 42px !important;
}
.observability-foresight-lead-unit .intec-foresight-icon img,
.observability-foresight-lead-unit .intec-foresight-icon .kb-img {
width: 42px !important;
max-width: 42px !important;
height: auto !important;
}
.intec-foresight-icon,
.intec-foresight-icon figure,
.intec-foresight-icon .kb-img-wrap {
width: 40px !important;
max-width: 40px !important;
height: 40px !important;
max-height: 40px !important;
}
.intec-foresight-icon img,
.intec-foresight-icon .kb-img {
width: 40px !important;
max-width: 40px !important;
height: auto !important;
}
}
/* =========================================================
CSS-SVC-12J
Shared A/B Responsive Header Alignment
Purpose:
Tablet: adds badge-to-title breathing room.
Mobile: prevents A/B badges from stacking above headings.
Desktop is intentionally untouched.
========================================================= */
/* Tablet: keep badge + title in one row with better spacing */
@media (min-width: 768px) and (max-width: 1024px) {
.intec-service-ab-header-row > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 40px minmax(0, 1fr) !important;
align-items: center !important;
column-gap: 18px !important;
row-gap: 0 !important;
}
.intec-service-ab-header-row
.intec-service-ab-badge-cell,
.intec-service-ab-header-row
.intec-service-ab-badge-cell > .kt-inside-inner-col {
width: 40px !important;
max-width: 40px !important;
min-width: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.intec-service-ab-header-row
.intec-service-ab-title-cell,
.intec-service-ab-header-row
.intec-service-ab-title-cell > .kt-inside-inner-col {
min-width: 0 !important;
width: auto !important;
max-width: 100% !important;
}
.intec-service-ab-header-row
.intec-service-ab-title {
margin: 0 !important;
}
}
/* Mobile: stop badge from stacking above heading */
@media (max-width: 767px) {
.intec-service-ab-header-row > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 38px minmax(0, 1fr) !important;
align-items: start !important;
column-gap: 12px !important;
row-gap: 0 !important;
}
.intec-service-ab-header-row
.intec-service-ab-badge-cell,
.intec-service-ab-header-row
.intec-service-ab-badge-cell > .kt-inside-inner-col {
width: 38px !important;
max-width: 38px !important;
min-width: 38px !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
}
.intec-service-ab-header-row
.intec-service-ab-title-cell,
.intec-service-ab-header-row
.intec-service-ab-title-cell > .kt-inside-inner-col {
min-width: 0 !important;
width: auto !important;
max-width: 100% !important;
}
.intec-service-ab-header-row
.intec-service-ab-title {
margin: 0 !important;
}
}
/* =========================================================
CSS-SVC-12K
Fractional Mobile Intro-to-A/B Flow Separation
Purpose:
Mobile-only spacing for Fractional CIO/CTO.
Uses the tested A/B inner wrapper because outer margin-top
did not affect the mobile layout.
========================================================= */
@media (max-width: 767px) {
/* Keep the mobile intro image visible but reduce its collision with heading */
.fractional-service-intro {
background-size: 26% auto !important;
background-position: right -42px top 18px !important;
background-repeat: no-repeat !important;
}
/* Create real flow space before A/B cards */
.fractional-service-ab-row > .kt-row-column-wrap,
.fractional-service-ab-row > .kt-row-layout-inner > .kt-row-column-wrap,
.intec-service-fractional.fractional-service-ab-row > .kt-row-column-wrap,
.intec-service-fractional.fractional-service-ab-row > .kt-row-layout-inner > .kt-row-column-wrap {
padding-top: 52px !important;
}
}
/* =========================================================
CSS-SVC-12I
Fractional Foresight Lead Shield Icon Size
Purpose:
Slightly enlarges only the lead shield icon without
overlapping the lead text or changing other insight icons.
========================================================= */
/* Give the lead icon cell controlled room */
.fractional-foresight-lead-unit
.fractional-foresight-icon-cell,
.fractional-foresight-lead-unit
.fractional-foresight-icon-cell > .kt-inside-inner-col {
flex: 0 0 56px !important;
width: 56px !important;
max-width: 56px !important;
min-width: 56px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Size and position only the shield image inside the lead unit */
.fractional-foresight-lead-unit
.fractional-foresight-icon,
.fractional-foresight-lead-unit
.fractional-foresight-icon figure,
.fractional-foresight-lead-unit
.fractional-foresight-icon .kb-img-wrap,
.fractional-foresight-lead-unit
.fractional-foresight-icon img,
.fractional-foresight-lead-unit
.fractional-foresight-icon .kb-img {
width: 48px !important;
max-width: 48px !important;
min-width: 48px !important;
height: auto !important;
display: block !important;
margin: 0 auto !important;
padding: 0 !important;
transform: translateY(-4px) !important;
}
/* =========================================================
CSS-SVC-12K
Fractional Mobile Intro Background + A/B Flow Separation
Purpose:
Mobile-only correction for Fractional CIO/CTO.
Uses a full-section pseudo background layer behind intro text
and preserves the tested A/B flow spacing fix.
========================================================= */
@media (max-width: 767px) {
/* Intro section becomes the positioning container */
body .fractional-service-intro {
position: relative !important;
background-image: none !important;
overflow: hidden !important;
isolation: isolate !important;
}
/* Full intro-section artwork layer */
body .fractional-service-intro::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background-image:
linear-gradient(
90deg,
rgba(255,255,255,0.88) 0%,
rgba(255,255,255,0.72) 48%,
rgba(255,255,255,0.82) 100%
),
url("/wp-content/uploads/2026/06/ChatGPT-Image-Jun-1-2026-04_39_40-PM.png") !important;
background-repeat: no-repeat !important;
background-size: 100% 100% !important;
background-position: center center !important;
opacity: 1 !important;
z-index: 1 !important;
pointer-events: none !important;
}
/* Keep intro text above the background artwork */
body .fractional-service-intro-copy {
position: relative !important;
z-index: 2 !important;
}
/* This is the A/B spacing rule that fixed Card A overlap */
.fractional-service-ab-row > .kt-row-column-wrap,
.fractional-service-ab-row > .kt-row-layout-inner > .kt-row-column-wrap,
.intec-service-fractional.fractional-service-ab-row > .kt-row-column-wrap,
.intec-service-fractional.fractional-service-ab-row > .kt-row-layout-inner > .kt-row-column-wrap {
padding-top: 52px !important;
}
}
/* =========================================================
CSS-SVC-13A
Agentic Operations shared icon rail standard
Applies to Agentic A/B/C/D card icon rails
========================================================= */
/* Stretch the internal two-column feature rows */
body .intec-service-agentic [class*="agentic-card-feature-row-"] > .kt-row-column-wrap {
align-items: stretch !important;
}
/* Icon rail container */
body .intec-service-agentic [class*="agentic-card-icon-rail-"] > .kt-inside-inner-col {
position: relative !important;
min-height: 100% !important;
height: 100% !important;
display: block !important;
padding-top: 0 !important;
}
/* Main icon block placement */
body .intec-service-agentic [class*="agentic-card-main-icon-"] {
position: absolute !important;
top: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
margin: 0 !important;
padding: 0 !important;
z-index: 3 !important;
}
/* Reset Kadence image spacing */
body .intec-service-agentic [class*="agentic-card-main-icon-"] figure,
body .intec-service-agentic [class*="agentic-card-main-icon-"] img {
margin: 0 !important;
padding: 0 !important;
}
/* Shared main icon size */
body .intec-service-agentic [class*="agentic-card-main-icon-"] img {
width: 88px !important;
max-width: 88px !important;
height: auto !important;
display: block !important;
}
/* Green dot on the rail */
body .intec-service-agentic [class*="agentic-card-icon-rail-"] > .kt-inside-inner-col::before {
content: "" !important;
position: absolute !important;
top: 92px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 9px !important;
height: 9px !important;
background: #16a34a !important;
border-radius: 999px !important;
z-index: 2 !important;
}
/* Green dotted vertical line starts from bottom of icon */
body .intec-service-agentic [class*="agentic-card-icon-rail-"] > .kt-inside-inner-col::after {
content: "" !important;
position: absolute !important;
top: 70px !important;
bottom: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 1px !important;
background-image: linear-gradient(
to bottom,
rgba(22, 163, 74, 0.38) 0,
rgba(22, 163, 74, 0.38) 4px,
transparent 4px,
transparent 9px
) !important;
background-size: 1px 9px !important;
background-repeat: repeat-y !important;
z-index: 1 !important;
}
/* Shared vertical divider between icon rail and content */
body .intec-service-agentic [class*="agentic-card-content-"] {
border-left: 1px solid rgba(0, 31, 177, 0.16) !important;
padding-left: 24px !important;
}
/* C/D rail centering correction only */
body .intec-service-agentic .agentic-card-icon-rail-c,
body .intec-service-agentic .agentic-card-icon-rail-d {
display: flex !important;
justify-content: center !important;
align-items: stretch !important;
}
body .intec-service-agentic .agentic-card-icon-rail-c > .kt-inside-inner-col,
body .intec-service-agentic .agentic-card-icon-rail-d > .kt-inside-inner-col {
width: 100% !important;
max-width: 88px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* C/D desktop baseline rail center nudge */
body .intec-service-agentic .agentic-card-main-icon-c,
body .intec-service-agentic .agentic-card-main-icon-d,
body .intec-service-agentic .agentic-card-icon-rail-c > .kt-inside-inner-col::before,
body .intec-service-agentic .agentic-card-icon-rail-d > .kt-inside-inner-col::before,
body .intec-service-agentic .agentic-card-icon-rail-c > .kt-inside-inner-col::after,
body .intec-service-agentic .agentic-card-icon-rail-d > .kt-inside-inner-col::after {
left: calc(50% - 8px) !important;
transform: translateX(-50%) !important;
}
/* =========================================================
CSS-SVC-13B
Agentic Operations card heading and Card C outcome styling
Applies to Agentic card headings and custom Card C rows
========================================================= */
/* Shared Agentic card heading standard for A/B/C/D */
body .intec-service-agentic .agentic-card-heading-a,
body .intec-service-agentic .agentic-card-heading-b,
body .intec-service-agentic .agentic-card-heading-c,
body .intec-service-agentic .agentic-card-heading-d {
margin: 0 !important;
color: #071f4d !important;
font-weight: 700 !important;
font-size: 22px !important;
line-height: 1.24 !important;
letter-spacing: -0.01em !important;
}
/* Card C outcome rows */
body .agentic-cd-card-c .agentic-outcome-item {
padding: 8px 0 !important;
}
body .agentic-cd-card-c .agentic-outcome-item:not(:last-child) {
border-bottom: 1px solid rgba(0, 31, 177, 0.12) !important;
}
/* Tight outcome row layout: checkmark + text */
body .agentic-cd-card-c .agentic-outcome-item .kt-row-column-wrap {
display: flex !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
gap: 8px !important;
}
/* First column: fixed checkmark column */
body .agentic-cd-card-c .agentic-outcome-item .kt-row-column-wrap > .wp-block-kadence-column:first-child {
flex: 0 0 28px !important;
width: 28px !important;
max-width: 28px !important;
}
/* Second column: text column */
body .agentic-cd-card-c .agentic-outcome-item .kt-row-column-wrap > .wp-block-kadence-column:nth-child(2) {
flex: 1 1 auto !important;
width: auto !important;
max-width: none !important;
}
/* Checkmark column internal alignment */
body .agentic-cd-card-c .agentic-outcome-item .kt-row-column-wrap > .wp-block-kadence-column:first-child .kt-inside-inner-col {
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
padding-top: 1px !important;
}
/* Green circular checkmark */
body .agentic-cd-card-c .agentic-outcome-item .kt-row-column-wrap > .wp-block-kadence-column:first-child p {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
border: 2px solid #16a34a !important;
border-radius: 999px !important;
color: #16a34a !important;
background: #ffffff !important;
font-size: 15px !important;
font-weight: 800 !important;
line-height: 20px !important;
text-align: center !important;
display: block !important;
}
/* Outcome text */
body .agentic-cd-card-c .agentic-outcome-item .kt-row-column-wrap > .wp-block-kadence-column:nth-child(2) p {
margin: 0 !important;
color: #102247 !important;
font-size: 14px !important;
line-height: 1.34 !important;
}
body .agentic-cd-card-c .agentic-outcome-item strong {
color: #0024b8 !important;
font-weight: 800 !important;
}
/* =========================================================
CSS-SVC-13C
Agentic Operations Card D engagement row styling
Applies only to Agentic D engagement rows
========================================================= */
/* Card D engagement row shell */
body .intec-service-agentic .agentic-cd-card-d .agentic-engagement-item-d {
position: relative !important;
margin: 0 0 10px 0 !important;
padding: 0 !important;
}
/* Boxed engagement row layout */
body .intec-service-agentic .agentic-cd-card-d .agentic-engagement-item-d > .kt-row-column-wrap {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 12px !important;
min-height: 52px !important;
padding: 7px 42px 7px 10px !important;
border: 1px solid rgba(0, 31, 177, 0.14) !important;
border-radius: 10px !important;
background: #ffffff !important;
box-shadow: 0 5px 14px rgba(0, 31, 177, 0.035) !important;
overflow: visible !important;
}
/* Icon column */
body .intec-service-agentic .agentic-cd-card-d .agentic-engagement-item-d .agentic-engagement-icon-tile {
position: relative !important;
flex: 0 0 52px !important;
width: 52px !important;
min-width: 52px !important;
max-width: 52px !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
/* Icon column inner alignment */
body .intec-service-agentic .agentic-cd-card-d .agentic-engagement-item-d .agentic-engagement-icon-tile > .kt-inside-inner-col {
position: relative !important;
width: 52px !important;
height: 42px !important;
min-height: 42px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
/* Icon image block */
body .intec-service-agentic .agentic-cd-card-d .agentic-engagement-item-d .agentic-engagement-icon-image,
body .intec-service-agentic .agentic-cd-card-d .agentic-engagement-item-d .agentic-engagement-icon-image figure {
width: 63px !important;
min-width: 63px !important;
max-width: 63px !important;
height: 63px !important;
min-height: 63px !important;
max-height: 63px !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
overflow: visible !important;
}
/* Actual icon image */
body .intec-service-agentic .agentic-cd-card-d .agentic-engagement-item-d .agentic-engagement-icon-image img {
width: 63px !important;
min-width: 63px !important;
max-width: 63px !important;
height: 63px !important;
min-height: 63px !important;
max-height: 63px !important;
display: block !important;
object-fit: contain !important;
margin: 0 !important;
padding: 0 !important;
}
/* Text column */
body .intec-service-agentic .agentic-cd-card-d .agentic-engagement-item-d .agentic-engagement-text-box {
flex: 1 1 auto !important;
width: auto !important;
max-width: none !important;
}
/* Engagement copy - matches Card C outcome text exactly */
body .intec-service-agentic .agentic-cd-card-d .agentic-engagement-item-d .agentic-engagement-copy {
margin: 0 !important;
color: #102247 !important;
font-size: 14px !important;
line-height: 1.34 !important;
font-weight: 400 !important;
}
body .intec-service-agentic .agentic-cd-card-d .agentic-engagement-item-d .agentic-engagement-copy strong {
color: #0024b8 !important;
font-weight: 800 !important;
}
/* Green arrow at right side of each row */
body .intec-service-agentic .agentic-cd-card-d .agentic-engagement-item-d::after {
content: "\203A" !important;
position: absolute !important;
right: 17px !important;
top: 50% !important;
transform: translateY(-52%) !important;
color: #16a34a !important;
font-size: 26px !important;
font-weight: 500 !important;
line-height: 1 !important;
z-index: 2 !important;
}
/* Add breathing room between D divider and engagement rows */
body .intec-service-agentic .agentic-cd-card-d .agentic-card-content-d .agentic-engagement-item-d {
transform: translateY(6px) !important;
}
/* Remove bottom margin from the last D row */
body .intec-service-agentic .agentic-cd-card-d .agentic-engagement-item-d:last-child {
margin-bottom: -6px !important;
}
/* =========================================================
CSS-SVC-13D
Agentic Operations A/B card copy normalization
Aligns A/B paragraph rhythm with C/D card body text
Excludes A/B heading blocks so heading standard remains intact
========================================================= */
/* A/B card body paragraph typography only */
body .intec-service-agentic .agentic-ab-card .agentic-card-content-a p:not(.agentic-card-heading):not(.agentic-card-heading-a),
body .intec-service-agentic .agentic-ab-card .agentic-card-content-b p:not(.agentic-card-heading):not(.agentic-card-heading-b) {
margin: 0 !important;
color: #102247 !important;
font-size: 14px !important;
line-height: 1.34 !important;
font-weight: 400 !important;
}
/* A/B body emphasized phrases only, not headings */
body .intec-service-agentic .agentic-ab-card .agentic-card-content-a p:not(.agentic-card-heading):not(.agentic-card-heading-a) strong,
body .intec-service-agentic .agentic-ab-card .agentic-card-content-b p:not(.agentic-card-heading):not(.agentic-card-heading-b) strong {
color: #0024b8 !important;
font-weight: 800 !important;
}
/* Keep A/B content spacing consistent after divider */
body .intec-service-agentic .agentic-ab-card .agentic-card-content-a,
body .intec-service-agentic .agentic-ab-card .agentic-card-content-b {
padding-left: 24px !important;
}
/* =========================================================
CSS-SVC-13F
Agentic Operations intro image position only
Keeps Kadence-managed background image
========================================================= */
body .intec-service-agentic.agentic-service-intro {
position: relative !important;
overflow: hidden !important;
background-color: #ffffff !important;
background-repeat: no-repeat !important;
background-size: 43% auto !important;
background-position: 88% -18px !important;
background-blend-mode: normal !important;
box-shadow: none !important;
filter: none !important;
opacity: 1 !important;
}
/* Disable Agentic intro pseudo fade layers */
body .intec-service-agentic.agentic-service-intro::before,
body .intec-service-agentic.agentic-service-intro::after {
content: none !important;
display: none !important;
background: none !important;
background-image: none !important;
box-shadow: none !important;
filter: none !important;
opacity: 1 !important;
}
/* Disable any Kadence row overlay that may wash out the background image */
body .intec-service-agentic.agentic-service-intro .kt-row-layout-overlay,
body .intec-service-agentic.agentic-service-intro > .kt-row-layout-overlay {
display: none !important;
opacity: 0 !important;
background: none !important;
background-image: none !important;
}
/* Keep intro content clean and above the background layer */
body .intec-service-agentic.agentic-service-intro > .kt-row-column-wrap,
body .intec-service-agentic.agentic-service-intro .agentic-service-intro-copy,
body .intec-service-agentic.agentic-service-intro .intec-service-intro-copy {
position: relative !important;
z-index: 2 !important;
}
/* =========================================================
CSS-SVC-13G
Agentic Operations desktop card stack lift
Moves A/B/C/D card stack closer to intro on desktop
========================================================= */
body .intec-service-agentic.agentic-service-ab-row {
margin-top: -28px !important;
}
/* =========================================================
CSS-SVC-13H
Agentic Operations mobile intro background
Keeps Kadence background image; does not touch cards
========================================================= */
@media (max-width: 767px) {
body .intec-service-agentic.agentic-service-intro {
background-repeat: no-repeat !important;
background-size: 76% auto !important;
background-position: right 38px top 110px !important;
background-color: rgba(255, 255, 255, 0.18) !important;
background-blend-mode: screen !important;
}
}
/* =========================================================
CSS-SVC-13I
Agentic Operations mobile card content clearance
Applies only to mobile A/B/C/D cards
========================================================= */
@media (max-width: 767px) {
/* Neutralize desktop card stack lift on mobile */
body .intec-service-agentic.agentic-service-ab-row {
margin-top: 18px !important;
}
/* Keep rail icons anchored, but do not pull them farther upward */
body .intec-service-agentic [class*="agentic-card-main-icon-"] {
top: -10px !important;
}
/* Move A/B headings and body down enough to clear the icon */
body .intec-service-agentic .agentic-card-content-a,
body .intec-service-agentic .agentic-card-content-b {
padding-top: 54px !important;
}
/* C/D need more clearance because their content is denser */
body .intec-service-agentic .agentic-card-content-c,
body .intec-service-agentic .agentic-card-content-d {
padding-top: 84px !important;
}
/* Keep the mobile rail dot and line aligned with the restored icon position */
body .intec-service-agentic [class*="agentic-card-icon-rail-"] > .kt-inside-inner-col::before {
top: 82px !important;
}
body .intec-service-agentic [class*="agentic-card-icon-rail-"] > .kt-inside-inner-col::after {
top: 60px !important;
}
/* Give mobile Card D enough bottom room after content clearance */
body .intec-service-agentic .agentic-cd-card-d > .kt-inside-inner-col {
padding-bottom: 42px !important;
}
}
/* =========================================================
CSS-SVC-13J
Agentic Operations tablet final spacing and alignment
Consolidates tablet A/B lift, Card B alignment, and C/D local corrections
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
/* Tighten space between intro and A/B cards */
body .intec-service-agentic.agentic-service-ab-row {
margin-top: -70px !important;
}
/* Align Card B icon, divider, heading, and body with Card A */
body .intec-service-agentic .agentic-card-feature-row-b {
transform: translateY(-22px) !important;
}
/* Move C content column right and slightly up to align heading with D */
body .intec-service-agentic .agentic-card-content-c {
transform: translate(18px, -6px) !important;
padding-left: 24px !important;
}
/* Move D content column right only */
body .intec-service-agentic .agentic-card-content-d {
transform: translateX(18px) !important;
padding-left: 24px !important;
}
/* Move C/D main rail icon, dot, and dotted rail slightly right */
body .intec-service-agentic .agentic-card-main-icon-c,
body .intec-service-agentic .agentic-card-main-icon-d,
body .intec-service-agentic .agentic-card-icon-rail-c > .kt-inside-inner-col::before,
body .intec-service-agentic .agentic-card-icon-rail-d > .kt-inside-inner-col::before,
body .intec-service-agentic .agentic-card-icon-rail-c > .kt-inside-inner-col::after,
body .intec-service-agentic .agentic-card-icon-rail-d > .kt-inside-inner-col::after {
left: calc(50% - 2px) !important;
transform: translateX(-50%) !important;
}
/* Move C rail system slightly up to align with D */
body .intec-service-agentic .agentic-card-main-icon-c {
top: -6px !important;
}
body .intec-service-agentic .agentic-card-icon-rail-c > .kt-inside-inner-col::before {
top: 86px !important;
}
body .intec-service-agentic .agentic-card-icon-rail-c > .kt-inside-inner-col::after {
top: 64px !important;
}
/* Keep D engagement rows from wasting right-side space */
body .intec-service-agentic .agentic-cd-card-d .agentic-engagement-item-d > .kt-row-column-wrap {
width: 100% !important;
max-width: none !important;
padding-right: 34px !important;
}
body .intec-service-agentic .agentic-cd-card-d .agentic-engagement-item-d::after {
right: 13px !important;
}
}
/* =========================================================
CSS-SVC-13K
Agentic Operations desktop C/D divider correction
Moves only the C/D content divider slightly right on desktop
========================================================= */
@media (min-width: 1025px) {
body .intec-service-agentic .agentic-card-content-c,
body .intec-service-agentic .agentic-card-content-d {
transform: translateX(8px) !important;
padding-left: 24px !important;
}
}
/* =========================================================
Technology Transformation Advisory
Card B solution framework + process flow
Scoped to Technology only
========================================================= */
/* Break the solution step rows slightly wider than Card B content,
without affecting Card B heading/body text. */
.technology-ab-card-b .technology-solution-step-row {
width: calc(100% + 40px) !important;
max-width: none !important;
margin-left: -20px !important;
margin-right: -20px !important;
position: relative !important;
overflow: visible !important;
}
/* Make Kadence's inner row wrapper also use the widened space */
.technology-ab-card-b .technology-solution-step-row > .kt-row-column-wrap {
width: 100% !important;
max-width: none !important;
column-gap: 18px !important;
overflow: visible !important;
}
/* Let each mini card use its column cleanly */
.technology-ab-card-b .technology-solution-step-card {
min-width: 0;
position: relative !important;
overflow: visible !important;
}
.technology-ab-card-b .technology-solution-step-card > .kt-inside-inner-col {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
overflow: visible !important;
}
/* Mini-card icon/title/body rhythm */
.technology-ab-card-b .technology-solution-step-card .wp-block-kadence-image,
.technology-ab-card-b .technology-solution-step-card figure {
margin-bottom: 0 !important;
}
.technology-ab-card-b .technology-solution-step-card p:first-of-type {
margin-top: 0 !important;
margin-bottom: 4px !important;
line-height: 1.12 !important;
}
.technology-ab-card-b .technology-solution-step-card p:last-of-type {
margin-top: 0 !important;
margin-bottom: 0 !important;
line-height: 1.24 !important;
max-width: none !important;
width: 100% !important;
}
/* Stack row cards so connector arrows render above neighboring cards */
.technology-ab-card-b .technology-solution-step-row > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(1) {
position: relative !important;
z-index: 50 !important;
}
.technology-ab-card-b .technology-solution-step-row > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(2) {
position: relative !important;
z-index: 40 !important;
}
.technology-ab-card-b .technology-solution-step-row > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(3) {
position: relative !important;
z-index: 30 !important;
}
/* =========================================================
Technology Transformation Advisory
Card B process arrows
========================================================= */
/* Right arrows for Assess → Align and Align → Architect */
.technology-ab-card-b .technology-solution-step-card-assess::after,
.technology-ab-card-b .technology-solution-step-card-align::after {
content: "→";
position: absolute;
top: 50%;
right: -17px;
transform: translateY(-50%);
color: #00A83B;
font-size: 16px;
font-weight: 800;
line-height: 1;
z-index: 999;
pointer-events: none;
}
/* Right arrow for Prioritize → Execute & Govern */
.technology-ab-card-b .technology-solution-step-card-prioritize::after {
content: "→";
position: absolute;
top: 50%;
right: -17px;
transform: translateY(-50%);
color: #00A83B;
font-size: 16px;
font-weight: 800;
line-height: 1;
z-index: 999;
pointer-events: none;
}
/* =========================================================
Technology Transformation Advisory
Card B connector: Architect to Prioritize
Step reset: keep only Architect down arrow
========================================================= */
.technology-ab-card-b .technology-solution-step-row-1,
.technology-ab-card-b .technology-solution-step-row-2 {
position: relative !important;
overflow: visible !important;
}
/* Keep Architect down arrow */
.technology-ab-card-b .technology-solution-step-card-architect::after {
content: "↓";
position: absolute;
left: 50%;
top: calc(100% - 2px);
transform: translateX(-50%);
color: #00A83B;
font-size: 17px;
font-weight: 800;
line-height: 1;
z-index: 999;
pointer-events: none;
}
/* =========================================================
Technology Transformation Advisory
Card B horizontal connector: Architect to Prioritize
Line only, no left arrowhead
========================================================= */
.technology-ab-card-b .technology-solution-step-card-architect {
position: relative !important;
overflow: visible !important;
}
/* Horizontal connector line only.
Right end aligns with Architect down-arrow tip.
Left end aligns with the Prioritize down-arrow tail. */
.technology-ab-card-b .technology-solution-step-card-architect::before {
content: "" !important;
position: absolute !important;
top: calc(100% + 5px) !important;
right: 50% !important;
width: 355px !important;
height: 18px !important;
background:
linear-gradient(
to right,
#00A83B 0,
#00A83B 100%
) center / 100% 2.2px no-repeat !important;
z-index: 999 !important;
pointer-events: none !important;
}
/* =========================================================
Technology Transformation Advisory
Card B down arrow into Prioritize
Anchored to Prioritize card
========================================================= */
.technology-ab-card-b .technology-solution-step-card-prioritize {
position: relative !important;
overflow: visible !important;
}
/* Down arrow from horizontal connector into Prioritize */
.technology-ab-card-b .technology-solution-step-card-prioritize::before {
content: "↓" !important;
position: absolute !important;
left: 50% !important;
top: -15px !important;
transform: translateX(-50%) !important;
color: #00A83B !important;
font-size: 17px !important;
font-weight: 800 !important;
line-height: 1 !important;
z-index: 999 !important;
pointer-events: none !important;
}
/* =========================================================
Technology Transformation Advisory
Card C outcome row refinement
Stable divider + width stretch
========================================================= */
/* Card C row stretch and spacing */
.technology-outcome-list-c .technology-outcome-row {
width: calc(100% + 20px);
max-width: none;
margin-left: -10px;
margin-right: -10px;
margin-bottom: -2px !important;
position: relative;
}
.technology-outcome-list-c .technology-outcome-row:last-child {
margin-bottom: 0 !important;
}
/* Card C controlled divider */
.technology-outcome-list-c .technology-outcome-row::after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: 82px;
width: 1px;
background: rgba(0, 31, 177, 0.12);
pointer-events: none;
}
/* Card C text breathing room */
.technology-outcome-list-c .technology-outcome-row .wp-block-kadence-column:nth-child(2) {
padding-left: 10px;
}
/* Technology Card C green left accent */
.technology-outcome-list-c .technology-outcome-row {
border-left: 3px solid #00A83B !important;
box-sizing: border-box;
}
/* =========================================================
Technology Transformation Advisory
Card D engagement card refinement
========================================================= */
.technology-cd-card-d .technology-engagement-card {
min-height: 100px;
}
.technology-cd-card-d .technology-engagement-card > .kt-inside-inner-col {
height: 100%;
}
.technology-cd-card-d .technology-engagement-card .kt-row-column-wrap {
align-items: center;
}
.technology-cd-card-d .technology-engagement-copy {
margin-top: 4px !important;
margin-bottom: 0 !important;
}
/* =========================================================
Technology Transformation Advisory
Card D engagement icon sizing reset
========================================================= */
.technology-cd-card-d .technology-engagement-card .wp-block-kadence-image,
.technology-cd-card-d .technology-engagement-card figure {
max-width: none !important;
}
.technology-cd-card-d .technology-engagement-card img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
}
/* Card D individual icon visual sizing */
.technology-cd-card-d .technology-engagement-card-1 img {
width: 65px !important;
}
.technology-cd-card-d .technology-engagement-card-2 img {
width: 60px !important;
}
.technology-cd-card-d .technology-engagement-card-3 img {
width: 65px !important;
}
.technology-cd-card-d .technology-engagement-card-4 img {
width: 55px !important;
}
/* =========================================================
Technology Transformation Advisory
Card D engagement grid width refinement
========================================================= */
.technology-cd-card-d .technology-engagement-grid-row {
width: calc(100% + 24px);
max-width: none;
margin-left: -12px;
margin-right: -12px;
}
/* =========================================================
Technology Transformation Advisory
Card D engagement grid spacing
========================================================= */
.technology-cd-card-d .technology-engagement-grid-row {
width: calc(100% + 24px);
max-width: none;
margin-left: -12px;
margin-right: -12px;
}
/* Tight, consistent horizontal spacing between D cards */
.technology-cd-card-d .technology-engagement-grid-row > .kt-row-column-wrap {
column-gap: 10px !important;
}
/* Tight, consistent vertical spacing between the two D grid rows */
.technology-cd-card-d .technology-engagement-grid-row-1 {
margin-bottom: 10px !important;
}
/* Technology Card D governance bar width alignment */
.technology-cd-card-d .technology-engagement-governance-row {
width: calc(100% + 24px);
max-width: none;
margin-left: -12px;
margin-right: -12px;
}
/* =========================================================
Technology Transformation Advisory
Card D governance framework bar
Scoped to Technology Card D only
========================================================= */
.technology-cd-card-d .technology-engagement-governance-row {
width: calc(100% + 24px) !important;
max-width: none !important;
margin-left: -12px !important;
margin-right: -12px !important;
}
.technology-cd-card-d .technology-engagement-governance-row > .kt-row-column-wrap,
.technology-cd-card-d .technology-engagement-governance-row .wp-block-kadence-column,
.technology-cd-card-d .technology-engagement-governance-row .kt-inside-inner-col {
width: 100% !important;
max-width: none !important;
}
/* =========================================================
Technology Transformation Advisory
Tablet only: Card B connector length adjustment
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.technology-ab-card-b .technology-solution-step-card-architect::before {
width: 275px !important;
}
}
/* =========================================================
Technology Transformation Advisory
Tablet only: align Card A content to Card B
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.technology-ab-card-a > .kt-inside-inner-col {
justify-content: flex-start !important;
}
}
/* =========================================================
Technology Transformation Advisory
RESPONSIVE FINAL PATCHES
Tablet and mobile only
Placement:
Keep this block at the very bottom of intecpros.css,
after the Technology desktop A/B/C/D rules.
Scope:
Technology Transformation Advisory service only.
Notes:
These are service-specific responsive fixes created during
final tablet/mobile validation. Larger global cleanup items
such as badge/title vertical alignment and shared intro gaps
should be handled later across all services.
========================================================= */
/* =========================================================
Technology Transformation Advisory
TABLET FIXES
Breakpoint: 768px through 1024px
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
/* ---------------------------------------------------------
Tablet Fix 01
Align Card A content with Card B.
Diagnosis:
Card A and Card B shells started at the same height, but
Card A's inner content was being vertically centered.
This aligns Card A content to the top without changing
the card shell.
--------------------------------------------------------- */
.technology-ab-card-a > .kt-inside-inner-col {
justify-content: flex-start !important;
}
/* ---------------------------------------------------------
Tablet Fix 02
Shorten Card B horizontal connector.
Diagnosis:
Desktop connector width was too long at tablet width.
275px aligned the horizontal line correctly with the
down arrow over Prioritize.
--------------------------------------------------------- */
.technology-ab-card-b .technology-solution-step-card-architect::before {
width: 275px !important;
}
/* ---------------------------------------------------------
Tablet Fix 03
Move Card C internal divider left.
Diagnosis:
On tablet, the desktop divider was too close to the text
column in the Card C outcome rows.
Mobile removes this divider completely in the mobile block.
--------------------------------------------------------- */
.technology-outcome-list-c .technology-outcome-row::after {
left: 65px !important;
}
}
/* =========================================================
Technology Transformation Advisory
MOBILE FIXES
Breakpoint: 767px and below
========================================================= */
@media (max-width: 767px) {
/* ---------------------------------------------------------
Mobile Fix 01
Prevent A/B cards from overlapping the intro section.
Diagnosis:
On mobile, the Technology A/B row started too high and
overlapped the intro paragraph area.
--------------------------------------------------------- */
.technology-service-ab-row {
margin-top: 28px !important;
}
/* ---------------------------------------------------------
Mobile Fix 02
Convert Card B process flow to a vertical mobile sequence.
Desktop/tablet flow:
Assess → Align → Architect
then Architect connector to Prioritize
then Prioritize → Execute & Govern
Mobile flow:
Assess ↓ Align ↓ Architect ↓ Prioritize ↓ Execute & Govern
Notes:
This removes desktop/tablet connector artifacts and replaces
them with bottom-centered down arrows.
--------------------------------------------------------- */
/* Allow arrows to render outside the mini cards. */
.technology-ab-card-b .technology-solution-step-row,
.technology-ab-card-b .technology-solution-step-row > .kt-row-column-wrap,
.technology-ab-card-b .technology-solution-step-card,
.technology-ab-card-b .technology-solution-step-card > .kt-inside-inner-col {
overflow: visible !important;
}
/* Ensure mini cards are valid positioning anchors for arrows. */
.technology-ab-card-b .technology-solution-step-card {
position: relative !important;
}
/* Remove desktop/tablet horizontal connector under Architect. */
.technology-ab-card-b .technology-solution-step-card-architect::before {
content: none !important;
display: none !important;
background: none !important;
}
/* Remove any row-level connector pieces from desktop/tablet logic. */
.technology-ab-card-b .technology-solution-step-row-1::before,
.technology-ab-card-b .technology-solution-step-row-1::after,
.technology-ab-card-b .technology-solution-step-row-2::before,
.technology-ab-card-b .technology-solution-step-row-2::after {
content: none !important;
display: none !important;
}
/* Remove leftover Prioritize pseudo-element from earlier connector tuning. */
.technology-ab-card-b .technology-solution-step-card-prioritize::before {
content: none !important;
display: none !important;
}
/* Convert all process arrows before the final card to bottom-center down arrows. */
.technology-ab-card-b .technology-solution-step-card-assess::after,
.technology-ab-card-b .technology-solution-step-card-align::after,
.technology-ab-card-b .technology-solution-step-card-architect::after,
.technology-ab-card-b .technology-solution-step-card-prioritize::after {
content: "↓" !important;
position: absolute !important;
left: 50% !important;
right: auto !important;
top: auto !important;
bottom: -24px !important;
transform: translateX(-50%) !important;
color: #00A83B !important;
font-size: 18px !important;
font-weight: 800 !important;
line-height: 1 !important;
z-index: 999 !important;
pointer-events: none !important;
}
/* Mobile rhythm between Assess and Align. */
.technology-ab-card-b .technology-solution-step-row-1 > .kt-row-column-wrap {
row-gap: 28px !important;
}
/* Pull the lower mobile process stack upward.
Final accepted value after testing. */
.technology-ab-card-b .technology-solution-step-row-2 {
margin-top: -134px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* Mobile rhythm between Architect, Prioritize, and Execute & Govern. */
.technology-ab-card-b .technology-solution-step-row-2 > .kt-row-column-wrap {
row-gap: 28px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Hide the empty Kadence spacer column that stacked below
Execute & Govern on mobile.
Important:
Do not hide nth-child(1). On mobile, nth-child(1) is Architect.
The actual blank spacer is the last stacked column.
*/
.technology-ab-card-b
.technology-solution-step-row-2
> .kt-row-column-wrap
> .wp-block-kadence-column:last-child {
display: none !important;
}
/* ---------------------------------------------------------
Mobile Fix 03
Remove Card C internal divider lines.
Diagnosis:
Desktop/tablet Card C uses a subtle vertical divider between
icon and text. On mobile, the layout is tighter and the
divider becomes visually awkward.
This keeps the green left accent border.
--------------------------------------------------------- */
.technology-outcome-list-c .technology-outcome-row::after {
content: none !important;
display: none !important;
}
}
/* =========================================================
CSS-SVC-14A — FinOps Intro Background Position
Purpose: Push FinOps intro background slightly beyond Kadence 100% limit
========================================================= */
.finops-service-intro {
background-size: 50% auto !important;
background-position: 108% 50% !important;
background-repeat: no-repeat !important;
}
/* =========================================================
CSS-SVC-14B — FinOps Card C Outcome Tile Text
Purpose: Strengthen readability without disturbing other services
========================================================= */
.finops-outcome-tile-copy {
text-align: left !important;
font-size: 13px !important;
line-height: 1.24 !important;
font-weight: 400 !important;
color: #10213f !important;
}
.finops-outcome-tile-copy .intec-outcome-tile-lead {
display: block;
text-align: center !important;
margin-bottom: 4px;
font-size: 13px !important;
line-height: 1.18 !important;
font-weight: 700 !important;
color: #001FB1 !important;
}
/* =========================================================
CSS-SVC-14C — FinOps Card C Check Circles
Purpose: Add small centered check circles inside FinOps outcome tiles
========================================================= */
.finops-outcome-tile > .kt-inside-inner-col {
position: relative;
}
.finops-outcome-tile > .kt-inside-inner-col::before {
content: "";
position: absolute;
top: 9px;
left: 9px;
width: 18px;
height: 18px;
background: #00A83B;
border-radius: 50%;
border: 1px solid rgba(0, 31, 177, 0.16);
box-shadow: 0 2px 4px rgba(0, 31, 177, 0.12);
z-index: 5;
}
.finops-outcome-tile > .kt-inside-inner-col::after {
content: "✓";
position: absolute;
top: 9px;
left: 9px;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 12px;
font-weight: 900;
line-height: 1;
z-index: 6;
}
/* =========================================================
CSS-SVC-14D — FinOps Card D Engagement Text
Purpose: Strengthen D row title/body copy using confirmed selectors
========================================================= */
.finops-cd-card-d .finops-engagement-text-box p {
font-size: 13px !important;
line-height: 1.24 !important;
font-weight: 400 !important;
color: #10213f !important;
margin: 0 !important;
}
.finops-cd-card-d .finops-engagement-text-box p strong {
font-size: 13px !important;
line-height: 1.18 !important;
font-weight: 700 !important;
color: #001FB1 !important;
}
/* =========================================================
CSS-SVC-14E — FinOps Foresight Bar Lead Text
Purpose: Reduce bottom-bar lead heading dominance
========================================================= */
.finops-foresight-lead-text {
font-size: 14px !important;
line-height: 1.18 !important;
font-weight: 700 !important;
color: #001FB1 !important;
margin: 0 0 4px 0 !important;
}
.finops-foresight-lead-body {
font-size: 13px !important;
line-height: 1.24 !important;
font-weight: 400 !important;
color: #10213f !important;
margin: 0 !important;
}
/* =========================================================
CSS-SVC-14E — FinOps Foresight Bar Final Tuning
Purpose: Balance icon sizes and match text hierarchy
with FinOps C/D cards
========================================================= */
/* Lead shield icon — reduce dominance */
.finops-foresight-lead-unit .finops-foresight-icon,
.finops-foresight-lead-unit .intec-foresight-icon {
max-width: 44px !important;
width: 44px !important;
}
.finops-foresight-lead-unit .finops-foresight-icon img,
.finops-foresight-lead-unit .intec-foresight-icon img {
max-width: 44px !important;
width: 44px !important;
height: auto !important;
}
/* Three item icons — increase visual strength */
.finops-foresight-item .finops-foresight-icon,
.finops-foresight-item .intec-foresight-icon {
max-width: 48px !important;
width: 48px !important;
}
.finops-foresight-item .finops-foresight-icon img,
.finops-foresight-item .intec-foresight-icon img {
max-width: 48px !important;
width: 48px !important;
height: auto !important;
}
/* Lead heading — quieter than before, same hierarchy as C/D */
.finops-foresight-lead-text {
font-size: 13px !important;
line-height: 1.18 !important;
font-weight: 700 !important;
color: #001FB1 !important;
margin: 0 0 4px 0 !important;
}
/* Lead body */
.finops-foresight-lead-body {
font-size: 13px !important;
line-height: 1.24 !important;
font-weight: 400 !important;
color: #10213f !important;
margin: 0 !important;
}
/* Value-point headings */
.finops-foresight-text {
font-size: 13px !important;
line-height: 1.18 !important;
font-weight: 700 !important;
color: #001FB1 !important;
margin: 0 0 3px 0 !important;
}
/* Value-point body copy */
.finops-foresight-body {
font-size: 13px !important;
line-height: 1.24 !important;
font-weight: 400 !important;
color: #10213f !important;
margin: 0 !important;
}
/* =========================================================
CSS-SVC-14F — FinOps Foresight Bar Column Balance
Purpose: Widen only the OUTER four-column bottom bar
without touching nested icon/text rows
========================================================= */
@media (min-width: 1025px) {
.finops-foresight-bar > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: minmax(0, 34fr) minmax(0, 22fr) minmax(0, 22fr) minmax(0, 22fr) !important;
width: 100% !important;
align-items: center !important;
}
.finops-foresight-bar > .kt-row-column-wrap > .wp-block-kadence-column {
width: auto !important;
max-width: none !important;
flex-basis: auto !important;
min-width: 0 !important;
}
}
/* =========================================================
CSS-SVC-14G — FinOps Foresight Lead Space Reclaim
Purpose: Pull lead unit left to use empty space before shield
and give more room to lead text
========================================================= */
@media (min-width: 1025px) {
.finops-foresight-lead .finops-foresight-lead-unit {
margin-left: -12px !important;
width: calc(100% + 12px) !important;
}
.finops-foresight-lead-unit > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 46px minmax(0, 1fr) !important;
column-gap: 10px !important;
align-items: center !important;
}
.finops-foresight-lead-unit .finops-foresight-icon-cell,
.finops-foresight-lead-unit .intec-foresight-icon-cell {
width: 46px !important;
max-width: 46px !important;
min-width: 46px !important;
justify-self: start !important;
}
.finops-foresight-lead-unit .finops-foresight-text-cell,
.finops-foresight-lead-unit .intec-foresight-text-cell {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
}
}
/* =========================================================
CSS-SVC-14H — FinOps Tablet Card B Text-Only Alignment
Purpose: Move Card B badge/title/body copy up on tablet
without disturbing Card B icon
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.finops-ab-card-b .finops-ab-badge-cell,
.finops-ab-card-b .finops-ab-title-cell {
transform: translateY(-10px) !important;
}
.finops-ab-card-b .finops-ab-copy-cell-b {
transform: translateY(-10px) !important;
}
}
/* =========================================================
CSS-SVC-14I — FinOps Mobile Intro / A-B Separation
Purpose: Prevent Card A from overlapping intro copy on mobile
========================================================= */
@media (max-width: 767px) {
.finops-service-intro {
padding-bottom: 28px !important;
margin-bottom: 20px !important;
}
.finops-service-ab-row {
margin-top: 22px !important;
}
}
/* =========================================================
CSS-SVC-14J — FinOps Mobile Card C 2x2 Outcome Grid
Purpose: Prevent four mini-cards from becoming skinny columns
========================================================= */
@media (max-width: 767px) {
.finops-outcome-tile-grid > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.finops-outcome-tile {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
}
.finops-outcome-tile-copy {
font-size: 12px !important;
line-height: 1.22 !important;
}
.finops-outcome-tile-copy .intec-outcome-tile-lead {
font-size: 12px !important;
line-height: 1.15 !important;
}
}
/* =========================================================
PAGE-CONSULT-01 — Schedule Consultation Page
Purpose: Page-level styling for the Schedule a Consultation
page. This page is intentionally compact, calm, and
conversion-focused.
========================================================= */
/* =========================================================
PAGE-CONSULT-01A — Compact Hero
Purpose: Styles the top intro band for the consultation page.
Layout decision:
The hero uses the same visual content rail as the help/form
section below. The background illustration is positioned
as a supporting visual above the form column.
Important:
The illustration is applied as a Kadence background image
on this Row Layout. Pseudo-element overlays sit on top of
background images, so do not use ::after to tint the image
area unless intentionally fading the image itself.
========================================================= */
.intec-page-hero.consult-hero {
position: relative;
overflow: hidden;
background-color: #F6F9FD;
background-repeat: no-repeat !important;
/* Hero image control:
- 28% keeps the image supportive, not dominant.
- 72% aligns it visually above the form column.
- calc(50% - 14px) lifts it slightly upward. */
background-size: 38% auto !important;
background-position: 82% calc(50% - 14px) !important;
border-bottom: 1px solid rgba(0, 31, 177, 0.10);
}
/* Hero image readability overlay
Purpose: Protects the text side of the hero only.
Keep the right side very light so the image stays crisp. */
.intec-page-hero.consult-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(246, 249, 253, 1) 0%,
rgba(246, 249, 253, 0.98) 36%,
rgba(246, 249, 253, 0.68) 54%,
rgba(246, 249, 253, 0.06) 72%,
rgba(246, 249, 253, 0) 100%
);
pointer-events: none;
z-index: 0;
}
/* Hero content rail:
Matches the main consultation section rail. This gives the
hero a visible page system even though the background band
itself remains full width. */
.intec-page-hero.consult-hero > .kt-row-column-wrap {
position: relative;
z-index: 1;
width: calc(100% - 64px);
max-width: 1180px;
margin-left: auto;
margin-right: auto;
padding: 38px 0 30px !important;
min-height: 0 !important;
}
/* Hero copy width */
.consult-hero-copy {
max-width: 620px;
}
/* Hero eyebrow */
.consult-hero-eyebrow {
margin: 0 0 10px 0 !important;
color: #00A83B;
font-size: 13px;
line-height: 1.2;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
/* Compact hero title */
.consult-hero-title {
max-width: 620px;
margin: 0 0 14px 0 !important;
color: #001FB1;
font-size: clamp(34px, 3vw, 44px);
line-height: 1.08;
font-weight: 700;
letter-spacing: -0.025em;
}
/* Compact hero subtitle */
.consult-hero-subtitle {
max-width: 560px;
margin: 0 !important;
color: #10213f;
font-size: 18px;
line-height: 1.45;
font-weight: 400;
}
/* =========================================================
PAGE-CONSULT-01A-R — Compact Hero Responsive
Purpose: Adjusts hero image position, overlay, typography,
and content rail spacing by breakpoint.
========================================================= */
@media (max-width: 1024px) {
.intec-page-hero.consult-hero {
background-size: 36% auto !important;
background-position: right 24px center !important;
}
.intec-page-hero.consult-hero > .kt-row-column-wrap {
width: calc(100% - 56px);
padding: 34px 0 28px !important;
}
.consult-hero-title {
font-size: clamp(32px, 4.2vw, 42px);
line-height: 1.08;
}
.consult-hero-subtitle {
font-size: 17.5px;
line-height: 1.45;
}
}
@media (max-width: 767px) {
.intec-page-hero.consult-hero {
background-size: 82% auto !important;
background-position: 120% 96% !important;
}
.intec-page-hero.consult-hero::before {
background: linear-gradient(
180deg,
rgba(246, 249, 253, 1) 0%,
rgba(246, 249, 253, 0.98) 58%,
rgba(246, 249, 253, 0.82) 100%
);
}
.intec-page-hero.consult-hero > .kt-row-column-wrap {
width: calc(100% - 40px);
padding: 34px 0 28px !important;
}
.consult-hero-copy {
max-width: 100%;
}
.consult-hero-eyebrow {
font-size: 12px;
margin-bottom: 10px !important;
}
.consult-hero-title {
font-size: 34px;
line-height: 1.1;
margin-bottom: 13px !important;
}
.consult-hero-subtitle {
font-size: 17px;
line-height: 1.45;
}
}
/* =========================================================
PAGE-CONSULT-01B — Main Consultation Section Layout
Purpose: Controls the section immediately below the hero.
Layout decision:
The help/form section uses the same 1180px content rail as
the hero. This creates the same kind of page boundary system
that works well on the Services page.
========================================================= */
.intec-consult-main.consult-main {
background: #eef4fb;
padding: 10px 0 64px;
}
.intec-consult-main.consult-main > .kt-row-column-wrap {
width: calc(100% - 64px);
max-width: 1180px;
margin-left: auto;
margin-right: auto;
align-items: flex-start;
column-gap: 42px;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* =========================================================
PAGE-CONSULT-01C — Left Support Panel
Purpose: Keeps the "How the consultation can help" area
visually quieter than the form while still polished.
========================================================= */
.consult-support-card {
background: transparent;
padding: 30px 4px 12px 0;
}
.consult-support-title {
margin: 0 0 14px 0 !important;
color: #081f4d;
font-size: 24px;
line-height: 1.18;
font-weight: 750;
letter-spacing: -0.02em;
}
.consult-support-intro {
margin: 0 0 24px 0 !important;
color: #253a59;
font-size: 15.5px;
line-height: 1.55;
}
/* Support option rows */
.consult-help-item {
position: relative;
margin: 0 0 16px 0 !important;
padding: 0 0 16px 22px;
color: #253a59;
font-size: 15px;
line-height: 1.5;
border-bottom: 1px solid rgba(0, 31, 177, 0.12);
}
.consult-help-item-last {
border-bottom: 0;
margin-bottom: 20px !important;
padding-bottom: 0;
}
.consult-help-item::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 9px;
height: 9px;
border-radius: 999px;
background: #00A83B;
box-shadow: 0 0 0 4px rgba(0, 168, 59, 0.10);
}
.consult-help-item strong {
display: block;
margin-bottom: 3px;
color: #001FB1;
font-weight: 700;
}
/* No-cost trust note */
.consult-trust-chip {
position: relative;
display: flex;
align-items: center;
gap: 10px;
max-width: 320px;
margin-top: 8px !important;
padding: 11px 14px 11px 42px;
color: #081f4d;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(0, 31, 177, 0.13);
border-radius: 12px;
font-size: 14px;
line-height: 1.35;
font-weight: 700;
box-shadow: 0 8px 20px rgba(0, 31, 177, 0.05);
}
.consult-trust-chip::before {
content: "✓";
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
color: #00A83B;
background: rgba(0, 168, 59, 0.08);
border: 1px solid rgba(0, 168, 59, 0.35);
font-size: 12px;
font-weight: 800;
}
/* =========================================================
PAGE-CONSULT-01D — Right Form Card Shell
Purpose: Styles the single visible consultation form card.
This class belongs on the right main column together with
consult-form-column. Do not apply it to nested rows.
========================================================= */
.consult-form-card {
position: relative;
background: #ffffff;
border: 1px solid rgba(0, 31, 177, 0.12);
border-radius: 18px;
box-shadow: 0 18px 42px rgba(0, 31, 177, 0.10);
padding: 20px 28px 18px;
overflow: hidden;
}
.consult-form-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #001FB1 0%, #00A83B 100%);
}
.consult-form-title {
margin: 0 0 6px 0 !important;
color: #001FB1;
font-size: 26px;
line-height: 1.16;
font-weight: 750;
letter-spacing: -0.02em;
}
.consult-form-intro {
margin: 0 0 14px 0 !important;
color: #253a59;
font-size: 15px;
line-height: 1.48;
}
/* =========================================================
PAGE-CONSULT-01E — Kadence Form Adv Tightening
Purpose: Kadence controls most form field styling.
This block tightens spacing, protects focus states,
styles the exact Kadence checkbox group, reinforces
the primary submit button, and styles form microcopy.
========================================================= */
.consult-form {
margin-top: 4px;
}
/* Tighten Kadence form row rhythm */
.consult-form .wp-block-kadence-rowlayout {
margin-bottom: 5px !important;
}
.consult-form .wp-block-kadence-column .kt-inside-inner-col {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.consult-form label,
.consult-form .kb-form-field-label {
margin-bottom: 3px !important;
}
/* Text/select fields only — do not affect checkboxes/radio */
.consult-form input:not([type="checkbox"]):not([type="radio"]),
.consult-form select {
min-height: 38px !important;
}
.consult-form textarea {
min-height: 74px !important;
}
/* Focus state: keep text/select/textarea fields visible without affecting checkboxes */
.consult-form input:not([type="checkbox"]):not([type="radio"]):focus,
.consult-form select:focus,
.consult-form textarea:focus,
.consult-form input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.consult-form select:focus-visible,
.consult-form textarea:focus-visible {
background-color: #ffffff !important;
border-color: #001FB1 !important;
box-shadow: 0 0 0 3px rgba(0, 31, 177, 0.10) !important;
outline: none !important;
}
/* Area(s) of Interest checkbox group — exact Kadence checkbox layout */
.consult-form .consult-interest-row {
margin: 0 0 12px 0 !important;
}
.consult-form .consult-interest-row .kt-inside-inner-col {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Exact Kadence checkbox fieldset */
.consult-form .consult-interest-row fieldset.kb-radio-check-item-wrap {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 24px !important;
row-gap: 5px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
/* Field label */
.consult-form .consult-interest-row fieldset.kb-radio-check-item-wrap > legend.kb-adv-form-label {
grid-column: 1 / -1 !important;
display: block !important;
margin: 0 0 7px 0 !important;
padding: 0 !important;
color: #10213f !important;
font-size: 13px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
}
/* Each checkbox option row */
.consult-form .consult-interest-row fieldset.kb-radio-check-item-wrap > .kb-radio-check-item {
display: flex !important;
align-items: center !important;
min-height: 18px !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
}
/* Checkbox square */
.consult-form .consult-interest-row fieldset.kb-radio-check-item-wrap input.kb-checkbox-style[type="checkbox"] {
flex: 0 0 auto !important;
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
min-height: 15px !important;
margin: 0 8px 0 0 !important;
accent-color: #001FB1;
}
/* Checkbox text */
.consult-form .consult-interest-row fieldset.kb-radio-check-item-wrap > .kb-radio-check-item > label {
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
color: #10213f !important;
font-size: 12.5px !important;
line-height: 1.25 !important;
font-weight: 650 !important;
}
/* Submit button — single clear CTA */
.consult-form button,
.consult-form input[type="submit"] {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 230px;
margin-top: 6px !important;
background: #001FB1 !important;
color: #ffffff !important;
border-radius: 9px !important;
font-weight: 700 !important;
box-shadow: none !important;
}
.consult-form button:hover,
.consult-form input[type="submit"]:hover {
background: #0021B9 !important;
}
/* Microcopy below submit button */
.consult-form-microcopy {
max-width: 620px;
margin: 8px 0 0 0 !important;
padding: 0 !important;
color: #53647d;
font-size: 12.5px;
line-height: 1.32;
font-weight: 500;
}
.consult-form-microcopy .consult-microcopy-line {
position: relative;
display: block;
margin: 0 !important;
padding-left: 20px;
}
.consult-form-microcopy .consult-microcopy-line + .consult-microcopy-line {
margin-top: 2px !important;
}
.consult-form-microcopy .consult-microcopy-line::before {
content: "✓";
position: absolute;
left: 0;
top: 1px;
color: #00A83B;
font-size: 13px;
line-height: 1;
font-weight: 800;
}
/* Mobile: stack interest options */
@media (max-width: 767px) {
.consult-form .consult-interest-row fieldset.kb-radio-check-item-wrap {
grid-template-columns: 1fr !important;
row-gap: 6px !important;
}
.consult-form button,
.consult-form input[type="submit"] {
width: 100%;
min-width: 0;
}
.consult-form-microcopy {
font-size: 12px;
}
}
/* =========================================================
PAGE-CONSULT-01F — Main Section Responsive Behavior
Purpose: Keeps the consultation section usable on tablet
and stacks form before support content on mobile.
========================================================= */
@media (max-width: 1024px) {
.intec-consult-main.consult-main {
padding: 30px 28px 60px;
}
.intec-consult-main.consult-main > .kt-row-column-wrap {
column-gap: 28px;
}
.consult-form-card {
padding: 22px 24px 20px;
}
}
@media (max-width: 767px) {
.intec-consult-main.consult-main {
padding: 30px 20px 48px;
}
.intec-consult-main.consult-main > .kt-row-column-wrap {
display: flex;
flex-direction: column;
gap: 28px;
}
.consult-form-column {
order: 1;
}
.consult-support-column {
order: 2;
}
.consult-form-card {
padding: 22px 18px 20px;
border-radius: 16px;
}
.consult-support-card {
padding: 4px 0 0;
}
.consult-support-title,
.consult-form-title {
font-size: 23px;
}
.consult-help-item {
margin-bottom: 20px !important;
}
.consult-form .wp-block-kadence-rowlayout {
margin-bottom: 12px !important;
}
}
/* =========================================================
PAGE-CONSULT-01X — Bounded Page Canvas Experiment
Purpose: Temporarily makes the Schedule Consultation page
behave more like the Services page by placing the hero and
main consultation section inside a centered visual canvas.
This creates clear left/right page boundaries:
- gray outer gutters
- centered content canvas
- hero and form section share the same page rail
Reversible:
Remove this entire block if we decide to keep the current
open landing-page layout.
========================================================= */
/* Bounded-canvas hero image tuning
Purpose: Because the hero is now inside a Services-style
page canvas, the image needs its own size/position values.
These override the base 01A background settings only for
the bounded-page experiment. */
article.post-696 .intec-page-hero.consult-hero {
background-size: 42% auto !important;
background-position: 84% calc(50% - 14px) !important;
}
/* Shared bounded canvas for hero and main consultation section */
article.post-696 .entry-content.single-content > .intec-page-hero.consult-hero,
article.post-696 .entry-content.single-content > .intec-consult-main.consult-main {
max-width: 1240px;
margin-left: auto;
margin-right: auto;
border-left: 1px solid rgba(0, 31, 177, 0.08);
border-right: 1px solid rgba(0, 31, 177, 0.08);
}
/* Keep hero image positioning relative to the bounded canvas,
not the full browser width. */
article.post-696 .intec-page-hero.consult-hero {
background-size: 38% auto !important;
background-position: 82% calc(50% - 14px) !important;
}
/* Keep main section visually connected to the bounded canvas */
article.post-696 .intec-consult-main.consult-main {
padding-top: 10px;
}
/* Tablet boundary behavior */
@media (max-width: 1024px) {
article.post-696 .entry-content.single-content {
padding-left: 28px;
padding-right: 28px;
}
article.post-696 .intec-page-hero.consult-hero {
background-size: 42% auto !important;
background-position: 92% calc(50% - 10px) !important;
}
}
/* Mobile: remove outer gutters so the page does not get squeezed */
@media (max-width: 767px) {
article.post-696 .entry-content.single-content {
padding-left: 0;
padding-right: 0;
}
article.post-696 .entry-content.single-content > .intec-page-hero.consult-hero,
article.post-696 .entry-content.single-content > .intec-consult-main.consult-main {
max-width: none;
border-left: 0;
border-right: 0;
}
}
/* =========================================================
PAGE-CONSULT-01X-D — Tablet Hero Copy Containment
Purpose: On tablet, prevent the hero headline from running
into the background illustration. The image stays in place;
only the text column is narrowed so the heading wraps cleanly.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
html body article.post-696 .intec-page-hero.consult-hero .consult-hero-copy {
max-width: 470px !important;
}
html body article.post-696 .consult-hero-title {
max-width: 460px !important;
font-size: clamp(36px, 4.4vw, 40px) !important;
line-height: 1.08 !important;
margin-bottom: 13px !important;
}
html body article.post-696 .consult-hero-subtitle {
max-width: 430px !important;
font-size: 17px !important;
line-height: 1.45 !important;
}
}
/* =========================================================
PAGE-CONSULT-01X-A — Bounded Canvas Hero Image Tuning
Purpose: Final hero image tuning for the Services-style
bounded consultation page canvas.
Notes:
- 55% keeps the image visually strong enough inside the
bounded canvas.
- 100% pushes the image to the right edge of the bounded
hero area.
- Vertical lift remains at -14px because that tested well.
========================================================= */
html body article.post-696 .entry-content.single-content > .intec-page-hero.consult-hero {
background-size: 50% auto !important;
background-position: 100% calc(50% - 14px) !important;
}
/* =========================================================
PAGE-CONSULT-01X-B — Form Touches Hero Boundary
Purpose: In the bounded Services-style canvas, move the
form card upward so its blue/green accent line touches the
hero section bottom boundary.
The main section top padding is removed, but the left support
content keeps breathing room so only the form feels connected
to the hero boundary.
========================================================= */
article.post-696 .intec-consult-main.consult-main {
padding-top: 0 !important;
}
article.post-696 .intec-consult-main.consult-main > .kt-row-column-wrap {
padding-top: 0 !important;
}
/* Keep form card flush with the top of the main section */
article.post-696 .consult-form-card {
margin-top: 0 !important;
}
/* Preserve breathing room for the left support column */
article.post-696 .consult-support-card {
padding-top: 28px !important;
}
/* =========================================================
PAGE-CONSULT-01X-C — Center Left Support Beside Form
Purpose: Keeps the form card locked to the hero boundary
while moving the left "How the consultation can help" panel
lower so it visually aligns with the vertical center of the
form card.
This affects only the bounded-canvas consultation experiment.
========================================================= */
/* Center the shorter left support column against the taller form column */
html body article.post-696 .entry-content.single-content > .intec-consult-main.consult-main > .kt-row-column-wrap {
align-items: center !important;
}
/* Remove earlier artificial top padding from the support card.
The row alignment now controls vertical placement. */
html body article.post-696 .consult-support-card {
padding-top: 0 !important;
}
/* =========================================================
INNER-PAGE-HERO-01 — Shared Inner Page Hero Standard
Purpose:
Standard hero system for normal inner pages such as About,
Industries, Insights, AI-Enabled Operations, Contact,
and future pages.
Visual standard:
- Bounded Services-style page canvas
- Soft Services-style hero rhythm
- Green eyebrow
- Blue title
- Green/blue divider under title
- Calm paragraph sizing
- Image applied as Kadence Row Layout background
Image standard:
- Shared background color: #FAFCFF
- Shared image sizing/positioning
- Shared overlay behavior
- Shared wrapper transparency
- Page-specific classes should identify the page and provide
only true exceptions, not standard image fitting.
========================================================= */
.intec-inner-hero {
position: relative;
overflow: hidden;
width: 1240px !important;
max-width: calc(100% - 80px) !important;
margin-left: auto !important;
margin-right: auto !important;
background-color: #FAFCFF !important;
background-repeat: no-repeat !important;
background-size: auto 100% !important;
background-position: 100% center !important;
border-left: 1px solid rgba(0, 31, 177, 0.08);
border-right: 1px solid rgba(0, 31, 177, 0.08);
border-bottom: 1px solid rgba(0, 31, 177, 0.10);
}
/* Shared readability overlay:
Matched to the light hero image canvas color. */
.intec-inner-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(250, 252, 255, 1) 0%,
rgba(250, 252, 255, 1) 34%,
rgba(250, 252, 255, 0.94) 44%,
rgba(250, 252, 255, 0.58) 55%,
rgba(250, 252, 255, 0.10) 70%,
rgba(250, 252, 255, 0) 100%
) !important;
pointer-events: none;
z-index: 0;
}
/* Shared lower seam softener:
Helps prevent visible lower-left image seams when hero images
start behind the text-safe area. */
.intec-inner-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(
ellipse at 50% 86%,
rgba(250, 252, 255, 0.44) 0%,
rgba(250, 252, 255, 0.32) 18%,
rgba(250, 252, 255, 0.14) 34%,
rgba(250, 252, 255, 0) 56%
),
linear-gradient(
90deg,
rgba(250, 252, 255, 0) 0%,
rgba(250, 252, 255, 0) 38%,
rgba(250, 252, 255, 0.34) 48%,
rgba(250, 252, 255, 0.14) 58%,
rgba(250, 252, 255, 0) 72%
);
}
/* Keep nested Kadence wrappers transparent so the hero canvas
color and background image remain visually continuous. */
.intec-inner-hero .kt-row-column-wrap,
.intec-inner-hero .kt-inside-inner-col,
.intec-inner-hero .intec-inner-hero-copy {
background: transparent !important;
}
/* Inner content rail:
1240px outer canvas minus 32px gives a tighter 16px
rail gutter on each side. */
.intec-inner-hero > .kt-row-column-wrap {
position: relative;
z-index: 1;
width: calc(100% - 32px) !important;
max-width: 1208px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 34px 0 30px !important;
min-height: 0 !important;
align-items: center !important;
}
/* Copy rail */
.intec-inner-hero-copy {
max-width: 560px !important;
margin-left: 0 !important;
margin-right: auto !important;
text-align: left !important;
}
/* Eyebrow */
.intec-inner-hero-eyebrow {
margin: 0 0 9px 0 !important;
padding: 0 !important;
color: #00A83B !important;
font-size: 13px !important;
line-height: 1.1 !important;
font-weight: 800 !important;
letter-spacing: 0.055em !important;
text-transform: uppercase !important;
}
/* Title */
.intec-inner-hero-title {
max-width: 560px !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
color: #001FB1 !important;
font-size: clamp(30px, 2.55vw, 38px) !important;
line-height: 1.08 !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
text-align: left !important;
}
.intec-inner-hero-title * {
color: #001FB1 !important;
font-weight: 700 !important;
line-height: 1.08 !important;
letter-spacing: -0.025em !important;
}
/* Divider */
.intec-inner-hero-divider {
width: 120px !important;
max-width: 120px !important;
height: 3px !important;
min-height: 3px !important;
margin: 0 0 10px 0 !important;
padding: 0 !important;
background: linear-gradient(90deg, #001FB1 0%, #16E316 100%) !important;
border: none !important;
border-radius: 999px !important;
display: block !important;
}
.intec-inner-hero-divider * {
width: 120px !important;
max-width: 120px !important;
height: 3px !important;
min-height: 3px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
/* Subtitle */
.intec-inner-hero-subtitle {
max-width: 560px !important;
margin: 0 !important;
padding: 0 !important;
color: #24324A !important;
font-size: 15.7px !important;
line-height: 1.32 !important;
font-weight: 400 !important;
text-align: left !important;
}
/* =========================================================
INNER-PAGE-HERO-01A — Page Identity Classes
Purpose:
Page-specific classes remain available for identity and
rare true exceptions. Do not place shared hero behavior here.
========================================================= */
/* About currently uses the shared standard. */
.intec-inner-hero.about-hero {}
/* Future page-specific image exceptions should be rare. */
.intec-inner-hero.industries-hero {}
.intec-inner-hero.aiops-hero {}
.intec-inner-hero.contact-hero {}
.intec-inner-hero.insights-hero {}
/* =========================================================
INNER-PAGE-HERO-01R — Responsive Behavior
Purpose:
Shared responsive behavior for inner-page hero sections.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.intec-inner-hero {
width: auto !important;
max-width: calc(100% - 48px) !important;
background-size: 84% 102% !important;
background-position: 118% center !important;
}
.intec-inner-hero > .kt-row-column-wrap {
width: calc(100% - 32px) !important;
max-width: 1208px !important;
padding: 34px 0 28px !important;
}
.intec-inner-hero-copy {
max-width: 470px !important;
margin-left: 0 !important;
}
.intec-inner-hero-title {
max-width: 460px !important;
font-size: clamp(30px, 4vw, 36px) !important;
line-height: 1.08 !important;
}
.intec-inner-hero-subtitle {
max-width: 430px !important;
font-size: 15.8px !important;
line-height: 1.45 !important;
}
}
@media (max-width: 767px) {
.intec-inner-hero {
position: relative !important;
overflow: hidden !important;
width: auto !important;
max-width: calc(100% - 32px) !important;
border-left: 0;
border-right: 0;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
}
/* =========================================================
INNER-PAGE-HERO — MOBILE TEXT READABILITY
Purpose:
Improves mobile inner-page hero readability without boxy text backgrounds.
Applies globally to shared inner-page heroes.
========================================================= */
@media (max-width: 767px) {
.intec-inner-hero h1,
.intec-inner-hero h2,
.intec-inner-hero h3,
.intec-inner-hero h4,
.intec-inner-hero h5,
.intec-inner-hero h6,
.intec-inner-hero .kt-adv-heading,
.intec-inner-hero .wp-block-kadence-advancedheading {
background: transparent !important;
padding: 0 !important;
box-decoration-break: initial;
-webkit-box-decoration-break: initial;
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.88),
0 0 8px rgba(246, 249, 253, 0.82),
0 0 14px rgba(246, 249, 253, 0.62);
}
.intec-inner-hero p {
background: transparent !important;
padding: 0 !important;
box-decoration-break: initial;
-webkit-box-decoration-break: initial;
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.62),
0 0 6px rgba(246, 249, 253, 0.58);
}
}
/* =========================================================
ABOUT-01 — Founder and Advisory Model Section
Purpose:
First content section under the About hero.
Builds the founder credibility card and the advisory model card.
========================================================= */
.about-main {
width: 1240px !important;
max-width: calc(100% - 80px) !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 32px 0 32px !important;
background: #EEF4FB !important;
}
/* Keep the row content aligned with the hero canvas */
.about-main > .kt-row-column-wrap {
width: 100% !important;
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
align-items: stretch !important;
}
/* Shared card shells */
.about-founder-card > .kt-inside-inner-col,
.about-model-card > .kt-inside-inner-col {
height: 100% !important;
background: #FFFFFF !important;
border: 1px solid rgba(0, 31, 177, 0.14) !important;
border-radius: 12px !important;
box-shadow: 0 10px 24px rgba(0, 31, 177, 0.045) !important;
}
/* Founder card */
.about-founder-card > .kt-inside-inner-col {
position: relative;
padding: 28px 28px 24px 30px !important;
border-left: 6px solid #00A83B !important;
}
/* Advisory model card */
.about-model-card > .kt-inside-inner-col {
padding: 28px 30px 24px !important;
}
/* Shared eyebrow */
.about-section-eyebrow {
margin: 0 0 18px 0 !important;
color: #00A83B !important;
font-size: 12px !important;
line-height: 1.1 !important;
font-weight: 800 !important;
letter-spacing: 0.055em !important;
text-transform: uppercase !important;
}
/* Founder typography */
.about-founder-name {
margin: 0 0 2px 0 !important;
color: #001FB1 !important;
font-size: 24px !important;
line-height: 1.12 !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
}
.about-founder-role {
margin: 0 0 18px 0 !important;
color: #01041A !important;
font-size: 15px !important;
line-height: 1.25 !important;
font-weight: 800 !important;
}
.about-founder-copy {
margin: 0 0 18px 0 !important;
color: #24324A !important;
font-size: 15.5px !important;
line-height: 1.42 !important;
font-weight: 400 !important;
}
.about-founder-certs {
margin: 0 !important;
color: #001FB1 !important;
font-size: 13px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
}
/* Model typography */
.about-model-title {
margin: 0 0 8px 0 !important;
color: #001FB1 !important;
font-size: 26px !important;
line-height: 1.16 !important;
font-weight: 800 !important;
letter-spacing: -0.025em !important;
}
.about-model-copy {
max-width: 780px !important;
margin: 0 0 34px 0 !important;
color: #24324A !important;
font-size: 15.5px !important;
line-height: 1.38 !important;
font-weight: 400 !important;
}
/* Advisory step row */
.about-model-steps {
position: relative;
margin-top: 6px !important;
}
/* Connector line behind the numbered circles */
.about-model-steps::before {
content: "";
position: absolute;
left: 5%;
right: 5%;
top: 13px;
height: 2px;
background: rgba(0, 31, 177, 0.22);
z-index: 0;
}
/* Keep step content above connector line */
.about-model-steps > .kt-row-column-wrap {
position: relative;
z-index: 1;
align-items: flex-start !important;
}
/* Individual step */
.about-model-step > .kt-inside-inner-col {
position: relative;
background: transparent !important;
padding: 0 12px 0 0 !important;
}
/* Step number circle */
.about-step-number {
width: 26px !important;
height: 26px !important;
min-width: 26px !important;
margin: 0 0 10px 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #001FB1 !important;
color: #FFFFFF !important;
border-radius: 999px !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: 0 !important;
box-shadow: 0 0 0 4px #FFFFFF !important;
}
.about-step-title {
margin: 0 0 7px 0 !important;
color: #001FB1 !important;
font-size: 15px !important;
line-height: 1.15 !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
.about-step-copy {
margin: 0 !important;
color: #24324A !important;
font-size: 12.5px !important;
line-height: 1.32 !important;
font-weight: 400 !important;
}
/* =========================================================
ABOUT-01R — Founder and Advisory Model Responsive
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.about-main {
width: auto !important;
max-width: calc(100% - 48px) !important;
padding: 28px 0 30px !important;
}
.about-main > .kt-row-column-wrap {
row-gap: 22px !important;
}
.about-founder-card > .kt-inside-inner-col,
.about-model-card > .kt-inside-inner-col {
padding-top: 26px !important;
padding-bottom: 24px !important;
}
.about-model-title {
font-size: 24px !important;
}
.about-model-copy {
max-width: 100% !important;
margin-bottom: 28px !important;
}
.about-model-steps::before {
display: none !important;
}
.about-model-step > .kt-inside-inner-col {
padding: 0 8px 16px 0 !important;
}
}
@media (max-width: 767px) {
.about-main {
width: auto !important;
max-width: calc(100% - 32px) !important;
padding: 24px 0 28px !important;
}
.about-main > .kt-row-column-wrap {
row-gap: 18px !important;
}
.about-founder-card > .kt-inside-inner-col {
padding: 24px 22px 22px 24px !important;
border-left-width: 5px !important;
}
.about-model-card > .kt-inside-inner-col {
padding: 24px 22px 22px !important;
}
.about-section-eyebrow {
font-size: 11.5px !important;
margin-bottom: 15px !important;
}
.about-founder-name {
font-size: 23px !important;
}
.about-founder-copy {
font-size: 15px !important;
line-height: 1.42 !important;
}
.about-model-title {
font-size: 23px !important;
line-height: 1.18 !important;
}
.about-model-copy {
font-size: 15px !important;
line-height: 1.42 !important;
margin-bottom: 22px !important;
}
.about-model-steps::before {
display: none !important;
}
.about-model-steps > .kt-row-column-wrap {
row-gap: 18px !important;
}
.about-model-step > .kt-inside-inner-col {
padding: 0 !important;
}
.about-step-number {
margin-bottom: 7px !important;
}
.about-step-title {
font-size: 15px !important;
margin-bottom: 5px !important;
}
.about-step-copy {
font-size: 13px !important;
line-height: 1.36 !important;
}
}
/* =========================================================
ABOUT-01A — Founder / Advisory Model Tightening
Purpose:
Refines first About body section after desktop review.
- Pulls body closer to hero
- Reduces card gap and card height
- Tightens model step spacing
- Balances founder typography with model heading
========================================================= */
/* Pull the body section closer to the hero */
.about-main {
margin-top: 10px !important;
padding: 0 0 10px !important;
}
/* Reduce horizontal gap between the two cards */
.about-main > .kt-row-column-wrap {
width: 100% !important;
max-width: 1240px !important;
column-gap: 10px !important;
gap: 10px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
grid-template-columns: minmax(0, 37fr) minmax(0, 63fr) !important;
}
.about-founder-card,
.about-model-card {
width: 100% !important;
max-width: none !important;
}
.about-founder-card > .kt-inside-inner-col,
.about-model-card > .kt-inside-inner-col {
width: 100% !important;
max-width: none !important;
}
.about-main .kt-row-column-wrap {
margin-top: 0 !important;
}
/* Reduce card internal height */
.about-founder-card > .kt-inside-inner-col {
padding: 24px 26px 22px 28px !important;
}
.about-model-card > .kt-inside-inner-col {
padding: 24px 28px 22px !important;
}
/* Tighten eyebrow spacing inside both cards */
.about-section-eyebrow {
margin-bottom: 14px !important;
}
/* Founder typography balance */
.about-founder-name {
font-weight: 700 !important;
font-size: 25px !important;
line-height: 1.1 !important;
}
.about-founder-role {
font-weight: 600 !important;
margin-bottom: 18px !important;
}
/* Slightly reduce left card paragraph height */
.about-founder-copy {
margin-bottom: 16px !important;
line-height: 1.38 !important;
}
/* Right card heading stays strong but slightly tighter */
.about-model-title {
margin-bottom: 8px !important;
line-height: 1.12 !important;
}
/* Reduce vertical distance between intro paragraph and steps */
.about-model-copy {
margin-bottom: 20px !important;
line-height: 1.34 !important;
}
/* Remove extra row spacing from the step row */
.about-model-steps {
margin-top: 0 !important;
padding-top: 0 !important;
}
.about-model-steps > .kt-row-column-wrap {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Bring the connector/number row slightly higher and tighter */
.about-model-steps::before {
top: 13px !important;
}
/* Tighten step text */
.about-step-number {
margin-bottom: 9px !important;
background: #00A83B !important;
}
.about-step-title {
margin-bottom: 5px !important;
}
.about-step-copy {
line-height: 1.28 !important;
}
/* =========================================================
ABOUT-02 — Operating Principles Bar
Purpose:
Bounded blue principles bar under the About founder/model section.
Five compact principle units with founder-style green left accents.
========================================================= */
.about-principles {
position: relative !important;
width: 1240px !important;
max-width: calc(100% - 80px) !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 12px 0 !important;
background: #001FB1 !important;
border-radius: 12px !important;
overflow: hidden !important;
}
.about-principles::before {
content: "OPERATING PRINCIPLES";
display: block;
width: calc(100% - 40px);
max-width: 1200px;
margin: 0 auto 12px auto;
padding-left: 14px;
box-sizing: border-box;
color: #00A83B;
font-size: 15px;
line-height: 1.15;
font-weight: 700;
letter-spacing: 0.045em;
text-transform: uppercase;
}
/* Inner rail */
.about-principles > .kt-row-column-wrap {
width: calc(100% - 40px) !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
align-items: stretch !important;
column-gap: 14px !important;
gap: 14px !important;
min-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.about-principles,
.about-principles .kt-row-column-wrap,
.about-principles .wp-block-kadence-column,
.about-principles .kt-inside-inner-col {
min-height: 0 !important;
}
/* Principle item shell:
Uses the same accent logic as the Founder card:
a rounded invisible item with only the left border visible. */
.about-principle-item > .kt-inside-inner-col {
height: 100% !important;
padding: 2px 0 2px 14px !important;
background: transparent !important;
border: 1px solid transparent !important;
border-left: 5px solid #00A83B !important;
border-radius: 10px !important;
box-sizing: border-box !important;
}
/* Principle title */
.about-principle-title {
margin: 0 0 3px 0 !important;
color: #FFFFFF !important;
font-size: 15px !important;
line-height: 1.15 !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
/* Principle supporting text */
.about-principle-copy {
margin: 0 !important;
color: rgba(255, 255, 255, 0.82) !important;
font-size: 12.5px !important;
line-height: 1.32 !important;
font-weight: 400 !important;
}
/* =========================================================
ABOUT-03 — Closing Bridge / CTA
Purpose:
Compact closing section between the About content and footer.
White bounded bar with CTA button matching header button specs.
========================================================= */
.about-close {
width: 1240px !important;
max-width: calc(100% - 80px) !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 10px !important;
margin-bottom: 10px !important;
padding: 0 0 !important;
background: #FFFFFF !important;
border: 1px solid rgba(0, 31, 177, 0.10) !important;
border-radius: 10px !important;
}
/* Use the full closing bar width.
Left content keeps a 24px rail.
Button aligns to the far right rail. */
.about-close > .kt-row-column-wrap {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 24px !important;
padding-right: 0px !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 230.781px !important;
align-items: center !important;
column-gap: 24px !important;
gap: 24px !important;
background: transparent !important;
}
/* Keep Kadence inner wrappers from adding visual color */
.about-close .kt-inside-inner-col {
background: transparent !important;
}
.about-close-title {
margin: 0 0 3px 0 !important;
color: #001FB1 !important;
font-size: 21px !important;
line-height: 1.18 !important;
font-weight: 750 !important;
letter-spacing: -0.015em !important;
}
.about-close-text {
max-width: 760px !important;
margin: 0 !important;
color: #24324A !important;
font-size: 14.5px !important;
line-height: 1.36 !important;
font-weight: 400 !important;
}
/* CTA column */
.about-close-action,
.about-close-action > .kt-inside-inner-col {
width: 230.781px !important;
max-width: 230.781px !important;
justify-self: end !important;
}
.about-close-action > .kt-inside-inner-col {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
}
/* Remove extra spacing around Kadence button wrapper */
.about-close-action .wp-block-kadence-advancedbtn,
.about-close-action .kb-buttons-wrap {
width: 230.781px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
justify-content: flex-end !important;
}
/* About closing CTA button — match header Schedule button size/type */
.about-close-action .kb-button,
.about-close-action .kt-button,
.about-close-action a.kb-button,
.about-close-action a.kt-button {
width: 230.781px !important;
min-width: 230.781px !important;
max-width: 230.781px !important;
height: 43.1719px !important;
min-height: 43.1719px !important;
max-height: 43.1719px !important;
padding: 7.2px 18px !important;
box-sizing: border-box !important;
display: inline-block !important;
background: #00A83B !important;
color: #FFFFFF !important;
border: none !important;
border-radius: 6px !important;
font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
font-size: 18px !important;
line-height: 28.8px !important;
font-weight: 400 !important;
text-align: center !important;
text-decoration: none !important;
box-shadow: none !important;
}
.about-close-action .kb-button:hover,
.about-close-action .kt-button:hover,
.about-close-action a.kb-button:hover,
.about-close-action a.kt-button:hover {
background: #008F32 !important;
color: #FFFFFF !important;
}
/* =========================================================
ABOUT-04T — About Tablet Refinements
Purpose:
Tablet-only fixes after iPad Pro review.
- Keeps founder eyebrow on one line
- Restores advisory step connector line on tablet
- Aligns step body text when headings wrap
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.about-principles,
.about-close {
width: auto !important;
max-width: calc(100% - 48px) !important;
}
}
/* Restore connector line between step circles on tablet */
.about-model-steps::before {
display: block !important;
left: 5% !important;
right: 5% !important;
top: 13px !important;
height: 2px !important;
background: rgba(0, 31, 177, 0.22) !important;
z-index: 0 !important;
}
.about-model-steps > .kt-row-column-wrap {
position: relative !important;
z-index: 1 !important;
}
/* Align body copy under wrapped and non-wrapped step titles */
.about-step-title {
min-height: 34px !important;
display: block !important;
margin-bottom: 5px !important;
}
.about-step-copy {
font-size: 12.3px !important;
line-height: 1.28 !important;
}
/* =========================================================
ABOUT-04M — About Mobile Refinements
Purpose:
Mobile-only fixes for About body sections.
- Stack Founder and Advisory Model cards
- Convert advisory steps to a readable 2x2 layout
- Stack closing CTA cleanly
========================================================= */
@media (max-width: 767px) {
/* Main About body section */
.about-main {
width: auto !important;
max-width: calc(100% - 32px) !important;
margin-top: 10px !important;
padding: 0 0 10px !important;
}
.about-main > .kt-row-column-wrap {
width: 100% !important;
max-width: none !important;
display: grid !important;
grid-template-columns: 1fr !important;
column-gap: 0 !important;
gap: 10px !important;
}
.about-founder-card,
.about-model-card,
.about-founder-card > .kt-inside-inner-col,
.about-model-card > .kt-inside-inner-col {
width: 100% !important;
max-width: none !important;
}
.about-founder-card > .kt-inside-inner-col,
.about-model-card > .kt-inside-inner-col {
padding: 24px 22px 22px !important;
}
.about-founder-card > .kt-inside-inner-col {
border-left-width: 5px !important;
}
/* Allow founder eyebrow to wrap naturally on mobile */
.about-founder-card .about-section-eyebrow {
white-space: normal !important;
}
.about-model-title {
font-size: 23px !important;
line-height: 1.18 !important;
}
.about-model-copy {
margin-bottom: 22px !important;
}
/* Advisory steps: 2x2 on mobile */
.about-model-steps::before {
display: none !important;
}
.about-model-steps > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
column-gap: 18px !important;
row-gap: 18px !important;
}
.about-model-step > .kt-inside-inner-col {
padding: 0 !important;
}
.about-step-title {
min-height: 0 !important;
}
/* Closing CTA section */
.about-close {
width: auto !important;
max-width: calc(100% - 32px) !important;
margin-top: 10px !important;
margin-bottom: 10px !important;
padding: 18px 0 !important;
}
.about-close > .kt-row-column-wrap {
width: calc(100% - 40px) !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
display: grid !important;
grid-template-columns: 1fr !important;
row-gap: 16px !important;
}
.about-close-title {
font-size: 20px !important;
line-height: 1.2 !important;
margin: 0 0 5px 0 !important;
}
.about-close-text {
max-width: 100% !important;
font-size: 14.5px !important;
line-height: 1.36 !important;
}
.about-close-action,
.about-close-action > .kt-inside-inner-col {
width: 100% !important;
max-width: none !important;
}
.about-close-action > .kt-inside-inner-col,
.about-close-action .wp-block-kadence-advancedbtn,
.about-close-action .kb-buttons-wrap {
width: 100% !important;
display: flex !important;
justify-content: flex-start !important;
}
.about-close-action .kb-button,
.about-close-action .kt-button,
.about-close-action a.kb-button,
.about-close-action a.kt-button {
width: 230.781px !important;
min-width: 230.781px !important;
max-width: 230.781px !important;
}
}
/* =========================================================
CONTACT-01A — Contact Hero Image Position / Height
Purpose:
Contact-specific hero tuning only.
Keeps the shared inner hero standard intact.
========================================================= */
.intec-inner-hero.contact-hero {
min-height: 292px !important;
background-size: 100% auto !important;
background-position: 100% center !important;
}
.intec-inner-hero.contact-hero > .kt-row-column-wrap {
min-height: 292px !important;
align-items: center !important;
}
/* =========================================================
CONTACT-02 — Main Contact / Message Section
Purpose:
Two-card contact section under the Contact hero.
Left card provides contact pathways.
Right card holds the message form.
Notes:
Column split is controlled in Kadence, not CSS.
Current recommended Kadence split: 45 / 55.
========================================================= */
.contact-main {
width: 1240px !important;
max-width: calc(100% - 80px) !important;
margin: -14px auto 0 !important;
padding: 0 0 10px !important;
background: transparent !important;
}
.contact-main > .kt-row-column-wrap {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
display: grid !important;
grid-template-columns: minmax(0, 45fr) minmax(0, 55fr) !important;
align-items: stretch !important;
column-gap: 10px !important;
gap: 10px !important;
}
/* Shared card shells */
.intec-info-card > .kt-inside-inner-col,
.intec-form-card > .kt-inside-inner-col {
height: 100% !important;
background: #FFFFFF !important;
border: 1px solid rgba(0, 31, 177, 0.12) !important;
border-radius: 12px !important;
box-shadow: 0 10px 24px rgba(0, 31, 177, 0.045) !important;
}
/* Left info card */
.contact-info-card > .kt-inside-inner-col {
display: flex !important;
flex-direction: column !important;
row-gap: 0 !important;
padding: 40px 26px 24px !important;
border-left: 6px solid #00A83B !important;
}
/* Right form card */
.contact-form-card > .kt-inside-inner-col {
padding: 44px 28px 24px !important;
}
/* Repeating contact rows
Row padding controls spacing above and below each divider.
Parent row-gap stays at 0 so dividers do not float awkwardly.
*/
.intec-contact-row {
position: relative !important;
padding: 11px 0 !important;
border-top: 1px solid rgba(0, 31, 177, 0.10) !important;
}
/* Lead row */
.contact-lead-row {
padding-top: 0 !important;
padding-bottom: 14px !important;
margin-bottom: 8px !important;
border-top: none !important;
}
/* Lead row */
.contact-lead-row {
padding-top: 0 !important;
padding-bottom: 5px !important;
border-top: none !important;
}
/* Row inner alignment */
.intec-contact-row > .kt-row-column-wrap {
align-items: center !important;
column-gap: 14px !important;
gap: 14px !important;
}
/* Tighten nested Kadence wrappers inside contact rows */
.intec-contact-row > .kt-row-column-wrap,
.intec-contact-row .wp-block-kadence-column,
.intec-contact-row .kt-inside-inner-col {
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-block-start: 0 !important;
margin-block-end: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
min-height: 0 !important;
}
/* Force Kadence columns inside each contact row to center */
.intec-contact-row > .kt-row-column-wrap > .wp-block-kadence-column {
align-self: center !important;
}
/* Icon columns */
.intec-contact-row-icon,
.intec-card-lead-icon,
.contact-info-icon,
.contact-card-lead-icon {
align-self: center !important;
}
.intec-contact-row-icon > .kt-inside-inner-col,
.intec-card-lead-icon > .kt-inside-inner-col,
.contact-info-icon > .kt-inside-inner-col,
.contact-card-lead-icon > .kt-inside-inner-col {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
/* Text columns */
.intec-contact-row-copy,
.intec-card-lead-copy,
.contact-info-copy,
.contact-card-lead-copy {
align-self: center !important;
}
.intec-contact-row-copy > .kt-inside-inner-col,
.intec-card-lead-copy > .kt-inside-inner-col,
.contact-info-copy > .kt-inside-inner-col,
.contact-card-lead-copy > .kt-inside-inner-col {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
/* =========================================================
Contact card icon sizing
Purpose:
Enforce fixed mathematical circle and icon sizes.
Only the lead row is larger.
========================================================= */
.contact-info-card {
--contact-icon-circle: 42px;
--contact-icon-image: 22px;
--contact-lead-icon-circle: 46px;
--contact-lead-icon-image: 28px;
}
/* Icon circle container */
.contact-card-icon {
width: var(--contact-icon-circle) !important;
height: var(--contact-icon-circle) !important;
min-width: var(--contact-icon-circle) !important;
max-width: var(--contact-icon-circle) !important;
min-height: var(--contact-icon-circle) !important;
max-height: var(--contact-icon-circle) !important;
aspect-ratio: 1 / 1 !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 999px !important;
background: rgba(0, 168, 59, 0.10) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Reset Kadence image wrapper behavior inside icon circle */
.contact-card-icon figure,
.contact-card-icon .kb-image,
.contact-card-icon .kb-img,
.contact-card-icon picture {
width: var(--contact-icon-image) !important;
height: var(--contact-icon-image) !important;
max-width: var(--contact-icon-image) !important;
max-height: var(--contact-icon-image) !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
/* Actual image inside icon circle */
.contact-card-icon img {
width: var(--contact-icon-image) !important;
height: var(--contact-icon-image) !important;
max-width: var(--contact-icon-image) !important;
max-height: var(--contact-icon-image) !important;
object-fit: contain !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
/* Lead row circle and icon only */
.contact-lead-row .contact-card-icon {
width: var(--contact-lead-icon-circle) !important;
height: var(--contact-lead-icon-circle) !important;
min-width: var(--contact-lead-icon-circle) !important;
max-width: var(--contact-lead-icon-circle) !important;
min-height: var(--contact-lead-icon-circle) !important;
max-height: var(--contact-lead-icon-circle) !important;
}
.contact-lead-row .contact-card-icon figure,
.contact-lead-row .contact-card-icon .kb-image,
.contact-lead-row .contact-card-icon .kb-img,
.contact-lead-row .contact-card-icon picture,
.contact-lead-row .contact-card-icon img {
width: var(--contact-lead-icon-image) !important;
height: var(--contact-lead-icon-image) !important;
max-width: var(--contact-lead-icon-image) !important;
max-height: var(--contact-lead-icon-image) !important;
}
/* Standard row titles */
.contact-card-title {
margin: 0 0 5px 0 !important;
color: #001FB1 !important;
font-size: 16px !important;
line-height: 1.18 !important;
font-weight: 750 !important;
letter-spacing: -0.01em !important;
}
/* Lead row title */
.contact-lead-row .contact-card-title {
margin-bottom: 6px !important;
font-size: 20.5px !important;
line-height: 1.16 !important;
font-weight: 750 !important;
letter-spacing: -0.015em !important;
}
/* Standard row copy */
.contact-card-copy {
margin: 0 !important;
color: #24324A !important;
font-size: 14px !important;
line-height: 1.34 !important;
font-weight: 400 !important;
}
/* Lead row copy */
.contact-lead-row .contact-card-copy {
font-size: 14.5px !important;
line-height: 1.38 !important;
}
/* =========================================================
CONTACT-03 — Contact Form Field Styling
Purpose:
Style the visible form controls and normalize spacing
inside the saved Kadence Advanced Form.
Root cause:
The saved Kadence Advanced Form adds parent-level gap/row-gap.
We zero that parent gap first, then create our own controlled
spacing between the direct form rows.
========================================================= */
/* Form title */
.contact-form-card .contact-card-title {
margin-bottom: 20px !important;
font-size: 18px !important;
line-height: 1.2 !important;
font-weight: 750 !important;
letter-spacing: -0.01em !important;
}
/* Form parent reset */
#kb-adv-form-3202-cpt-id {
display: block !important;
gap: 0 !important;
row-gap: 0 !important;
column-gap: 0 !important;
}
/* Reset direct form children */
#kb-adv-form-3202-cpt-id > .kb-row-layout-wrap,
#kb-adv-form-3202-cpt-id > .kb-adv-form-field,
#kb-adv-form-3202-cpt-id > .contact-form-note {
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-block-start: 0 !important;
margin-block-end: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Reset nested Kadence wrappers inside the form rows */
#kb-adv-form-3202-cpt-id > .kb-row-layout-wrap > .kt-row-column-wrap,
#kb-adv-form-3202-cpt-id .wp-block-kadence-column,
#kb-adv-form-3202-cpt-id .kt-inside-inner-col,
#kb-adv-form-3202-cpt-id .kb-adv-form-field {
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-block-start: 0 !important;
margin-block-end: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
row-gap: 0 !important;
min-height: 0 !important;
}
/* Controlled field-to-field gap */
#kb-adv-form-3202-cpt-id > .kb-row-layout-wrap:not(:first-child),
#kb-adv-form-3202-cpt-id > .kb-adv-form-field:not(.kb-submit-field) {
margin-top: 10px !important;
margin-block-start: 10px !important;
}
/* White input fields */
#kb-adv-form-3202-cpt-id input,
#kb-adv-form-3202-cpt-id select,
#kb-adv-form-3202-cpt-id textarea {
width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
background: #FFFFFF !important;
border: 1px solid rgba(0, 31, 177, 0.22) !important;
border-radius: 6px !important;
color: #17213A !important;
font-size: 14px !important;
line-height: 1.3 !important;
box-shadow: none !important;
}
/* Field heights */
#kb-adv-form-3202-cpt-id input,
#kb-adv-form-3202-cpt-id select {
min-height: 40px !important;
padding: 8px 10px !important;
}
#kb-adv-form-3202-cpt-id textarea {
min-height: 92px !important;
padding: 10px 10px !important;
resize: vertical !important;
}
/* Placeholder color */
#kb-adv-form-3202-cpt-id input::placeholder,
#kb-adv-form-3202-cpt-id textarea::placeholder {
color: rgba(23, 33, 58, 0.48) !important;
opacity: 1 !important;
}
/* Focus state */
#kb-adv-form-3202-cpt-id input:focus,
#kb-adv-form-3202-cpt-id select:focus,
#kb-adv-form-3202-cpt-id textarea:focus {
background: #FFFFFF !important;
border-color: #001FB1 !important;
box-shadow: 0 0 0 3px rgba(0, 31, 177, 0.12) !important;
outline: none !important;
}
/* Security note */
#kb-adv-form-3202-cpt-id > .contact-form-note {
position: relative !important;
margin-top: 10px !important;
margin-bottom: 14px !important;
margin-block-start: 10px !important;
margin-block-end: 14px !important;
padding-left: 22px !important;
color: #24324A !important;
font-size: 14px !important;
line-height: 1.35 !important;
}
#kb-adv-form-3202-cpt-id > .contact-form-note::before {
content: "🔒" !important;
position: absolute !important;
left: 0 !important;
top: 0.05em !important;
font-size: 13px !important;
line-height: 1 !important;
}
/* Full-width submit wrapper */
#kb-adv-form-3202-cpt-id > .kb-submit-field {
width: 100% !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-block-start: 0 !important;
margin-block-end: 0 !important;
}
/* Full-width submit button */
#kb-adv-form-3202-cpt-id button,
#kb-adv-form-3202-cpt-id .kb-button,
#kb-adv-form-3202-cpt-id input[type="submit"] {
width: 100% !important;
box-sizing: border-box !important;
min-height: 42px !important;
margin: 0 !important;
padding: 10px 20px !important;
background: #00A83B !important;
color: #FFFFFF !important;
border: none !important;
border-radius: 6px !important;
font-size: 15px !important;
line-height: 1 !important;
font-weight: 650 !important;
box-shadow: none !important;
}
#kb-adv-form-3202-cpt-id button:hover,
#kb-adv-form-3202-cpt-id .kb-button:hover,
#kb-adv-form-3202-cpt-id input[type="submit"]:hover {
background: #008F32 !important;
color: #FFFFFF !important;
}
/* =========================================================
CONTACT-04A — Guidance / FAQ Section Shell
Purpose:
Create the soft panel under the contact cards and style
the centered heading, divider, and intro copy.
========================================================= */
.contact-guidance {
width: 1240px !important;
max-width: calc(100% - 80px) !important;
margin: -24px auto 0 !important;
padding: 0 0 12px !important;
background: transparent !important;
}
.contact-guidance > .kt-row-column-wrap {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Main soft panel */
.contact-guidance-card > .kt-row-column-wrap,
.contact-guidance-card > .kt-inside-inner-col {
background: linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 100%) !important;
border: 1px solid rgba(0, 31, 177, 0.10) !important;
border-radius: 16px !important;
box-shadow: 0 10px 24px rgba(0, 31, 177, 0.045) !important;
padding: 26px 28px 28px !important;
}
/* Centered title */
.contact-guidance-title {
margin: 0 !important;
text-align: center !important;
color: #001FB1 !important;
font-size: 24px !important;
line-height: 1.18 !important;
font-weight: 750 !important;
letter-spacing: -0.015em !important;
}
/* Small centered divider */
.contact-guidance-divider {
width: 72px !important;
max-width: 72px !important;
height: 3px !important;
margin: 12px auto 12px !important;
background: linear-gradient(90deg, #00A83B 0%, #001FB1 100%) !important;
border: none !important;
border-radius: 999px !important;
}
/* Intro copy */
.contact-guidance-copy {
max-width: 680px !important;
margin: 0 auto 14px !important;
text-align: center !important;
color: #24324A !important;
font-size: 15px !important;
line-height: 1.45 !important;
}
/* =========================================================
CONTACT-04B — Guidance FAQ Cards
Purpose:
Style the three guidance cards under the section intro.
Card gap matches the rest of the Contact page: 10px.
========================================================= */
/* Three-card grid */
.contact-guidance-grid {
margin: 0 !important;
padding: 0 !important;
}
.contact-guidance-grid > .kt-row-column-wrap {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
column-gap: 10px !important;
gap: 10px !important;
align-items: stretch !important;
}
/* Remove extra Kadence spacing inside grid columns */
.contact-guidance-grid > .kt-row-column-wrap > .wp-block-kadence-column,
.contact-guidance-grid > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
}
/* Individual FAQ card shell */
.contact-guidance-item > .kt-row-column-wrap {
height: 140px !important;
min-height: 140px !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: 58px minmax(0, 1fr) !important;
grid-template-rows: minmax(0, 1fr) !important;
align-content: stretch !important;
align-items: stretch !important;
column-gap: 14px !important;
gap: 14px !important;
background: #FFFFFF !important;
border: 1px solid rgba(0, 31, 177, 0.12) !important;
border-radius: 12px !important;
box-shadow: 0 8px 20px rgba(0, 31, 177, 0.055) !important;
padding: 18px 18px !important;
}
/* Icon column:
The column stretches to the full card height.
Only the icon is vertically centered.
*/
.contact-guidance-item > .kt-row-column-wrap > .contact-guidance-icon-col {
align-self: stretch !important;
height: auto !important;
min-height: 0 !important;
}
.contact-guidance-icon-col > .kt-inside-inner-col {
height: 100% !important;
min-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Normalize icon image block */
.contact-guidance-icon-col figure,
.contact-guidance-icon-col .wp-block-kadence-image,
.contact-guidance-icon-col .kb-image,
.contact-guidance-icon-col .kb-image-ratio-size-contain,
.contact-guidance-icon-col img {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
/* Text column:
Text stays top-aligned so headings line up across all cards.
*/
.contact-guidance-item > .kt-row-column-wrap > .contact-guidance-text-col {
align-self: start !important;
height: auto !important;
min-height: 0 !important;
}
.contact-guidance-text-col > .kt-inside-inner-col {
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
}
/* FAQ question */
.contact-guidance-question {
margin: 0 0 7px 0 !important;
color: #001FB1 !important;
font-size: 15px !important;
line-height: 1.22 !important;
font-weight: 750 !important;
letter-spacing: -0.01em !important;
}
/* FAQ answer */
.contact-guidance-answer {
margin: 0 !important;
color: #24324A !important;
font-size: 13.5px !important;
line-height: 1.42 !important;
font-weight: 400 !important;
}
/* =========================================================
CONTACT-05A — Social / Connect Strip Shell
Purpose:
Create the shallow social connection strip below the FAQ
guidance section. Kadence controls column layout,
column widths, and vertical alignment.
========================================================= */
.contact-social-section {
width: 1240px !important;
max-width: calc(100% - 80px) !important;
margin: -2px auto 0 !important;
padding: 0 0 6px !important;
background: transparent !important;
}
.contact-social-section > .kt-row-column-wrap {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Main social strip visual shell */
.contact-social-strip > .kt-row-column-wrap {
width: 100% !important;
max-width: none !important;
height: 85px !important;
min-height: 85px !important;
max-height: 85px !important;
box-sizing: border-box !important;
background: linear-gradient(90deg, #EEF6FF 0%, #F8FBFF 100%) !important;
border: 1px solid rgba(0, 31, 177, 0.14) !important;
border-radius: 12px !important;
box-shadow: 0 8px 18px rgba(0, 31, 177, 0.04) !important;
padding: 0 22px 8px !important;
overflow: hidden !important;
}
/* =========================================================
CONTACT-05B — Social Strip Main Icon
Purpose:
Style only the main collaboration icon.
Kadence controls icon/message column placement.
========================================================= */
.contact-social-main-icon {
width: 60px !important;
height: 60px !important;
margin: 0 !important;
padding: 0 !important;
}
.contact-social-main-icon img,
.contact-social-main-icon .kb-img {
width: 60px !important;
height: 60px !important;
max-width: 60px !important;
max-height: 60px !important;
object-fit: contain !important;
display: block !important;
}
/* Message heading text only */
.contact-social-message {
margin: 0 !important;
color: #001FB1 !important;
font-size: 18px !important;
line-height: 1.32 !important;
font-weight: 700 !important;
letter-spacing: -0.015em !important;
}
/* Move only the visible message heading left */
.contact-social-message {
transform: translateX(-26px) !important;
}
/* Move only the X social unit left */
.contact-social-x-col > .kt-inside-inner-col {
transform: translateX(-40px) !important;
}
/* Move only the LinkedIn social unit right */
.contact-social-linkedin-col > .kt-inside-inner-col {
transform: translateX(40px) !important;
}
/* Green phrase inside the message heading */
.contact-social-message-green {
color: #00A83B !important;
font-weight: 700 !important;
}
/* Reduce only the X icon size */
.contact-social-x-col .kb-img {
width: 34px !important;
height: 34px !important;
max-width: 34px !important;
max-height: 34px !important;
object-fit: contain !important;
}
/* =========================================================
CONTACT-05C — Social Strip Link Styling
Purpose:
Style LinkedIn, Instagram, and X icons/labels.
Kadence controls social column placement and spacing.
========================================================= */
.contact-social-link-icon,
.contact-social-link-icon img,
.contact-social-link-icon .kb-img {
width: 26px !important;
height: 26px !important;
max-width: 26px !important;
max-height: 26px !important;
object-fit: contain !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
.contact-social-link-text {
margin: 0 !important;
color: #5D6B80 !important;
font-size: 13.5px !important;
line-height: 1.1 !important;
font-weight: 650 !important;
white-space: nowrap !important;
}
/* =========================================================
CONTACT-06A — Final CTA Band Width Shell
Purpose:
Constrain the final CTA Row Layout to the same page width
as the rest of the Contact page sections.
Important:
- Background image remains fully managed by Kadence.
- Border/radius can remain managed by Kadence Row Layout settings.
- This block does not control typography, image sizing, padding, or content alignment.
- Do not add background, background-color, or background-image here.
========================================================= */
.contact-final-band {
width: 1240px !important;
max-width: calc(100% - 80px) !important;
/* Gap control */
margin-top: 4px !important;
margin-bottom: 10px !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/* =========================================================
CONTACT-06B — Final CTA Content Rhythm
Purpose:
Tighten the vertical spacing between the icon, divider,
heading, and paragraph inside the final CTA band.
Important:
- Background image remains fully managed by Kadence.
- Band width and outer vertical gap are handled in CONTACT-06A.
- Font size and font weight remain managed by Kadence for now.
- This block only controls content spacing and alignment.
========================================================= */
/* ---------------------------------------------------------
06B.1 — Final CTA Content Stack
Selector target:
The single CTA content column inside the final band.
What this controls:
- Centers all content horizontally
- Keeps the icon/divider/heading/paragraph stacked vertically
- Removes extra inherited Kadence block spacing
What this does NOT control:
- Band background
- Band width
- Heading/paragraph font size
- Heading/paragraph font weight
--------------------------------------------------------- */
.contact-final-band .contact-final-cta-content > .kt-inside-inner-col {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 0 !important;
}
/* ---------------------------------------------------------
06B.2 — CTA Icon Block
Selector target:
The icon/image block at the top of the CTA band.
What this controls:
- Removes default image-block margin
- Sets a small controlled gap below the icon
Tune here if:
- Icon-to-divider space feels too large or too tight
--------------------------------------------------------- */
.contact-final-band .contact-final-cta-icon {
margin: 0 0 5px !important;
padding: 0 !important;
}
/* ---------------------------------------------------------
06B.3 — CTA Divider
Selector target:
The separator line under the icon.
What this controls:
- Divider width
- Divider thickness
- Divider color/gradient
- Rounded divider ends
- Removes default separator border behavior
- Sets controlled gap below divider before heading
Tune here if:
- Divider feels too long/short
- Divider feels too thick/thin
- Divider-to-heading space feels too large or too tight
--------------------------------------------------------- */
.contact-final-band .contact-final-cta-divider {
width: 76px !important;
max-width: 76px !important;
height: 3px !important;
margin: 0 0 8px !important;
border: none !important;
border-radius: 999px !important;
background: linear-gradient(
90deg,
#00A83B 0%,
#16E316 42%,
rgba(255, 255, 255, 0.45) 100%
) !important;
opacity: 1 !important;
}
/* ---------------------------------------------------------
06B.4 — CTA Heading
Selector target:
The heading text:
“Let’s accelerate your transformation.”
What this controls:
- Removes default heading margin
- Sets controlled gap below heading before paragraph
Font size and weight stay in Kadence for now.
--------------------------------------------------------- */
.contact-final-band .contact-final-cta-title {
margin: 0 0 4px !important;
}
/* ---------------------------------------------------------
06B.5 — CTA Paragraph
Selector target:
The supporting paragraph under the heading.
What this controls:
- Removes default paragraph margin
- Prevents paragraph spacing from increasing band height
Font size and weight stay in Kadence for now.
--------------------------------------------------------- */
.contact-final-band .contact-final-cta-copy {
margin: 0 !important;
}
/* =========================================================
CONTACT-05T — Tablet Overrides for FAQ + Social Strip
Purpose:
Make the guidance FAQ cards and social/message strip usable
on tablet without changing the accepted desktop layout.
Applies only to tablet widths.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
/* ---------------------------------------------------------
05T.1 — Guidance FAQ Grid
Purpose:
Keep three FAQ cards across on tablet while controlling
icon size, card height, and heading alignment.
--------------------------------------------------------- */
.contact-guidance-grid > .kt-row-column-wrap {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px !important;
align-items: stretch !important;
}
.contact-guidance-grid > .kt-row-column-wrap > .wp-block-kadence-column,
.contact-guidance-grid > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
height: 100% !important;
min-height: 0 !important;
}
.contact-guidance-item > .kt-row-column-wrap {
height: 100% !important;
min-height: 184px !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: 54px minmax(0, 1fr) !important;
row-gap: 10px !important;
column-gap: 0 !important;
align-content: start !important;
align-items: start !important;
justify-items: center !important;
padding: 14px 14px 16px !important;
text-align: center !important;
}
.contact-guidance-item > .kt-row-column-wrap > .contact-guidance-icon-col {
width: 100% !important;
height: 54px !important;
min-height: 54px !important;
max-height: 54px !important;
align-self: start !important;
}
.contact-guidance-icon-col > .kt-inside-inner-col {
height: 54px !important;
min-height: 54px !important;
max-height: 54px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.contact-guidance-icon-col figure,
.contact-guidance-icon-col .wp-block-kadence-image,
.contact-guidance-icon-col .kb-image,
.contact-guidance-icon-col .kb-img,
.contact-guidance-icon-col img {
width: 46px !important;
height: 46px !important;
max-width: 46px !important;
max-height: 46px !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
display: block !important;
}
.contact-guidance-item > .kt-row-column-wrap > .contact-guidance-text-col {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
align-self: start !important;
}
.contact-guidance-text-col > .kt-inside-inner-col {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
text-align: center !important;
}
.contact-guidance-question {
margin: 0 0 6px !important;
font-size: 13.5px !important;
line-height: 1.18 !important;
font-weight: 700 !important;
text-align: center !important;
}
.contact-guidance-answer {
margin: 0 !important;
font-size: 12.3px !important;
line-height: 1.34 !important;
text-align: center !important;
}
/* ---------------------------------------------------------
05T.2 — Tablet Social Strip Layout
Purpose:
Keep the main icon/message on the left and keep the three
social links grouped toward the right.
--------------------------------------------------------- */
.contact-social-strip > .kt-row-column-wrap {
height: auto !important;
min-height: 78px !important;
max-height: none !important;
display: grid !important;
grid-template-columns: 60px minmax(0, 1fr) auto auto auto !important;
grid-template-areas:
"mainicon message linkedin instagram x" !important;
align-items: center !important;
justify-items: center !important;
column-gap: 18px !important;
row-gap: 0 !important;
padding: 10px 22px !important;
}
.contact-social-icon-col {
grid-area: mainicon !important;
align-self: center !important;
justify-self: center !important;
}
.contact-social-message-col {
grid-area: message !important;
align-self: center !important;
justify-self: start !important;
}
.contact-social-linkedin-col {
grid-area: linkedin !important;
align-self: center !important;
justify-self: end !important;
}
.contact-social-instagram-col {
grid-area: instagram !important;
align-self: center !important;
justify-self: end !important;
}
.contact-social-x-col {
grid-area: x !important;
align-self: center !important;
justify-self: end !important;
}
/* ---------------------------------------------------------
05T.3 — Reset Desktop Positioning on Tablet
Purpose:
Remove desktop nudges before applying tablet-specific ones.
--------------------------------------------------------- */
.contact-social-message,
.contact-social-linkedin-col > .kt-inside-inner-col,
.contact-social-x-col > .kt-inside-inner-col {
transform: none !important;
}
/* ---------------------------------------------------------
05T.4 — Tablet Social Text + Link Alignment
Purpose:
Keep the message readable and wrap at the accepted width.
--------------------------------------------------------- */
.contact-social-message {
margin: 0 !important;
max-width: 340px !important;
font-size: 15.5px !important;
line-height: 1.24 !important;
text-align: left !important;
white-space: normal !important;
}
.contact-social-message-green {
white-space: nowrap !important;
}
.contact-social-link-col > .kt-inside-inner-col {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
}
.contact-social-link-unit > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 26px auto !important;
column-gap: 7px !important;
align-items: center !important;
justify-content: end !important;
margin: 0 !important;
padding: 0 !important;
}
.contact-social-link-text {
font-size: 12.8px !important;
line-height: 1.1 !important;
}
/* ---------------------------------------------------------
05T.5 — Move Tablet Social Link Group Left
Purpose:
Move only LinkedIn, Instagram, and X contents left.
--------------------------------------------------------- */
.contact-social-linkedin-col > .kt-inside-inner-col,
.contact-social-instagram-col > .kt-inside-inner-col,
.contact-social-x-col > .kt-inside-inner-col {
transform: translateX(-30px) !important;
}
/* ---------------------------------------------------------
05T.6 — Tablet X Icon Size
Purpose:
Reduce only the X icon on tablet.
--------------------------------------------------------- */
.contact-social-x-col .wp-block-kadence-image,
.contact-social-x-col figure,
.contact-social-x-col .kb-image,
.contact-social-x-col .contact-social-link-icon,
.contact-social-x-col img,
.contact-social-x-col .kb-img,
.contact-social-x-col svg {
width: 24px !important;
height: 24px !important;
max-width: 24px !important;
max-height: 24px !important;
object-fit: contain !important;
}
} /* closes CONTACT-05T */
/* =========================================================
CONTACT-07M — Mobile Hero + Main Contact Cards
Purpose:
Fix the Contact hero background image on mobile and stack
the two main contact cards vertically.
Important:
- Desktop and tablet remain unchanged.
- This block only applies below 768px.
- FAQ, social strip, and final CTA are not touched here.
========================================================= */
@media (max-width: 767px) {
/* ---------------------------------------------------------
07M.1 — Contact Hero Mobile Image Fit
Purpose:
Push the hero background image lower and improve text
readability on mobile.
--------------------------------------------------------- */
.intec-inner-hero.contact-hero {
min-height: 230px !important;
background-size: 118% auto !important;
background-position: 52% 100% !important;
}
.intec-inner-hero.contact-hero > .kt-row-column-wrap {
min-height: 230px !important;
align-items: flex-start !important;
padding-top: 28px !important;
padding-bottom: 86px !important;
}
.contact-hero .intec-inner-hero-copy {
max-width: 100% !important;
margin-left: 0 !important;
}
/* ---------------------------------------------------------
07M.2 — Main Contact Section Mobile Shell
Purpose:
Stack the left info card and right form card vertically.
--------------------------------------------------------- */
.contact-main {
width: auto !important;
max-width: calc(100% - 40px) !important;
margin: 10px auto 0 !important;
padding: 0 0 10px !important;
}
.contact-main > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
column-gap: 10px !important;
align-items: stretch !important;
}
.contact-main > .kt-row-column-wrap > .wp-block-kadence-column {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
/* ---------------------------------------------------------
07M.3 — Main Contact Card Mobile Padding
Purpose:
Reduce card padding for mobile width.
--------------------------------------------------------- */
.contact-info-card > .kt-inside-inner-col {
padding: 26px 20px 22px !important;
}
.contact-form-card > .kt-inside-inner-col {
padding: 26px 20px 22px !important;
}
} /* closes CONTACT-07M */
/* =========================================================
CONTACT-07M — Mobile Hero + Main Contact Cards
Purpose:
Fix the Contact hero image coverage, reduce the gap between
the hero and conversation card, stack the main contact cards,
and compact the non-lead contact rows.
Important:
- Desktop and tablet remain unchanged.
- This block only applies below 768px.
- FAQ, social strip, and final CTA are not touched here.
========================================================= */
@media (max-width: 767px) {
/* ---------------------------------------------------------
07M.1 — Contact Hero Mobile Image Coverage
--------------------------------------------------------- */
.intec-inner-hero.contact-hero {
min-height: 224px !important;
background-size: cover !important;
background-position: 58% center !important;
background-repeat: no-repeat !important;
}
.intec-inner-hero.contact-hero > .kt-row-column-wrap {
min-height: 224px !important;
align-items: flex-start !important;
padding-top: 30px !important;
padding-bottom: 34px !important;
}
.contact-hero .intec-inner-hero-copy {
max-width: 100% !important;
margin-left: 0 !important;
}
.intec-inner-hero.contact-hero > .kt-row-column-wrap,
.intec-inner-hero.contact-hero .wp-block-kadence-column,
.intec-inner-hero.contact-hero .kt-inside-inner-col {
background-color: transparent !important;
}
/* ---------------------------------------------------------
07M.2 — Main Contact Section Mobile Shell
--------------------------------------------------------- */
.contact-main {
width: auto !important;
max-width: calc(100% - 40px) !important;
margin: -8px auto 0 !important;
padding: 0 0 10px !important;
}
.contact-main > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
column-gap: 10px !important;
align-items: stretch !important;
}
.contact-main > .kt-row-column-wrap > .wp-block-kadence-column {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
/* ---------------------------------------------------------
07M.3 — Main Card Mobile Padding
--------------------------------------------------------- */
.contact-info-card > .kt-inside-inner-col {
padding: 26px 20px 20px !important;
}
.contact-form-card > .kt-inside-inner-col {
padding: 26px 20px 22px !important;
}
/* ---------------------------------------------------------
07M.4 — Keep Lead Conversation Row Featured
--------------------------------------------------------- */
.contact-lead-row {
padding-bottom: 16px !important;
margin-bottom: 10px !important;
}
/* ---------------------------------------------------------
07M.5 — Compact Non-Lead Contact Rows
--------------------------------------------------------- */
.intec-contact-row:not(.contact-lead-row) {
padding: 12px 0 !important;
}
.intec-contact-row:not(.contact-lead-row) > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 42px minmax(0, 1fr) !important;
column-gap: 12px !important;
gap: 12px !important;
align-items: start !important;
}
.intec-contact-row:not(.contact-lead-row) .intec-contact-row-icon,
.intec-contact-row:not(.contact-lead-row) .contact-info-icon {
align-self: start !important;
}
.intec-contact-row:not(.contact-lead-row) .intec-contact-row-icon > .kt-inside-inner-col,
.intec-contact-row:not(.contact-lead-row) .contact-info-icon > .kt-inside-inner-col {
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
padding-top: 2px !important;
}
.intec-contact-row:not(.contact-lead-row) .intec-contact-row-copy,
.intec-contact-row:not(.contact-lead-row) .contact-info-copy {
align-self: start !important;
}
.intec-contact-row:not(.contact-lead-row) .intec-contact-row-copy > .kt-inside-inner-col,
.intec-contact-row:not(.contact-lead-row) .contact-info-copy > .kt-inside-inner-col {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
min-height: 0 !important;
}
/* ---------------------------------------------------------
07M.6 — Smaller Icons for Non-Lead Rows
--------------------------------------------------------- */
.intec-contact-row:not(.contact-lead-row) .contact-card-icon {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
}
.intec-contact-row:not(.contact-lead-row) .contact-card-icon figure,
.intec-contact-row:not(.contact-lead-row) .contact-card-icon .kb-image,
.intec-contact-row:not(.contact-lead-row) .contact-card-icon .kb-img,
.intec-contact-row:not(.contact-lead-row) .contact-card-icon picture,
.intec-contact-row:not(.contact-lead-row) .contact-card-icon img {
width: 20px !important;
height: 20px !important;
max-width: 20px !important;
max-height: 20px !important;
}
/* ---------------------------------------------------------
07M.7 — Compact Row Text
--------------------------------------------------------- */
.intec-contact-row:not(.contact-lead-row) .contact-card-title {
margin: 0 0 4px !important;
font-size: 15.5px !important;
line-height: 1.18 !important;
}
.intec-contact-row:not(.contact-lead-row) .contact-card-copy {
margin: 0 !important;
font-size: 13.5px !important;
line-height: 1.34 !important;
}
} /* closes CONTACT-07M */
/* =========================================================
CONTACT-08M — Mobile FAQ + Social Message Bar
Purpose:
Fix the FAQ cards and social/message strip on mobile.
Important:
- Desktop and tablet remain unchanged.
- Hero, conversation card, and form card are not touched.
- Final CTA band is not touched.
========================================================= */
@media (max-width: 767px) {
/* ---------------------------------------------------------
08M.1 — Mobile FAQ Section Shell
--------------------------------------------------------- */
.contact-guidance {
width: auto !important;
max-width: calc(100% - 40px) !important;
margin: 10px auto 0 !important;
padding: 0 0 4px !important;
}
.contact-guidance > .kt-row-column-wrap {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.contact-guidance-card > .kt-row-column-wrap,
.contact-guidance-card > .kt-inside-inner-col {
padding: 24px 18px 20px !important;
border-radius: 14px !important;
}
/* ---------------------------------------------------------
08M.2 — Mobile FAQ Heading + Intro
--------------------------------------------------------- */
.contact-guidance-title {
margin: 0 !important;
font-size: 22px !important;
line-height: 1.14 !important;
font-weight: 700 !important;
text-align: center !important;
}
.contact-guidance-divider {
width: 64px !important;
max-width: 64px !important;
height: 3px !important;
margin: 10px auto 12px !important;
}
.contact-guidance-copy {
max-width: 100% !important;
margin: 0 auto 16px !important;
font-size: 14px !important;
line-height: 1.42 !important;
text-align: center !important;
}
/* ---------------------------------------------------------
08M.3 — Mobile FAQ Cards
--------------------------------------------------------- */
.contact-guidance-grid {
margin: 0 !important;
padding: 0 !important;
}
.contact-guidance-grid > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.contact-guidance-grid > .kt-row-column-wrap > .wp-block-kadence-column,
.contact-guidance-grid > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.contact-guidance-item > .kt-row-column-wrap {
height: auto !important;
min-height: 0 !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: 46px minmax(0, 1fr) !important;
grid-template-rows: auto !important;
column-gap: 12px !important;
row-gap: 0 !important;
align-items: center !important;
justify-items: stretch !important;
padding: 14px 14px !important;
text-align: left !important;
}
.contact-guidance-item > .kt-row-column-wrap > .contact-guidance-icon-col {
width: 46px !important;
height: auto !important;
min-height: 0 !important;
align-self: center !important;
}
.contact-guidance-icon-col > .kt-inside-inner-col {
width: 46px !important;
height: auto !important;
min-height: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
.contact-guidance-icon-col figure,
.contact-guidance-icon-col .wp-block-kadence-image,
.contact-guidance-icon-col .kb-image,
.contact-guidance-icon-col .kb-img,
.contact-guidance-icon-col img {
width: 38px !important;
height: 38px !important;
max-width: 38px !important;
max-height: 38px !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
display: block !important;
}
.contact-guidance-item > .kt-row-column-wrap > .contact-guidance-text-col {
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
align-self: center !important;
}
.contact-guidance-text-col > .kt-inside-inner-col {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
text-align: left !important;
}
.contact-guidance-question {
margin: 0 0 5px !important;
font-size: 14px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
text-align: left !important;
}
.contact-guidance-answer {
margin: 0 !important;
font-size: 13px !important;
line-height: 1.36 !important;
text-align: left !important;
}
/* ---------------------------------------------------------
08M.4 — Mobile Social Section Shell
--------------------------------------------------------- */
.contact-social-section {
width: auto !important;
max-width: calc(100% - 40px) !important;
margin: 0 auto 0 !important;
padding: 0 0 8px !important;
}
.contact-social-section > .kt-row-column-wrap {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.contact-social-strip > .kt-row-column-wrap {
height: auto !important;
min-height: 116px !important;
max-height: none !important;
display: grid !important;
grid-template-columns: 52px minmax(0, 1fr) auto auto auto !important;
grid-template-areas:
"mainicon message message message message"
". . linkedin instagram x" !important;
align-items: center !important;
justify-items: center !important;
column-gap: 8px !important;
row-gap: 10px !important;
padding: 14px 16px !important;
border-radius: 12px !important;
}
/* ---------------------------------------------------------
08M.5 — Mobile Social Grid Placement
--------------------------------------------------------- */
.contact-social-icon-col {
grid-area: mainicon !important;
align-self: center !important;
justify-self: center !important;
}
.contact-social-message-col {
grid-area: message !important;
align-self: center !important;
justify-self: start !important;
}
.contact-social-linkedin-col {
grid-area: linkedin !important;
align-self: center !important;
justify-self: center !important;
}
.contact-social-instagram-col {
grid-area: instagram !important;
align-self: center !important;
justify-self: center !important;
}
.contact-social-x-col {
grid-area: x !important;
align-self: center !important;
justify-self: center !important;
}
/* ---------------------------------------------------------
08M.6 — Mobile Social Text + Icon Sizing
--------------------------------------------------------- */
.contact-social-message,
.contact-social-linkedin-col > .kt-inside-inner-col,
.contact-social-instagram-col > .kt-inside-inner-col,
.contact-social-x-col > .kt-inside-inner-col {
transform: none !important;
}
.contact-social-main-icon {
width: 48px !important;
height: 48px !important;
}
.contact-social-main-icon img,
.contact-social-main-icon .kb-img {
width: 48px !important;
height: 48px !important;
max-width: 48px !important;
max-height: 48px !important;
}
.contact-social-message {
margin: 0 !important;
max-width: 220px !important;
font-size: 14.5px !important;
line-height: 1.25 !important;
text-align: left !important;
white-space: normal !important;
}
.contact-social-message-green {
white-space: nowrap !important;
}
/* ---------------------------------------------------------
08M.7 — Mobile Social Link Units
--------------------------------------------------------- */
.contact-social-link-col > .kt-inside-inner-col {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.contact-social-link-unit > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 24px auto !important;
column-gap: 6px !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
.contact-social-link-icon,
.contact-social-link-icon img,
.contact-social-link-icon .kb-img {
width: 22px !important;
height: 22px !important;
max-width: 22px !important;
max-height: 22px !important;
}
.contact-social-x-col .wp-block-kadence-image,
.contact-social-x-col figure,
.contact-social-x-col .kb-image,
.contact-social-x-col .contact-social-link-icon,
.contact-social-x-col img,
.contact-social-x-col .kb-img,
.contact-social-x-col svg {
width: 22px !important;
height: 22px !important;
max-width: 22px !important;
max-height: 22px !important;
object-fit: contain !important;
}
.contact-social-link-text {
font-size: 12px !important;
line-height: 1.1 !important;
white-space: nowrap !important;
}
/* ---------------------------------------------------------
08M.8 — Final Mobile Gap + Social Link Position Tuning
Purpose:
Reduce the vertical gap between the Send a Message card
and the FAQ section, and move only the social links to
the right inside the message bar.
Important:
- Does not change FAQ card layout.
- Does not move the main message icon.
- Does not move the message text.
- Does not affect desktop or tablet.
--------------------------------------------------------- */
.contact-main {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.contact-guidance {
margin-top: -13px !important;
padding-top: 0 !important;
}
.contact-social-linkedin-col > .kt-inside-inner-col,
.contact-social-instagram-col > .kt-inside-inner-col,
.contact-social-x-col > .kt-inside-inner-col {
transform: translateX(-45px) !important;
}
/* Move only the X link slightly right on mobile */
.contact-social-x-col > .kt-inside-inner-col {
transform: translateX(-36px) !important;
}
/* ---------------------------------------------------------
08M.9 — Mobile Gap Above Social Message Bar
Purpose:
Increase the vertical gap between the FAQ card and the
social/message bar.
Tune only margin-top.
--------------------------------------------------------- */
.contact-social-section {
margin-top: 8px !important;
}
} /* closes CONTACT-08M */
/* =========================================================
CONTACT-09M — Mobile Final CTA Width
Purpose:
Match the final CTA blue band width to the mobile cards
above it.
Important:
- Background image remains managed by Kadence.
- Does not change CTA typography, icon, height, or spacing.
- Desktop and tablet remain unchanged.
========================================================= */
@media (max-width: 767px) {
.contact-final-band {
width: auto !important;
max-width: calc(100% - 40px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
} /* closes CONTACT-09M */
/* =========================================================
INSIGHTS PAGE — FIELD NOTES SECTION
Purpose:
Controls the editorial "Field Notes" card below the Insights hero.
Current structure:
.insights-field-section = outer unified card / two-column section
.insights-field-left-row = nested 10/90 icon + intro text row
.insights-field-left = small icon column
.insights-field-text = 90% text column
.insights-field-right = right checklist column
.insights-field-list = Kadence Icon List block
========================================================= */
/* 01 — Unified Field Notes card sizing and spacing */
.insights-field-section {
width: 1240px;
max-width: calc(100% - 80px);
margin: 10px auto 20px;
background: #F1F6FC;
border: 1px solid rgba(0, 31, 177, 0.08);
border-radius: 14px;
padding: 12px 24px 0 18px;
}
/* 02 — Align the two main card columns to the top */
.insights-field-section > .kt-row-column-wrap {
align-items: flex-start;
}
/* 03 — Keep the nested icon/text row clean; it is not a card */
.insights-field-left-row {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
/* 04 — Align the icon and text row near the top */
.insights-field-left-row > .kt-row-column-wrap {
align-items: flex-start;
}
/* 05 — Normalize the small Field Notes icon column */
.insights-field-left {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* 06 — Size and position the Field Notes icon */
.insights-field-icon {
width: 48px !important;
max-width: 48px !important;
transform: translate(8px, -8px);
}
.insights-field-icon img {
width: 48px !important;
max-width: 48px !important;
height: auto !important;
display: block;
}
/* 07 — Reset Kadence spacing inside the Field Notes text column
Note:
The generated Kadence class is included as a confirmed fallback because
the semantic selector alone did not reproduce the working test.
*/
.insights-field-text > .kt-inside-inner-col,
.kadence-column20_0b42c4-d6 > .kt-inside-inner-col {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: flex-start !important;
gap: 0 !important;
row-gap: 0 !important;
}
/* 08 — Style FIELD NOTES eyebrow and control spacing before the title */
.insights-field-text .insights-field-kicker,
.kadence-column20_0b42c4-d6 .insights-field-kicker {
margin: 0 0 14px !important;
padding: 0 !important;
color: #00A83B;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 0.06em;
line-height: 1.2;
text-transform: uppercase;
}
/* 09 — Style the left title */
.insights-field-text .insights-field-title,
.kadence-column20_0b42c4-d6 .insights-field-title {
margin: 0 0 10px !important;
padding: 0 !important;
color: #001FB1;
font-size: 22px;
line-height: 1.25;
font-weight: 700;
}
/* 10 — Style the left paragraph copy */
.insights-field-text .insights-field-copy,
.kadence-column20_0b42c4-d6 .insights-field-copy {
margin: 0 !important;
padding: 0 !important;
max-width: 560px;
color: #24324a;
font-size: 15px;
line-height: 1.55;
}
/* 11 — Position the right checklist column and soft divider */
.insights-field-right {
position: relative;
border-left: none;
padding-left: 44px;
}
.insights-field-right > .kt-inside-inner-col {
transform: translateY(30px);
}
.insights-field-right::before {
content: "";
position: absolute;
left: 0;
top: 20px;
bottom: 20px;
width: 1px;
background: rgba(0, 31, 177, 0.12);
}
/* 12 — Style the right-column heading */
.insights-field-right h6 {
margin: 0 0 10px;
color: #001FB1;
font-size: 18px;
line-height: 1.25;
font-weight: 700;
}
/* 13 — Control vertical rhythm between checklist items */
.insights-field-list .kt-svg-icon-list-item-wrap {
margin-bottom: 2px;
}
/* 14 — Control vertical rhythm between checklist items */
.insights-field-list .kt-svg-icon-list-item-wrap {
margin-bottom: 2px;
}
/* 15 — Style checklist item text */
.insights-field-list .kt-svg-icon-list-text {
color: #17243b;
font-size: 15px !important;
line-height: 1.45;
}
/* 16 — Tighten vertical spacing between right-column checklist rows */
.insights-field-list .kt-svg-icon-list {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
row-gap: 2px !important;
}
.insights-field-list .kt-svg-icon-list-item-wrap {
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.insights-field-list .kt-svg-icon-list-text {
line-height: 1.25 !important;
}
/* 17 — Add a small bottom cushion under the final checklist item */
.insights-field-list .kt-svg-icon-list-item-wrap:last-child {
margin-bottom: 16px !important;
}
/* =========================================================
INSIGHTS PAGE — FIELD NOTES TABLET
========================================================= */
@media (max-width: 1024px) and (min-width: 768px) {
/* 01 — Match Field Notes width to the tablet inner-page hero rhythm */
.insights-field-section {
width: auto;
max-width: calc(100% - 48px);
}
}
/* =========================================================
INSIGHTS PAGE — MOBILE HERO BACKGROUND
Purpose:
Ensures the Insights hero background image covers the full mobile hero area.
========================================================= */
@media (max-width: 767px) {
/* 01 — Make the Insights hero image cover the full mobile hero canvas */
.intec-inner-hero.insights-hero {
background-size: cover !important;
background-position: center top !important;
background-repeat: no-repeat !important;
}
}
/* =========================================================
INSIGHTS PAGE — FIELD NOTES MOBILE
Purpose:
Stacks the Field Notes card cleanly on mobile and removes
desktop divider/column behavior.
========================================================= */
@media (max-width: 767px) {
.insights-field-section {
width: auto !important;
max-width: calc(100% - 32px) !important;
margin: 10px auto 42px !important;
padding: 28px 22px 30px 22px !important;
}
.insights-field-section > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1fr !important;
row-gap: 28px !important;
align-items: start !important;
}
.insights-field-left-row > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: 1fr !important;
row-gap: 14px !important;
}
.insights-field-left {
width: 100% !important;
}
.insights-field-icon {
width: 52px !important;
max-width: 52px !important;
transform: none !important;
margin: 0 0 18px 0 !important;
}
.insights-field-icon img {
width: 52px !important;
max-width: 52px !important;
}
.insights-field-text > .kt-inside-inner-col,
.kadence-column20_0b42c4-d6 > .kt-inside-inner-col {
display: block !important;
}
.insights-field-text .insights-field-kicker,
.kadence-column20_0b42c4-d6 .insights-field-kicker {
margin: 0 0 14px !important;
}
.insights-field-text .insights-field-title,
.kadence-column20_0b42c4-d6 .insights-field-title {
font-size: 24px !important;
line-height: 1.16 !important;
margin: 0 0 14px !important;
}
.insights-field-text .insights-field-copy,
.kadence-column20_0b42c4-d6 .insights-field-copy {
font-size: 15.5px !important;
line-height: 1.55 !important;
max-width: 100% !important;
}
.insights-field-right {
border-left: none !important;
padding-left: 0 !important;
transform: none !important;
}
.insights-field-right::before {
display: none !important;
content: none !important;
}
.insights-field-right > .kt-inside-inner-col {
transform: none !important;
}
.insights-field-right h6 {
font-size: 20px !important;
line-height: 1.2 !important;
margin: 0 0 16px !important;
}
.insights-field-list .kt-svg-icon-list {
gap: 8px !important;
row-gap: 8px !important;
}
.insights-field-list .kt-svg-icon-list-item-wrap {
margin-bottom: 0 !important;
align-items: flex-start !important;
}
.insights-field-list .kt-svg-icon-list-text {
font-size: 15px !important;
line-height: 1.35 !important;
}
.insights-field-list .kt-svg-icon-list-item-wrap:last-child {
margin-bottom: 0 !important;
}
}
/* =========================================================
INSIGHTS PAGE — EXPLORE BY TOPIC SECTION
Purpose:
Aligns Explore by Topic to the same centered page rail as
the Insights hero and Field Notes section.
========================================================= */
.insights-topic-section {
width: 1240px;
max-width: calc(100% - 80px);
margin-left: auto;
margin-right: auto;
}
.insights-topic-section > .kt-row-column-wrap {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
/* =========================================================
INSIGHTS PAGE — EXPLORE BY TOPIC TABLET
Purpose:
Keeps Explore by Topic aligned to the shared tablet page rail,
lets both topic-card rows use the same width, and prevents
the final odd card from stretching full width.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
/* 01 — Align the whole Explore by Topic section to the tablet page rail */
.insights-topic-section {
width: auto !important;
max-width: calc(100% - 48px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.insights-topic-section > .kt-row-column-wrap {
width: 100% !important;
max-width: 100% !important;
}
/* 02 — Make both topic-card rows use the same section width */
.insights-topic-row,
.insights-topic-row-top,
.insights-topic-row-bottom {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.insights-topic-row > .kt-row-column-wrap,
.insights-topic-row-top > .kt-row-column-wrap,
.insights-topic-row-bottom > .kt-row-column-wrap {
width: 100% !important;
max-width: 100% !important;
}
/* 03 — Keep the final odd tablet card from stretching full width */
.insights-topic-row-bottom > .kt-row-column-wrap > .wp-block-kadence-column:last-child {
max-width: 50% !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* =========================================================
INSIGHTS PAGE — FEATURED INSIGHT TEXT POSITION
Purpose:
Adds breathing room above the text content inside the dynamic
Featured Insight Posts block without adding padding around the image.
========================================================= */
.insights-featured-posts .entry-content-wrap {
padding-top: 28px !important;
}
/* 02 — Tune Featured Insight excerpt typography */
.insights-featured-posts .entry-summary,
.insights-featured-posts .entry-summary p {
font-size: 15px !important;
line-height: 1.5 !important;
margin-top: 14px !important;
margin-bottom: 18px !important;
}
/* =========================================================
INSIGHTS PAGE — FEATURED INSIGHT READ ARTICLE BUTTON
Purpose:
Styles the dynamic Posts block Read the Article link as a CTA button.
========================================================= */
.insights-featured-posts .kt-blocks-post-readmore,
.insights-featured-posts .post-more-link,
.insights-featured-posts a.more-link {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: fit-content;
margin-top: 4px;
padding: 10px 18px !important;
background: #001FB1 !important;
color: #FFFFFF !important;
border: 1px solid #001FB1 !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: 0.01em;
text-decoration: none !important;
}
.insights-featured-posts .kt-blocks-post-readmore:hover,
.insights-featured-posts .post-more-link:hover,
.insights-featured-posts a.more-link:hover {
background: #0021B9 !important;
border-color: #0021B9 !important;
color: #FFFFFF !important;
text-decoration: none !important;
}
/* =========================================================
INSIGHTS PAGE — FEATURED INSIGHT IMAGE CORNERS
Purpose:
Rounds the left-side corners of the dynamic post featured image
inside the Featured Insight Posts block.
========================================================= */
.insights-featured-posts .wp-post-image,
.insights-featured-posts .kadence-post-image img,
.insights-featured-posts .post-thumbnail img {
display: block !important;
border-radius: 14px 0 0 14px !important;
}
.insights-featured-posts .kadence-post-image,
.insights-featured-posts .kadence-post-image-inner-wrap,
.insights-featured-posts .kadence-post-image-intrisic,
.insights-featured-posts .post-thumbnail {
overflow: hidden !important;
border-radius: 14px 0 0 14px !important;
}
/* =========================================================
INSIGHTS PAGE — FEATURED INSIGHT CARD CLIPPING
Purpose:
Clips the dynamic Featured Insight post image inside the
rounded Kadence column card.
========================================================= */
.insights-featured-card,
.insights-featured-card > .kt-inside-inner-col {
border-radius: 14px !important;
overflow: hidden !important;
}
/* =========================================================
INSIGHTS PAGE — LATEST ARTICLES CARD SHELL
Purpose:
Adds a consistent card border/radius to dynamic Latest Articles cards.
========================================================= */
.insights-latest-posts article,
.insights-latest-posts .entry,
.insights-latest-posts .loop-entry {
background: #FFFFFF !important;
border: 1px solid #DDE7F3 !important;
border-radius: 14px !important;
overflow: hidden !important;
box-shadow: none !important;
}
.insights-latest-posts .entry-content-wrap {
background: #FFFFFF !important;
}
/* =========================================================
INSIGHTS PAGE — LATEST ARTICLES CARD GUTTER
Purpose:
Matches Latest Articles card spacing to Explore by Topic card spacing.
========================================================= */
.insights-latest-posts,
.insights-latest-posts .kt-post-grid-layout-grid-wrap,
.insights-latest-posts .kt-post-grid-wrap {
column-gap: 16px !important;
row-gap: 24px !important;
gap: 24px 16px !important;
}
/* =========================================================
INSIGHTS PAGE — LATEST ARTICLES EXCERPT TYPOGRAPHY
Purpose:
Adjusts only excerpt font size and line-height inside
Latest Articles cards. Excerpt length remains controlled
in Kadence.
========================================================= */
.insights-latest-posts .entry-summary,
.insights-latest-posts .entry-summary p,
.insights-latest-posts .entry-content,
.insights-latest-posts .entry-content p,
.insights-latest-posts .post-excerpt,
.insights-latest-posts .post-excerpt p,
.insights-latest-posts .kt-blocks-post-excerpt,
.insights-latest-posts .kt-blocks-post-excerpt p {
font-size: 14.5px !important;
line-height: 1.45 !important;
color: #243247 !important;
}
/* =========================================================
INSIGHTS PAGE — LATEST ARTICLES READ MORE BOTTOM PIN
Purpose:
Keeps article text natural while aligning Read More links
at the bottom of each Latest Articles card.
========================================================= */
.insights-latest-posts article,
.insights-latest-posts .entry,
.insights-latest-posts .loop-entry,
.insights-latest-posts .kt-blocks-post-grid-item {
position: relative !important;
}
/* Reserve space at the bottom so the pinned link does not overlap excerpt text */
.insights-latest-posts .entry-content-wrap,
.insights-latest-posts .kt-blocks-post-grid-item-inner-wrap {
padding-bottom: 64px !important;
}
/* Pin Read More to the same bottom position in each card */
.insights-latest-posts .kt-blocks-post-readmore,
.insights-latest-posts .post-more-link,
.insights-latest-posts a.more-link {
position: absolute !important;
left: 32px !important;
bottom: 36px !important;
}
/* =========================================================
INSIGHTS PAGE — LATEST ARTICLES FINAL LINK ALIGNMENT
Purpose:
Makes Latest Articles read-more links blue and vertically
centers the View all articles link in the heading row.
========================================================= */
/* 01 — Latest Articles Read More link */
.insights-latest-posts .kt-blocks-post-readmore,
.insights-latest-posts .post-more-link,
.insights-latest-posts a.more-link {
color: #001FB1 !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
font-weight: 700 !important;
text-decoration: none !important;
}
.insights-latest-posts .kt-blocks-post-readmore:hover,
.insights-latest-posts .post-more-link:hover,
.insights-latest-posts a.more-link:hover {
color: #0021B9 !important;
text-decoration: underline !important;
}
/* 02 — Vertically center View all articles */
.insights-latest-heading-row > .kt-row-column-wrap {
align-items: center !important;
}
.insights-latest-heading-row h2 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.insights-latest-heading-row > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(2) > .kt-inside-inner-col {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
}
/* =========================================================
INSIGHTS LIBRARY — COMPACT ARTICLE ROW
Purpose:
Tightens the library article list and normalizes title,
excerpt, author, divider, and read-more rhythm.
========================================================= */
.insights-library-list article,
.insights-library-list .entry,
.insights-library-list .loop-entry,
.insights-library-list .kt-blocks-post-grid-item {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
border-bottom: 1px solid rgba(0, 31, 177, 0.12) !important;
padding: 0 0 14px !important;
margin: 0 0 16px !important;
}
.insights-library-list .entry-content-wrap,
.insights-library-list .kt-blocks-post-grid-item-inner-wrap {
background: transparent !important;
padding: 0 !important;
}
/* Article title */
.insights-library-list .entry-title,
.insights-library-list .entry-title a {
margin: 0 0 5px !important;
color: #01041A !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 1.22 !important;
text-decoration: none !important;
}
.insights-library-list .entry-title a:hover {
color: #001FB1 !important;
}
/* Author/meta */
.insights-library-list .entry-meta {
margin: 0 0 8px !important;
color: #25364D !important;
font-size: 13px !important;
line-height: 1.25 !important;
}
/* Excerpt */
.insights-library-list .entry-summary,
.insights-library-list .entry-content,
.insights-library-list .post-excerpt {
max-width: 820px !important;
margin: 0 0 8px !important;
color: #243247 !important;
font-size: 15.5px !important;
line-height: 1.42 !important;
}
/* Read More */
.insights-library-list .kt-blocks-post-readmore,
.insights-library-list .post-more-link,
.insights-library-list a.more-link {
color: #001FB1 !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: 0.04em !important;
text-decoration: none !important;
}
.insights-library-list .kt-blocks-post-readmore:hover,
.insights-library-list .post-more-link:hover,
.insights-library-list a.more-link:hover {
color: #0021B9 !important;
text-decoration: underline !important;
}
/* Excerpt */
.insights-library-list .entry-summary,
.insights-library-list .entry-content,
.insights-library-list .post-excerpt,
.insights-library-list .kt-blocks-post-excerpt {
width: 100% !important;
max-width: none !important;
margin: 0 0 8px !important;
color: #243247 !important;
font-size: 15.5px !important;
line-height: 1.42 !important;
}
/* =========================================================
INSIGHTS LIBRARY — CATEGORY HEADING
Purpose:
Styles category labels for the article library list.
========================================================= */
.insights-library-category-heading {
margin-top: 22px !important;
margin-bottom: 10px !important;
color: #001FB1 !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
}
/* =========================================================
INSIGHTS PAGE — FINAL CTA PAGE WIDTH CONTAINMENT
Purpose:
Keeps the CTA band within the page rail without changing
Kadence-controlled top/bottom spacing.
========================================================= */
.insights-perspective-cta {
width: 1240px !important;
max-width: calc(100% - 80px) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/* =========================================================
INSIGHTS PAGE — FINAL CTA TEXT RHYTHM
Purpose:
Controls only text rhythm and wrapping inside the CTA band.
Font size, color, and weight remain controlled in Kadence.
========================================================= */
.insights-perspective-cta h2 {
max-width: 760px !important;
line-height: 1.25 !important;
margin-bottom: 8px !important;
}
.insights-perspective-cta p {
max-width: 760px !important;
line-height: 1.45 !important;
margin-bottom: 0 !important;
}
/* =========================================================
INSIGHTS PAGE — TABLET RESPONSIVE REFINEMENTS
Purpose:
Fixes Featured Insight image/button rhythm, centers the odd
Latest Articles card, and improves final CTA tablet layout.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
/* 01 — Featured Insight: make image fill card height */
.insights-featured-posts article,
.insights-featured-posts .entry,
.insights-featured-posts .loop-entry,
.insights-featured-posts .kt-blocks-post-grid-item {
align-items: stretch !important;
}
.insights-featured-posts .post-thumbnail,
.insights-featured-posts .kadence-post-image,
.insights-featured-posts .kt-blocks-post-image,
.insights-featured-posts .entry-image {
height: 100% !important;
min-height: 190px !important;
}
.insights-featured-posts img,
.insights-featured-posts .wp-post-image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: 25% center !important;
display: block !important;
}
/* Featured Insight tablet image edge fade */
.insights-featured-posts .post-thumbnail,
.insights-featured-posts .kadence-post-image,
.insights-featured-posts .kt-blocks-post-image,
.insights-featured-posts .entry-image {
position: relative !important;
overflow: hidden !important;
}
.insights-featured-posts .post-thumbnail::after,
.insights-featured-posts .kadence-post-image::after,
.insights-featured-posts .kt-blocks-post-image::after,
.insights-featured-posts .entry-image::after {
content: "";
position: absolute;
top: 0;
right: -1px;
bottom: 0;
width: 110px;
pointer-events: none;
background: linear-gradient(
90deg,
rgba(241, 244, 250, 0) 0%,
rgba(241, 244, 250, 0.65) 52%,
#F1F4FA 100%
);
}
/* 02 — Featured Insight: keep Read the Article inside card with breathing room */
.insights-featured-posts .entry-content-wrap {
padding-bottom: 22px !important;
}
.insights-featured-posts .kt-blocks-post-readmore,
.insights-featured-posts .post-more-link,
.insights-featured-posts a.more-link {
margin-top: 12px !important;
}
/* 04 — Final CTA: match tablet page rail */
.insights-perspective-cta {
width: auto !important;
max-width: calc(100% - 48px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.insights-perspective-cta > .kt-row-column-wrap {
align-items: center !important;
}
.insights-perspective-cta > .kt-row-column-wrap > .wp-block-kadence-column:first-child > .kt-inside-inner-col {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.insights-perspective-cta .wp-block-kadence-advancedbtn {
display: flex !important;
justify-content: flex-end !important;
}
.insights-perspective-cta a.kb-button,
.insights-perspective-cta .kb-button {
white-space: nowrap !important;
min-width: 230px !important;
justify-content: center !important;
}
}
/* =========================================================
INSIGHTS PAGE — TABLET SECTION WIDTH CONTAINMENT
Purpose:
Keeps Featured Insight and Latest Articles aligned to the
same tablet page rail as the rest of the Insights page.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.insights-featured-section,
.insights-latest-section {
width: auto !important;
max-width: calc(100% - 48px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.insights-featured-section > .kt-row-column-wrap,
.insights-latest-section > .kt-row-column-wrap {
width: 100% !important;
max-width: 100% !important;
}
}
/* =========================================================
INSIGHTS PAGE — MOBILE SECTION WIDTH CORRECTION
Purpose:
Keeps Featured Insight, Latest Articles, and final CTA
aligned to the same mobile page rail.
========================================================= */
@media (max-width: 767px) {
/* 01 — Shared mobile rail for dynamic sections */
.insights-featured-section,
.insights-latest-section,
.insights-perspective-cta {
width: auto !important;
max-width: calc(100% - 40px) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.insights-featured-section > .kt-row-column-wrap,
.insights-latest-section > .kt-row-column-wrap,
.insights-perspective-cta > .kt-row-column-wrap {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* 02 — Featured Insight card should not overflow mobile rail */
.insights-featured-card,
.insights-featured-card > .kt-inside-inner-col,
.insights-featured-posts,
.insights-featured-posts article,
.insights-featured-posts .entry,
.insights-featured-posts .loop-entry,
.insights-featured-posts .kt-blocks-post-grid-item {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* 03 — Latest Articles: force one clean mobile column */
.insights-latest-posts,
.insights-latest-posts .kt-post-grid-layout-grid-wrap,
.insights-latest-posts .kt-post-grid-wrap {
width: 100% !important;
max-width: 100% !important;
display: grid !important;
grid-template-columns: 1fr !important;
column-gap: 0 !important;
row-gap: 22px !important;
box-sizing: border-box !important;
}
.insights-latest-posts article,
.insights-latest-posts .entry,
.insights-latest-posts .loop-entry,
.insights-latest-posts .kt-blocks-post-grid-item {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* 04 — CTA should match the same mobile rail */
.insights-perspective-cta {
max-width: calc(100% - 40px) !important;
}
}
/* =========================================================
INSIGHTS PAGE — MOBILE REFINEMENTS
Purpose:
Expands Explore by Topic to the mobile page rail, adds
breathing room inside Featured Insight, centers its CTA,
and reduces the final CTA icon size.
========================================================= */
@media (max-width: 767px) {
/* 01 — Explore by Topic: use the mobile page width */
.insights-topic-section {
width: auto !important;
max-width: calc(100% - 40px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.insights-topic-section > .kt-row-column-wrap,
.insights-topic-row,
.insights-topic-row-top,
.insights-topic-row-bottom,
.insights-topic-row > .kt-row-column-wrap,
.insights-topic-row-top > .kt-row-column-wrap,
.insights-topic-row-bottom > .kt-row-column-wrap {
width: 100% !important;
max-width: 100% !important;
}
.insights-topic-row > .kt-row-column-wrap > .wp-block-kadence-column,
.insights-topic-row-top > .kt-row-column-wrap > .wp-block-kadence-column,
.insights-topic-row-bottom > .kt-row-column-wrap > .wp-block-kadence-column {
width: 100% !important;
max-width: 100% !important;
flex-basis: 100% !important;
}
.insights-topic-section .wp-block-kadence-infobox,
.insights-topic-section .kt-blocks-info-box-link-wrap,
.insights-topic-section .kt-info-box {
width: 100% !important;
max-width: 100% !important;
}
/* 02 — Featured Insight: add mobile text breathing room */
.insights-featured-posts .entry-content-wrap {
padding: 22px 22px 24px !important;
}
/* 03 — Featured Insight: center Read the Article button on mobile */
.insights-featured-posts .kt-blocks-post-readmore,
.insights-featured-posts .post-more-link,
.insights-featured-posts a.more-link {
display: flex !important;
width: fit-content !important;
margin: 18px auto 0 !important;
}
/* 04 — Final CTA: reduce oversized icon */
.insights-perspective-cta .wp-block-kadence-image,
.insights-perspective-cta figure.wp-block-kadence-image {
max-width: 150px !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 18px !important;
}
.insights-perspective-cta .wp-block-kadence-image img,
.insights-perspective-cta .kb-img {
width: 150px !important;
max-width: 150px !important;
height: auto !important;
}
}
/* =========================================================
INSIGHTS PAGE — MOBILE LATEST HEADING SAME ROW
Purpose:
Keeps Latest articles and View all articles on the same
row on mobile.
========================================================= */
@media (max-width: 767px) {
.insights-latest-heading-row > .kt-row-column-wrap {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
column-gap: 16px !important;
}
.insights-latest-heading-row > .kt-row-column-wrap > .wp-block-kadence-column {
width: auto !important;
max-width: none !important;
flex-basis: auto !important;
}
.insights-latest-heading-row > .kt-row-column-wrap > .wp-block-kadence-column:first-child {
flex: 1 1 auto !important;
}
.insights-latest-heading-row > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(2) {
flex: 0 0 auto !important;
margin-left: auto !important;
}
.insights-latest-heading-row h2 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.insights-latest-heading-row > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(2) > .kt-inside-inner-col {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
}
}
/* =========================================================
INDUSTRIES PAGE — HERO BACKGROUND MATCH
Purpose:
Matches the Industries hero canvas color to the left fade
of the hero image without modifying the shared hero standard.
========================================================= */
.intec-inner-hero.industries-hero {
background-color: #F0F4FB !important;
}
/* =========================================================
INDUSTRIES PAGE — INDUSTRY CARDS SECTION
Purpose:
Styles the Industries page industry card section only.
Uses the copied Home page card content but targets the
current Industries page block structure.
========================================================= */
.intec-industries-clean {
background: transparent !important;
padding-top: 0 !important;
padding-bottom: 10px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.intec-industries-clean > .kt-row-column-wrap {
max-width: 1240px !important;
width: calc(100% - 80px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Section heading */
.intec-industries-clean-heading,
.intec-industries-clean-heading.kt-adv-heading,
.intec-industries-clean-heading .kt-adv-heading {
color: #001FB1 !important;
font-size: 22px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
text-align: center !important;
margin-top: 0 !important;
margin-bottom: 22px !important;
}
/* Current structure uses native WordPress Columns */
.intec-industries-clean-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 16px !important;
align-items: stretch !important;
margin: 0 !important;
}
/* Remove default WP column spacing behavior */
.intec-industries-clean-grid > .wp-block-column {
margin: 0 !important;
min-width: 0 !important;
display: flex !important;
align-items: stretch !important;
}
/* Card shell */
.intec-industries-clean .intec-clean-industry-card {
position: relative !important;
width: 100% !important;
min-height: 150px !important;
background: #FFFFFF !important;
border: 1px solid #E5EAF1 !important;
border-radius: 14px !important;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
padding: 22px 24px 20px 24px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Bottom accent line */
.intec-industries-clean .intec-clean-industry-card::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 4px !important;
border-radius: 0 0 14px 14px !important;
background: #001FB1 !important;
}
.intec-industries-clean .intec-clean-industry-card.intec-line-green::after {
background: #16A34A !important;
}
.intec-industries-clean .intec-clean-industry-card.intec-line-blue::after {
background: #001FB1 !important;
}
/* Group inner wrapper controls icon/text layout */
.intec-industries-clean .intec-clean-industry-card > .wp-block-group__inner-container,
.intec-industries-clean .intec-clean-industry-card > .kt-inside-inner-col {
display: grid !important;
grid-template-columns: 76px minmax(0, 1fr) !important;
grid-template-areas:
"icon title"
"icon copy" !important;
column-gap: 12px !important;
row-gap: 8px !important;
align-items: start !important;
width: 100% !important;
}
/* Icon */
.intec-industries-clean .intec-clean-industry-icon {
grid-area: icon !important;
justify-self: center !important;
align-self: start !important;
margin: 0 !important;
}
.intec-industries-clean .intec-clean-industry-icon,
.intec-industries-clean .intec-clean-industry-icon figure,
.intec-industries-clean .intec-clean-industry-icon .kb-image,
.intec-industries-clean .intec-clean-industry-icon .kb-img-wrap {
width: 92px !important;
height: 92px !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
overflow: visible !important;
}
.intec-industries-clean .intec-clean-industry-icon img {
width: 88px !important;
max-width: 88px !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
}
/* Title */
.intec-industries-clean .intec-clean-industry-title,
.intec-industries-clean .intec-clean-industry-title.kt-adv-heading,
.intec-industries-clean .intec-clean-industry-title .kt-adv-heading {
grid-area: title !important;
color: #001FB1 !important;
font-size: 18px !important;
line-height: 1.18 !important;
font-weight: 700 !important;
text-align: left !important;
margin: 0 !important;
}
/* Copy */
.intec-industries-clean .intec-clean-industry-copy {
grid-area: copy !important;
color: #334155 !important;
font-size: 14px !important;
line-height: 1.45 !important;
text-align: left !important;
margin: 0 !important;
}
.industries-perspective-cta {
width: 1240px !important;
max-width: calc(100% - 80px) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/* =========================================================
INDUSTRIES PAGE — MOBILE INDUSTRY CARD STACK
Purpose:
Forces copied home-page industry cards to stack on mobile,
overriding inherited Columns behavior.
========================================================= */
@media (max-width: 767px) {
.intec-industries-clean-grid {
display: block !important;
}
.intec-industries-clean-grid > .wp-block-column {
width: 100% !important;
max-width: 100% !important;
flex-basis: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.intec-industries-clean-grid > .wp-block-column + .wp-block-column {
margin-top: 16px !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.industries-perspective-cta {
width: auto !important;
max-width: calc(100% - 38px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* =========================================================
AI-ENABLED PAGE CSS
Purpose:
Page-specific styling for the AI-Enabled & Agentic
Operations page. Shared global page standards remain outside
this block.
========================================================= */
/* =========================================================
01. HERO BACKGROUND MATCH
Purpose:
Matches the AI-enabled hero canvas color to the left fade
of the hero image without modifying the shared hero standard.
========================================================= */
.intec-inner-hero.aiops-hero {
background-color: #F0F4FB !important;
}
/* =========================================================
02. SHARED AI PAGE SECTION CANVAS
Purpose:
Keeps AI page outer body sections aligned to the same
bounded page width used by the shared inner hero.
Only outer section rows should use these classes.
Note:
Inner Operating Model card rows are intentionally excluded
from this shared width reset so Kadence can control the
3x2 tablet card layout.
========================================================= */
.aiops-core-shift-section,
.aiops-operating-model-section,
.aiops-lifecycle-outcomes-section,
.aiops-governance-readiness-section,
.aiops-advisory-model-section,
.aiops-final-cta-section {
width: 1240px;
max-width: calc(100% - 80px);
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box;
}
.aiops-core-shift-section,
.aiops-lifecycle-outcomes-section {
background-color: #ffffff !important;
}
.aiops-operating-model-section {
background-color: #F0F4FB !important;
}
.aiops-governance-readiness-section > .kt-row-column-wrap,
.aiops-lifecycle-outcomes-section .aiops-lifecycle-outcomes-grid,
.aiops-advisory-model-section > .kt-row-column-wrap,
.aiops-final-cta-section > .kt-row-column-wrap {
width: 100% !important;
max-width: 100% !important;
}
/* =========================================================
AI-ENABLED PAGE — TABLET SHARED SECTION CANVAS
Purpose:
Aligns AI page outer sections to the tablet hero/content rail.
This only affects outer page sections, not nested rows/cards.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.aiops-core-shift-section,
.aiops-operating-model-section,
.aiops-lifecycle-outcomes-section,
.aiops-governance-readiness-section,
.aiops-advisory-model-section,
.aiops-final-cta-section {
width: auto !important;
max-width: calc(100% - 48px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.aiops-governance-readiness-section > .kt-row-column-wrap,
.aiops-lifecycle-outcomes-section .aiops-lifecycle-outcomes-grid,
.aiops-advisory-model-section > .kt-row-column-wrap,
.aiops-final-cta-section > .kt-row-column-wrap {
width: 100% !important;
max-width: 100% !important;
}
}
/* =========================================================
AI-ENABLED PAGE — MOBILE SHARED SECTION CANVAS
Purpose:
Aligns AI page outer body sections to a consistent mobile
page rail. This affects outer section rows only and avoids
overriding Kadence-controlled nested card rows.
========================================================= */
@media (max-width: 767px) {
.aiops-core-shift-section,
.aiops-operating-model-section,
.aiops-lifecycle-outcomes-section,
.aiops-governance-readiness-section,
.aiops-advisory-model-section,
.aiops-final-cta-section {
width: auto !important;
max-width: calc(100% - 32px) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.aiops-governance-readiness-section > .kt-row-column-wrap,
.aiops-lifecycle-outcomes-section .aiops-lifecycle-outcomes-grid,
.aiops-advisory-model-section > .kt-row-column-wrap,
.aiops-final-cta-section > .kt-row-column-wrap {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
}
/* =========================================================
AI-ENABLED PAGE — MOBILE OPERATING MODEL INNER RAIL
Purpose:
Keeps the Operating Model cards inside the mobile section
canvas while preserving Kadence's natural stacked mobile
card layout.
========================================================= */
@media (max-width: 767px) {
.aiops-model-grid-row {
width: calc(100% - 24px) !important;
max-width: calc(100% - 24px) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.aiops-model-grid-row .kt-row-column-wrap {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
.aiops-model-grid-row .wp-block-kadence-column,
.aiops-model-grid-row .kt-inside-inner-col,
.aiops-model-card,
.aiops-model-card .kt-blocks-info-box-link-wrap {
max-width: 100% !important;
box-sizing: border-box !important;
}
}
/* =========================================================
AI-ENABLED PAGE — MOBILE CORE SHIFT LIST VIEW
Purpose:
Provides a mobile-only replacement for the desktop/tablet
tactical vs. strategic comparison matrix.
Why this exists:
The desktop/tablet matrix uses five-column comparison rows:
tactical icon / tactical text / arrow / strategic icon /
strategic text. That structure works on wider screens but
becomes cramped and confusing on mobile.
Mobile behavior:
- Hide the original desktop/tablet matrix.
- Show the mobile-only grouped comparison section.
- Preserve the original tactical and strategic icons.
- Keep each item as a simple icon + text row.
- Remove arrows entirely on mobile.
- Keep text in the right lane with normal wrapping.
========================================================= */
/* Hidden by default so desktop/tablet remain protected. */
.aiops-core-mobile-comparison {
display: none;
}
@media (max-width: 767px) {
/* Hide the original comparison matrix on mobile. */
.aiops-core-comparison-matrix {
display: none !important;
}
/* Show the mobile replacement only on mobile. */
.aiops-core-mobile-comparison {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin-top: 0px !important;
box-sizing: border-box !important;
}
/* Mobile card shell for Tactical and Strategic groups. */
.aiops-core-mobile-card {
width: calc(100% - 24px) !important;
max-width: calc(100% - 24px) !important;
margin: 0 auto 14px auto !important;
padding: 0 !important;
overflow: hidden !important;
background: #ffffff !important;
border: 1px solid #DDE7F3 !important;
border-radius: 10px !important;
box-sizing: border-box !important;
}
.aiops-core-mobile-card:last-child {
margin-bottom: 0 !important;
}
/* Shared heading bar. */
.aiops-core-mobile-card h3 {
margin: 0 !important;
padding: 10px 14px !important;
color: #ffffff !important;
font-size: 16px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
}
.aiops-core-mobile-tactical h3 {
background: #001FB1 !important;
}
.aiops-core-mobile-strategic h3 {
background: #00A83B !important;
}
/* Outer item row:
This row wraps each duplicated mobile item. It owns the
divider line, but not the icon/text column layout. */
.aiops-core-mobile-comparison .aiops-core-mobile-item {
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid rgba(0, 31, 177, 0.08) !important;
box-sizing: border-box !important;
}
.aiops-core-mobile-card .aiops-core-mobile-item:last-child,
.aiops-core-mobile-card .aiops-contrast-row-last {
border-bottom: none !important;
}
/* Make every Kadence wrapper between the outer item row and
the inner icon/text row full width. This prevents the inner
row from inheriting a narrow centered content width. */
.aiops-core-mobile-comparison .aiops-core-mobile-item,
.aiops-core-mobile-comparison .aiops-core-mobile-item > .kt-row-layout-inner,
.aiops-core-mobile-comparison .aiops-core-mobile-item > .kt-row-layout-inner > .kt-row-column-wrap,
.aiops-core-mobile-comparison .aiops-core-mobile-item > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column,
.aiops-core-mobile-comparison .aiops-core-mobile-item > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col,
.aiops-core-mobile-comparison .aiops-core-mobile-item-line,
.aiops-core-mobile-comparison .aiops-core-mobile-item-line > .kt-row-layout-inner {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Inner icon/text row:
The class aiops-core-mobile-item-line must be on the inner
Row Layout that directly contains the icon column and the
text column.
Flex is used instead of grid because Kadence's mobile
column handling can fight grid placement and squeeze text
into a narrow lane. */
.aiops-core-mobile-comparison .aiops-core-mobile-item-line > .kt-row-layout-inner > .kt-row-column-wrap {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
max-width: 100% !important;
padding: 12px 14px !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* Icon lane:
Fixed width keeps all icons aligned vertically. */
.aiops-core-mobile-comparison .aiops-core-mobile-item-line > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column:first-child {
flex: 0 0 52px !important;
width: 52px !important;
max-width: 52px !important;
min-width: 52px !important;
box-sizing: border-box !important;
}
/* Text lane:
Uses all remaining width and allows normal sentence wrapping. */
.aiops-core-mobile-comparison .aiops-core-mobile-item-line > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(2) {
flex: 1 1 auto !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.aiops-core-mobile-comparison .aiops-core-mobile-item-line > .kt-row-layout-inner > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Neutralize desktop nudges inherited from Section 03. */
.aiops-core-mobile-comparison .aiops-tactical-icon,
.aiops-core-mobile-comparison .aiops-strategic-icon,
.aiops-core-mobile-comparison .aiops-strategic-text {
position: static !important;
left: auto !important;
}
/* Icon cleanup and slight right nudge:
Keeps the icon/text row structure intact, but moves the
icons closer to the text so the 20/80 mobile split feels
more visually connected. */
.aiops-core-mobile-comparison .aiops-tactical-icon,
.aiops-core-mobile-comparison .aiops-strategic-icon {
margin: 0 !important;
padding: 0 !important;
transform: translateX(10px) !important;
}
.aiops-core-mobile-comparison .aiops-tactical-icon figure,
.aiops-core-mobile-comparison .aiops-strategic-icon figure {
margin: 0 !important;
padding: 0 !important;
}
.aiops-core-mobile-comparison .aiops-tactical-icon img,
.aiops-core-mobile-comparison .aiops-strategic-icon img {
width: 44px !important;
height: 44px !important;
max-width: 44px !important;
object-fit: contain !important;
display: block !important;
}
/* Text cleanup:
The key pieces are width:100%, min-width:0 on the parent,
and normal word wrapping. */
.aiops-core-mobile-comparison .aiops-tactical-text,
.aiops-core-mobile-comparison .aiops-strategic-text {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
color: #1f2f46 !important;
font-size: 14px !important;
line-height: 1.4 !important;
text-align: left !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
}
/* =========================================================
03. CORE SHIFT SECTION
Purpose:
Fine-tunes the comparison matrix while preserving the
Kadence row/column structure.
========================================================= */
/* Left column divider under heading */
.aiops-core-shift-section .aiops-core-shift-divider {
margin-left: 0 !important;
margin-right: auto !important;
}
/* Tactical icon nudge */
.aiops-core-shift-section .aiops-tactical-icon {
position: relative;
left: 18px;
}
/* Strategic text nudge */
.aiops-core-shift-section .aiops-strategic-text {
position: relative;
left: -18px;
}
/* Comparison row rhythm */
.aiops-core-shift-section .aiops-contrast-row,
.aiops-core-shift-section .aiops-contrast-row .kt-row-layout-inner,
.aiops-core-shift-section .aiops-contrast-row .kt-row-column-wrap {
min-height: 0 !important;
height: auto !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.aiops-core-shift-section .aiops-contrast-row .kt-row-column-wrap {
align-items: center !important;
}
.aiops-core-shift-section .aiops-contrast-row + .aiops-contrast-row {
margin-top: 8px !important;
}
.aiops-core-shift-section .aiops-contrast-row.aiops-contrast-row-first .kt-row-column-wrap {
padding-top: 8px !important;
}
.aiops-core-shift-section .aiops-contrast-row.aiops-contrast-row-last .kt-row-column-wrap {
padding-bottom: 10px !important;
}
.aiops-core-shift-section .aiops-contrast-row:not(.aiops-contrast-row-last) {
border-bottom: 1px solid rgba(0, 31, 177, 0.08);
padding-bottom: 4px !important;
}
/* Comparison center divider through arrow columns */
.aiops-core-shift-section .kadence-column14_b50b3e-55,
.aiops-core-shift-section .kadence-column14_4bd102-e6,
.aiops-core-shift-section .kadence-column14_d68ff3-45,
.aiops-core-shift-section .kadence-column14_5dd5c5-bd,
.aiops-core-shift-section .kadence-column14_c649e6-9e {
position: relative;
}
.aiops-core-shift-section .kadence-column14_b50b3e-55::before,
.aiops-core-shift-section .kadence-column14_4bd102-e6::before,
.aiops-core-shift-section .kadence-column14_d68ff3-45::before,
.aiops-core-shift-section .kadence-column14_5dd5c5-bd::before,
.aiops-core-shift-section .kadence-column14_c649e6-9e::before {
content: "";
position: absolute;
left: 50%;
top: -6px;
bottom: -6px;
width: 1px;
transform: translateX(-50%);
background: rgba(0, 31, 177, 0.22);
z-index: 0;
}
.aiops-core-shift-section .kadence-column14_b50b3e-55 > .kt-inside-inner-col,
.aiops-core-shift-section .kadence-column14_4bd102-e6 > .kt-inside-inner-col,
.aiops-core-shift-section .kadence-column14_d68ff3-45 > .kt-inside-inner-col,
.aiops-core-shift-section .kadence-column14_5dd5c5-bd > .kt-inside-inner-col,
.aiops-core-shift-section .kadence-column14_c649e6-9e > .kt-inside-inner-col {
position: relative;
z-index: 1;
}
/* =========================================================
04. OPERATING MODEL SECTION
Purpose:
Keeps the model cards equal height within each row.
Tablet keeps Kadence's 3x2 layout but applies a narrower
visual rail so card gutters stay inside the section edge.
========================================================= */
.aiops-model-grid-row .kt-row-column-wrap {
align-items: stretch !important;
}
.aiops-model-grid-row .wp-block-kadence-column > .kt-inside-inner-col {
height: 100%;
}
.aiops-model-card {
height: 100%;
}
.aiops-model-card .kt-blocks-info-box-link-wrap {
height: 100%;
align-items: flex-start !important;
}
/* Tablet visual rail for model card rows
Kadence keeps the 3x2 layout, while this narrows only the
visual card rows so gutter math does not push cards past
the section boundary on tablet. */
@media (min-width: 768px) and (max-width: 1024px) {
.aiops-model-grid-row {
width: calc(100% - 48px) !important;
max-width: calc(100% - 48px) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.aiops-model-grid-row .kt-row-column-wrap {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
}
/* =========================================================
05. LIFECYCLE / OUTCOMES WORKFLOW SUPPORT
Purpose:
Controls items Kadence cannot easily manage:
single-card width, custom number/title styling, and workflow
connector overlay.
========================================================= */
/* Single-card workflow rows match one card in paired rows */
.aiops-lifecycle-outcomes-section .aiops-workflow-row-single.aiops-workflow-card {
width: calc((100% - 12px) / 2);
margin-left: auto !important;
margin-right: auto !important;
}
/* Custom HTML heading row */
.aiops-lifecycle-outcomes-section .aiops-workflow-heading {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 0 6px 0 !important;
line-height: 1.2;
}
/* Text-only number badge */
.aiops-lifecycle-outcomes-section .aiops-workflow-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background: transparent;
color: #00A83B;
font-family: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
font-size: 22px;
font-weight: 300;
line-height: 1;
letter-spacing: -0.06em;
flex: 0 0 auto;
}
/* Workflow title inside custom HTML */
.aiops-lifecycle-outcomes-section .aiops-workflow-title {
color: #001FB1;
font-size: 16px;
font-weight: 700;
}
/* Workflow connector overlay */
.aiops-lifecycle-outcomes-section .aiops-workflow-model {
position: relative;
}
.aiops-lifecycle-outcomes-section .aiops-workflow-connector-overlay {
position: absolute;
left: 0;
right: 0;
top: 86px;
height: 420px;
z-index: 1;
pointer-events: none;
}
.aiops-lifecycle-outcomes-section .aiops-workflow-row,
.aiops-lifecycle-outcomes-section .aiops-workflow-card {
position: relative;
z-index: 2;
}
.aiops-lifecycle-outcomes-section .aiops-workflow-connector {
position: absolute;
left: 0;
right: 0;
height: 34px;
display: block;
}
/* Connector vertical positions */
.aiops-lifecycle-outcomes-section .aiops-workflow-connector-1 {
top: 60px;
}
.aiops-lifecycle-outcomes-section .aiops-workflow-connector-2 {
top: 170px;
}
.aiops-lifecycle-outcomes-section .aiops-workflow-connector-3 {
top: 275px;
}
/* Split connector: one card branches into two cards */
.aiops-lifecycle-outcomes-section .aiops-workflow-connector-split {
background:
linear-gradient(rgba(0,168,59,0.65), rgba(0,168,59,0.65)) 50% 0 / 1px 12px no-repeat,
linear-gradient(rgba(0,168,59,0.65), rgba(0,168,59,0.65)) 50% 12px / 50% 1px no-repeat,
linear-gradient(rgba(0,168,59,0.65), rgba(0,168,59,0.65)) 25% 12px / 1px 12px no-repeat,
linear-gradient(rgba(0,168,59,0.65), rgba(0,168,59,0.65)) 75% 12px / 1px 12px no-repeat;
}
/* Merge connector: two cards merge into one card */
.aiops-lifecycle-outcomes-section .aiops-workflow-connector-merge {
background:
linear-gradient(rgba(0,168,59,0.65), rgba(0,168,59,0.65)) 25% 0 / 1px 12px no-repeat,
linear-gradient(rgba(0,168,59,0.65), rgba(0,168,59,0.65)) 75% 0 / 1px 12px no-repeat,
linear-gradient(rgba(0,168,59,0.65), rgba(0,168,59,0.65)) 50% 12px / 50% 1px no-repeat,
linear-gradient(rgba(0,168,59,0.65), rgba(0,168,59,0.65)) 50% 12px / 1px 12px no-repeat;
}
/* =========================================================
AI-ENABLED PAGE — MOBILE WORKFLOW CARD NORMALIZATION
Purpose:
Simplifies the Agentic Workflow Lifecycle on mobile.
Mobile behavior:
- Removes the custom workflow connector overlay because the
desktop/tablet line geometry does not translate cleanly to
stacked mobile cards.
- Makes single-card and paired-card rows use the same full
mobile width.
- Gives workflow cards a consistent minimum height so the
lifecycle reads as a clean vertical sequence.
========================================================= */
@media (max-width: 767px) {
/* Remove workflow connector lines on mobile only. */
.aiops-lifecycle-outcomes-section .aiops-workflow-connector-overlay {
display: none !important;
}
/* Make all workflow rows use the same mobile width. */
.aiops-lifecycle-outcomes-section .aiops-workflow-row,
.aiops-lifecycle-outcomes-section .aiops-workflow-row-single.aiops-workflow-card,
.aiops-lifecycle-outcomes-section .aiops-workflow-row-pair,
.aiops-lifecycle-outcomes-section .aiops-workflow-card {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/* Tighten stacked cards inside the former paired workflow rows. */
.aiops-lifecycle-outcomes-section .aiops-workflow-row-pair > .kt-row-layout-inner > .kt-row-column-wrap {
row-gap: 5px !important;
}
/* Normalize individual card height and internal alignment. */
.aiops-lifecycle-outcomes-section .aiops-workflow-card {
min-height: 118px !important;
display: flex !important;
align-items: center !important;
}
.aiops-lifecycle-outcomes-section .aiops-workflow-card > .kt-row-layout-inner,
.aiops-lifecycle-outcomes-section .aiops-workflow-card > .kt-row-layout-inner > .kt-row-column-wrap {
width: 100% !important;
max-width: 100% !important;
min-height: 118px !important;
align-items: center !important;
box-sizing: border-box !important;
}
/* Keep workflow text centered and prevent inherited spacing from
creating uneven card height. */
.aiops-lifecycle-outcomes-section .aiops-workflow-card p {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
/* =========================================================
AI-ENABLED PAGE — TABLET WORKFLOW CONNECTOR ALIGNMENT
Purpose:
Preserves the desktop workflow connector design while
adjusting connector positions on tablet, where Kadence
card spacing changes the vertical rhythm.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.aiops-lifecycle-outcomes-section .aiops-workflow-connector-overlay {
top: 106px !important;
}
.aiops-lifecycle-outcomes-section .aiops-workflow-connector-2 {
top: 188px !important;
}
.aiops-lifecycle-outcomes-section .aiops-workflow-connector-3 {
top: 314px !important;
}
}
/* =========================================================
AI-ENABLED PAGE — TABLET OUTCOME CARD HEIGHTS
Purpose:
Equalizes Operational Outcomes cards on tablet while keeping
the existing Kadence two-card row structure intact.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.aiops-lifecycle-outcomes-section .aiops-outcomes-row > .kt-row-column-wrap {
align-items: stretch !important;
}
.aiops-lifecycle-outcomes-section .aiops-outcomes-row .wp-block-kadence-column,
.aiops-lifecycle-outcomes-section .aiops-outcomes-row .wp-block-kadence-column > .kt-inside-inner-col,
.aiops-lifecycle-outcomes-section .aiops-outcome-card {
height: 100% !important;
}
.aiops-lifecycle-outcomes-section .aiops-outcome-card .kt-blocks-info-box-link-wrap {
height: 100% !important;
display: flex !important;
align-items: flex-start !important;
box-sizing: border-box !important;
}
}
/* =========================================================
06. GOVERNANCE PANEL
Purpose:
Tightens the left blue governance list and standardizes
the governance image icons.
========================================================= */
.aiops-governance-panel .aiops-governance-icon-img {
margin: 0 !important;
padding: 0 !important;
}
.aiops-governance-panel .aiops-governance-icon-img img {
width: 50px !important;
height: 50px !important;
object-fit: contain !important;
display: block !important;
margin: 0 !important;
}
.aiops-governance-panel .aiops-governance-list-item {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.aiops-governance-panel .aiops-governance-list-item > .kt-row-column-wrap {
align-items: center !important;
}
.aiops-governance-panel .aiops-governance-list-item p {
margin-top: 0 !important;
margin-bottom: 0 !important;
line-height: 1.35 !important;
}
.aiops-governance-panel .aiops-governance-list-item figure,
.aiops-governance-panel .aiops-governance-list-item .kb-advanced-image {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* =========================================================
AI-ENABLED PAGE — MOBILE GOVERNANCE ROW RHYTHM
Purpose:
Adds breathing room between Governance list rows on mobile
after the icon/text columns have been kept in one row.
Why this exists:
The desktop Governance CSS intentionally removes row margin
and padding for a compact desktop panel. On mobile, once the
icon/text rows remain side-by-side, the rows need a small
vertical gap so the items do not read as one dense paragraph.
========================================================= */
@media (max-width: 767px) {
.aiops-governance-panel .aiops-governance-list-item {
margin-bottom: 10px !important;
}
.aiops-governance-panel .aiops-governance-list-item:last-of-type {
margin-bottom: 0 !important;
}
}
/* =========================================================
07. READINESS PANEL
Purpose:
Tightens the right readiness panel and prevents the image
lane from constraining the readiness icons.
========================================================= */
.aiops-readiness-panel {
--aiops-readiness-icon-size: 46px;
--aiops-readiness-icon-lane: 56px;
--aiops-readiness-icon-gap: 10px;
}
/* Intro paragraph under the right-panel heading */
.aiops-readiness-panel > .kt-inside-inner-col > p {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Two-item readiness row */
.aiops-readiness-panel .aiops-readiness-grid {
margin-top: 10px !important;
margin-bottom: 0 !important;
}
.aiops-readiness-panel .aiops-readiness-grid > .kt-row-column-wrap {
align-items: center !important;
}
/* Individual readiness item */
.aiops-readiness-panel .aiops-readiness-item {
margin: 0 !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
}
/* Key fix:
The Kadence 15% / 85% item split can make the image lane
too narrow. This gives the image lane a fixed width while
keeping the text flexible. */
.aiops-readiness-panel .aiops-readiness-item > .kt-row-column-wrap {
display: grid !important;
grid-template-columns: var(--aiops-readiness-icon-lane) minmax(0, 1fr) !important;
column-gap: var(--aiops-readiness-icon-gap) !important;
align-items: center !important;
}
/* Readiness image column */
.aiops-readiness-panel .aiops-readiness-item > .kt-row-column-wrap > .wp-block-kadence-column:first-child {
width: var(--aiops-readiness-icon-lane) !important;
max-width: var(--aiops-readiness-icon-lane) !important;
min-width: var(--aiops-readiness-icon-lane) !important;
}
/* Readiness image block */
.aiops-readiness-panel .aiops-readiness-item figure,
.aiops-readiness-panel .aiops-readiness-item .wp-block-kadence-image,
.aiops-readiness-panel .aiops-readiness-item .kb-advanced-image {
margin: 0 !important;
padding: 0 !important;
}
/* Readiness image size */
.aiops-readiness-panel .aiops-readiness-item img {
width: var(--aiops-readiness-icon-size) !important;
height: var(--aiops-readiness-icon-size) !important;
max-width: none !important;
object-fit: contain !important;
display: block !important;
}
/* Readiness item label */
.aiops-readiness-panel .aiops-readiness-item h4 {
margin: 0 !important;
line-height: 1.25 !important;
}
/* Readiness panel center divider */
.aiops-readiness-panel .aiops-readiness-grid > .kt-row-column-wrap {
position: relative;
}
.aiops-readiness-panel .aiops-readiness-grid > .kt-row-column-wrap::before {
content: "";
position: absolute;
top: 12px;
bottom: 12px;
left: 50%;
width: 1px;
transform: translateX(-50%);
background: rgba(0, 31, 177, 0.14);
}
/* Readiness panel background match for icon matte */
.aiops-readiness-panel {
background-color: #FCFCFC !important;
}
/* =========================================================
AI-ENABLED PAGE — MOBILE READINESS ROW RHYTHM
Purpose:
Cleans up the "Before AI Can Act" readiness list on mobile.
Mobile behavior:
- Removes the desktop/tablet center divider lines.
- Keeps the existing first-row distance from the intro
paragraph unchanged.
- Equalizes the vertical rhythm between readiness items.
- Does not change text, icon size, or desktop/tablet layout.
========================================================= */
@media (max-width: 767px) {
/* Remove the vertical divider lines on mobile. */
.aiops-readiness-panel .aiops-readiness-grid > .kt-row-column-wrap::before {
display: none !important;
}
/* Preserve the existing first grid spacing from the paragraph.
Only normalize spacing on readiness rows after the first one. */
.aiops-readiness-panel .aiops-readiness-grid:not(:first-of-type) {
margin-top: 4px !important;
}
/* Equalize the gap between stacked readiness items inside each
original two-column readiness row. */
.aiops-readiness-panel .aiops-readiness-grid > .kt-row-column-wrap {
row-gap: 8px !important;
gap: 8px !important;
}
/* Remove extra inherited margins so row-gap becomes the only
vertical spacing source between readiness items. */
.aiops-readiness-panel .aiops-readiness-item {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
/* =========================================================
08. ADVISORY MODEL CARD ARROWS
Purpose:
Adds a subtle directional cue between advisory cards without
adding icons, image blocks, or extra Kadence structure.
========================================================= */
.aiops-advisory-card {
position: relative;
}
.aiops-advisory-card:not(:last-child)::after {
content: "→";
position: absolute;
top: 50%;
right: -14px;
transform: translateY(-50%);
color: #00A83B;
font-size: 20px;
font-weight: 600;
line-height: 1;
z-index: 2;
}
/* =========================================================
AI-ENABLED PAGE — TABLET ADVISORY MODEL FLOW
Purpose:
Adjusts the advisory cards for tablet by tightening the
stacked-card rhythm and changing the desktop right-facing
arrows into downward arrows.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.aiops-advisory-model-section .aiops-advisory-card-row > .kt-row-column-wrap {
row-gap: 18px !important;
column-gap: 16px !important;
}
.aiops-advisory-model-section .aiops-advisory-card {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.aiops-advisory-model-section .aiops-advisory-card:not(:last-child)::after {
content: "↓";
top: auto;
right: auto;
bottom: -17px;
left: 50%;
transform: translateX(-50%);
font-size: 18px;
line-height: 1;
}
}
/* =========================================================
AI-ENABLED PAGE — TABLET FINAL CTA BUTTON
Purpose:
Gives the Schedule a Consultation button enough room on
tablet so the arrow stays on the same line.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.aiops-final-cta-section .kb-buttons-wrap {
justify-content: flex-end !important;
flex-wrap: nowrap !important;
}
.aiops-final-cta-section .kb-button {
min-width: 265px !important;
white-space: nowrap !important;
text-align: center !important;
box-sizing: border-box !important;
}
}
/* =========================================================
AI-ENABLED PAGE — MOBILE ADVISORY MODEL FLOW
Purpose:
Adjusts the Advisory Engagement Model for mobile.
Mobile behavior:
- Keeps the advisory cards stacked.
- Tightens the vertical spacing between cards.
- Converts the desktop right-facing arrows into centered
downward arrows between cards.
- Does not affect desktop or tablet.
========================================================= */
@media (max-width: 767px) {
/* Tighten stacked-card rhythm on mobile. */
.aiops-advisory-model-section .aiops-advisory-card-row > .kt-row-column-wrap {
row-gap: 22px !important;
gap: 18px !important;
}
.aiops-advisory-model-section .aiops-advisory-card {
margin-top: 0 !important;
margin-bottom: 0 !important;
position: relative !important;
overflow: visible !important;
}
/* Convert desktop right arrows into centered down arrows. */
.aiops-advisory-model-section .aiops-advisory-card:not(:last-child)::after {
content: "↓" !important;
top: auto !important;
right: auto !important;
bottom: -17px !important;
left: 50% !important;
transform: translateX(-50%) !important;
color: #00A83B !important;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 1 !important;
z-index: 2 !important;
}
}
/* ============= TESTING ================ */