/* Concepta Management – premium visual layer (home sections, photo banners, effects) */
:root { --cm-navy: #022B6D; --cm-blue: #246BFD; --cm-violet: #3E00A7; --cm-ink: #1F2B38; --cm-text: #4A5563; --cm-line: #D8E7EF; }

/* ---------- Section headings ---------- */
.cm-head { gap: 10px; margin-bottom: 30px; }
.cm-head-center { text-align: center; align-items: center !important; max-width: 840px; margin-left: auto; margin-right: auto; }
.cm-head-center .cm-lead, .cm-head-center .cm-lead p { margin-left: auto; margin-right: auto; }
.cm-h2-fx .elementor-heading-title { position: relative; display: inline-block; padding-bottom: 16px; }
.cm-h2-fx .elementor-heading-title::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; border-radius: 4px;
	background: linear-gradient(90deg, var(--cm-blue), var(--cm-violet)); transition: width .6s ease;
}
.cm-head-center .cm-h2-fx .elementor-heading-title::after { left: 50%; transform: translateX(-50%); }
.cm-head:hover .cm-h2-fx .elementor-heading-title::after { width: 130px; }

/* ---------- Agency marquee ---------- */
.cm-marquee-wrap { background: var(--cm-navy); --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }
.cm-marquee { display: flex; align-items: stretch; overflow: hidden; color: #fff; }
.cm-marquee__label {
	flex: 0 0 auto; margin: 0; padding: 24px 30px; display: flex; align-items: center;
	background: linear-gradient(135deg, var(--cm-blue), var(--cm-violet));
	font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #fff;
	clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%); padding-right: 46px;
}
.cm-marquee__track { overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.cm-marquee__inner { display: inline-flex; white-space: nowrap; animation: cmMarquee 40s linear infinite; }
.cm-marquee:hover .cm-marquee__inner { animation-play-state: paused; }
.cm-marquee__item { display: inline-flex; align-items: center; gap: 14px; padding: 24px 32px; font-size: 17px; font-weight: 600; letter-spacing: .02em; color: #fff; }
.cm-marquee__item i { color: #9FC0FF; font-size: 11px; }
@keyframes cmMarquee { to { transform: translateX(-50%); } }

/* ---------- Service image cards ---------- */
.cm-home-services { position: relative; }
.cm-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.cm-svc {
	position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden;
	border: 1px solid var(--cm-line); box-shadow: 0 10px 30px rgba(2, 43, 109, .07); color: inherit; text-decoration: none !important;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease, border-color .5s ease;
}
.cm-svc:hover { transform: translateY(-10px); box-shadow: 0 30px 64px rgba(2, 43, 109, .18); border-color: rgba(36, 107, 253, .35); }
.cm-svc::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: linear-gradient(90deg, var(--cm-blue), var(--cm-violet)); transition: width .55s ease; }
.cm-svc:hover::after { width: 100%; }
.cm-svc__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #E9EFF7; }
.cm-svc__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.cm-svc:hover .cm-svc__media img { transform: scale(1.1); }
.cm-svc__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 43, 109, 0) 35%, rgba(2, 43, 109, .6)); }
.cm-svc__media::before {
	content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; z-index: 2;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-20deg); transition: left .9s ease;
}
.cm-svc:hover .cm-svc__media::before { left: 135%; }
.cm-svc__body { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 28px 30px; flex: 1; }
.cm-svc__top { display: flex; justify-content: space-between; align-items: flex-end; margin-top: -32px; position: relative; z-index: 3; }
.cm-svc__icon {
	width: 64px; height: 64px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--cm-blue), var(--cm-violet)); color: #fff; font-size: 24px;
	box-shadow: 0 14px 28px rgba(36, 107, 253, .38); transition: transform .5s ease;
}
.cm-svc:hover .cm-svc__icon { transform: rotate(-8deg) scale(1.07); }
.cm-svc__no { font-size: 46px; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px #C2D3EA; transition: -webkit-text-stroke-color .4s; }
.cm-svc:hover .cm-svc__no { -webkit-text-stroke-color: var(--cm-blue); }
.cm-svc__title { display: block; font-size: 21px; font-weight: 600; color: var(--cm-ink); line-height: 1.35; margin-top: 8px; }
.cm-svc__text { display: block; color: var(--cm-text); line-height: 1.65; font-size: 15.5px; }
.cm-svc__more { margin-top: auto; padding-top: 8px; color: var(--cm-blue); font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.cm-svc__more i { transition: transform .35s ease; }
.cm-svc:hover .cm-svc__more i { transform: translateX(6px); }

/* ---------- Stats band ---------- */
.cm-stats-band {
	position: relative; overflow: hidden; isolation: isolate; padding: 100px 20px !important;
	background: linear-gradient(120deg, rgba(2, 43, 109, .95), rgba(8, 70, 198, .82)), url(/wp-content/uploads/2026/10/cm-port-containers.jpg) center / cover fixed;
}
.cm-stats-band::before, .cm-stats-band::after {
	content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none;
	width: 560px; height: 560px; background: radial-gradient(circle, rgba(36, 107, 253, .55), transparent 70%);
	top: -220px; right: -140px; animation: cmBlob 14s ease-in-out infinite alternate;
}
.cm-stats-band::after { top: auto; bottom: -260px; right: auto; left: -160px; background: radial-gradient(circle, rgba(62, 0, 167, .5), transparent 70%); animation-duration: 18s; }
.cm-stats-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }
.cm-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.cm-count {
	text-align: center; padding: 38px 18px; border-radius: 20px; background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	transition: transform .45s ease, background .45s ease, border-color .45s ease;
}
.cm-count:hover { transform: translateY(-8px); background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .35); }
.cm-count__num { display: block; font-size: 54px; font-weight: 700; color: #fff; line-height: 1.05; letter-spacing: -.01em; }
.cm-count__label { display: block; margin-top: 12px; color: #CFDDFF; font-weight: 500; font-size: 16px; }
@keyframes cmBlob { to { transform: translate(-90px, 70px) scale(1.18); } }

/* ---------- Image stack (Why Concepta) ---------- */
.cm-split-media { align-items: center !important; }
.cm-media-stack { position: relative; padding: 0 64px 64px 0; }
.cm-media-stack__main { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 64px rgba(2, 43, 109, .2); }
.cm-media-stack__sub {
	position: absolute; right: 0; bottom: 0; width: 48%; aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: 18px; border: 8px solid #fff; box-shadow: 0 22px 44px rgba(2, 43, 109, .22);
}
.cm-badge-float {
	position: absolute; left: -22px; top: 30px; max-width: 240px; background: #fff; border-radius: 16px; padding: 18px 22px;
	box-shadow: 0 22px 44px rgba(2, 43, 109, .2); border-left: 4px solid var(--cm-blue);
}
.cm-badge-float__num { display: block; font-size: 30px; font-weight: 700; color: var(--cm-navy); line-height: 1.1; }
.cm-badge-float__text { display: block; font-size: 14px; color: var(--cm-text); line-height: 1.45; margin-top: 4px; }

/* ---------- Closing call to action ---------- */
.cm-cta-hero { position: relative; overflow: hidden; isolation: isolate; padding: 130px 20px !important; background: url(/wp-content/uploads/2026/10/cm-air-freight.jpg) center / cover; }
.cm-cta-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(120deg, rgba(2, 43, 109, .95), rgba(62, 0, 167, .78), rgba(36, 107, 253, .88));
	background-size: 220% 220%; animation: cmGrad 12s ease infinite;
}
.cm-cta-hero-inner { position: relative; z-index: 2; align-items: center !important; text-align: center; max-width: 860px; margin: 0 auto; gap: 14px; }
.cm-cta-hero .elementor-heading-title { color: #fff !important; }
.cm-cta-hero h2.elementor-heading-title { font-size: 48px; line-height: 1.15; }
.cm-cta-hero .cm-eyebrow .elementor-heading-title { color: #9FC0FF !important; }
.cm-cta-hero .cm-lead p, .cm-cta-hero .cm-lead a { color: #E3ECFF; }
.cm-cta-hero .cm-btns { justify-content: center; }
.cm-cta-hero .cm-btn .elementor-button { background: #fff; color: var(--cm-navy); border-color: #fff; }
.cm-cta-hero .cm-btn .elementor-button:hover { background: var(--cm-navy); color: #fff; border-color: var(--cm-navy); }
.cm-cta-hero .cm-btn-outline .elementor-button { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .85); }
.cm-cta-hero .cm-btn-outline .elementor-button:hover { background: #fff; color: var(--cm-navy); }
@keyframes cmGrad { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* ---------- Photo banners on inner pages ---------- */
.cm-banner { position: relative; overflow: hidden; isolation: isolate; }
.cm-banner::before {
	content: ""; position: absolute; inset: -4%; z-index: -2;
	background: var(--cm-banner-img, none) center / cover no-repeat;
	animation: cmKen 26s ease-in-out infinite alternate;
}
.cm-banner::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(115deg, rgba(2, 43, 109, .97) 0%, rgba(2, 43, 109, .86) 45%, rgba(8, 70, 198, .55) 100%);
}
@keyframes cmKen { from { transform: scale(1); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
body.page-id-396  { --cm-banner-img: url(/wp-content/uploads/2026/10/cm-office.jpg); }
body.page-id-721  { --cm-banner-img: url(/wp-content/uploads/2026/10/cm-port-containers.jpg); }
body.page-id-1890 { --cm-banner-img: url(/wp-content/uploads/2026/10/cm-capitol.jpg); }
body.page-id-1891 { --cm-banner-img: url(/wp-content/uploads/2026/10/cm-warehouse.jpg); }
body.page-id-1892 { --cm-banner-img: url(/wp-content/uploads/2026/10/cm-contract.jpg); }
body.page-id-1893 { --cm-banner-img: url(/wp-content/uploads/2026/10/cm-strategy.jpg); }
body.page-id-1894 { --cm-banner-img: url(/wp-content/uploads/2026/10/cm-analytics.jpg); }
body.page-id-2011 { --cm-banner-img: url(/wp-content/uploads/2026/10/cm-air-freight.jpg); }
body.page-id-2013 { --cm-banner-img: url(/wp-content/uploads/2026/10/cm-checklist.jpg); }
body.page-id-2018 { --cm-banner-img: url(/wp-content/uploads/2026/10/cm-capitol.jpg); }
body.page-id-2020 { --cm-banner-img: url(/wp-content/uploads/2026/10/cm-forklifts.jpg); }
body.page-id-522  { --cm-banner-img: url(/wp-content/uploads/2026/10/cm-strategy.jpg); }
body.page-id-543  { --cm-banner-img: url(/wp-content/uploads/2026/10/cm-port-containers.jpg); }

/* ---------- Card & button polish site-wide ---------- */
.cm-card { position: relative; overflow: hidden; }
.cm-card::before {
	content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; z-index: 1;
	background: linear-gradient(90deg, var(--cm-blue), var(--cm-violet)); transform: scaleX(0); transform-origin: left; transition: transform .5s ease;
}
.cm-card:hover::before { transform: scaleX(1); }
.cm-card:hover { border-color: rgba(36, 107, 253, .35) !important; }
.cm-ibox .elementor-icon { transition: transform .45s ease, background .45s ease, color .45s ease; }
.cm-card:hover .cm-ibox .elementor-icon { transform: rotate(-8deg) scale(1.06); background: linear-gradient(135deg, var(--cm-blue), var(--cm-violet)); color: #fff !important; }
.cm-card:hover .cm-ibox .elementor-icon i, .cm-card:hover .cm-ibox .elementor-icon svg { color: #fff; fill: #fff; }
.cm-btn .elementor-button { position: relative; overflow: hidden; }
.cm-btn .elementor-button::after {
	content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .7s ease;
}
.cm-btn .elementor-button:hover::after { left: 140%; }

/* ---------- Five-card service grid (3 + 2, second row centred) ---------- */
.cm-svc-grid--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cm-svc-grid--5 > .cm-svc { grid-column: span 2; }
.cm-svc-grid--5 > .cm-svc:nth-child(4) { grid-column: 2 / span 2; }
.cm-svc-grid--5 > .cm-svc:nth-child(5) { grid-column: 4 / span 2; }

/* ---------- Video blocks ---------- */
.cm-video .elementor-wrapper, .cm-video .elementor-video { border-radius: 20px; overflow: hidden; }
.cm-video .elementor-wrapper { box-shadow: 0 30px 64px rgba(2, 43, 109, .22); }
.cm-video-caption { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; color: var(--cm-ink); }
.cm-video-caption i { color: #FF0000; font-size: 22px; }
.cm-home-intro .cm-head { margin-bottom: 10px; }

/* ---------- Link lists, pills, certification card ---------- */
.cm-links { list-style: none; margin: 4px 0 0; padding: 0; }
.cm-links li { margin: 0; border-top: 1px solid #EEF2F7; }
.cm-links li:first-child { border-top: 0; }
.cm-links a { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; color: var(--cm-ink); font-weight: 500; text-decoration: none; transition: color .2s ease, padding-left .2s ease; }
.cm-links a::after { content: "\2192"; color: var(--cm-blue); transition: transform .2s ease; }
.cm-links a:hover { color: var(--cm-blue); padding-left: 4px; }
.cm-links a:hover::after { transform: translateX(4px); }
.cm-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #FFF4E5; color: #8A4B00; font-weight: 600; font-size: 13px; white-space: nowrap; }
.cm-cert { border-left: 4px solid var(--cm-blue) !important; }
.cm-about-stats .cm-card { text-align: center; }

/* ---------- 4-column tables (Value is column 3) ---------- */
.cm-table-4 td:nth-child(4) { white-space: normal; font-weight: 400; color: var(--cm-text); }
.cm-table-4 td:nth-child(3) { white-space: nowrap; font-weight: 600; color: var(--cm-ink); }

/* ---------- Home banner photo ---------- */
.banner-one-thumb .thumb > img { border-radius: 24px; box-shadow: 0 30px 64px rgba(2, 43, 109, .25); object-fit: cover; }

/* ---------- Why Concepta strength cards (home) ---------- */
.cm-why-card { text-align: center; transition: transform .45s ease, box-shadow .45s ease; }
.cm-why-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(2, 43, 109, .14); }
.cm-why-icon { margin: 0 0 6px; }
.cm-why-icon i {
	width: 64px; height: 64px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--cm-blue), var(--cm-violet)); color: #fff; font-size: 26px;
	box-shadow: 0 14px 28px rgba(36, 107, 253, .3);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.cm-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
	.cm-svc-grid--5 > .cm-svc, .cm-svc-grid--5 > .cm-svc:nth-child(4), .cm-svc-grid--5 > .cm-svc:nth-child(5) { grid-column: auto; }
	.cm-svc-grid--5 > .cm-svc:nth-child(5) { grid-column: 1 / -1; }
	.cm-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cm-cta-hero h2.elementor-heading-title { font-size: 38px; }
}
@media (hover: none), (max-width: 1024px) {
	.cm-stats-band { background-attachment: scroll; }
}
@media (max-width: 767px) {
	.cm-marquee__label { display: none; }
	.cm-marquee__item { padding: 16px 20px; font-size: 15px; }
	.cm-svc-grid, .cm-svc-grid--5 { grid-template-columns: 1fr; }
	.cm-svc-grid--5 > .cm-svc:nth-child(5) { grid-column: auto; }
	.cm-svc__body { padding: 0 22px 24px; }
	.cm-stats-band { padding: 64px 16px !important; }
	.cm-count { padding: 26px 12px; }
	.cm-count__num { font-size: 38px; }
	.cm-count__label { font-size: 14px; }
	.cm-media-stack { padding: 0 28px 34px 0; }
	.cm-badge-float { left: 10px; top: 10px; padding: 12px 16px; max-width: 200px; }
	.cm-badge-float__num { font-size: 24px; }
	.cm-cta-hero { padding: 84px 16px !important; }
	.cm-cta-hero h2.elementor-heading-title { font-size: 30px; }
}

/* ---------- Motion (respecting reduced-motion preferences) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.cm-media-stack__sub { animation: cmFloat 7s ease-in-out infinite; }
	.cm-badge-float { animation: cmFloat 6s ease-in-out infinite reverse; }
	.cm-js .cm-svc-grid > .cm-reveal:nth-child(2), .cm-js .cm-counts > .cm-reveal:nth-child(2) { transition-delay: .1s; }
	.cm-js .cm-svc-grid > .cm-reveal:nth-child(3), .cm-js .cm-counts > .cm-reveal:nth-child(3) { transition-delay: .2s; }
	.cm-js .cm-svc-grid > .cm-reveal:nth-child(4), .cm-js .cm-counts > .cm-reveal:nth-child(4) { transition-delay: .3s; }
	.cm-js .cm-svc-grid > .cm-reveal:nth-child(5) { transition-delay: .4s; }
	.cm-js .cm-svc-grid > .cm-reveal:nth-child(6) { transition-delay: .5s; }
}
@media (prefers-reduced-motion: reduce) {
	.cm-marquee__inner, .cm-banner::before, .cm-cta-hero::before, .cm-stats-band::before, .cm-stats-band::after { animation: none !important; }
}