/* ==========================================================
   Elementor layout for the Mekefine Home page.
   All selectors are scoped to .ek-* classes (set on the
   containers/widgets in elementor/home.json), so they never
   affect other Elementor pages you build.
   ========================================================== */

/* ---------- Resets for Elementor wrappers ---------- */
.e-con.ek-section { width: 100%; padding: 0; gap: 0; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; }
.ek-section .e-con { min-width: 0; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; padding: 0; }
.ek-section .elementor-widget:not(:last-child), .ek-section .elementor-widget { margin-block-end: 0; margin-bottom: 0; }
.e-con.ek-wrap { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; box-sizing: border-box; }
@media (min-width: 1024px) { .e-con.ek-wrap { padding-inline: 2rem; } }
.e-con.ek-wrap, .ek-section .e-con { gap: 0; }
.ek-section img { max-width: 100%; height: auto; display: block; }
.ek-section .elementor-widget-image img { width: 100%; }

/* ---------- Typography ---------- */
.ek-section .elementor-heading-title { font-family: var(--font-display) !important; color: var(--foreground) !important; letter-spacing: -0.03em; margin: 0; padding: 0; }
.ek-section .elementor-widget-text-editor, .ek-section .elementor-widget-text-editor p { font-family: var(--font-sans); color: var(--foreground); margin: 0; }
.ek-section .ek-muted, .ek-section .ek-muted p { color: var(--muted-fg); }
.ek-section .ek-small, .ek-section .ek-small p { font-size: .875rem; }
.ek-section .ek-cyan, .ek-section .ek-cyan p { color: var(--cyan); }
.ek-section .ek-lime, .ek-section .ek-lime p { color: var(--lime); }
.ek-section .ek-num, .ek-section .ek-num p { font-family: var(--font-display); font-size: .875rem; }
.ek-section .ek-cyan .elementor-heading-title, span.ek-cyan { color: var(--cyan) !important; }
.ek-section .ek-eyebrow .elementor-heading-title { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan) !important; line-height: 1.5; font-family: var(--font-sans) !important; }
.ek-section .ek-h1 .elementor-heading-title { font-size: 3rem; font-weight: 800; line-height: .98; }
.ek-section .ek-h2 .elementor-heading-title { font-size: 2.25rem; font-weight: 800; line-height: 1.15; }
.ek-section .ek-h3 .elementor-heading-title { font-size: 1.875rem; font-weight: 700; line-height: 1.15; }
.ek-section .ek-h3-sm .elementor-heading-title { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
@media (min-width: 640px) {
  .ek-section .ek-h1 .elementor-heading-title { font-size: 3.75rem; }
  .ek-section .ek-h2 .elementor-heading-title { font-size: 3rem; }
  .ek-section .ek-h2-xl .elementor-heading-title { font-size: 3.75rem; line-height: 1.05; }
}
@media (min-width: 1280px) { .ek-section .ek-h1 .elementor-heading-title { font-size: 4.5rem; } }
.ek-section .ek-on-dark .elementor-heading-title { color: var(--primary-fg) !important; }
.ek-section .ek-on-dark-text, .ek-section .ek-on-dark-text p { color: color-mix(in oklab, var(--primary-fg) 75%, transparent); }

/* ---------- Buttons ---------- */
.ek-section .ek-btn .elementor-button { height: 3.25rem; padding: 0 1.75rem !important; border-radius: 999px !important; font-family: var(--font-sans) !important; font-size: .95rem !important; font-weight: 500 !important; line-height: 1 !important; border: 1px solid transparent; box-shadow: none; transition: background-color .2s, color .2s, border-color .2s; display: inline-flex; align-items: center; justify-content: center; text-transform: none; letter-spacing: 0; }
.ek-section .ek-btn-hero .elementor-button { background: var(--primary) !important; color: var(--primary-fg) !important; box-shadow: var(--shadow-elegant); }
.ek-section .ek-btn-hero .elementor-button:hover { background: var(--cyan) !important; color: var(--primary-fg) !important; }
.ek-section .ek-btn-pill .elementor-button { background: transparent !important; color: var(--foreground) !important; border-color: color-mix(in oklab, var(--primary) 20%, transparent) !important; }
.ek-section .ek-btn-pill .elementor-button:hover { color: var(--cyan) !important; border-color: var(--cyan) !important; }
.e-con.ek-btn-row { flex-direction: row; flex-wrap: wrap; gap: .75rem; }
.e-con.ek-btn-row.ek-center { justify-content: center; }

/* ---------- Hero ---------- */
.e-con.ek-hero { position: relative; overflow: hidden; display: block; }
.ek-hero::before { content: ""; position: absolute; inset: 0; background-image: var(--gradient-glow); pointer-events: none; }
.e-con.ek-hero-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; padding-top: 3.5rem; padding-bottom: 5rem; }
.ek-hero-copy .ek-h1 { margin-top: 1.5rem; }
.ek-hero-copy .ek-lead { margin-top: 1.75rem; max-width: 32rem; }
.ek-section .ek-lead, .ek-section .ek-lead p { font-size: 1.125rem; color: var(--muted-fg); }
.ek-hero-copy .ek-btn-row { margin-top: 2.5rem; }
.e-con.ek-hero-visual { position: relative; display: block; }
.ek-hero-main { margin-left: auto; width: 85%; aspect-ratio: 5/6; overflow: hidden; border-radius: 2.5rem; box-shadow: var(--shadow-elegant); }
.ek-hero-main img { width: 100%; height: 100%; object-fit: cover; }
.ek-hero-float { position: absolute; bottom: 2.5rem; left: 0; width: 42%; overflow: hidden; border-radius: 1.5rem; border: 4px solid var(--background); box-shadow: var(--shadow-elegant); animation: float 6s ease-in-out infinite; }
.ek-hero-float img { aspect-ratio: 1; object-fit: cover; }
.e-con.ek-hero-stat { position: absolute; right: 1rem; top: 2rem; width: auto; border-radius: 1rem; padding: 1rem 1.25rem; background: color-mix(in oklab, var(--card) 90%, transparent); box-shadow: var(--shadow-elegant); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ek-section .ek-stat-num .elementor-heading-title { font-size: 1.875rem; font-weight: 800; line-height: 1.2; }
.ek-section .ek-stat-label, .ek-section .ek-stat-label p { font-size: .75rem; color: var(--muted-fg); }
@media (min-width: 1024px) {
  .e-con.ek-hero-grid { grid-template-columns: repeat(12, 1fr); padding-top: 5rem; }
  .e-con.ek-hero-copy { grid-column: span 6; }
  .e-con.ek-hero-visual { grid-column: span 6; }
}

/* ---------- Capabilities ---------- */
.e-con.ek-capabilities { padding-block: 6rem; }
.e-con.ek-cap-head { display: grid; gap: 1.5rem; }
.ek-cap-head .ek-muted { align-self: end; }
.e-con.ek-cap-grid { display: grid; gap: 1.25rem; margin-top: 3.5rem; }
.e-con.ek-cap-feature { position: relative; min-height: 26rem; overflow: hidden; border-radius: 2rem; justify-content: flex-end; padding: 2rem; color: var(--primary-fg); isolation: isolate; }
.ek-cap-feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--primary), color-mix(in oklab, var(--primary) 40%, transparent), transparent); }
.ek-cap-feature .ek-h3 { margin-top: .5rem; }
.ek-cap-feature .ek-on-dark-text { margin-top: .75rem; max-width: 28rem; }
.e-con.ek-cap-cards { display: grid; gap: 1.25rem; align-content: start; }
.e-con.ek-cap-card { flex-direction: row; align-items: flex-start; gap: 1.5rem; border: 1px solid var(--border); border-radius: 2rem; background: var(--card); padding: 1.75rem; transition: border-color .2s; }
.e-con.ek-cap-card:hover { border-color: var(--cyan); }
.e-con.ek-cap-card-body { flex: 1; }
.ek-cap-card-body .ek-muted { margin-top: .5rem; }
@media (min-width: 640px) { .e-con.ek-cap-feature { padding: 2.5rem; } }
@media (min-width: 1024px) {
  .e-con.ek-cap-head { grid-template-columns: repeat(12, 1fr); }
  .ek-cap-head > .elementor-widget:first-child { grid-column: span 7; }
  .ek-cap-head > .elementor-widget:last-child { grid-column: span 5; }
  .e-con.ek-cap-grid { grid-template-columns: 7fr 5fr; }
}

