/* ============================================================
   EMS landing — additive visual polish. Loaded AFTER the theme
   CSS. Only hover/transition/shadow/focus effects — no layout
   or brand changes, so it can't break the existing design.
   ============================================================ */

html { scroll-behavior: smooth; }

/* --- Cards: hover elevation (transform + shadow, no reflow) --- */
.cs_post,
.cs_service,
.cs_iconbox,
.cs_accordian { transition: transform .28s ease, box-shadow .28s ease; }
.cs_post:hover,
.cs_service:hover { transform: translateY(-6px); }
.cs_post:hover { box-shadow: 0 20px 44px rgba(16, 27, 43, .13) !important; }
.cs_accordian:hover { box-shadow: 0 10px 28px rgba(16, 27, 43, .09); }

/* --- Partner logos: gentle lift on hover --- */
.cs_brand img { transition: transform .3s ease; }
.cs_brand:hover img { transform: translateY(-3px) scale(1.04); }

/* --- Buttons: lift + glow --- */
.cs_btn.cs_style_1 { transition: transform .2s ease, box-shadow .2s ease; }
.cs_btn.cs_style_1:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(10, 152, 245, .30); }

/* --- Hero: heading/body legibility over imagery + smoother nav --- */
.cs_hero .cs_hero_text h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .28); }
.cs_hero .cs_hero_text p { text-shadow: 0 1px 10px rgba(0, 0, 0, .25); }
.cs_swiper_button_prev,
.cs_swiper_button_next { transition: transform .2s ease, background-color .2s ease; }
.cs_swiper_button_prev:hover,
.cs_swiper_button_next:hover { transform: scale(1.08); }

/* --- Nav links --- */
.cs_nav_list li a { transition: color .2s ease, opacity .2s ease; }
.cs_nav_list li a:hover { opacity: .85; }

