/* Doin Job Page widget. Every rule is scoped under .dj so site-wide Elementor styles cannot override it. */
/* ---------- Tokens ---------- */
.dj {
  /* Colour: each one has a single job */
  --dj-bg: #131314;                          /* page */
  --dj-surface: rgba(255, 255, 255, 0.02);   /* cards */
  --dj-line: #1F2329;                        /* dividers */
  --dj-line-strong: #2A2F37;                 /* card borders */
  --dj-ink: #F3F4F7;                         /* headings, lead-ins */
  --dj-body: #A9AFB8;                        /* reading text */
  --dj-muted: #8F96A0;                       /* labels, meta */
  --dj-yellow: #F5F278;                      /* title, apply, good fit */
  --dj-yellow-hover: #FFF6C9;
  --dj-orange: #F2A54B;                      /* warnings only */
  --dj-on-yellow: #181818;

  /* Type scale */
  --dj-head: "DM Sans", Inter, system-ui, sans-serif;
  --dj-text: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --dj-fs-meta: 13px;
  --dj-fs-ui: 15px;
  --dj-fs-body: 18px;
  --dj-fs-h3: 22px;
  --dj-fs-h2: 26px;
  --dj-fs-h2-wide: 34px;
  --dj-fs-h1: clamp(2.25rem, 5vw, 3.375rem); /* 36–54px */

  /* Space (8px grid) */
  --dj-gutter: clamp(16px, 4vw, 48px);
  --dj-section: 40px;   /* gap above a divider */
  --dj-inner: 32px;     /* gap below a divider */
  --dj-radius: 12px;

  --dj-sticky-top: 100px; /* space for your site header when the summary sticks */
  --dj-max: 1240px;
  --dj-col: 680px;
  --dj-aside-w: 340px;
  --dj-title-a: var(--dj-yellow);
  --dj-title-b: var(--dj-yellow-hover);

  background: var(--dj-bg);
  color: var(--dj-ink);
  font-family: var(--dj-text);
  font-size: var(--dj-fs-body);
  line-height: 1.7;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
.dj *, .dj *::before, .dj *::after { box-sizing: border-box; }
.dj.dj :where(p, h1, h2, h3, ul, ol, dl, dd, summary) { margin: 0; }
.dj.dj :where(ul, ol) { padding: 0; list-style: none; }
.dj svg { display: block; flex: none; }
.dj .dj-frame a, .dj .dj-mbar a { font-family: inherit; }
.dj a:focus-visible, .dj summary:focus-visible { outline: 2px solid var(--dj-yellow); outline-offset: 3px; border-radius: 6px; }

/* ---------- Layout ---------- */
.dj .dj-frame { max-width: var(--dj-max); margin: 0 auto var(--dj-frame-gap, 96px); border: 1px solid var(--dj-line); }
.dj .dj-pad { padding-inline: var(--dj-gutter); }
.dj .dj-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--dj-aside-w); }
.dj .dj-main { min-width: 0; padding-block: 48px 64px; }
.dj .dj-col { max-width: var(--dj-col); }
.dj .dj-aside { border-left: 1px solid var(--dj-line); padding: 48px clamp(16px, 2.5vw, 32px); }
.dj .dj-sticky { position: sticky; top: var(--dj-sticky-top); }