/* ---------- Product universe (shortcode) ---------- */
.e-con.ek-universe-wrap { width: 100%; }
.ek-universe-wrap .elementor-widget-shortcode, .ek-universe-wrap .elementor-shortcode { width: 100%; }

/* ---------- Private label ---------- */
.e-con.ek-pl { position: relative; overflow: hidden; background: var(--primary); color: var(--primary-fg); padding-block: 7rem; }
.ek-pl::after { content: ""; position: absolute; right: -10rem; top: -10rem; width: 37.5rem; height: 37.5rem; border-radius: 50%; background: color-mix(in oklab, var(--cyan) 20%, transparent); filter: blur(64px); pointer-events: none; }
.ek-pl .ek-wrap { position: relative; z-index: 1; }
.ek-section.ek-pl .elementor-heading-title { color: var(--primary-fg) !important; }
.ek-pl .ek-h2 { margin-top: 1.25rem; }
.e-con.ek-pl-grid { display: grid; gap: 2.5rem; margin-top: 4rem; }
.e-con.ek-pl-steps { display: block; }
.ek-pl .ek-step { border-bottom: 1px solid color-mix(in oklab, var(--primary-fg) 10%, transparent); padding-block: 1.25rem; cursor: pointer; }
.ek-pl .ek-step .elementor-heading-title { color: color-mix(in oklab, var(--primary-fg) 35%, transparent) !important; font-size: 1.5rem; font-weight: 700; transition: color .2s; display: flex; align-items: baseline; gap: 1.25rem; }
.ek-pl .ek-step.is-active .elementor-heading-title { color: var(--primary-fg) !important; }
.ek-pl .ek-step .ek-num { font-family: var(--font-display); font-size: .875rem; font-weight: 500; }
.ek-pl .ek-step.is-active .ek-num { color: var(--lime); }
.e-con.ek-pl-visual { position: relative; display: block; min-height: 22.5rem; overflow: hidden; border-radius: 2rem; }
.e-con.ek-pl-panel { position: absolute; inset: 0; display: none; }
.e-con.ek-pl-panel.is-active { display: block; }
.ek-pl-panel .ek-pl-img { position: absolute; inset: 0; }
.ek-pl-panel .ek-pl-img img { width: 100%; height: 100%; object-fit: cover; }
.ek-section.ek-pl .ek-pl-badge { position: absolute; bottom: 1.5rem; left: 1.5rem; width: auto; border-radius: 999px; padding: .5rem 1.25rem; background: color-mix(in oklab, var(--background) 90%, transparent); }
.ek-section.ek-pl .ek-pl-badge .elementor-heading-title { color: var(--foreground) !important; font-size: .875rem; font-weight: 600; letter-spacing: 0; }
@media (min-width: 640px) { .ek-pl .ek-step .elementor-heading-title { font-size: 1.875rem; } }
@media (min-width: 1024px) { .e-con.ek-pl-grid { grid-template-columns: 5fr 7fr; } }
/* In the Elementor editor show all panels stacked so each can be edited */
body.elementor-editor-active .e-con.ek-pl-panel { position: relative; display: block; min-height: 22rem; margin-bottom: 1rem; }
body.elementor-editor-active .e-con.ek-pl-visual { overflow: visible; }

