/* ==========================================================================
   ElitJob · Core design system
   Tokens taken from the official UI Kit + Elitjob logo SVG (#0055FF / #172343).
   Everything is written with CSS logical properties so the same stylesheet
   serves LTR (en) and RTL (ar) without a mirrored copy.
   ========================================================================== */

:root {
  /* ---------- Brand ---------- */
  --ej-blue:        #0055FF;   /* logo blue: primary action and accents */
  --ej-blue-700:    #0043CC;   /* hover  */
  --ej-blue-400:    #3C95FD;
  --ej-blue-300:    #70A5FF;
  --ej-navy:        #001D51;   /* header + footer ground */
  --ej-navy-800:    #00164A;
  --ej-amber:       #FFB42B;   /* conversion CTA */
  --ej-amber-600:   #F2A50E;

  /* ---------- Neutrals ---------- */
  --ej-ink:         #172343;
  --ej-text:        #525779;
  --ej-muted:       #8788A3;
  --ej-muted-2:     #A2A7C4;
  --ej-line:        #E3E7F0;
  --ej-line-2:      #D7DCEA;
  --ej-bg:          #EEF2F9;
  --ej-soft:        #F4F7FC;
  --ej-card:        #FFFFFF;

  /* ---------- State ---------- */
  --ej-success:     #27C281;
  --ej-success-bg:  #E8FAF2;
  --ej-warning:     #FF9800;
  --ej-warning-bg:  #FFF4E3;
  --ej-error:       #F44336;
  --ej-error-bg:    #FEECEB;
  --ej-info:        #3C95FD;

  /* ---------- Category colours (Today's Career Trends) ---------- */
  --ej-cat-tips:    #7C4DFF;
  --ej-cat-hiring:  #34D399;
  --ej-cat-growing: #3C95FD;

  /* ---------- Tints ---------- */
  --ej-blue-50:     #ECF2FF;
  --ej-blue-100:    #DCE7FF;

  /* ---------- Shape ---------- */
  --ej-r-xs:  8px;
  --ej-r-sm:  11px;
  --ej-r-md:  16px;
  --ej-r-lg:  22px;
  --ej-r-xl:  30px;
  --ej-r-pill: 999px;
  --ej-r-input: 12px;   /* was referenced by modal.css / tool.css but never defined */

  --ej-sh-sm:  0 1px 2px rgba(23,35,67,.05);
  --ej-sh:     0 2px 10px rgba(23,35,67,.06);
  --ej-sh-md:  0 8px 24px rgba(23,35,67,.08);
  --ej-sh-lg:  0 18px 48px rgba(23,35,67,.12);
  --ej-sh-blue: 0 12px 30px rgba(0,85,255,.22);

  /* ---------- Type ---------- */
  --ej-font-head: "Poppins", "Segoe UI", system-ui, sans-serif;
  --ej-font-body: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --ej-font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* fluid display scale */
  --ej-t-hero:  clamp(2.05rem, 1.35rem + 2.3vw, 3.25rem);
  --ej-t-h2:    clamp(1.75rem, 1.15rem + 2.1vw, 2.9rem);
  --ej-t-h3:    clamp(1.25rem, 1.02rem + .8vw, 1.6rem);
  --ej-t-h4:    clamp(1.06rem, .98rem + .3vw, 1.2rem);
  --ej-t-lead:  clamp(1rem, .96rem + .3vw, 1.16rem);

  /* ---------- Layout ---------- */
  --ej-maxw:   1200px;
  --ej-gutter: clamp(18px, 4vw, 40px);
  --ej-sec:    clamp(44px, 5.4vw, 78px);  /* vertical section rhythm */

  /* Header height, matched to the live portal at each breakpoint.
     Everything that offsets against the header (sticky contents, the mobile
     drawer, scroll-margin on anchors) reads this token, so the three values
     below are the only place it is set. */
  --ej-hdr-h:  58px;
}

/* Arabic overrides. Arabic is set in IBM Plex Sans Arabic, one size up in
   optical terms, with looser leading because the script sits taller. */
:root:lang(ar), [dir="rtl"] {
  --ej-font-head: "IBM Plex Sans Arabic", "Poppins", system-ui, sans-serif;
  --ej-font-body: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
}

