/* ==========================================================================
   ElitJob · Home
   ========================================================================== */

/* ==========================================================================
   1. HERO. The one loud moment on the page.
   A CV sheet is scanned by a blue sweep on load; the readout beside it fills
   in as the sweep passes. Everything else on the page stays quiet.
   ========================================================================== */
.ej-hero {
  position: relative;
  background:
    radial-gradient(1100px 620px at 78% -6%, rgba(60,149,253,.30), transparent 62%),
    radial-gradient(760px 520px at 4% 6%, rgba(0,85,255,.22), transparent 60%),
    linear-gradient(168deg, #001744 0%, #00246A 46%, #0033A8 100%);
  color: #fff;
  overflow: hidden;
  padding-block: clamp(30px, 3.4vw, 52px) clamp(34px, 4vw, 60px);
  isolation: isolate;
}
/* faint grid, keyed to the 8px spacing system */
.ej-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
/* One centred column: a single message and a single call to action. */
.ej-hero__in {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  max-inline-size: 58rem;
  padding-block: clamp(8px, 2vw, 28px);
}

.ej-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.19);
  backdrop-filter: blur(8px);
  padding: 7px 15px 7px 8px;
  border-radius: var(--ej-r-pill);
  font-size: 13.5px; font-weight: 600; color: #fff;
  margin-block-end: 18px;
}
[dir="rtl"] .ej-hero__eyebrow { padding: 7px 8px 7px 15px; }
.ej-hero__eyebrow b {
  background: var(--ej-amber); color: var(--ej-navy);
  font-size: 11.5px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--ej-r-pill);
}

.ej-hero h1 {
  color: #fff;
  font-size: var(--ej-t-hero);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.06;
  text-wrap: balance;
}
/* the second line carries the promise, so it carries the accent colour */
.ej-hero h1 em { font-style: normal; color: var(--ej-amber); }
[dir="rtl"] .ej-hero h1 { letter-spacing: 0; line-height: 1.24; }

.ej-hero__lead {
  margin-block-start: 16px;
  font-size: var(--ej-t-lead);
  color: rgba(255,255,255,.8);
  max-width: 62ch;
  line-height: 1.6;
}
.ej-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-block-start: 26px; justify-content: center; }

/* trust row: four tool names, because that is genuinely all the product is */
.ej-hero__incl {
  margin-block-start: 22px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  font-size: 13.5px; color: rgba(255,255,255,.72);
}
.ej-hero__incl li { display: flex; align-items: center; gap: 8px; }
.ej-hero__incl svg { inline-size: 16px; block-size: 16px; color: var(--ej-success); flex: none; }

@media (max-width: 1000px) {
  .ej-hero__in { grid-template-columns: 1fr; }
  .ej-hero__lead, .ej-hero h1 { max-width: none; }
  .ej-hero { padding-block: 22px 30px; }
}
@media (max-width: 620px) {
  /* On a phone the three floating cards collide with the CV sheet itself.
     Keep the score dial, which is the point of the illustration, drop the rest. */

  /* The mockup is the thing that sells the product, so it has to be on screen
     without scrolling. Every block above it is tightened to buy the room, and
     the second CTA drops to a text link rather than a second full-width bar. */
  .ej-hero { padding-block: 16px 22px; }
  .ej-hero__eyebrow { font-size: 12.5px; padding: 5px 12px 5px 6px; margin-block-end: 12px; }
  .ej-hero h1 { font-size: clamp(1.7rem, 1.1rem + 3vw, 2.2rem); line-height: 1.08; }
  .ej-hero__lead { margin-block-start: 10px; font-size: 14.5px; line-height: 1.5; }
  .ej-hero__cta { gap: 8px; margin-block-start: 16px; }
  .ej-hero__cta .ej-btn:first-child { width: 100%; }
  .ej-hero__cta .ej-btn--onnavy {
    width: 100%; border: 0; padding: 6px 0; font-size: 14.5px;
    text-decoration: underline; text-underline-offset: 3px;
  }
  .ej-hero__incl { margin-block-start: 12px; gap: 6px 16px; font-size: 12.5px; }
  .ej-hero__incl svg { inline-size: 14px; block-size: 14px; }
}

/* ==========================================================================
   2. COMPANY MARQUEE
   ========================================================================== */
