/* Καριέρα | ΑΡΑΜΠΑΤΖΗΣ Α.Ε. */

    /* ============ Καριέρα — πρόταση B «ΒΡΕΣ ΤΗ ΘΕΣΗ ΣΟΥ» (prefix kB-) ============
       Ίδια γλώσσα με «Τρόποι Πληρωμής»: βαθύ μπλε hero με κουκκίδες, λευκές απαλές κάρτες, --radius,
       Commissioner, ένα μπλε, κίτρινο #ffd23f μόνο σε μικρές «σημαίες» (ΝΕΟ, δείγμα, μετρητής θέσεων).
       Hero: τα 4 κτίρια ως περιγράμματα πάνω σε έναν φωτεινό δρόμο· ένα-ένα κτίριο «ανάβει» και από πάνω
       του ξεπροβάλλει ένας άνθρωπος της ομάδας με τον ρόλο του. Χωρίς JS ή με reduced-motion: όλοι μαζί, στατικά. */

    /* ---------- Hero ---------- */
    .kB-hero {
      position: relative; overflow: hidden; isolation: isolate;
      display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
      align-items: center; gap: clamp(16px, 3vw, 40px);
      padding-block: clamp(28px, 3.6vw, 44px);
    }
    .kB-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
    .kB-deco::before {
      content: ""; position: absolute; inset: 0;
      background-image: radial-gradient(rgba(255,255,255,.16) 1.2px, transparent 1.4px);
      background-size: 22px 22px;
      -webkit-mask-image: linear-gradient(110deg, transparent 38%, #000 82%);
              mask-image: linear-gradient(110deg, transparent 38%, #000 82%);
    }
    .kB-deco span {
      position: absolute; right: 8%; top: -160px; width: 480px; height: 480px; border-radius: 50%;
      background: radial-gradient(circle, rgba(63,200,240,.24), transparent 65%);
    }
    .kB-copy { min-width: 0; }
    .kB-kicker {
      display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 10px; padding: 4px 12px 4px 9px;
      border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
      font-size: 13px; font-weight: 600; color: #e3eeff;
    }
    .kB-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #7fd3ff; box-shadow: 0 0 8px rgba(127,211,255,.9); }
    .kB-hero h1 { font-size: clamp(30px, 4.4vw, 48px); }
    .kB-hero .phead__lead { max-width: 540px; }
    .kB-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 24px; }
    .kB-hbtn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
      padding: 11px 20px; border-radius: 999px; background: #fff; color: #0a3a9a;
      font-size: 15px; font-weight: 700; line-height: 1.2;
      box-shadow: 0 10px 28px -12px rgba(0,0,0,.5); transition: transform .2s, box-shadow .2s, background-color .2s;
    }
    .kB-hbtn svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .kB-hbtn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); }
    .kB-hbtn--ghost { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
    .kB-hbtn--ghost:hover { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
    .kB-hbtn:focus-visible { outline: 3px solid #7fd3ff; outline-offset: 3px; }
    .kB-hbtn b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #ffd23f; color: #082f86; font-size: 12.5px; line-height: 22px; text-align: center; }

    /* Σκηνή: SVG για τα κτίρια + λεπτό HTML στρώμα για ετικέτες και «ανθρώπους» (μέγεθος σε px → διαβάζονται σε κάθε πλάτος).
       Συντεταγμένες στρώματος = μονάδες του viewBox (0 24 600 242). */
    .kB-scene { position: relative; min-width: 0; margin-right: calc(-1 * clamp(18px, 4vw, 44px)); container-type: inline-size; }
    .kB-scene > svg { display: block; width: 100%; height: auto; }
    .kB-layer { position: absolute; inset: 0; pointer-events: none; }
    .kB-lbl, .kB-who { position: absolute; left: calc(var(--x) * 100% / 600); top: calc((var(--y) - 24) * 100% / 242); }
    .kB-lbl { transform: translate(-50%, -50%); white-space: nowrap; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: #cfe3ff; transition: color .6s; }
    .kB-lbl.is-on { color: #fff; }

    /* «Άνθρωπος» πάνω από κάθε κτίριο: εικονογράφηση σε στρογγυλεμένο πλακίδιο + ετικέτα ρόλου */
    .kB-who {
      --s: 60px; --s: clamp(46px, 10.5cqw, 70px);
      display: flex; flex-direction: column; align-items: center;
      transform-origin: 50% 100%; transform: translate(-50%, -100%);
    }
    .kB-who__pic {
      display: block; width: var(--s); height: var(--s); overflow: hidden; border-radius: 30%;
      background: linear-gradient(160deg, #3a82ee, #0d43b8 72%);
      border: 1.5px solid rgba(255,255,255,.9);
      box-shadow: 0 0 0 4px rgba(127,211,255,.18), 0 14px 26px -12px rgba(3,20,60,.85);
    }
    .kB-who__pic svg { display: block; width: 100%; height: 100%; }
    .kB-who__lbl {
      position: relative; margin-top: -9px; padding: 3px 10px; border-radius: 999px; background: #fff; color: #0a3a9a;
      font-size: 12.5px; font-weight: 700; line-height: 1.25; white-space: nowrap; text-align: center;
      box-shadow: 0 6px 16px -6px rgba(3,20,60,.6);
    }
    .kB-who__lbl::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: #fff; border-radius: 2px; transform: rotate(45deg); }
    /* κίνηση: ένας-ένας «ξεπροβάλλει» με ένα μικρό αναπήδημα και χάνεται ήρεμα */
    .kB-run .kB-who { opacity: 0; transform: translate(-50%, -100%) translateY(10px) scale(.55); transition: opacity .25s ease, transform .3s ease-in; }
    .kB-run .kB-who.is-on { opacity: 1; transform: translate(-50%, -100%); transition: opacity .3s ease, transform .65s cubic-bezier(.34,1.56,.64,1); }

    .kB-road { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 16; stroke-linecap: round; }
    .kB-lane { fill: none; stroke: rgba(255,255,255,.32); stroke-width: 1.4; stroke-dasharray: 8 8; }
    .kB-trace { fill: none; stroke: #dff2ff; stroke-opacity: .7; stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(120,200,255,.9)); }
    .kB-drive { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 6; transition: stroke .8s; }
    .kB-shell { fill: rgba(6,36,110,.45); stroke: rgba(255,255,255,.7); stroke-width: 1.6; stroke-linejoin: round; transition: fill .8s, stroke .8s, filter .8s; }
    .kB-ln { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1.2; stroke-linecap: round; transition: stroke .8s; }
    .kB-win { fill: rgba(127,211,255,.12); stroke: rgba(255,255,255,.45); stroke-width: 1.1; transition: fill .8s, stroke .8s; }
    .kB-dock { fill: #041c55; stroke: rgba(255,255,255,.45); stroke-width: 1.1; }
    .kB-dock-l { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1; }
    .kB-sign rect { fill: rgba(255,255,255,.10); stroke: rgba(255,255,255,.42); stroke-width: 1; transition: fill .8s; }
    .kB-sign text { font: 800 8.5px "Commissioner", system-ui, sans-serif; letter-spacing: .16em; fill: #fff; }
    .kB-new rect { fill: #ffd23f; }
    .kB-new text { font: 800 8.5px "Commissioner", system-ui, sans-serif; letter-spacing: .08em; fill: #082f86; }
    /* κτίριο που «ανάβει» */
    .kB-bld.is-on .kB-shell { fill: rgba(22,92,214,.55); stroke: #fff; filter: drop-shadow(0 0 12px rgba(127,211,255,.6)); }
    .kB-bld.is-on .kB-win { fill: #cdeeff; stroke: #fff; }
    .kB-bld.is-on .kB-ln { stroke: rgba(255,255,255,.85); }
    .kB-bld.is-on .kB-drive { stroke: rgba(127,211,255,.75); }
    .kB-bld.is-on .kB-sign rect { fill: rgba(255,255,255,.22); }

    /* κίνηση (μόνο με JS και χωρίς reduced-motion): είσοδος μία φορά */
    .kB-run .kB-intro { opacity: 0; }
    .kB-run.kB-in .kB-intro { animation: kB-in .8s ease forwards; animation-delay: var(--d, 0s); }
    @keyframes kB-in { to { opacity: 1; } }

    /* ---------- Ενότητες (κοινά) ---------- */
    .kB-sec { scroll-margin-top: 110px; }
    .kB-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
      padding: 11px 20px; border-radius: 11px; background: var(--blue); color: #fff;
      font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center;
      transition: background-color .15s, transform .15s, box-shadow .15s;
    }
    .kB-btn:hover { background: #0f5fa6; transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(21,114,192,.7); }
    .kB-btn:focus-visible, .kB-link:focus-visible, .kB-tab:focus-visible, .kB-panel:focus-visible, .kB-contact:focus-visible, .kB-job__dept:focus-visible { outline: 3px solid rgba(31,124,255,.4); outline-offset: 2px; }
    .kB-btn svg, .kB-link svg, .kB-contact svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .kB-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--blue); }
    .kB-link:hover { text-decoration: underline; text-underline-offset: 3px; }
    .kB-card {
      min-width: 0; border-radius: calc(var(--radius) + 4px); background: #fff;
      border: 1px solid rgba(20,26,36,.07);
      box-shadow: 0 1px 2px rgba(20,26,36,.03), 0 24px 48px -36px rgba(8,47,134,.45);
    }

    /* ---------- «Ποιο τμήμα σου ταιριάζει;» ---------- */
    .kB-ex__grid { display: grid; gap: 16px; }
    .kB-js .kB-ex__grid { grid-template-columns: minmax(0, 372px) minmax(0, 1fr); gap: 20px; align-items: start; }
    .kB-side { min-width: 0; display: grid; gap: 14px; align-content: start; }
    .kB-help { padding: 14px 16px; border-radius: var(--radius); background: var(--soft); font-size: 14px; line-height: 1.55; color: var(--muted); }
    .kB-help p { margin: 0 0 6px; }
    .kB-help b { color: var(--ink); font-weight: 700; }
    .kB-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .kB-tabs[hidden] { display: none; }
    .kB-tab {
      position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
      min-width: 0; min-height: 104px; padding: 14px 6px 12px; border: 1px solid var(--line); border-radius: var(--radius);
      background: #fff; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ink); text-align: center;
      transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
    }
    .kB-tab:hover { border-color: rgba(21,114,192,.4); background: #f7fafe; }
    .kB-tab__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #e8f1fb; transition: background-color .2s; }
    .kB-tab__ico svg { width: 21px; height: 21px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
    .kB-tab__t { overflow-wrap: anywhere; }
    .kB-tab[aria-selected="true"] {
      border-color: transparent; color: #fff;
      background: radial-gradient(120% 140% at 0% 100%, #0b3fae 0%, transparent 60%), linear-gradient(120deg, #082f86, #0a46c4 60%, #1572c0);
      box-shadow: 0 16px 30px -18px rgba(8,47,134,.9);
    }
    .kB-tab[aria-selected="true"] .kB-tab__ico { background: rgba(255,255,255,.14); }
    .kB-tab[aria-selected="true"] .kB-tab__ico svg { stroke: #fff; }
    .kB-tab__n { position: absolute; top: 7px; right: 7px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 20px; }
    .kB-tab__n[hidden] { display: none; }
    .kB-tab[aria-selected="true"] .kB-tab__n { background: #ffd23f; color: #082f86; }

    .kB-panels { display: grid; gap: 16px; min-width: 0; }
    .kB-panel { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); overflow: hidden; scroll-margin-top: 96px; }
    .kB-panel[hidden] { display: none; }
    .kB-panel.is-enter { animation: kB-panel .38s ease; }
    @keyframes kB-panel { from { opacity: 0; transform: translateY(6px); } }
    .kB-fig { position: relative; margin: 0; min-height: 300px; background: var(--soft); }
    .kB-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .kB-fig figcaption {
      position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 4px 10px; border-radius: 999px;
      background: rgba(8,30,80,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
      color: #fff; font-size: 12px; font-weight: 600; line-height: 1.35;
    }
    .kB-body { min-width: 0; padding: clamp(20px, 2.6vw, 30px); }
    .kB-where { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--blue); }
    .kB-where svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .kB-panel h3 { margin: 0; font-size: clamp(20px, 2vw, 24px); font-weight: 800; line-height: 1.2; letter-spacing: -.005em; }
    .kB-desc { margin: 8px 0 0; color: var(--muted); line-height: 1.6; }
    .kB-k { margin: 18px 0 8px; font-size: 14px; font-weight: 700; }
    .kB-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
    .kB-tasks li { position: relative; padding-left: 28px; line-height: 1.5; }
    .kB-tasks li::before {
      content: ""; position: absolute; left: 0; top: 1.5px; width: 19px; height: 19px; border-radius: 50%;
      background: #e8f1fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231572c0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
    }
    .kB-fit { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--soft); font-size: 14.5px; line-height: 1.55; }
    .kB-fit b { color: var(--blue); font-weight: 700; }
    .kB-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 20px; }
    .kB-foot .kB-link[hidden] { display: none; }
    .kB-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffd23f; box-shadow: 0 0 0 3px rgba(255,210,63,.3); }

    /* ---------- Ανοιχτές θέσεις ---------- */
    .kB-count { display: inline-block; min-width: 28px; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--blue); color: #fff; font-size: .62em; line-height: 1.75; text-align: center; vertical-align: .2em; }
    .kB-count[hidden] { display: none; }
    .kB-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: #fff8d6; border: 1px solid #f0d860; color: #5a4300; font-size: 14px; }
    .kB-note[hidden] { display: none; }
    .kB-empty { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: clamp(18px, 3vw, 36px); padding: clamp(20px, 3vw, 32px); border-radius: calc(var(--radius) + 4px); background: var(--soft); }
    .kB-empty[hidden] { display: none; }
    .kB-ill { display: block; width: 100%; height: auto; }
    .kB-empty h3 { margin: 0; font-size: clamp(18px, 1.8vw, 21px); font-weight: 700; line-height: 1.3; }
    .kB-empty p { margin: 6px 0 0; max-width: 620px; color: var(--muted); line-height: 1.6; }
    .kB-contacts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 18px; }
    .kB-contact { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--blue); white-space: nowrap; }
    .kB-contact:hover { text-decoration: underline; text-underline-offset: 3px; }
    .kB-ill-s { fill: #fff; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; }
    .kB-ill-l { fill: none; stroke: var(--blue); stroke-width: 1.4; stroke-linecap: round; }
    .kB-ill-f { fill: #e8f1fb; stroke: var(--blue); stroke-width: 1.4; }
    .kB-ill-r { fill: none; stroke: #b9cde3; stroke-width: 2; stroke-dasharray: 6 6; stroke-linecap: round; }

    .kB-jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
    .kB-jobs[hidden] { display: none; }
    .kB-job { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 24px; padding: clamp(16px, 2vw, 22px) clamp(16px, 2.2vw, 26px); }
    .kB-job__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .kB-job__dept { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; background: #eef5fc; color: var(--blue); font-size: 12.5px; font-weight: 600; }
    a.kB-job__dept:hover { background: #e1eefb; }
    .kB-job__dept i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
    .kB-job__dept svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .kB-demo { padding: 2px 8px; border-radius: 6px; background: #ffd23f; color: #082f86; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
    .kB-job h3 { margin: 8px 0 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
    .kB-job__d { margin: 4px 0 0; color: var(--muted); line-height: 1.55; }
    .kB-job__meta { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; font-size: 13.5px; color: var(--muted); }
    .kB-job__meta li { display: inline-flex; align-items: center; gap: 6px; }
    .kB-job__meta svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .kB-after { margin: 14px 0 0; color: var(--muted); }
    .kB-after[hidden] { display: none; }

    /* ---------- Γιατί ΑΡΑΜΠΑΤΖΗΣ ---------- */
    .kB-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .kB-stat { padding: 22px 22px 20px; }
    .kB-stat strong { display: block; font-size: clamp(32px, 3.4vw, 42px); font-weight: 800; line-height: 1; letter-spacing: -.01em; color: var(--blue); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
    .kB-stat strong small { margin-left: 4px; font-size: .42em; font-weight: 700; letter-spacing: .02em; }
    .kB-stat b { display: block; margin-top: 12px; font-size: 15.5px; font-weight: 700; line-height: 1.3; }
    .kB-stat p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

    /* ---------- Λωρίδα CTA ---------- */
    .kB-cta {
      position: relative; overflow: hidden; isolation: isolate;
      display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 22px 36px;
      margin-bottom: clamp(8px, 2vw, 20px) !important;
      padding: clamp(26px, 4vw, 44px) clamp(18px, 4vw, 44px) clamp(40px, 5vw, 58px);
      border-radius: var(--radius); color: #fff;
      background: radial-gradient(120% 160% at 0% 100%, #0b3fae 0%, transparent 55%), linear-gradient(100deg, #082f86, #0a46c4 60%, #1572c0);
    }
    .kB-cta .kB-deco::before { -webkit-mask-image: linear-gradient(100deg, transparent 45%, #000 90%); mask-image: linear-gradient(100deg, transparent 45%, #000 90%); }
    .kB-cta .kB-deco span { right: -120px; top: -200px; }
    .kB-cta h2 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; line-height: 1.2; }
    .kB-cta p { margin: 10px 0 0; max-width: 600px; color: #e3eeff; line-height: 1.6; }
    .kB-cta p a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.5); }
    .kB-cta__act { justify-self: end; display: grid; justify-items: start; gap: 14px; min-width: 0; }
    .kB-cta__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
    .kB-cta .kB-contact { color: #fff; }
    .kB-cta .kB-contact svg { stroke: #7fd3ff; }
    .kB-cta .kB-contact:focus-visible { outline-color: #7fd3ff; }
    /* ήσυχος δρόμος στη βάση της λωρίδας, με παρκαρισμένο φορτηγάκι */
    .kB-cta__road { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 34px; pointer-events: none; }
    .kB-cta__road svg { display: block; width: 100%; height: 100%; }

    /* ---------- Responsive ---------- */
    /* desktop: τα κουτάκια «ακολουθούν» όσο διαβάζεις το τμήμα */
    @media (min-width: 861px) { .kB-js .kB-side { position: sticky; top: 108px; } }
    @media (max-width: 1180px) {
      .kB-js .kB-ex__grid { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); }
      .kB-panel { grid-template-columns: minmax(0, 1fr); }
      .kB-fig { min-height: 0; aspect-ratio: 16 / 8; }
    }
    @media (max-width: 1000px) {
      .kB-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 860px) {
      .kB-hero { grid-template-columns: minmax(0, 1fr); gap: 14px; }
      .kB-scene { margin-inline: calc(-1 * clamp(18px, 4vw, 44px)); margin-top: 8px; margin-bottom: -4px; }
      .kB-deco::before { -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 90%); mask-image: linear-gradient(180deg, transparent 30%, #000 90%); }
      .kB-js .kB-ex__grid { grid-template-columns: minmax(0, 1fr); }
      .kB-js .kB-help { display: none; }   /* κινητό: το τμήμα ακολουθεί αμέσως τα κουτάκια */
      .kB-fig { aspect-ratio: 16 / 9; }
      .kB-cta { grid-template-columns: minmax(0, 1fr); }
      .kB-cta__act { justify-self: start; }
    }
    @media (max-width: 640px) {
      .kB-empty { grid-template-columns: minmax(0, 1fr); }
      .kB-ill { max-width: 170px; }
      .kB-job { grid-template-columns: minmax(0, 1fr); }
      .kB-job .kB-btn { width: 100%; }
    }
    @media (max-width: 560px) {
      .kB-sign text { display: none; }
      .kB-lbl { font-size: 12px; }
      .kB-who__lbl { margin-top: -7px; padding: 2px 8px; font-size: 11.5px; }
      /* στατική εκδοχή (όλοι μαζί) σε στενή οθόνη: η μεγάλη ετικέτα σπάει σε 2 γραμμές για να μην ακουμπά τη διπλανή */
      .kB-hero:not(.kB-run) .kB-who__lbl { max-width: 72px; padding: 2px 6px; white-space: normal; line-height: 1.15; }
      .kB-tabs { gap: 8px; }
      .kB-tab { min-height: 88px; padding: 12px 4px 10px; font-size: 13px; gap: 6px; }
      .kB-tab__ico { width: 34px; height: 34px; border-radius: 10px; }
      .kB-tab__ico svg { width: 19px; height: 19px; }
      .kB-foot .kB-btn { width: 100%; }
    }
    @media (max-width: 440px) {
      .kB-actions .kB-hbtn { flex: 1 1 auto; }
      .kB-stats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
      .kB-stat { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 16px; }
      .kB-stat strong { grid-row: span 2; font-size: 30px; }
      .kB-stat b { margin-top: 0; }
      .kB-cta__act { justify-self: stretch; justify-items: stretch; }
    }
    @media (prefers-reduced-motion: reduce) {
      .kB-hbtn, .kB-btn, .kB-tab, .kB-tab__ico, .kB-who, .kB-lbl, .kB-shell, .kB-win, .kB-ln, .kB-drive, .kB-sign rect { transition: none; }
      .kB-hbtn:hover, .kB-btn:hover { transform: none; }
      .kB-panel.is-enter { animation: none; }
    }
    @media print {
      .kB-scene, .kB-cta__road { display: none; }
      .kB-card { box-shadow: none; border-color: #bbb; break-inside: avoid; }
    }
  

/* ===== Λωρίδα CTA: «ομαδικότητα» — 4 συνάδελφοι πιασμένοι χέρι-χέρι, ο 5ος (κίτρινος = εσύ) έρχεται και πιάνει το χέρι τους ===== */
.kB-cta { padding-bottom: clamp(104px, 10vw, 118px); }
.kT-scene { position: absolute; right: clamp(18px, 4vw, 44px); bottom: 4px; z-index: -1; width: 252px; height: 88px; pointer-events: none; }
.kT-scene svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kT-ground { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1.2; stroke-dasharray: 6 6; }
.kT-p { fill: #fff; }
.kT-p--1 rect { fill: #7fd3ff; }
.kT-p--3 rect { fill: #a9d8ff; }
.kT-p--new { fill: #ffd23f; }
.kT-arm { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 3.2; stroke-linecap: round; }
.kT-arm--new { stroke: #ffd23f; stroke-dasharray: 32; }
.kT-heart { fill: #ffd23f; transform-box: fill-box; transform-origin: 50% 100%; }
.kT-spark { fill: #fff; }
.kT-team, .kT-p--new, .kT-arm--new, .kT-heart, .kT-spark { animation-duration: 9s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.kT-team { animation-name: kT-team; }
.kT-p--new { animation-name: kT-walk; }
.kT-arm--new { animation-name: kT-hold; }
.kT-heart { animation-name: kT-heart; }
.kT-spark { animation-name: kT-spark; }
@keyframes kT-team {           /* εμφάνιση · δύο χαρούμενα πηδηματάκια όλοι μαζί · χάνονται για να ξαναρχίσει */
  0% { opacity: 0; transform: none; } 5% { opacity: 1; }
  48% { transform: none; } 52% { transform: translateY(-6px); } 56% { transform: none; }
  60% { transform: translateY(-6px); } 64% { transform: none; }
  88% { opacity: 1; } 96%, 100% { opacity: 0; transform: none; }
}
@keyframes kT-walk {           /* ο νέος συνάδελφος έρχεται από δεξιά */
  0%, 8% { transform: translateX(64px); opacity: 0; } 13% { opacity: 1; }
  15% { transform: translateX(52px) translateY(-2px); } 19% { transform: translateX(40px); }
  23% { transform: translateX(28px) translateY(-2px); } 27% { transform: translateX(16px); }
  31% { transform: translateX(6px) translateY(-2px); } 35%, 100% { transform: none; opacity: 1; }
}
@keyframes kT-hold { 0%, 36% { stroke-dashoffset: 32; } 44%, 100% { stroke-dashoffset: 0; } }
@keyframes kT-heart {
  0%, 50% { opacity: 0; transform: scale(.3); } 56% { opacity: 1; transform: scale(1.18); }
  61% { transform: scale(1); } 84% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes kT-spark { 0%, 52% { opacity: 0; } 58%, 66% { opacity: 1; } 62%, 72% { opacity: .35; } 78% { opacity: 1; } 86%, 100% { opacity: 0; } }
@media (max-width: 820px) { .kT-scene { right: auto; left: 50%; margin-left: -126px; } }
@media (prefers-reduced-motion: reduce) {
  .kT-team, .kT-p--new, .kT-arm--new, .kT-heart, .kT-spark { animation: none; }
  .kT-arm--new { stroke-dashoffset: 0; }
}
@media print { .kT-scene { display: none; } }

/* Μετρητής «Ανοιχτές θέσεις»: παλμός + μικρό «χοροπηδητό» για να τραβά το μάτι */
.kB-count { position: relative; isolation: isolate; animation: kB-count-bounce 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
.kB-count::before, .kB-count::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--blue);
  z-index: -1; animation: kB-count-ring 2.4s ease-out infinite; pointer-events: none;
}
.kB-count::after { animation-delay: 1.2s; }
@keyframes kB-count-ring { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.1); opacity: 0; } }
@keyframes kB-count-bounce {
  0%, 70%, 100% { transform: none; }
  76% { transform: translateY(-4px) scale(1.12); }
  82% { transform: translateY(0) scale(.96); }
  88% { transform: translateY(-2px) scale(1.04); }
  94% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .kB-count, .kB-count::before, .kB-count::after { animation: none; } .kB-count::before, .kB-count::after { display: none; } }

/* Αριθμός ανοιχτών θέσεων στις καρτέλες τμημάτων: κίτρινος από την αρχή + παλμός για να τραβά το μάτι */
.kB-tab__n { background: #ffd23f; color: #082f86; isolation: isolate; box-shadow: 0 2px 6px rgba(176, 128, 0, .35); animation: kB-count-bounce 3.2s ease-in-out infinite; }
.kB-tab__n::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #ffd23f;
  animation: kB-count-ring 2.4s ease-out infinite; pointer-events: none;
}
.kB-tab:nth-child(odd) .kB-tab__n, .kB-tab:nth-child(odd) .kB-tab__n::before { animation-delay: .6s; }   /* να μη χτυπάνε όλα μαζί */
@media (prefers-reduced-motion: reduce) { .kB-tab__n, .kB-tab__n::before { animation: none; } .kB-tab__n::before { display: none; } }

/* ============ Καριέρα — Πρόταση C: βίντεο μέσα στο «Γιατί ΑΡΑΜΠΑΤΖΗΣ» (prefix vC-) ============
   Το βίντεο «Γίνε μέρος της ομάδας μας» μπαίνει δίπλα στο κείμενο του «Γιατί», ώστε να το «αποδεικνύει».
   Μεγάλη οθόνη: κείμενο + οι 4 αριθμοί (2×2) αριστερά, στρογγυλεμένη κάρτα βίντεο 16:9 δεξιά.
   Μεσαία οθόνη: κείμενο δίπλα στο βίντεο, οι 4 αριθμοί από κάτω σε όλο το πλάτος.
   Κινητό: κείμενο → βίντεο → αριθμοί, σε μία στήλη.
   Το βίντεο έχει ήχο: δεν παίζει ποτέ μόνο του· ως το play φαίνεται μόνο η αφίσα και το mp4 φορτώνει μετά το κλικ. */

.vC-why { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "stats"; row-gap: 20px; }
.vC-why__head { grid-area: head; min-width: 0; }
.vC-why .sec__intro { margin-bottom: 0; }
.vC-why .kB-stats { grid-area: stats; min-width: 0; }

/* κάρτα βίντεο (ίδια λογική με το .yt της «Εταιρείας» και το .ad-video του «Διαφημιστείτε») */
.vC-media { grid-area: media; min-width: 0; margin: 0; }
.vC-video {
  position: relative; isolation: isolate; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: calc(var(--radius) + 4px); background: #0d1520;
  box-shadow: 0 1px 2px rgba(20,26,36,.04), 0 30px 60px -38px rgba(8,47,134,.55);
}
/* λεπτό περίγραμμα: η λευκή λωρίδα της αφίσας δεν «χάνεται» στο λευκό φόντο της σελίδας */
.vC-video::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(20,26,36,.09); pointer-events: none; }
.vC-video img, .vC-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.vC-video video { background: #000; }
/* όλη η κάρτα πατιέται· το κουμπί κάθεται πάνω στη φωτογραφία (δεξιά), για να διαβάζεται καθαρά ο τίτλος της αφίσας */
.vC-play {
  position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; border-radius: inherit; cursor: pointer; color: inherit;
  background: linear-gradient(0deg, rgba(8,24,64,.20), rgba(8,24,64,0) 42%);
}
.vC-play svg {
  position: absolute; left: 64%; top: 50%; width: clamp(56px, 5.6vw, 78px); height: auto; overflow: visible;
  transform: translate(-50%, -50%); filter: drop-shadow(0 8px 18px rgba(6,24,70,.38)); transition: transform .25s ease;
}
.vC-play:hover svg, .vC-play:focus-visible svg { transform: translate(-50%, -50%) scale(1.06); }
.vC-play:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: -6px; }
.vC-ring { transform-box: fill-box; transform-origin: center; animation: vC-ring 3.2s ease-out infinite; }
@keyframes vC-ring { 0% { opacity: .55; transform: scale(.8); } 70%, 100% { opacity: 0; transform: scale(1.14); } }

/* λεζάντα: «#teamArabatzis» */
.vC-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 12px 2px 0; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.vC-cap__dot { flex: none; width: 7px; height: 7px; margin-right: 2px; border-radius: 50%; background: #ffd23f; box-shadow: 0 0 0 3px rgba(255,210,63,.3); }
.vC-cap__tag { font-weight: 700; color: var(--blue); }
.vC-cap time { font-variant-numeric: tabular-nums lining-nums; }

/* μεσαία οθόνη: κείμενο δίπλα στο βίντεο (κεντραρισμένο κάθετα), αριθμοί από κάτω */
@media (min-width: 861px) and (max-width: 1179px) {
  .vC-why { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head media" "stats stats"; column-gap: clamp(28px, 3.4vw, 40px); row-gap: 28px; }
  .vC-why__head { align-self: center; }
}
/* μεγάλη οθόνη: κείμενο + αριθμοί 2×2 αριστερά, βίντεο δεξιά (κεντραρισμένο στο ύψος της στήλης) */
@media (min-width: 1180px) {
  .vC-why {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr;
    grid-template-areas: "head media" "stats media"; column-gap: clamp(40px, 4.2vw, 64px); row-gap: 22px;
  }
  .vC-media { align-self: center; }
  .vC-why .kB-stats { align-self: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .vC-why .kB-stat { padding: 18px 20px; }
  .vC-why .kB-stat strong { font-size: clamp(30px, 2.5vw, 38px); }
  .vC-why .kB-stat b { margin-top: 10px; }
}
@media (max-width: 560px) {
  .vC-why { row-gap: 18px; }
  .vC-video { border-radius: var(--radius); }
  .vC-cap { margin-top: 10px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .vC-ring { animation: none; opacity: 0; }
  .vC-play svg { transition: none; }
  .vC-play:hover svg, .vC-play:focus-visible svg { transform: translate(-50%, -50%); }
}
@media print {
  .vC-play { display: none; }
  .vC-video { box-shadow: none; break-inside: avoid; }
}