/* ========================================================================== */
/* Reset                                                                       */
/* ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;            /* the logo marquee is intentionally wider than the viewport */
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--ej-hdr-h) + 16px);
}
body {
  font-family: var(--ej-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ej-text);
  background: var(--ej-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
[dir="rtl"] body { line-height: 1.72; }

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5 {
  font-family: var(--ej-font-head);
  color: var(--ej-ink);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.018em;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  letter-spacing: 0;      /* negative tracking breaks Arabic joins */
  line-height: 1.3;
}

:focus-visible {
  outline: 3px solid var(--ej-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--ej-blue); color: #fff; }

/* ========================================================================== */
/* Layout helpers                                                              */
/* ========================================================================== */
.ej-wrap {
  max-width: var(--ej-maxw);
  margin-inline: auto;
  padding-inline: var(--ej-gutter);
  width: 100%;
}
.ej-sec { padding-block: var(--ej-sec); }
.ej-sec--tight { padding-block: calc(var(--ej-sec) * .58); }
.ej-sec--flush-t { padding-block-start: 0; }

.ej-sec-head { max-width: 720px; margin-block-end: clamp(22px, 2.6vw, 36px); }
.ej-sec-head--center { margin-inline: auto; text-align: center; }
.ej-sec-head h2 { font-size: var(--ej-t-h2); }
.ej-sec-head p {
  margin-block-start: 14px;
  font-size: var(--ej-t-lead);
  color: var(--ej-text);
  max-width: 62ch;
}
.ej-sec-head--center p { margin-inline: auto; }

/* Section label. Not an all-caps eyebrow: it's a small pill that carries the
   credit cost or the section's real function, so it encodes information. */
.ej-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600;
  color: var(--ej-blue);
  background: var(--ej-blue-50);
  padding: 6px 13px;
  border-radius: var(--ej-r-pill);
  margin-block-end: 16px;
}
.ej-tag svg { inline-size: 15px; block-size: 15px; }

/* ========================================================================== */
/* Buttons                                                                     */
/* ========================================================================== */
.ej-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--ej-font-body);
  font-weight: 600; font-size: 15px;
  padding: 14px 26px;
  border-radius: var(--ej-r-sm);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .22s, background-color .18s, color .18s, border-color .18s;
  white-space: nowrap;
  line-height: 1.2;
}
.ej-btn:hover { transform: translateY(-2px); }
.ej-btn:active { transform: translateY(0); }

.ej-btn--primary { background: var(--ej-amber); color: var(--ej-ink); box-shadow: 0 8px 20px rgba(255,180,43,.34); }
.ej-btn--primary:hover { background: var(--ej-amber-600); box-shadow: 0 12px 26px rgba(255,180,43,.42); }

/* white label on the amber CTA (log in, welcome popup).
   White on #FFB42B is only 1.9:1, so the modifier also deepens the amber;
   that lands at 3.1:1, which large/bold button text can carry. */