.ej-marq { background: #fff; padding-block: 26px 30px; border-block-end: 1px solid var(--ej-line); }
.ej-marq__lbl { text-align: center; font-size: 14px; font-weight: 600; color: var(--ej-muted); margin-block-end: 18px; }
.ej-marq__mask {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ej-marq__track {
  display: flex; align-items: center; gap: clamp(40px, 6vw, 78px);
  width: max-content;
  animation: ej-marq var(--marq-dur, 26s) linear infinite;
}
[dir="rtl"] .ej-marq__track { animation-name: ej-marq-rtl; }
.ej-marq:hover .ej-marq__track { animation-play-state: paused; }
@keyframes ej-marq { to { transform: translateX(-50%); } }
@keyframes ej-marq-rtl { to { transform: translateX(50%); } }
.ej-marq__track img {
  block-size: clamp(20px, 2.4vw, 27px); width: auto;
  opacity: .42;
  filter: grayscale(1);
  transition: opacity .25s, filter .25s;
}
.ej-marq__track img:hover { opacity: .9; filter: none; }

/* ==========================================================================
   3. TOOL DEMOS. Four alternating rows, each with a live demo that plays
   once when it scrolls into view.
   ========================================================================== */
.ej-tools { background: var(--ej-bg); }

.ej-tool {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 62px);
  align-items: center;
  padding-block: clamp(32px, 3.8vw, 54px);
}
.ej-tool + .ej-tool { border-block-start: 1px solid var(--ej-line); }
.ej-tool:nth-of-type(even) .ej-tool__copy { order: 2; }

.ej-tool__step {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 700; color: var(--ej-blue);
  margin-block-end: 15px;
}
.ej-tool__step i {
  display: grid; place-items: center; font-style: normal;
  inline-size: 24px; block-size: 24px; border-radius: 7px;
  background: var(--ej-blue); color: #fff; font-size: 12px;
}
.ej-tool__copy h3 { font-size: var(--ej-t-h2); }
.ej-tool__copy p { margin-block-start: 16px; font-size: var(--ej-t-lead); max-width: 46ch; }
.ej-tool__pts { margin-block-start: 22px; display: grid; gap: 11px; }
.ej-tool__pts li { display: flex; gap: 11px; font-size: 14.5px; color: var(--ej-text); }
.ej-tool__pts svg { inline-size: 18px; block-size: 18px; color: var(--ej-blue); flex: none; margin-block-start: 2px; }
.ej-tool__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-block-start: 30px; }

/* demo shell */

/* --- demo A: ATS match score --- */
.ej-dA__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ej-gauge {
  background: var(--ej-soft); border-radius: var(--ej-r-md);
  padding: 20px 16px; text-align: center;
}
.ej-gauge__lbl { font-size: 11.5px; font-weight: 700; color: var(--ej-muted); margin-block-end: 14px; }
.ej-gauge .ej-dial { inline-size: 96px; block-size: 96px; margin-inline: auto; }
.ej-gauge .ej-dial__num { font-size: 26px; }
.ej-gauge .ej-dial__num small { font-size: 11px; color: var(--ej-muted); font-weight: 600; }
.ej-gauge__note { font-size: 12px; color: var(--ej-muted); margin-block-start: 12px; }
.ej-dA__kw { margin-block-start: 14px; background: var(--ej-soft); border-radius: var(--ej-r-md); padding: 16px; }
.ej-dA__kw h6 { font-size: 11.5px; font-weight: 700; color: var(--ej-muted); margin-block-end: 12px; font-family: var(--ej-font-body); }

/* --- demo B: CV analyzer report --- */
.ej-dB__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ej-rep {
  background: var(--ej-soft); border-radius: var(--ej-r-md); padding: 14px;
}
.ej-rep__h { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--ej-muted); margin-block-end: 11px; }
.ej-rep__h svg { inline-size: 15px; block-size: 15px; }
.ej-rep li { display: flex; gap: 8px; font-size: 12.5px; color: var(--ej-text); line-height: 1.45; }
.ej-rep li + li { margin-block-start: 9px; padding-block-start: 9px; border-block-start: 1px solid var(--ej-line); }
.ej-rep li svg { inline-size: 14px; block-size: 14px; flex: none; margin-block-start: 2px; }
.ej-rep--ok  .ej-rep__h, .ej-rep--ok  li svg { color: var(--ej-success); }
.ej-rep--warn .ej-rep__h, .ej-rep--warn li svg { color: var(--ej-warning); }
.ej-rep--miss .ej-rep__h { color: var(--ej-error); }
.ej-rep--rec .ej-rep__h, .ej-rep--rec li svg { color: var(--ej-blue); }
.ej-dB__sum {
  margin-block-start: 12px; background: var(--ej-blue-50);
  border-inline-start: 3px solid var(--ej-blue);
  border-radius: 0 var(--ej-r-xs) var(--ej-r-xs) 0;
  padding: 13px 15px; font-size: 12.5px; color: var(--ej-ink); line-height: 1.6;
}
[dir="rtl"] .ej-dB__sum { border-radius: var(--ej-r-xs) 0 0 var(--ej-r-xs); }