/* ---------- Type ---------- */
.dj .dj-h1 {
  font-family: var(--dj-head); font-weight: 400; font-size: var(--dj-fs-h1); line-height: 1.04; letter-spacing: -0.035em;
  max-width: 760px; margin-top: 12px;
  background: linear-gradient(180deg, var(--dj-title-a) 0%, var(--dj-title-b) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dj .dj-h2 { font-family: var(--dj-head); font-weight: 400; font-size: var(--dj-fs-h2); line-height: 1.2; letter-spacing: -0.02em; color: var(--dj-ink); }
.dj .dj-h2--wide { font-size: var(--dj-fs-h2-wide); line-height: 1.15; letter-spacing: -0.025em; }
.dj .dj-h3 { font-family: var(--dj-head); font-weight: 400; font-size: var(--dj-fs-h3); line-height: 1.25; letter-spacing: -0.02em; color: var(--dj-ink); }
.dj .dj-text { color: var(--dj-body); }
.dj .dj-h2 + .dj-text, .dj .dj-h2 + .dj-list, .dj .dj-h2 + .dj-steps, .dj .dj-h2 + .dj-faq, .dj .dj-text + .dj-list, .dj .dj-text + .dj-steps { margin-top: 16px; }
.dj .dj-lead { color: var(--dj-ink); font-weight: 500; }
.dj .dj-meta { font-size: var(--dj-fs-meta); line-height: 1.4; color: var(--dj-muted); }
.dj .dj-small { font-size: var(--dj-fs-ui); line-height: 1.6; }

/* ---------- Title block ---------- */
.dj .dj-top { padding-block: 40px 44px; border-bottom: 1px solid var(--dj-line); }
.dj .dj-back { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; font-size: var(--dj-fs-ui); line-height: 1.4; color: var(--dj-muted); text-decoration: none; }
.dj .dj-back:hover { color: var(--dj-ink); }
.dj .dj-dept { margin-top: 24px; font-size: var(--dj-fs-ui); font-weight: 500; line-height: 1.4; color: var(--dj-muted); }
.dj .dj-pills { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--dj-fs-meta); line-height: 1.4; color: #CDD1D7; }
.dj .dj-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.dj .dj-pills .dj-meta { padding-inline: 4px; }

/* ---------- Sections ---------- */
.dj .dj-sec { margin-top: var(--dj-section); padding-top: var(--dj-inner); border-top: 1px solid var(--dj-line); }
.dj .dj-sec--plain { padding-top: 0; border-top: 0; }

/* Bullet list. Marker colour says what kind of item it is. */
/*
 * Bullets. Shape comes from a class on the widget (dj-mk-dot, -square, -dash, -check, -arrow, -number, -none).
 * Colour by list type: good (yellow), warn (orange), plain (grey).
 */
.dj .dj-list { display: flex; flex-direction: column; gap: 12px; color: var(--dj-body); counter-reset: dj-li; }
.dj .dj-list > li { display: flex; gap: var(--dj-mk-gap, 14px); counter-increment: dj-li; }
.dj .dj-list > li::before {
  content: ""; flex: none;
  width: var(--dj-mk-size, 5px); height: var(--dj-mk-size, 5px);
  margin-top: calc(0.85em - var(--dj-mk-size, 5px) / 2);
  border-radius: 50%;
  background: var(--dj-mk-plain, var(--dj-muted));
}
.dj .dj-list--good > li::before { background: var(--dj-mk-good, var(--dj-yellow)); }
.dj .dj-list--warn > li::before { background: var(--dj-mk-warn, var(--dj-orange)); }
.dj .dj-list--spaced { gap: 20px; }

.dj-mk-square .dj .dj-list > li::before { border-radius: 2px; }
.dj-mk-dash .dj .dj-list > li::before { width: calc(var(--dj-mk-size, 5px) * 2.4); height: 2px; border-radius: 1px; margin-top: calc(0.85em - 1px); }
.dj-mk-check .dj .dj-list > li::before,
.dj-mk-arrow .dj .dj-list > li::before {
  width: var(--dj-mk-icon, 16px); height: var(--dj-mk-icon, 16px); border-radius: 0;
  margin-top: calc(0.85em - var(--dj-mk-icon, 16px) / 2);
  -webkit-mask: var(--dj-mk-shape) center / contain no-repeat; mask: var(--dj-mk-shape) center / contain no-repeat;
}
.dj-mk-check .dj { --dj-mk-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.dj-mk-arrow .dj { --dj-mk-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.dj-mk-number .dj .dj-list > li::before {
  content: counter(dj-li) "."; width: auto; min-width: 1.4em; height: auto; margin-top: 0; border-radius: 0;
  background: none; color: var(--dj-mk-plain, var(--dj-muted)); font-weight: 500;
}
.dj-mk-number .dj .dj-list--good > li::before { color: var(--dj-mk-good, var(--dj-yellow)); background: none; }
.dj-mk-number .dj .dj-list--warn > li::before { color: var(--dj-mk-warn, var(--dj-orange)); background: none; }
.dj-mk-none .dj .dj-list > li::before { display: none; }

/* Numbered steps: only for things that happen in order */
.dj .dj-steps { counter-reset: dj-step; display: flex; flex-direction: column; gap: 14px; color: var(--dj-body); }
.dj .dj-steps > li { counter-increment: dj-step; display: grid; grid-template-columns: var(--dj-step-size, 28px) minmax(0, 1fr); column-gap: 12px; }
.dj .dj-steps > li::before {
  content: counter(dj-step); width: var(--dj-step-size, 28px); height: var(--dj-step-size, 28px); margin-top: 2px;
  border-radius: var(--dj-step-radius, 50%);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--dj-step-border, var(--dj-line-strong));
  background: var(--dj-step-bg, transparent);
  color: var(--dj-step-color, var(--dj-ink)); font: 500 var(--dj-fs-meta)/1 var(--dj-text);
}

/* ---------- Components ---------- */
.dj .dj-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--dj-yellow); color: var(--dj-on-yellow);
  font: 500 var(--dj-fs-ui)/1 var(--dj-text); letter-spacing: -0.01em; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
}
/* Hover: turns into the Neuroscale-style orange: an orange fill, a white shine toward the bottom,
   a faint light edge, a small lift and a soft glow. */
.dj .dj-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--dj-btn-shine, rgba(255, 255, 255, 0.4)) 100%),
    linear-gradient(var(--dj-btn-angle, 90deg), var(--dj-btn-h1, #FFAF53) 0%, var(--dj-btn-h2, #FFAF53) 100%);
  box-shadow: inset 0 0 0 1px var(--dj-btn-edge, rgba(255, 255, 255, 0.15));
  opacity: 0; transition: opacity .18s ease, filter .18s ease;
}
.dj .dj-btn:hover, .dj .dj-btn:focus-visible { color: var(--dj-btn-hover-ink, #171717); box-shadow: 0 6px 20px var(--dj-btn-glow, rgba(255, 175, 83, 0.28)); }
.dj .dj-btn:hover::before, .dj .dj-btn:focus-visible::before { opacity: 1; }
@media (hover: hover) {
  .dj .dj-btn:hover { transform: translateY(-1px); }
}
/* Pressed */
.dj .dj-btn:active { transform: translateY(0); box-shadow: 0 2px 8px var(--dj-btn-glow, rgba(255, 175, 83, 0.28)); }
.dj .dj-btn:active::before { opacity: 1; filter: brightness(0.94); }
.dj .dj-btn--block { display: flex; width: 100%; }
.dj .dj-link { display: inline-flex; padding: 6px 4px; font-size: var(--dj-fs-meta); line-height: 1.4; color: var(--dj-muted); text-decoration: underline; text-underline-offset: 3px; }
.dj .dj-link:hover { color: var(--dj-ink); }

.dj .dj-box { border: 1px solid var(--dj-line-strong); background: var(--dj-surface); border-radius: var(--dj-radius); }

.dj .dj-warn { padding: 20px 22px; border: 1px solid rgba(242,165,75,0.35); background: rgba(242,165,75,0.06); border-radius: var(--dj-radius); }
.dj .dj-warn .dj-h3 { font-family: var(--dj-text); font-size: var(--dj-fs-ui); font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--dj-orange); }
.dj .dj-warn .dj-list { margin-top: 12px; color: #E1E4E8; font-size: var(--dj-fs-ui); line-height: 1.6; gap: 8px; }

.dj .dj-cta { margin-top: 48px; padding: 28px; }
.dj .dj-cta .dj-text { margin-top: 12px; }
.dj .dj-cta .dj-btn { margin-top: 20px; }

/* FAQ */
.dj .dj-faq { border-top: 1px solid var(--dj-line); }
.dj .dj-faq details { border-bottom: 1px solid var(--dj-line); }
.dj .dj-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; color: var(--dj-ink); font-weight: 500; }
.dj .dj-faq summary::-webkit-details-marker { display: none; }
.dj .dj-faq summary::after { content: "+"; flex: none; width: 24px; text-align: center; color: var(--dj-muted); font-size: 22px; line-height: 1; transition: transform .15s ease; }
.dj .dj-faq details[open] summary::after { transform: rotate(45deg); }
.dj .dj-faq details p { padding: 0 40px 18px 0; color: var(--dj-body); }

/* Summary card */
.dj .dj-card dl { padding: 8px 20px; font-size: var(--dj-fs-ui); line-height: 1.45; }
.dj .dj-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--dj-line); }
.dj .dj-row:last-child { border-bottom: 0; }
.dj .dj-row svg { margin-top: 2px; color: var(--dj-muted); }
.dj .dj-row dt { font-size: var(--dj-fs-meta); color: var(--dj-muted); }
.dj .dj-row dd { margin-top: 2px; color: var(--dj-ink); }
.dj .dj-card__foot { padding: 16px; border-bottom: 1px solid var(--dj-line); display: flex; flex-direction: column; align-items: center; gap: 8px; }