/* --- Footer: link hover + rhythm --- */
.cs_menu_widget li a,
.cs_footer_item a { transition: color .2s ease, padding-left .2s ease; }
.cs_menu_widget li a:hover { color: #0a98f5; padding-left: 4px; }
.cs_footer_item a:hover { color: #0a98f5; }
.cs_copyright a { transition: color .2s ease; }
.cs_copyright a:hover { color: #0a98f5; }

/* --- Accessible keyboard focus everywhere --- */
a:focus-visible,
button:focus-visible,
.cs_btn:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid #0a98f5;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ============================================================
   Modern pass (prototyped live via Playwright, then baked)
   ============================================================ */

/* Tighter, bolder headings */
h1, h2 { letter-spacing: -0.02em; font-weight: 700; }

/* Service cards: rounded + soft modern elevation (replaces harsh bootstrap shadow) */
.cs_service.cs_style_1 {
    border-radius: 16px !important;
    box-shadow: 0 12px 34px rgba(16, 27, 43, .10) !important;
    border: 1px solid #eef2f7 !important;
    transition: transform .28s ease, box-shadow .28s ease !important;
}
.cs_service.cs_style_1:hover { transform: translateY(-8px); box-shadow: 0 24px 52px rgba(16, 27, 43, .16) !important; }
.cs_service_thumb, .cs_service_thumb-in, .cs_service_thumb-in.background-filled { border-radius: 12px !important; }
.cs_service_btn { box-shadow: 0 10px 24px rgba(10, 152, 245, .42) !important; }

/* Rounded buttons, blog cards, benefit icon chips */
.cs_btn.cs_style_1 { border-radius: 10px !important; font-weight: 600 !important; }
.cs_post.cs_style_1 { border-radius: 16px !important; overflow: hidden; }
.cs_iconbox_icon { border-radius: 16px !important; }

/* Blue→amber accent bar under major section headings */
.cs_section_heading_in > h2.cs_fs_48 { position: relative; padding-bottom: 14px; }
.cs_section_heading_in > h2.cs_fs_48::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px;
    background: linear-gradient(90deg, #0a72d6, #f5a623); border-radius: 3px;
}

/* --- Page header: text legibility + consistent min-height --- */
.cs_page_header { min-height: 300px; }
.cs_page_header h1 { text-shadow: 0 2px 16px rgba(0, 0, 0, .38); }
.cs_page_header .breadcrumb-item,
.cs_page_header .breadcrumb-item a,
.cs_page_header .breadcrumb-item.active { text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }

/* --- Accordion (product pages) --- */
.cs_accordian { border-color: #e3e9f0 !important; border-radius: 14px !important; transition: box-shadow .2s ease; }
.cs_accordian:hover { box-shadow: 0 10px 28px rgba(16, 27, 43, .08); }

/* --- "Main Business" sidebar box + team cards --- */
.cs_service_list { border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(16, 27, 43, .08); }
.cs_team.cs_style_1 { box-shadow: 0 14px 40px rgba(16, 27, 43, .12); transition: transform .28s ease, box-shadow .28s ease; }
.cs_team.cs_style_1:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(16, 27, 43, .18); }

/* --- Respect reduced-motion preference --- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .cs_post, .cs_service, .cs_iconbox, .cs_accordian,
    .cs_brand img, .cs_btn.cs_style_1 { transition: none; }
}

/* ============================================================
   Compact / Bold / Defined direction (industrial-modern).
   Appended last so it supersedes the softer pass above.
   ============================================================ */

/* Tinted page background so white cards/sections read as distinct */
body { background: #eef2f7; }

/* COMPACT: trim the theme's oversized section padding */
.cs_pt_140 { padding-top: 68px !important; }
.cs_pb_140 { padding-bottom: 68px !important; }
.cs_pt_133 { padding-top: 62px !important; }
.cs_pb_133 { padding-bottom: 62px !important; }
.cs_pt_100 { padding-top: 52px !important; }
.cs_pb_100 { padding-bottom: 52px !important; }
.cs_pb_93  { padding-bottom: 50px !important; }
.cs_pt_50  { padding-top: 36px !important; }

/* BOLD, tighter headings */
h1, h2 { font-weight: 800; letter-spacing: -.025em; line-height: 1.12; }
.cs_fs_48 { font-size: 37px !important; }
.cs_fs_60 { font-size: 44px !important; }

/* DEFINED cards — solid border instead of a soft blended shadow */
.cs_service.cs_style_1,
.cs_post.cs_style_1 {
    border: 1.5px solid #d3dde9 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
.cs_service.cs_style_1:hover {
    border-color: #0a72d6 !important;
    box-shadow: 0 8px 18px rgba(10, 114, 214, .14) !important;
    transform: translateY(-4px);
}
.cs_btn.cs_style_1 { border-radius: 8px !important; font-weight: 700 !important; }

/* Navbar active state */
.cs_nav_list li a.active { color: #f5a623 !important; font-weight: 700; }

/* ============================================================
   One-page hybrid: anchor offsets + Member/Career sections
   ============================================================ */

/* Anchored sections clear the 95px fixed header when scrolled to.
   #home (hero) is excluded so it sits flush at the very top. */
#about, #why, #business, #member, #career, #contact, #partners { scroll-margin-top: 100px; }

/* Career — dark industrial band holding a bold job list.
   The theme leaves cs_pt_135 undefined (0px top) and cs_pb_135 at a huge 135px,
   so set our own balanced vertical padding instead. */
.ems-career-section { background: #0e1b2b; padding-top: 90px !important; padding-bottom: 84px !important; }
@media (max-width: 991px) { .ems-career-section { padding-top: 60px !important; padding-bottom: 58px !important; } }
.ems-career-section::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 88% 12%, rgba(10, 152, 245, .18), transparent 42%);
}
.ems-job-row {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    background: #fff; border: 1.5px solid #22344a; border-radius: 12px;
    padding: 18px 22px; margin-bottom: 14px; text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ems-job-row:hover { transform: translateX(4px); border-color: #0a72d6; box-shadow: 0 12px 26px rgba(0, 0, 0, .30); }
.ems-job-title { font-size: 19px; font-weight: 800; color: #0e1b2b; margin: 0 0 4px; letter-spacing: -.02em; }
.ems-job-meta { font-size: 13.5px; color: #5b6b7d; }
.ems-job-meta i { color: #0a72d6; margin: 0 4px 0 6px; }
.ems-job-arrow {
    flex: none; width: 42px; height: 42px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: #eef4fb; color: #0a72d6; font-size: 16px;
    transition: background .2s ease, color .2s ease;
}
.ems-job-row:hover .ems-job-arrow { background: #0a72d6; color: #fff; }
.ems-job-empty { color: #cdd8e6; justify-content: center; text-align: center; }
.ems-job-empty a { color: #0a98f5; font-weight: 700; }

/* ============================================================
   Product pages: category card grid + detail spec cards
   ============================================================ */

/* Category page — bold product cards */
.ems-prod-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1.5px solid #d3dde9; border-radius: 14px;
    overflow: hidden; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.ems-prod-card:hover { transform: translateY(-5px); border-color: #0a72d6; box-shadow: 0 14px 30px rgba(10, 114, 214, .16); }
.ems-prod-thumb { display: block; overflow: hidden; background: #eef2f7; aspect-ratio: 16 / 10; }
.ems-prod-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ems-prod-card:hover .ems-prod-thumb img { transform: scale(1.05); }
.ems-prod-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.ems-prod-title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: #0e1b2b; margin: 0 0 8px; }
.ems-prod-desc { font-size: 14px; color: #5b6b7d; line-height: 1.6; margin: 0 0 16px; }
.ems-prod-link { margin-top: auto; align-self: flex-start; font-weight: 700; color: #0a72d6; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.ems-prod-link i { transition: transform .2s ease; }
.ems-prod-link:hover { color: #085aa8; }
.ems-prod-link:hover i { transform: translateX(4px); }

/* Detail page — spec cards (replaces the raw table) */
.ems-spec-card {
    background: #fff; border: 1.5px solid #d3dde9; border-left: 4px solid #0a72d6;
    border-radius: 12px; padding: 22px 24px; margin-bottom: 18px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ems-spec-card:hover { box-shadow: 0 10px 24px rgba(16, 27, 43, .10); }
.ems-spec-title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: #0e1b2b; margin: 0 0 10px; }
.ems-spec-desc { font-size: 14.5px; color: #46586b; line-height: 1.7; }
.ems-spec-desc p:last-child { margin-bottom: 0; }
.ems-spec-links { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #d3dde9; }
.ems-spec-links-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: #8a97a6; margin-bottom: 8px; }
.ems-spec-links-items { display: flex; flex-wrap: wrap; gap: 8px; }
.ems-spec-links-items a {
    display: inline-flex; align-items: center; gap: 6px;
    background: #eef4fb; color: #0a72d6; font-size: 13px; font-weight: 600;
    padding: 7px 14px; border-radius: 8px; text-decoration: none; transition: background .2s ease, color .2s ease;
}
.ems-spec-links-items a:hover { background: #0a72d6; color: #fff; }

/* Shared empty-state card */
.ems-empty { padding: 28px; text-align: center; color: #5b6b7d; background: #fff; border: 1.5px dashed #d3dde9; border-radius: 12px; }