@media (max-width: 980px) {
  .ej-tool { grid-template-columns: 1fr; gap: 22px; }
  .ej-tool:nth-of-type(even) .ej-tool__copy { order: 0; }
  .ej-tool__copy p { max-width: none; }
}
@media (max-width: 560px) {
  .ej-dA__grid, .ej-dB__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   4. RESUME EXAMPLES
   ========================================================================== */
.ej-ex { background: #fff; }
.ej-ex__filters { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; margin-block-end: 24px; }
.ej-ex__filters button {
  font-size: 13.5px; font-weight: 600; color: var(--ej-text);
  background: var(--ej-soft); border: 1px solid var(--ej-line);
  padding: 8px 17px; border-radius: var(--ej-r-pill);
  transition: background-color .2s, color .2s, border-color .2s;
}
.ej-ex__filters button:hover { border-color: var(--ej-blue); color: var(--ej-blue); }
.ej-ex__filters button[aria-pressed="true"] { background: var(--ej-blue); border-color: var(--ej-blue); color: #fff; }

.ej-ex__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
@media (max-width: 1000px) { .ej-ex__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .ej-ex__grid { grid-template-columns: 1fr; } }
.ej-ex__card {
  position: relative;
  background: var(--ej-soft);
  border: 1px solid var(--ej-line);
  border-radius: var(--ej-r-md);
  padding: 14px 14px 18px;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s;
  display: block;
}
.ej-ex__card:hover { transform: translateY(-6px); box-shadow: var(--ej-sh-lg); border-color: var(--ej-blue-100); }
.ej-ex__card.is-hidden { display: none; }

/* the mini résumé preview, drawn in CSS rather than a screenshot */
.ej-mini {
  background: #fff; border-radius: var(--ej-r-xs);
  padding: 16px 15px; box-shadow: var(--ej-sh-sm);
  block-size: 208px; overflow: hidden; position: relative;
}
.ej-ex__card:hover .ej-mini::after {
  transform: translateY(210%);
}
.ej-mini::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 40%;
  background: linear-gradient(180deg, transparent, rgba(0,85,255,.10) 70%, rgba(0,85,255,.45));
  transform: translateY(-110%);
  transition: transform 1.1s cubic-bezier(.4,0,.4,1);
  pointer-events: none;
}
.ej-mini__n { font-family: var(--ej-font-head); font-weight: 700; font-size: 13px; color: var(--ej-ink); }
.ej-mini__r { font-size: 10.5px; color: var(--ej-blue); font-weight: 600; margin-block-start: 1px; }
.ej-mini__rule { block-size: 1px; background: var(--ej-line); margin-block: 10px; }
.ej-mini__lbl { font-size: 8px; font-weight: 700; color: var(--ej-muted); letter-spacing: .09em; margin-block-end: 5px; }
.ej-mini__ln { display: block; block-size: 5px; border-radius: 3px; background: var(--ej-line); margin-block-end: 4px; }
.ej-mini__ln--s { inline-size: 62%; }
.ej-mini__ln--m { inline-size: 84%; }
.ej-mini__tags { display: flex; gap: 4px; flex-wrap: wrap; margin-block-start: 8px; }
.ej-mini__tags span { font-size: 8.5px; font-weight: 600; color: var(--ej-blue); background: var(--ej-blue-50); padding: 2px 6px; border-radius: 4px; }

.ej-ex__body { padding: 15px 4px 0; }
.ej-ex__body h4 { font-size: 15.5px; }
.ej-ex__body p { font-size: 13px; color: var(--ej-muted); margin-block-start: 5px; }
.ej-ex__use {
  display: inline-flex; align-items: center; gap: 7px;
  margin-block-start: 12px; font-size: 13px; font-weight: 600; color: var(--ej-blue);
}
.ej-ex__foot { text-align: center; margin-block-start: 40px; }

/* ==========================================================================
   5. TODAY'S CAREER TRENDS
   ========================================================================== */
.ej-news { background: var(--ej-bg); }
.ej-news__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin-block-end: 34px; }
.ej-news__head h2 { font-size: var(--ej-t-h2); }
.ej-news__head p { margin-block-start: 12px; font-size: var(--ej-t-lead); max-width: 52ch; }

.ej-news__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 26px); }
@media (max-width: 1080px) { .ej-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .ej-news__grid { grid-template-columns: 1fr; } }
.ej-news__foot { text-align: center; margin-block-start: 38px; }

