/* ============================================================
   Lumon & Co. — Design system (Elementor 4 / WordPress)
   Loaded by the lumon-child theme via wp_enqueue_scripts.

   Font files live at:  lumon-child/assets/fonts/
   Image assets live at: lumon-child/assets/img/
   Logo SVGs live at:   lumon-child/assets/
   ============================================================ */

/* ── Google Fonts (mono) ────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

/* ── Magnetik (body / UI) ───────────────────────────────────── */
@font-face { font-family: "Magnetik"; src: url("./fonts/Magnetik-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Magnetik"; src: url("./fonts/Magnetik-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Magnetik"; src: url("./fonts/Magnetik-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Magnetik"; src: url("./fonts/Magnetik-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Magnetik"; src: url("./fonts/Magnetik-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

/* ── Europa Grotesk SH (display / wordmark) ─────────────────── */
@font-face { font-family: "Europa Grotesk SH"; src: url("./fonts/SG - Europa Grotesk SH OP DemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Europa Grotesk SH"; src: url("./fonts/SG - Europa Grotesk SH OP Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

/* ── Design tokens ──────────────────────────────────────────── */
:root {
  --lumon-red:        #EF2200;
  --lumon-red-tint:   #FFEEEE;
  --lumon-red-deep:   #C71D00;
  --lumon-red-700:    #C71D00;
  --lumon-red-50:     #FFEEEE;

  --ink-900:  #1A1A1A;
  --ink-800:  #333333;
  --ink-700:  #333333;
  --ink-600:  #4A4A4A;
  --ink-500:  #7F7F7F;
  --ink-400:  #999999;
  --ink-300:  #CCCCCC;
  --ink-200:  #CCCCCC;
  --ink-100:  #E5E5E5;
  --ink-50:   #F2F2F2;
  --paper:    #FFFFFF;

  --bg-app:        var(--ink-100);
  --bg-canvas:     var(--paper);
  --bg-elevated:   var(--ink-800);
  --bg-elevated-2: var(--ink-900);
  --bg-tint:       var(--lumon-red-tint);

  --fg-primary:    var(--ink-900);
  --fg-secondary:  var(--ink-500);
  --fg-muted:      var(--ink-500);
  --fg-on-dark:    #FFFFFF;
  --fg-on-dark-2:  rgba(255,255,255,0.72);
  --fg-on-red:     #FFFFFF;
  --fg-accent:     var(--lumon-red);

  --border-subtle:  rgba(26,26,26,0.08);
  --border-strong:  rgba(26,26,26,0.22);
  --border-on-dark: rgba(255,255,255,0.14);

  --status-success: #2BA66B;
  --status-warning: #E8A23A;
  --status-danger:  var(--lumon-red);
  --status-info:    #2C7BD1;

  --font-display: "Europa Grotesk SH", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Magnetik", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-hero:    72px;   --lh-hero:    1.02;   --tr-hero:    -0.025em;
  --fs-display: 56px;   --lh-display: 1.05;   --tr-display: -0.022em;
  --fs-h1:      40px;   --lh-h1:      1.1;    --tr-h1:      -0.018em;
  --fs-h2:      30px;   --lh-h2:      1.15;   --tr-h2:      -0.012em;
  --fs-h3:      22px;   --lh-h3:      1.25;   --tr-h3:      -0.006em;
  --fs-h4:      18px;   --lh-h4:      1.3;    --tr-h4:       0;
  --fs-body:    16px;   --lh-body:    1.55;   --tr-body:     0;
  --fs-small:   14px;   --lh-small:   1.5;    --tr-small:    0;
  --fs-caption: 12px;   --lh-caption: 1.4;    --tr-caption:  0.02em;
  --fs-eyebrow: 12px;   --lh-eyebrow: 1.2;    --tr-eyebrow:  0.12em;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  --r-xs:   4px;  --r-sm:   8px;  --r-md:   12px;
  --r-lg:   20px; --r-xl:   28px; --r-2xl:  28px;
  --r-kv:   28px; --r-pill: 999px; --r-app-icon: 22%;

  --shadow-1:   0 1px 2px rgba(26,30,31,0.06), 0 1px 1px rgba(26,30,31,0.04);
  --shadow-2:   0 4px 10px rgba(26,30,31,0.08), 0 1px 2px rgba(26,30,31,0.04);
  --shadow-3:   0 12px 28px rgba(26,30,31,0.14), 0 2px 4px rgba(26,30,31,0.05);
  --shadow-red: 0 8px 24px rgba(255,62,26,0.22);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:   cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast:   120ms; --dur-base: 200ms; --dur-slow: 320ms;

  --container-narrow: 720px;
  --container-base:   1080px;
  --container-wide:   1280px;
  --container-max:    1440px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--lumon-red-deep); text-underline-offset: 0.18em; }
a:hover { color: var(--lumon-red-700); }
::selection { background: var(--lumon-red); color: #fff; }

html, body { background: var(--ink-100); }
.l-page { min-height: 100vh; }

/* ── Elementor scaffolding ──────────────────────────────────── */
.elementor-section { position: relative; }
.elementor-section-boxed > .elementor-container {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: flex; flex-wrap: wrap; gap: 0;
}
.elementor-section-full-width > .elementor-container {
  max-width: 100%; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
}
.elementor-column { display: flex; flex-direction: column; min-width: 0; }
.elementor-col-100 { width: 100%; }
.elementor-col-66  { width: 66.666%; }
.elementor-col-50  { width: 50%; }
.elementor-col-33  { width: 33.333%; }
.elementor-col-25  { width: 25%; }
.elementor-widget-wrap { display: flex; flex-direction: column; flex: 1 1 auto; padding: 0; }
.elementor-widget { width: 100%; }
.elementor-widget + .elementor-widget { margin-top: 20px; }
.elementor-widget-container { width: 100%; }

/* Section helpers */
.s-pad-xl { padding: 96px 0; }
.s-pad-lg { padding: 72px 0; }
.s-pad-md { padding: 48px 0; }
.s-pad-sm { padding: 28px 0; }
.s-bg-dark    { background: var(--ink-900); color: #fff; }
.s-bg-darker  { background: #0f0f0f; color: #fff; }
.s-bg-paper   { background: var(--paper); }
.s-bg-tint    { background: var(--lumon-red-tint); }
.s-bg-red     { background: var(--lumon-red); color: #fff; }
.s-bg-app     { background: var(--ink-100); }

/* ── Header ─────────────────────────────────────────────────── */
.l-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border-subtle);
}
.l-header[data-style="solid"]       { background: #fff; backdrop-filter: none; }
.l-header[data-style="dark"]        { background: var(--ink-900); border-bottom-color: rgba(255,255,255,0.08); color: #fff; }
.l-header[data-style="transparent"] { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: none; backdrop-filter: none; color: #fff; }

.l-header-inner {
  max-width: 1280px; margin: 0 auto; padding: 14px 32px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px;
}
.l-header[data-style="dark"] .l-nav a,
.l-header[data-style="transparent"] .l-nav a { color: rgba(255,255,255,0.86); }
.l-header[data-style="dark"] .l-nav a:hover,
.l-header[data-style="transparent"] .l-nav a:hover { color: #fff; }
.l-header[data-style="dark"] .l-link,
.l-header[data-style="transparent"] .l-link { color: rgba(255,255,255,0.7); }

.l-lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.l-lockup img { width: 38px; height: 38px; border-radius: var(--r-app-icon); }
.l-word { font: 600 18px/0.95 var(--font-display); letter-spacing: -0.025em; }
.l-tag  { font: 500 10px/1.2 var(--font-body); color: var(--ink-500); margin-top: 2px; letter-spacing: 0.01em; }
.l-header[data-style="dark"] .l-tag,
.l-header[data-style="transparent"] .l-tag { color: rgba(255,255,255,0.6); }

/* Nav — supports both bare <a> and WP default <ul><li><a> structure */
.l-nav { display: flex; gap: 28px; justify-self: center; list-style: none; padding: 0; margin: 0; }
.l-nav li { list-style: none; }
.l-nav a { color: var(--ink-800); text-decoration: none; font: 500 14px/1 var(--font-body); padding: 6px 0; display: inline-block; }
.l-nav a:hover { color: var(--lumon-red-deep); }
.l-nav a[aria-current="page"],
.l-nav .current-menu-item > a { color: var(--lumon-red); }

.l-actions { display: flex; gap: 14px; align-items: center; }
.l-link { color: var(--ink-800); font: 500 13px/1 var(--font-mono); text-decoration: none; }

/* Split header */
.l-header[data-style="split"] .l-topbar {
  background: var(--ink-900); color: #fff; font: 500 12px/1 var(--font-mono);
  padding: 8px 32px; display: flex; gap: 24px; justify-content: flex-end;
}
.l-header[data-style="split"] .l-topbar a { color: rgba(255,255,255,0.85); text-decoration: none; }
.l-header[data-style="split"] .l-topbar a:hover { color: #fff; }

/* ── Buttons ─────────────────────────────────────────────────── */
.l-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 12px 20px; border-radius: 12px; border: none;
  font: 500 14px/1 var(--font-body); letter-spacing: -0.005em;
  transition: all 200ms var(--ease-out); text-decoration: none; white-space: nowrap;
}
.l-btn--primary     { background: var(--lumon-red); color: #fff; }
.l-btn--primary:hover { background: var(--lumon-red-deep); box-shadow: var(--shadow-red); transform: translateY(-1px); }
.l-btn--dark        { background: var(--ink-900); color: #fff; }
.l-btn--dark:hover  { background: var(--ink-800); }
.l-btn--light       { background: #fff; color: var(--ink-900); }
.l-btn--light:hover { background: var(--ink-100); }
.l-btn--ghost       { background: transparent; color: var(--ink-900); box-shadow: inset 0 0 0 1.5px var(--ink-800); }
.l-btn--ghost:hover { background: var(--ink-900); color: #fff; }
.l-btn--ghost-light       { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.6); }
.l-btn--ghost-light:hover { background: rgba(255,255,255,0.1); }
.l-btn--lg { padding: 16px 28px; font-size: 15px; }
.l-btn--sm { padding: 9px 14px; font-size: 13px; }

/* ── Type helpers ────────────────────────────────────────────── */
.l-eyebrow       { font: 600 12px/1.2 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.l-eyebrow--light { color: rgba(255,255,255,0.55); }
.l-eyebrow--red   { color: var(--lumon-red); }
.l-h1  { font: 600 56px/1.04 var(--font-display); letter-spacing: -0.025em; margin: 0; color: var(--ink-900); }
.l-h2  { font: 600 40px/1.06 var(--font-display); letter-spacing: -0.022em; margin: 0; color: var(--ink-900); }
.l-h3  { font: 600 26px/1.15 var(--font-display); letter-spacing: -0.014em; margin: 0; color: var(--ink-900); }
.l-h4  { font: 600 18px/1.3 var(--font-body); margin: 0; color: var(--ink-900); }
.l-lead { font: 400 19px/1.55 var(--font-body); color: var(--ink-500); margin: 0; }
.l-body { font: 400 16px/1.6 var(--font-body); color: var(--ink-800); margin: 0; }
.l-mono-tag { font: 500 12px/1 var(--font-mono); color: var(--ink-500); letter-spacing: 0.02em; }
.l-section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 36px; }
.l-section-head .head-text { max-width: 640px; display: flex; flex-direction: column; gap: 10px; }

.s-bg-dark .l-h1, .s-bg-dark .l-h2, .s-bg-dark .l-h3, .s-bg-dark .l-h4,
.s-bg-darker .l-h1, .s-bg-darker .l-h2, .s-bg-darker .l-h3, .s-bg-darker .l-h4 { color: #fff; }
.s-bg-dark .l-body, .s-bg-darker .l-body { color: rgba(255,255,255,0.78); }
.s-bg-dark .l-lead, .s-bg-darker .l-lead { color: rgba(255,255,255,0.7); }
.s-bg-dark .l-eyebrow, .s-bg-darker .l-eyebrow { color: rgba(255,255,255,0.5); }
.s-bg-red .l-h1, .s-bg-red .l-h2, .s-bg-red .l-h3 { color: #fff; }
.s-bg-red .l-lead, .s-bg-red .l-body { color: rgba(255,255,255,0.92); }
.s-bg-red .l-eyebrow { color: rgba(255,255,255,0.75); }

/* ── Capsule ─────────────────────────────────────────────────── */
.l-capsule {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px;
  background: var(--ink-800); border: 1.5px solid var(--lumon-red);
  font: 500 13px/1 var(--font-body); letter-spacing: -0.005em; color: #fff;
  width: fit-content;
}
.l-capsule--light       { background: var(--paper); color: var(--ink-900); }
.l-capsule--solid       { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.l-capsule--ghost-light { background: transparent; border-color: rgba(255,255,255,0.6); color: #fff; }

/* ── Hero variants ───────────────────────────────────────────── */
.l-hero { position: relative; overflow: hidden; margin: 18px; border-radius: 28px; }

.l-hero[data-variant="red"] {
  background: var(--lumon-red); color: #fff; min-height: 620px;
  display: grid; grid-template-columns: 1.1fr 0.9fr;
}
.l-hero[data-variant="red"] .hero-content { padding: 88px 56px; display: flex; flex-direction: column; gap: 24px; justify-content: center; max-width: 600px; }
.l-hero[data-variant="red"] .hero-title   { font: 600 80px/0.98 var(--font-display); letter-spacing: -0.03em; color: #fff; margin: 0; }
.l-hero[data-variant="red"] .hero-sub     { font: 400 19px/1.5 var(--font-body); color: rgba(255,255,255,0.92); margin: 0; max-width: 480px; }
.l-hero[data-variant="red"] .hero-photo   { position: relative; overflow: hidden; background: #1a1a1a; }
.l-hero[data-variant="red"] .hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.85) contrast(1.05) brightness(0.85); mix-blend-mode: luminosity; }
.l-hero[data-variant="red"] .hero-foot    { position: absolute; right: 36px; bottom: 30px; text-align: right; font: 500 12px/1.4 var(--font-mono); color: rgba(255,255,255,0.85); }

.l-hero[data-variant="dark"] {
  background: var(--ink-900); color: #fff; min-height: 620px; padding: 56px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px;
}
.l-hero[data-variant="dark"] .hero-left   { display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.l-hero[data-variant="dark"] .hero-title  { font: 600 64px/1.02 var(--font-display); letter-spacing: -0.025em; color: #fff; margin: 0; }
.l-hero[data-variant="dark"] .hero-sub    { font: 400 18px/1.55 var(--font-body); color: rgba(255,255,255,0.78); margin: 0; max-width: 460px; }
.l-hero[data-variant="dark"] .hero-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; }
.l-hero[data-variant="dark"] .hero-mosaic .tile { border-radius: 24px; overflow: hidden; position: relative; background: var(--ink-800); display: flex; flex-direction: column; justify-content: space-between; padding: 18px; min-height: 160px; }
.l-hero[data-variant="dark"] .hero-mosaic .tile.tile--red   { background: var(--lumon-red); }
.l-hero[data-variant="dark"] .hero-mosaic .tile.tile--photo { padding: 0; }
.l-hero[data-variant="dark"] .hero-mosaic .tile img         { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05); }
.l-hero[data-variant="dark"] .hero-mosaic .tile-label       { font: 500 13px/1 var(--font-body); color: rgba(255,255,255,0.85); }
.l-hero[data-variant="dark"] .hero-mosaic .tile-arrow       { font: 600 14px/1 var(--font-display); color: #fff; opacity: 0.7; }

.l-hero[data-variant="bitone"] { min-height: 640px; color: #fff; background: var(--ink-900); }
.l-hero[data-variant="bitone"] .hero-photo               { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.l-hero[data-variant="bitone"] .hero-photo img           { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(0.55); }
.l-hero[data-variant="bitone"] .hero-photo::after        { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(239,34,0,0.5) 0%, rgba(0,0,0,0.65) 60%); mix-blend-mode: multiply; }
.l-hero[data-variant="bitone"] .hero-content             { position: relative; z-index: 2; padding: 120px 64px 64px; display: flex; flex-direction: column; gap: 22px; max-width: 720px; }
.l-hero[data-variant="bitone"] .hero-title               { font: 600 72px/1.02 var(--font-display); letter-spacing: -0.028em; color: #fff; margin: 0; }
.l-hero[data-variant="bitone"] .hero-sub                 { font: 400 19px/1.55 var(--font-body); color: rgba(255,255,255,0.92); margin: 0; max-width: 540px; }

.l-hero[data-variant="editorial"] { background: var(--ink-100); color: var(--ink-900); padding: 88px 56px; min-height: 540px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; }
.l-hero[data-variant="editorial"] .hero-left  { display: flex; flex-direction: column; gap: 28px; justify-content: center; }
.l-hero[data-variant="editorial"] .hero-title { font: 300 78px/0.98 var(--font-display); letter-spacing: -0.03em; color: var(--ink-900); margin: 0; }
.l-hero[data-variant="editorial"] .hero-title em { font-style: normal; color: var(--lumon-red); font-weight: 600; }
.l-hero[data-variant="editorial"] .hero-sub   { font: 400 18px/1.55 var(--font-body); color: var(--ink-500); margin: 0; max-width: 480px; }
.l-hero[data-variant="editorial"] .hero-photo { border-radius: 28px; overflow: hidden; align-self: stretch; }
.l-hero[data-variant="editorial"] .hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }

.hero-actions  { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-meta-row { display: flex; gap: 32px; flex-wrap: wrap; align-items: center; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.14); }
.hero-meta-row .stat     { display: flex; flex-direction: column; gap: 4px; }
.hero-meta-row .stat-num { font: 600 26px/1 var(--font-display); color: #fff; letter-spacing: -0.015em; }
.hero-meta-row .stat-label { font: 500 11px/1.2 var(--font-mono); color: rgba(255,255,255,0.6); letter-spacing: 0.04em; text-transform: uppercase; }

/* ── Trust strip ────────────────────────────────────────────── */
.l-trust { background: var(--paper); padding: 28px 36px; border-radius: 24px; display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; }
.l-trust-label { font: 500 12px/1.3 var(--font-mono); color: var(--ink-500); letter-spacing: 0.04em; text-transform: uppercase; max-width: 140px; border-right: 1px solid var(--border-subtle); padding-right: 36px; }
.l-trust-row   { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-around; }
.l-trust-name  { font: 500 17px/1 var(--font-body); letter-spacing: -0.01em; color: var(--ink-800); }

/* ── Stats ───────────────────────────────────────────────────── */
.l-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.l-stat  { padding: 28px 24px; border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 8px; }
.l-stat:last-child { border-right: none; }
.l-stat-num   { font: 600 56px/0.95 var(--font-display); letter-spacing: -0.025em; color: var(--ink-900); }
.l-stat-label { font: 500 13px/1.4 var(--font-body); color: var(--ink-500); }
.s-bg-dark .l-stat { border-right-color: rgba(255,255,255,0.12); }
.s-bg-dark .l-stat-num { color: #fff; }
.s-bg-dark .l-stat-label { color: rgba(255,255,255,0.7); }

/* ── Service cards ───────────────────────────────────────────── */
.l-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.l-svc { background: var(--paper); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-1); transition: all 200ms var(--ease-out); text-decoration: none; color: var(--ink-900); }
.l-svc:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.l-svc-num   { font: 600 14px/1 var(--font-mono); color: var(--lumon-red); letter-spacing: 0.04em; }
.l-svc-title { font: 600 22px/1.2 var(--font-display); letter-spacing: -0.012em; color: var(--ink-900); margin: 0; }
.l-svc-body  { font: 400 14.5px/1.55 var(--font-body); color: var(--ink-500); margin: 0; }

.l-svc--enhanced { padding: 0; overflow: hidden; gap: 0; }
.l-svc-ph { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--ink-100) 0%, #d8d8d8 100%); display: flex; align-items: center; justify-content: center; font: 500 11px/1 var(--font-mono); color: var(--ink-500); letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 3px solid var(--lumon-red); }
.l-svc-inner { padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.l-svc--enhanced .l-svc-cta { font: 500 12px/1 var(--font-body); color: var(--lumon-red); margin-top: auto; }
.l-svc--enhanced:hover .l-svc-cta { text-decoration: underline; }

/* ── Category cards ──────────────────────────────────────────── */
.l-cats { display: grid; grid-template-columns: 1fr; gap: 18px; }
.l-cat {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  background: var(--ink-800); color: #fff; border-radius: 28px; padding: 28px 32px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); text-decoration: none;
  transition: all 240ms var(--ease-out);
}
.l-cat:hover { background: #2c2c2c; transform: translateY(-2px); }
.l-cat--reverse { direction: rtl; }
.l-cat--reverse > * { direction: ltr; }
.l-cat-left  { display: flex; flex-direction: column; gap: 18px; }
.l-cat-photo { min-height: 220px; border-radius: 20px; overflow: hidden; background: rgba(255,255,255,0.04); }
.l-cat-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4) contrast(1.05); }
.l-cat-specs { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-direction: column; gap: 12px; }
.l-cat-specs li { font: 400 13.5px/1.55 var(--font-body); color: rgba(255,255,255,0.78); }
.l-cat-specs b  { font: 600 14.5px/1.4 var(--font-body); color: #fff; display: block; }
.l-cat-specs b::before { content: "— "; color: var(--lumon-red); }
.l-cat-norm { font: 500 12px/1 var(--font-mono); color: rgba(255,255,255,0.5); margin-top: 2px; }
.l-cat-cta  { font: 500 13px/1 var(--font-body); color: var(--lumon-red); margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; }

.l-cat--light { background: var(--paper); color: var(--ink-900); box-shadow: var(--shadow-1); }
.l-cat--light:hover { background: #fafafa; }
.l-cat--light .l-cat-specs li { color: var(--ink-500); }
.l-cat--light .l-cat-specs b  { color: var(--ink-900); }
.l-cat--light .l-cat-norm     { color: var(--ink-500); }

.l-cat--bitone .l-cat-photo img { filter: grayscale(1) contrast(1.15) brightness(0.85); }
.l-cat--bitone .l-cat-photo { background: var(--lumon-red-tint); position: relative; }
.l-cat--bitone .l-cat-photo::after { content: ""; position: absolute; inset: 0; background: var(--lumon-red); mix-blend-mode: lighten; opacity: 0.35; }

/* ── Line cards (home grid) ──────────────────────────────────── */
.l-line-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.l-line-card { background: var(--ink-800); color: #fff; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: all 220ms var(--ease-out); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.l-line-card:hover { background: #2c2c2c; transform: translateY(-2px); }
.l-line-photo { aspect-ratio: 16/9; overflow: hidden; background: var(--ink-900); position: relative; }
.l-line-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.5) contrast(1.05); }
.l-line-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ink-900) 0%, #2a2a2a 100%); font: 600 13px/1 var(--font-mono); color: rgba(255,255,255,0.2); letter-spacing: 0.06em; text-transform: uppercase; }
.l-line-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.l-line-num  { font: 600 11px/1 var(--font-mono); color: var(--lumon-red); letter-spacing: 0.08em; text-transform: uppercase; }
.l-line-name { font: 600 17px/1.2 var(--font-display); letter-spacing: -0.012em; color: #fff; margin: 0; }
.l-line-desc { font: 400 13px/1.5 var(--font-body); color: rgba(255,255,255,0.60); margin: 0; flex: 1; }
.l-line-tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); margin-top: auto; }
.l-line-tag  { font: 500 11px/1 var(--font-mono); color: rgba(255,255,255,0.40); letter-spacing: 0.04em; }
.l-line-tag::before { content: "— "; color: var(--lumon-red); }
.l-line-cta  { font: 500 12px/1 var(--font-body); color: var(--lumon-red); margin-top: 2px; }

/* ── Marcas strip ────────────────────────────────────────────── */
.l-marcas { background: var(--paper); padding: 28px 36px; border-radius: 24px; display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; }
.l-marcas-label { font: 500 12px/1.3 var(--font-mono); color: var(--ink-500); letter-spacing: 0.04em; text-transform: uppercase; max-width: 140px; border-right: 1px solid var(--border-subtle); padding-right: 36px; }
.l-marcas-row   { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-around; }
.l-marcas-name  { font: 500 17px/1 var(--font-body); letter-spacing: -0.01em; color: var(--ink-800); }

/* ── Stats + photo layout ────────────────────────────────────── */
.l-stats-wrap  { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.l-stats-photo { border-radius: 20px; overflow: hidden; background: var(--ink-800); min-height: 220px; display: flex; align-items: center; justify-content: center; font: 500 12px/1 var(--font-mono); color: rgba(255,255,255,0.25); letter-spacing: 0.06em; text-transform: uppercase; }

/* ── Compromiso section ──────────────────────────────────────── */
.l-compromiso-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.l-compromiso-photo { border-radius: 20px; overflow: hidden; background: var(--ink-100); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; font: 500 12px/1 var(--font-mono); color: var(--ink-500); letter-spacing: 0.06em; text-transform: uppercase; }
.l-compromiso-items { display: flex; flex-direction: column; gap: 24px; }
.l-compromiso-item  { display: flex; flex-direction: column; gap: 6px; padding-bottom: 24px; border-bottom: 1px solid var(--border-subtle); }
.l-compromiso-item:last-child { border-bottom: none; padding-bottom: 0; }
.l-compromiso-title { font: 600 18px/1.2 var(--font-display); letter-spacing: -0.012em; color: var(--ink-900); margin: 0; }
.l-compromiso-body  { font: 400 14.5px/1.55 var(--font-body); color: var(--ink-500); margin: 0; }

/* ── Product catalogue ───────────────────────────────────────── */
.l-cat-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--border-subtle); }
.l-cat-toolbar input, .l-cat-toolbar select { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border-strong); font: 400 14px/1 var(--font-body); background: #fff; color: var(--ink-900); }
.l-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.l-chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: #fff; font: 500 13px/1 var(--font-body); color: var(--ink-800); cursor: pointer; }
.l-chip[aria-pressed="true"] { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }

.l-prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.l-prod { background: #fff; border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-1); transition: all 200ms var(--ease-out); text-decoration: none; color: var(--ink-900); position: relative; }
.l-prod:hover   { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.l-prod-img     { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: var(--ink-100); }
.l-prod-img img { width: 100%; height: 100%; object-fit: cover; }
.l-prod-meta    { display: flex; gap: 8px; align-items: center; }
.l-prod-line    { font: 600 11px/1 var(--font-mono); color: var(--lumon-red); letter-spacing: 0.04em; text-transform: uppercase; }
.l-prod-name    { font: 600 16px/1.3 var(--font-body); color: var(--ink-900); margin: 0; }
.l-prod-desc    { font: 400 13.5px/1.5 var(--font-body); color: var(--ink-500); margin: 0; }
.l-prod-foot    { display: flex; justify-content: space-between; align-items: end; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.l-prod-norm    { font: 500 11px/1.3 var(--font-mono); color: var(--ink-500); }
.l-prod-price   { font: 600 16px/1 var(--font-display); color: var(--ink-900); letter-spacing: -0.01em; }
.l-prod-tag     { position: absolute; top: 14px; right: 14px; padding: 5px 10px; border-radius: 999px; background: var(--lumon-red); color: #fff; font: 500 10px/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.l-prod-tag--quote { background: var(--ink-900); }

/* ── Datasheet hero ──────────────────────────────────────────── */
.l-ds-hero { background: var(--ink-900); color: #fff; border-radius: 28px; padding: 48px 56px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; min-height: 480px; }
.l-ds-hero-left { display: flex; flex-direction: column; gap: 16px; }
.l-ds-crumb     { font: 500 12px/1.4 var(--font-mono); color: rgba(255,255,255,0.55); letter-spacing: 0.04em; }
.l-ds-crumb a   { color: rgba(255,255,255,0.55); text-decoration: none; }
.l-ds-crumb a:hover { color: #fff; }
.l-ds-title  { font: 600 44px/1.05 var(--font-display); letter-spacing: -0.022em; margin: 0; color: #fff; }
.l-ds-sub    { font: 400 17px/1.55 var(--font-body); color: rgba(255,255,255,0.78); margin: 0; max-width: 520px; }
.l-ds-bullets { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.l-ds-bullets li { font: 400 13.5px/1.45 var(--font-body); color: rgba(255,255,255,0.78); }
.l-ds-bullets li b { display: block; color: #fff; font: 600 13px/1.3 var(--font-body); margin-bottom: 2px; }
.l-ds-bullets li::before { content: "—"; color: var(--lumon-red); margin-right: 6px; }
.l-ds-photo     { border-radius: 20px; overflow: hidden; background: var(--lumon-red-tint); }
.l-ds-photo img { width: 100%; height: 100%; object-fit: cover; }
.l-ds-actions   { display: flex; gap: 12px; margin-top: 14px; }

.l-spec-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-1); }
.l-spec-table th, .l-spec-table td { padding: 14px 18px; text-align: left; font: 400 14px/1.4 var(--font-body); border-bottom: 1px solid var(--border-subtle); }
.l-spec-table th { background: var(--ink-100); font-weight: 600; color: var(--ink-900); font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; font-family: var(--font-body); }
.l-spec-table tr:last-child td { border-bottom: none; }
.l-spec-table td:first-child { font-weight: 500; color: var(--ink-900); width: 30%; }
.l-spec-table td.mono { font-family: var(--font-mono); font-size: 13px; }

/* ── Case studies ────────────────────────────────────────────── */
.l-case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.l-case { background: var(--ink-900); color: #fff; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; min-height: 380px; position: relative; text-decoration: none; }
.l-case-photo     { aspect-ratio: 16/10; overflow: hidden; background: #1a1a1a; }
.l-case-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.6) contrast(1.05); transition: transform 400ms var(--ease-out); }
.l-case:hover .l-case-photo img { transform: scale(1.04); }
.l-case-body   { padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.l-case-client { font: 500 12px/1 var(--font-mono); color: var(--lumon-red); letter-spacing: 0.04em; text-transform: uppercase; }
.l-case-title  { font: 600 22px/1.2 var(--font-display); letter-spacing: -0.012em; color: #fff; margin: 0; }
.l-case-body p { font: 400 14px/1.5 var(--font-body); color: rgba(255,255,255,0.7); margin: 0; }
.l-case-meta   { display: flex; gap: 18px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.1); font: 500 12px/1 var(--font-mono); color: rgba(255,255,255,0.5); letter-spacing: 0.04em; text-transform: uppercase; }

/* ── Blog cards ──────────────────────────────────────────────── */
.l-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.l-blog-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-1); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: all 200ms var(--ease-out); }
.l-blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.l-blog-img     { aspect-ratio: 16/10; background: var(--ink-100); overflow: hidden; }
.l-blog-img img { width: 100%; height: 100%; object-fit: cover; }
.l-blog-body    { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.l-blog-cat     { font: 600 11px/1 var(--font-mono); color: var(--lumon-red); letter-spacing: 0.04em; text-transform: uppercase; }
.l-blog-title   { font: 600 20px/1.25 var(--font-display); letter-spacing: -0.012em; color: var(--ink-900); margin: 0; }
.l-blog-excerpt { font: 400 14.5px/1.55 var(--font-body); color: var(--ink-500); margin: 0; }
.l-blog-meta    { font: 500 12px/1 var(--font-mono); color: var(--ink-500); margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-subtle); }

/* ── Page hero (interior) ────────────────────────────────────── */
.l-page-hero { background: var(--ink-900); color: #fff; padding: 96px 32px 72px; }
.l-page-hero-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.l-page-hero h1 { font: 600 64px/1.02 var(--font-display); letter-spacing: -0.025em; margin: 0; color: #fff; max-width: 800px; }
.l-page-hero p  { font: 400 19px/1.55 var(--font-body); color: rgba(255,255,255,0.78); margin: 0; max-width: 640px; }
.l-page-hero .l-eyebrow { color: var(--lumon-red); }
.l-crumb    { font: 500 12px/1 var(--font-mono); color: rgba(255,255,255,0.55); letter-spacing: 0.04em; }
.l-crumb a  { color: rgba(255,255,255,0.55); text-decoration: none; }
.l-crumb a:hover { color: #fff; }

/* ── Forms ───────────────────────────────────────────────────── */
.l-form     { display: flex; flex-direction: column; gap: 16px; }
.l-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.l-field    { display: flex; flex-direction: column; gap: 6px; }
.l-field label { font: 500 12px/1.2 var(--font-body); color: var(--ink-800); letter-spacing: 0.02em; text-transform: uppercase; }
.l-field input, .l-field select, .l-field textarea { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-strong); font: 400 15px/1.4 var(--font-body); color: var(--ink-900); background: #fff; width: 100%; }
.l-field textarea { min-height: 120px; resize: vertical; }
.l-field input:focus, .l-field select:focus, .l-field textarea:focus { outline: 2px solid var(--lumon-red); outline-offset: 2px; border-color: var(--lumon-red); }

/* ── Sales card ──────────────────────────────────────────────── */
.l-sales-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.l-sales        { background: var(--paper); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-1); }
.l-sales-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--ink-100); margin-bottom: 8px; display: grid; place-items: center; font: 600 20px/1 var(--font-display); color: var(--ink-800); }
.l-sales-name   { font: 600 18px/1.3 var(--font-body); color: var(--ink-900); margin: 0; }
.l-sales-role   { font: 500 13px/1.3 var(--font-mono); color: var(--lumon-red); }
.l-sales-meta   { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); font: 400 13.5px/1.4 var(--font-body); color: var(--ink-800); }
.l-sales-meta span { display: flex; gap: 8px; align-items: center; }
.l-sales-meta b { font: 500 11px/1 var(--font-mono); color: var(--ink-500); letter-spacing: 0.04em; text-transform: uppercase; min-width: 50px; }

/* ── Footer ──────────────────────────────────────────────────── */
.l-footer      { background: var(--ink-900); color: #fff; padding: 64px 32px 24px; }
.l-foot-grid   { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.l-foot-blurb  { font: 400 14.5px/1.6 var(--font-body); color: rgba(255,255,255,0.72); max-width: 380px; margin: 18px 0 0; }
.l-foot-trust  { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 20px; font: 500 12px/1 var(--font-body); color: rgba(255,255,255,0.5); }
.l-foot-trust span { padding: 5px 10px; border: 1px solid rgba(255,255,255,0.15); border-radius: 999px; }
.l-foot-col h4 { font: 600 14px/1.2 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 0 16px; }
.l-foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.l-foot-col a  { color: #fff; text-decoration: none; font: 500 14px/1.4 var(--font-body); }
.l-foot-col a:hover { color: var(--lumon-red); }
.l-foot-legal  { max-width: 1280px; margin: 36px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font: 500 12px/1.4 var(--font-mono); color: rgba(255,255,255,0.5); }

/* ── WhatsApp float ──────────────────────────────────────────── */
.l-wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 80; width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(37,211,102,0.4); text-decoration: none; transition: transform 200ms var(--ease-out); }
.l-wa-float:hover { transform: scale(1.05); }
.l-wa-float svg { width: 30px; height: 30px; }

/* ── Accent tweaks ───────────────────────────────────────────── */
.l-accent-soft .l-btn--primary,
.l-accent-soft .s-bg-red { background: var(--lumon-red); filter: saturate(0.7); }
.l-accent-bold .s-bg-red  { background: var(--lumon-red); }
.l-accent-bold .l-btn--primary { background: var(--lumon-red); box-shadow: 0 4px 0 var(--lumon-red-deep); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 980px) {
  .l-nav { display: none; }
  .l-hero[data-variant="red"],
  .l-hero[data-variant="dark"],
  .l-hero[data-variant="bitone"],
  .l-hero[data-variant="editorial"] { grid-template-columns: 1fr; }
  .l-stats          { grid-template-columns: repeat(2, 1fr); }
  .l-svc-grid, .l-prod-grid, .l-blog-grid, .l-sales-grid { grid-template-columns: 1fr 1fr; }
  .l-case-grid      { grid-template-columns: 1fr; }
  .l-foot-grid      { grid-template-columns: 1fr 1fr; }
  .l-line-grid      { grid-template-columns: 1fr 1fr; }
  .l-compromiso-grid, .l-stats-wrap { grid-template-columns: 1fr; }
  .l-marcas, .l-marcas-label + .l-marcas-row { grid-template-columns: 1fr; }
  .l-marcas-label   { border-right: none; border-bottom: 1px solid var(--border-subtle); padding-right: 0; padding-bottom: 16px; max-width: none; }
  .elementor-col-50, .elementor-col-33, .elementor-col-25 { width: 100%; }
}
@media (max-width: 560px) {
  .l-line-grid { grid-template-columns: 1fr; }
  .l-hero[data-variant="red"] .hero-title { font-size: 52px; }
  .l-h1 { font-size: 40px; }
  .l-h2 { font-size: 28px; }
  .l-foot-grid { grid-template-columns: 1fr; }
}

/* ── Elementor kit overrides (beat Adsy compiled CSS) ─────────── */
.elementor-widget-heading .elementor-heading-title {
  font-family: "Europa Grotesk SH", "Helvetica Neue", Arial, sans-serif !important;
  text-transform: none !important;
}
h1.elementor-heading-title { letter-spacing: -0.025em !important; }
h2.elementor-heading-title { letter-spacing: -0.02em !important; }
h3.elementor-heading-title { letter-spacing: -0.012em !important; }
h4.elementor-heading-title,
h5.elementor-heading-title { letter-spacing: -0.01em !important; }
h6.elementor-heading-title {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-text-editor span {
  font-family: "Magnetik", "Helvetica Neue", Arial, sans-serif !important;
}