/* ---------- Innovation ---------- */
.e-con.ek-innov { padding-block: 7rem; }
.e-con.ek-innov-grid { display: grid; gap: 3.5rem; align-items: center; }
.ek-innov-img { border-radius: 2rem; overflow: hidden; box-shadow: var(--shadow-elegant); }
.ek-innov-img img { width: 100%; object-fit: cover; }
.ek-innov-copy .ek-h2 { margin-top: 1.5rem; }
.ek-innov-copy .ek-muted { margin-top: 1.5rem; }
.ek-section .ek-icon-cyan .elementor-icon { color: var(--cyan); font-size: 2rem; padding: 0; }
.ek-section .ek-icon-cyan .elementor-icon svg, .ek-section .ek-icon-cyan .elementor-icon i { width: 2rem; height: 2rem; font-size: 2rem; }
.ek-section .ek-icon-sm .elementor-icon i, .ek-section .ek-icon-sm .elementor-icon { font-size: 1.25rem; }
.ek-section .ek-dot-list { margin-top: 2rem; font-size: .875rem; font-weight: 500; }
.ek-dot-list .elementor-icon-list-item { padding-block: .375rem; }
.ek-dot-list .elementor-icon-list-icon, .ek-dot-list .elementor-icon-list-icon i, .ek-dot-list .elementor-icon-list-icon svg { color: var(--lime); fill: var(--lime); font-size: .5rem; width: .5rem; }
.ek-dot-list .elementor-icon-list-text { color: var(--foreground); font-family: var(--font-sans); padding-left: .75rem; }
@media (min-width: 1024px) { .e-con.ek-innov-grid { grid-template-columns: 7fr 5fr; } }