/* ==========================================================================
   6. FAQ
   ========================================================================== */
.ej-faq { background: #fff; }
.ej-faq__list { max-width: 840px; margin-inline: auto; }
.ej-faq__item { border-block-end: 1px solid var(--ej-line); }
.ej-faq__item:first-child { border-block-start: 1px solid var(--ej-line); }
.ej-faq__q {
  inline-size: 100%; text-align: start;
  display: flex; align-items: center; gap: 18px;
  padding-block: 21px;
  font-family: var(--ej-font-head); font-size: clamp(15.5px, 1.4vw, 17px); font-weight: 600; color: var(--ej-ink);
  transition: color .18s;
}
.ej-faq__q:hover { color: var(--ej-blue); }
.ej-faq__ico {
  margin-inline-start: auto; flex: none;
  inline-size: 30px; block-size: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ej-blue-50); color: var(--ej-blue);
  transition: background-color .22s, color .22s, transform .3s;
}
.ej-faq__q[aria-expanded="true"] .ej-faq__ico { background: var(--ej-blue); color: #fff; transform: rotate(45deg); }
.ej-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.3,.8,.3,1); }
.ej-faq__a.is-open { grid-template-rows: 1fr; }
.ej-faq__a > div { overflow: hidden; }
.ej-faq__a p {
  font-size: 14.5px; line-height: 1.72; color: var(--ej-text);
  padding-inline-end: 48px; padding-block-end: 22px; max-width: 72ch;
}
.ej-faq__a p + p { margin-block-start: 12px; }
@media (max-width: 560px) { .ej-faq__a p { padding-inline-end: 0; } }

/* ==========================================================================
   7. CLOSING CTA
   ========================================================================== */
.ej-cta {
  background:
    radial-gradient(760px 420px at 82% 10%, rgba(60,149,253,.32), transparent 62%),
    linear-gradient(150deg, #001744, #0033A8);
  color: #fff; position: relative; overflow: hidden;
}
.ej-cta::before {
  content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -12%;
  inline-size: 460px; block-size: 460px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 0 0 60px rgba(255,255,255,.035), 0 0 0 140px rgba(255,255,255,.025);
}
.ej-cta__in { position: relative; text-align: center; max-width: 700px; margin-inline: auto; }
.ej-cta h2 { color: #fff; font-size: var(--ej-t-h2); }
.ej-cta p { margin-block-start: 16px; font-size: var(--ej-t-lead); color: rgba(255,255,255,.78); }
.ej-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-block-start: 32px; }
.ej-cta__note { margin-block-start: 20px; font-size: 13px; color: rgba(255,255,255,.6); }

/* ==========================================================================
   AI CAREER TOOLKIT. Four tool cards, one per page.
   Each tool gets its own accent so the four stay distinguishable at a glance;
   all four accents already exist in the token set.
   ========================================================================== */
.ej-kit { background: #fff; }
.ej-kit__head { max-width: 620px; margin-block-end: clamp(28px, 4vw, 44px); }
.ej-kit__head h2 { font-size: var(--ej-t-h2); }
.ej-kit__head p { margin-block-start: 14px; font-size: var(--ej-t-lead); max-width: 58ch; }

.ej-kit__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
@media (max-width: 1000px) { .ej-kit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ej-kit__grid { grid-template-columns: 1fr; } }

.ej-kit__card {
  display: flex; flex-direction: column;
  border: 1.5px solid var(--ej-line);
  border-radius: var(--ej-r-md);
  padding: clamp(18px, 2.2vw, 26px);
  background: #fff;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s;
}
.ej-kit__card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ej-sh-lg);
  border-color: var(--accent, var(--ej-blue));
}
.ej-kit__ico {
  inline-size: 54px; block-size: 54px; flex: none;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--accent, var(--ej-blue));
  color: #fff;
  margin-block-end: clamp(20px, 2.6vw, 34px);
}
.ej-kit__ico svg { inline-size: 25px; block-size: 25px; }
.ej-kit__card h3 { font-size: 18px; }
.ej-kit__card p { font-size: 14px; margin-block-start: 9px; line-height: 1.6; }
.ej-kit__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  margin-block-start: clamp(18px, 2.4vw, 28px);
}
.ej-kit__go {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--accent, var(--ej-blue));
}
.ej-kit__go svg { inline-size: 16px; block-size: 16px; transition: transform .22s; }
.ej-kit__card:hover .ej-kit__go svg { transform: translateX(4px); }
[dir="rtl"] .ej-kit__go svg { transform: scaleX(-1); }
[dir="rtl"] .ej-kit__card:hover .ej-kit__go svg { transform: scaleX(-1) translateX(4px); }