.ej-btn--on-amber { background: var(--ej-amber-600); color: #fff; }
.ej-btn--on-amber:hover { background: #E2970A; color: #fff; }

.ej-btn--blue { background: var(--ej-blue); color: #fff; box-shadow: var(--ej-sh-blue); }
.ej-btn--blue:hover { background: var(--ej-blue-700); }

.ej-btn--ghost { border: 1.5px solid var(--ej-line-2); color: var(--ej-ink); background: #fff; }
.ej-btn--ghost:hover { border-color: var(--ej-blue); color: var(--ej-blue); }

.ej-btn--outline-blue { border: 1.5px solid var(--ej-blue); color: var(--ej-blue); background: #fff; }
.ej-btn--outline-blue:hover { background: var(--ej-blue); color: #fff; }

.ej-btn--onnavy { border: 1.5px solid rgba(255,255,255,.32); color: #fff; }
.ej-btn--onnavy:hover { background: rgba(255,255,255,.1); border-color: #fff; }

.ej-btn--lg { padding: 17px 27px; font-size: 16.5px; }
/* long CTA labels must never push the page wider than the viewport */
@media (max-width: 560px) {
  .ej-btn--lg { padding: 15px 20px; font-size: 15.5px; }
  .ej-btn { white-space: normal; text-align: center; max-inline-size: 100%; }
}
.ej-btn--sm { padding: 10px 18px; font-size: 14px; }
.ej-btn--block { width: 100%; }

/* arrow that leans in the reading direction (mirrors automatically) */
.ej-arrow { inline-size: 17px; block-size: 17px; flex: none; }
[dir="rtl"] .ej-arrow { transform: scaleX(-1); }

/* ========================================================================== */
/* Header                                                                      */
/* ========================================================================== */
.ej-hdr {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: var(--ej-navy);
  transition: box-shadow .3s, background-color .3s;
}
.ej-hdr::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px;
  background: linear-gradient(90deg, transparent, rgba(60,149,253,.55), transparent);
}
.ej-hdr.is-stuck { box-shadow: 0 8px 30px rgba(0,29,81,.32); }
.ej-hdr__in {
  max-width: var(--ej-maxw); margin-inline: auto;
  padding-inline: var(--ej-gutter);
  block-size: var(--ej-hdr-h);
  display: flex; align-items: center; gap: 22px;
}
.ej-hdr__logo { flex: none; }
.ej-hdr__logo img { block-size: 25px; width: auto; }

.ej-nav { display: flex; align-items: center; gap: 4px; margin-inline-end: auto; }
.ej-nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.86);
  font-size: 14px; font-weight: 500;
  padding: 7px 12px; border-radius: var(--ej-r-xs);
  transition: color .18s, background-color .18s;
}
.ej-nav__link:hover, .ej-nav__link[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.09); }
.ej-nav__link.is-active { color: #fff; }
.ej-nav__link.is-active::after {
  content: ""; position: absolute; inset-inline: 14px; inset-block-end: 2px;
  block-size: 2px; border-radius: 2px; background: var(--ej-amber);
}
.ej-nav__chev { inline-size: 13px; block-size: 13px; transition: transform .22s; }
.ej-nav__link[aria-expanded="true"] .ej-nav__chev { transform: rotate(180deg); }

/* dropdown */
.ej-drop { position: relative; }
.ej-drop__panel {
  position: absolute; inset-block-start: calc(100% + 10px); inset-inline-start: 0;
  min-inline-size: 288px;
  background: #fff; border-radius: var(--ej-r-md);
  box-shadow: var(--ej-sh-lg);
  padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s, transform .24s cubic-bezier(.2,.7,.3,1), visibility .2s;
}
.ej-drop.is-open .ej-drop__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.ej-drop__item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 12px; border-radius: var(--ej-r-xs);
  transition: background-color .16s;
}
.ej-drop__item:hover { background: var(--ej-soft); }
.ej-drop__ico {
  flex: none; inline-size: 34px; block-size: 34px;
  display: grid; place-items: center;
  border-radius: 9px; background: var(--ej-blue-50); color: var(--ej-blue);
}
.ej-drop__ico svg { inline-size: 18px; block-size: 18px; }
.ej-drop__item > span:last-child { display: block; min-inline-size: 0; }
.ej-drop__t { display: block; font-size: 14.5px; font-weight: 600; color: var(--ej-ink); font-family: var(--ej-font-head); line-height: 1.3; }
.ej-drop__d { display: block; font-size: 12.5px; color: var(--ej-muted); margin-block-start: 3px; line-height: 1.45; }

/* ---------- signed-in / signed-out ----------
   One class on <html> drives the whole header. Anything marked
   data-auth="in" only exists once the user has logged in; data-auth="out"
   is the reverse. Default (no class) = logged out, which is also what
   renders if JS never runs. */
[data-auth="in"] { display: none !important; }
.is-auth [data-auth="in"] { display: revert !important; }
.is-auth [data-auth="out"] { display: none !important; }

/* header right side + auth */
.ej-hdr__right { display: flex; align-items: center; gap: 11px; flex: none; }

.ej-lang {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.86); font-size: 13px; font-weight: 600;
  padding: 6px 10px; border-radius: var(--ej-r-xs);
  border: 1px solid rgba(255,255,255,.18);
}
.ej-lang:hover { color: #fff; background: rgba(255,255,255,.09); }

.ej-hdr__login { color: rgba(255,255,255,.88); font-size: 14px; font-weight: 500; padding: 7px 4px; }
.ej-hdr__login:hover { color: #fff; }

/* burger */
.ej-burger {
  display: none; inline-size: 38px; block-size: 38px;
  border-radius: var(--ej-r-xs);
  place-items: center; color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}
.ej-burger span { display: block; inline-size: 18px; block-size: 2px; background: #fff; border-radius: 2px; transition: transform .26s, opacity .2s; }
.ej-burger span + span { margin-block-start: 4px; }
.ej-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ej-burger.is-open span:nth-child(2) { opacity: 0; }
.ej-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* mobile drawer */
.ej-mob {
  position: fixed; inset-block-start: var(--ej-hdr-h); inset-inline: 0; inset-block-end: 0;
  background: var(--ej-navy); z-index: 99;
  padding: 24px var(--ej-gutter) 40px;
  overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity .25s, transform .3s cubic-bezier(.2,.7,.3,1), visibility .25s;
}
.ej-mob.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.ej-mob__grp + .ej-mob__grp { margin-block-start: 26px; padding-block-start: 26px; border-block-start: 1px solid rgba(255,255,255,.12); }
.ej-mob__lbl { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.42); letter-spacing: .06em; margin-block-end: 12px; }
.ej-mob__link {
  display: flex; align-items: center; gap: 12px;
  color: #fff; font-size: 17px; font-weight: 500;
  font-family: var(--ej-font-head);
  padding: 12px 0;
}
.ej-mob__link svg { inline-size: 19px; block-size: 19px; color: var(--ej-blue-300); flex: none; }
.ej-mob__actions { display: grid; gap: 12px; margin-block-start: 30px; }
.ej-mob__credits {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  padding: 7px 8px 7px 14px;
  border-radius: var(--ej-r-pill);
  color: #fff; font-size: 14.5px; font-weight: 600;
}
[dir="rtl"] .ej-mob__credits { padding: 7px 14px 7px 8px; }

@media (max-width: 1024px) {
  :root { --ej-hdr-h: 54px; }
  .ej-hdr__logo img { block-size: 23px; }
  .ej-burger { inline-size: 35px; block-size: 35px; }
}
@media (max-width: 640px) {
  :root { --ej-hdr-h: 50px; }
  .ej-hdr__in { gap: 14px; }
  .ej-hdr__logo img { block-size: 21px; }
  .ej-burger { inline-size: 33px; block-size: 33px; }
  .ej-hdr__right { gap: 8px; }
  .ej-hdr__right .ej-btn--sm { padding: 8px 13px; font-size: 13px; }
}

@media (max-width: 1080px) {
  .ej-nav, .ej-hdr__right .ej-lang, .ej-hdr__login,
  .is-auth .ej-hdr__login { display: none !important; }
  .ej-burger { display: grid; }
  .ej-hdr__logo { margin-inline-end: auto; }
}

/* ========================================================================== */
/* Footer                                                                      */
/* ========================================================================== */
.ej-ftr { background: var(--ej-navy); color: rgba(255,255,255,.7); }
.ej-ftr__top { padding-block: clamp(36px, 4.4vw, 58px) 34px; display: grid; gap: 34px 40px; grid-template-columns: auto repeat(4, minmax(0, 1fr)); }
.ej-ftr__logo img { block-size: 30px; width: auto; }
.ej-ftr h4 {
  color: #fff; font-size: 13.5px; font-weight: 700;
  margin-block-end: 16px; padding-block-end: 10px;
  border-block-end: 1px solid rgba(255,255,255,.14);
}
.ej-ftr li + li { margin-block-start: 11px; }
.ej-ftr li a { font-size: 14px; transition: color .16s, padding-inline-start .16s; }
.ej-ftr li a:hover { color: #fff; padding-inline-start: 4px; }
.ej-ftr__bot {
  border-block-start: 1px solid rgba(255,255,255,.12);
  padding-block: 22px 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px;
}
.ej-ftr__social { display: flex; gap: 10px; }
.ej-ftr__social a {
  inline-size: 34px; block-size: 34px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  transition: background-color .18s, border-color .18s, color .18s;
}
.ej-ftr__social a:hover { background: var(--ej-blue); border-color: var(--ej-blue); color: #fff; }
.ej-ftr__social svg { inline-size: 16px; block-size: 16px; }

@media (max-width: 900px) {
  .ej-ftr__top { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .ej-ftr__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .ej-ftr__top { grid-template-columns: 1fr; } }

/* ========================================================================== */
/* Breadcrumbs + tool tabs (tool pages)                                        */
/* ========================================================================== */
.ej-crumbs {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 600; color: var(--ej-muted);
  padding-block: 12px 0;
}
@media (max-width: 640px) {
  .ej-crumbs { font-size: 11.5px; padding-block: 6px 0; gap: 6px; }
}
.ej-crumbs a:hover { color: var(--ej-blue); }
.ej-crumbs b { color: var(--ej-ink); font-weight: 600; }
.ej-crumbs svg { inline-size: 13px; block-size: 13px; opacity: .6; }
[dir="rtl"] .ej-crumbs svg { transform: scaleX(-1); }

/* One row, always. On a phone the four tool names do not fit, so the bar
   scrolls sideways rather than wrapping onto a second line. */
.ej-toolnav {
  display: flex; gap: clamp(14px, 3vw, 34px); flex-wrap: nowrap;
  border-block-end: 1px solid var(--ej-line);
  margin-block: 10px clamp(14px, 1.8vw, 22px);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: inline proximity;
}
.ej-toolnav::-webkit-scrollbar { display: none; }
.ej-toolnav a { flex: none; white-space: nowrap; scroll-snap-align: start; }
.ej-toolnav a {
  position: relative;
  font-family: var(--ej-font-head);
  font-size: 15px; font-weight: 600; color: var(--ej-muted);
  padding-block: 10px 12px;
  transition: color .18s;
}
@media (max-width: 640px) {
  .ej-toolnav {
    gap: 18px;
    margin-inline: calc(var(--ej-gutter) * -1);
    padding-inline: var(--ej-gutter);
  }
  .ej-toolnav a { font-size: 14px; padding-block: 9px 11px; }
}
.ej-toolnav a:hover { color: var(--ej-ink); }
.ej-toolnav a.is-active { color: var(--ej-blue); }
.ej-toolnav a.is-active::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px;
  block-size: 2.5px; border-radius: 3px 3px 0 0; background: var(--ej-blue);
}

/* ========================================================================== */
/* Cards, chips, generic bits                                                  */
/* ========================================================================== */
.ej-card {
  background: var(--ej-card);
  border-radius: var(--ej-r-md);
  box-shadow: var(--ej-sh);
}
.ej-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  padding: 5px 12px; border-radius: var(--ej-r-pill);
}
.ej-chip--miss { background: var(--ej-error-bg); color: #C9372C; }
.ej-chip--gap  { background: var(--ej-warning-bg); color: #B26A00; }
.ej-chip--ok   { background: var(--ej-success-bg); color: #12855A; }
.ej-chip--blue { background: var(--ej-blue-50); color: var(--ej-blue); }

/* “what’s next” cross-sell rows, straight from the mockups */
.ej-next { padding: clamp(18px, 3vw, 28px); }
.ej-next__row {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-block: 17px;
}
.ej-next__row + .ej-next__row { border-block-start: 1px solid var(--ej-line); }
.ej-next__txt { flex: 1 1 220px; }
.ej-next__txt strong { display: block; font-family: var(--ej-font-head); font-size: 15px; color: var(--ej-ink); }
.ej-next__txt span { font-size: 13.5px; color: var(--ej-muted); }

/* ========================================================================== */
/* Motion utilities                                                            */
/* There is deliberately no scroll reveal here. Fading whole sections in as
   they are reached made the page look like it ended at the fold: below the
   first screen there was nothing to see until the scroll started, which read
   as the end of the document rather than as motion. Everything now renders in
   its final state and only in-component animation is left.                  */
/* ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* screen-reader only */
.ej-sr {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* back to top */
.ej-top {
  position: fixed; inset-block-end: 26px; inset-inline-end: 26px; z-index: 60;
  inline-size: 46px; block-size: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ej-blue); color: #fff;
  box-shadow: var(--ej-sh-blue);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s, transform .25s, visibility .25s, background-color .18s;
}
.ej-top.is-on { opacity: 1; visibility: visible; transform: none; }
.ej-top:hover { background: var(--ej-blue-700); }

/* ==========================================================================
   404
   ========================================================================== */
.ej-404 {
  min-block-size: calc(100vh - var(--ej-hdr-h));
  display: grid; place-items: center;
  padding: clamp(40px, 8vw, 90px) var(--ej-gutter);
  text-align: center;
}
.ej-404__in { max-width: 520px; }
.ej-404__num {
  font-family: var(--ej-font-head);
  font-size: clamp(4.5rem, 3rem + 8vw, 9rem);
  font-weight: 700; line-height: .9;
  color: var(--ej-blue);
  letter-spacing: -.04em;
}
.ej-404 h1 { font-size: var(--ej-t-h2); margin-block-start: 12px; }
.ej-404 p { margin-block-start: 14px; font-size: var(--ej-t-lead); }
.ej-404__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-block-start: 30px; }