.dj .dj-end { display: none; } /* space below the page is now outside the frame (--dj-frame-gap) */

/* Phone apply bar */
.dj .dj-mbar { display: none; }

@media (max-width: 960px) {
  .dj .dj-body { grid-template-columns: minmax(0, 1fr); }
  .dj .dj-main { padding-bottom: 40px; }
  .dj .dj-aside { border-left: 0; border-top: 1px solid var(--dj-line); padding: 32px var(--dj-gutter) 40px; }
  .dj .dj-sticky { position: static; }
  .dj .dj-mbar {
    display: block; position: fixed; inset: auto 0 0 0; z-index: 50;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(19,19,20,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid var(--dj-line);
  }
  .dj .dj-frame { margin-bottom: var(--dj-frame-gap-m, 120px); } /* room for the Apply bar */
}
@media (max-width: 600px) {
  .dj { --dj-fs-body: 17px; --dj-fs-h2-wide: 28px; }
  .dj .dj-frame { border-inline: 0; } /* top and bottom lines stay */
  .dj .dj-faq details p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .dj *, .dj *::before, .dj *::after { transition: none !important; } .dj .dj-btn:hover { transform: none; } }

/* ---------- Widget extras ---------- */
.dj .dj-body--full { grid-template-columns: minmax(0, 1fr); }
.dj .dj-body--full .dj-col { max-width: var(--dj-col); }
.dj .dj-closed { padding: 20px 22px; border: 1px solid var(--dj-line-strong); background: var(--dj-surface); border-radius: var(--dj-radius); }
.dj .dj-closed .dj-text { margin-top: 6px; }
.dj .dj-btn--off { background: transparent; color: var(--dj-muted); border: 1px solid var(--dj-line-strong); pointer-events: none; }
.dj .dj-notice { padding: 24px; border: 1px dashed var(--dj-line-strong); border-radius: var(--dj-radius); color: var(--dj-body); font-size: var(--dj-fs-ui); }
.dj.dj--editor .dj-mbar { display: none !important; }
.dj.dj--editor .dj-sticky { position: static; }
.elementor-widget-doin_job_page:not(.dj-frame-yes) .dj .dj-frame { border-color: transparent; }

/* ---------- Sticky summary on short desktop screens ----------
   The card always sticks from the top so the Apply button stays visible.
   If the card is taller than the screen, the detail rows scroll inside it. */
@media (min-width: 961px) {
  .dj:not(.dj--editor) .dj-sticky .dj-card {
    display: flex; flex-direction: column;
    max-height: calc(100vh - var(--dj-sticky-top) - 16px);
    max-height: calc(100dvh - var(--dj-sticky-top) - 16px);
  }
  .dj:not(.dj--editor) .dj-sticky .dj-card__foot { flex: none; }
  .dj:not(.dj--editor) .dj-sticky .dj-card dl {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--dj-line-strong) transparent;
  }
  /* Fade at the bottom while there are more rows to scroll to */
  .dj .dj-sticky .dj-card dl.dj-more-below {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
  }
}
/* Shorter laptop screens: tighter rows so the card fits more often */
@media (min-width: 961px) and (max-height: 780px) {
  .dj .dj-sticky .dj-row { padding: 8px 0; }
  .dj .dj-sticky .dj-card__foot { padding: 12px 16px; }
}

/* ---------- One Apply button per screen size ----------
   Phones and tablets: only the Apply bar at the bottom (unless turned back on in the widget).
   Desktop: the summary card's button, plus the closing box unless it is turned off. */
@media (max-width: 960px) {
  .dj.dj--m-no-cardbtn:not(.dj--editor) .dj-card__foot .dj-btn { display: none; }
  .dj.dj--m-no-cardbtn:not(.dj--editor) .dj-card__foot { padding-block: 10px; }
  .dj.dj--m-no-cta:not(.dj--editor) .dj-cta { display: none; }
}
@media (min-width: 961px) {
  .dj.dj--d-no-cta .dj-cta { display: none; }
}