/* Keep the link and cost chip on one row, and give the amber card a readable
   link colour: #FFB42B is fine as a tile but fails contrast as text. */
.ej-kit__card { padding: clamp(16px, 2vw, 22px); }
.ej-kit__foot { gap: 10px; }
.ej-kit__go { font-size: 14px; }
.ej-kit__go svg { inline-size: 15px; block-size: 15px; }
.ej-kit__card--amber .ej-kit__go { color: #B26A00; }

/* ==========================================================================
   TOOLKIT, staged entrance. The four cards deal in like a hand of cards,
   each icon tile springing in after its card lands. One orchestrated moment,
   played once when the section is reached.
   ========================================================================== */
.ej-kit__grid { perspective: 1400px; }

.ej-kit__card {
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s;
}
.ej-kit__card:hover { transform: translateY(-6px); }

/* icon tile springs in and the glyph fades up inside it */
.ej-kit__ico { transition: transform .4s cubic-bezier(.2,1.5,.4,1); }
.ej-kit__card:hover .ej-kit__ico { animation: ej-kit-nudge .5s cubic-bezier(.3,1.4,.4,1); }
@keyframes ej-kit-nudge {
  40% { transform: scale(1.09) rotate(-5deg); }
  to  { transform: none; }
}

/* a soft accent glow bleeds up from behind the tile on hover */
.ej-kit__card { position: relative; overflow: hidden; isolation: isolate; }
.ej-kit__card::before {
  content: ""; position: absolute; z-index: -1;
  inset-block-start: -40%; inset-inline-start: -20%;
  inline-size: 150px; block-size: 150px; border-radius: 50%;
  background: var(--accent, var(--ej-blue));
  opacity: 0; filter: blur(38px);
  transition: opacity .38s ease;
}
.ej-kit__card:hover::before { opacity: .22; }


/* ==========================================================================
   TODAY'S CAREER TRENDS. Editorial layout.
   Four equal cards read as a content dump. One lead story carries the week,
   three stacked rows beside it act as the rest of the shelf. That also gives
   the block a reason to exist visually rather than repeating the card grid
   used higher up the page.
   ========================================================================== */
.ej-trend {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(20px, 2.6vw, 34px);
  align-items: start;
}
@media (max-width: 940px) { .ej-trend { grid-template-columns: 1fr; } }

/* ---- lead story ---- */
.ej-tlead {
  position: relative;
  display: block;
  border-radius: var(--ej-r-lg);
  overflow: hidden;
  background: var(--ej-navy);
  min-block-size: 430px;
  box-shadow: var(--ej-sh-md);
  transition: box-shadow .34s, transform .34s cubic-bezier(.2,.8,.3,1);
}
.ej-tlead:hover { transform: translateY(-4px); box-shadow: var(--ej-sh-lg); }
.ej-tlead img {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%; object-fit: cover;
  filter: saturate(1.05) brightness(.86);
  transition: transform 1s cubic-bezier(.2,.8,.3,1);
}
.ej-tlead:hover img { transform: scale(1.055); }
.ej-tlead::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(185deg, rgba(0,23,68,.12) 0%, rgba(0,23,68,.58) 38%, rgba(0,14,44,.95) 100%);
}
.ej-tlead__body {
  position: relative; z-index: 1;
  block-size: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(22px, 3vw, 34px);
  color: #fff;
}
.ej-tlead__body h3 {
  color: #fff;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.72rem);
  margin-block-start: 14px;
  text-wrap: balance;
}
.ej-tlead__body p {
  color: rgba(255,255,255,.82);
  font-size: 14.5px; line-height: 1.62;
  margin-block-start: 12px; max-width: 46ch;
}
.ej-tlead__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(255,255,255,.66);
  margin-block-start: 16px;
}
.ej-tlead__go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-block-start: 20px;
  font-size: 14.5px; font-weight: 600; color: #fff;
}
.ej-tlead__go svg { inline-size: 17px; block-size: 17px; transition: transform .24s; }
[dir="rtl"] .ej-tlead__go svg { transform: scaleX(-1); }
.ej-tlead:hover .ej-tlead__go svg { transform: translateX(5px); }
[dir="rtl"] .ej-tlead:hover .ej-tlead__go svg { transform: scaleX(-1) translateX(5px); }