/* ---------- Excellence ---------- */
.e-con.ek-exc-hero { position: relative; height: 70vh; min-height: 30rem; overflow: hidden; justify-content: flex-end; isolation: isolate; }
.ek-exc-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, color-mix(in oklab, var(--primary) 90%, transparent), color-mix(in oklab, var(--primary) 50%, transparent), transparent); }
.e-con.ek-exc-text { padding-bottom: 4rem; }
.ek-exc-text .ek-h2 { margin-top: 1rem; max-width: 42rem; }
.e-con.ek-exc-stats-grid { display: grid; }
.e-con.ek-exc-stat { border-bottom: 1px solid var(--border); padding-block: 2.5rem; }
.ek-exc-stat .ek-stat-big { margin-top: 1rem; }
.ek-section .ek-stat-big .elementor-heading-title { font-size: 2.25rem; font-weight: 800; line-height: 1.2; }
.ek-exc-stat .ek-muted { margin-top: .25rem; }
@media (min-width: 640px) {
  .e-con.ek-exc-stats-grid { grid-template-columns: repeat(3, 1fr); }
  .e-con.ek-exc-stat { border-bottom: 0; border-right: 1px solid var(--border); padding-inline: 2rem; }
  .e-con.ek-exc-stat:last-child { border-right: 0; }
}

/* ---------- Final CTA ---------- */
.e-con.ek-final { padding-block: 6rem; }
.e-con.ek-final-cta { overflow: hidden; border-radius: 2.5rem; background: var(--gradient-brand); padding: 5rem 2rem; text-align: center; align-items: center; }
.ek-section.ek-final .elementor-heading-title { color: var(--primary) !important; text-align: center; }
.ek-final-cta .ek-h2 { max-width: 48rem; margin-inline: auto; }
.ek-section .ek-cta-text, .ek-section .ek-cta-text p { color: color-mix(in oklab, var(--primary) 80%, transparent); text-align: center; }
.ek-final-cta .ek-cta-text { margin: 1.5rem auto 0; max-width: 36rem; }
.ek-final-cta .ek-btn-row { margin-top: 2.5rem; }
@media (min-width: 640px) { .e-con.ek-final-cta { padding-inline: 4rem; } }