/* ---- stacked rows ---- */
.ej-tlist { display: grid; gap: clamp(12px, 1.6vw, 16px); }
.ej-trow {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  background: #fff;
  border-radius: var(--ej-r-md);
  padding: 12px;
  box-shadow: var(--ej-sh);
  transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s;
}
.ej-trow:hover { transform: translateY(-3px); box-shadow: var(--ej-sh-lg); }
.ej-trow__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--ej-r-xs);
  overflow: hidden;
  background: var(--ej-line);
}
.ej-trow__media img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.8,.3,1);
}
.ej-trow:hover .ej-trow__media img { transform: scale(1.07); }
.ej-trow > span:last-child { display: block; min-inline-size: 0; }
.ej-trow__cat {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
}
.ej-trow__cat i { inline-size: 7px; block-size: 7px; border-radius: 50%; flex: none; }
.ej-trow__cat--tips    { color: var(--ej-cat-tips); }
.ej-trow__cat--tips i    { background: var(--ej-cat-tips); }
.ej-trow__cat--hiring  { color: #12855A; }
.ej-trow__cat--hiring i  { background: var(--ej-cat-hiring); }
.ej-trow__cat--growing { color: var(--ej-blue); }
.ej-trow__cat--growing i { background: var(--ej-cat-growing); }
.ej-trow h4 {
  font-size: 14.5px; line-height: 1.38;
  margin-block-start: 7px;
}
.ej-trow__date { font-size: 11.5px; color: var(--ej-muted-2); margin-block-start: 7px; }
@media (max-width: 520px) {
  .ej-trow { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .ej-tlead { min-block-size: 340px; }
}

/* ==========================================================================
   WE HELP JOB SEEKERS SUCCEED
   Sits between the template styles and the news, on navy, so the page has one
   dark beat in the middle instead of running white all the way to the footer.
   No statistics. Nothing here claims a number we cannot back.
   ========================================================================== */
.ej-help {
  position: relative; overflow: hidden;
  background:
    radial-gradient(720px 420px at 12% 0%, rgba(60,149,253,.28), transparent 60%),
    linear-gradient(155deg, #001744 0%, #00246A 55%, #002E92 100%);
  color: #fff;
}
.ej-help::before {
  content: ""; position: absolute; inset-block-start: -30%; inset-inline-end: -8%;
  inline-size: 420px; block-size: 420px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 0 0 56px rgba(255,255,255,.03), 0 0 0 128px rgba(255,255,255,.022);
}
.ej-help__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 74px);
  align-items: center;
}
@media (max-width: 940px) { .ej-help__in { grid-template-columns: 1fr; } }

.ej-help h2 { color: #fff; font-size: var(--ej-t-h2); }
.ej-help__lead {
  margin-block-start: 16px;
  font-size: var(--ej-t-lead); line-height: 1.68;
  color: rgba(255,255,255,.78); max-width: 44ch;
}
.ej-help__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-block-start: 28px; }

.ej-help__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 18px); }
@media (max-width: 560px) { .ej-help__grid { grid-template-columns: 1fr; } }

.ej-hcard {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--ej-r-md);
  padding: clamp(18px, 2.2vw, 24px);
  backdrop-filter: blur(6px);
  transition: background-color .3s, border-color .3s, transform .3s cubic-bezier(.2,.8,.3,1);
}
.ej-hcard:hover {
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-4px);
}
.ej-hcard__ico {
  display: grid; place-items: center;
  inline-size: 42px; block-size: 42px; border-radius: 12px;
  background: rgba(255,255,255,.13);
  color: #fff;
  margin-block-end: 15px;
}
.ej-hcard__ico svg { inline-size: 20px; block-size: 20px; }
.ej-hcard h3 { color: #fff; font-size: 16px; }
.ej-hcard p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.72); margin-block-start: 8px; }