/* ============================================================================
     Eastall Software Systems Stylesheets — Careers
     Version: 1.0.0 2026
     Loads on top of the base stylesheet (v1.2026-1-0-0.css); uses its tokens.
============================================================================ */

:root                     { --dot:rgba(255,255,255,.05); --grad-sep:#ffffff; }
:root[data-theme="light"] { --dot:rgba(0,0,0,.05);       --grad-sep:#0e1116; }

.ess-main{ flex:1 1 auto; }
.grad-text{
  background:linear-gradient(95deg,
    var(--grad-sep) 0%, var(--ess-blue) 16.67%, var(--grad-sep) 33.33%,
    var(--ess-red) 50%, var(--grad-sep) 66.67%, var(--ess-yellow) 83.33%, var(--grad-sep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}

.cr-hero{ background:radial-gradient(var(--dot) 1px, transparent 1.7px) 0 0 / 24px 24px, var(--bg); border-bottom:1px solid var(--line); }
.cr-hero-inner{ max-width:760px; margin:0 auto; padding:clamp(56px,8vw,104px) 28px; text-align:center; }
.cr-eyebrow{ display:inline-block; font-weight:800; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ess-blue); margin:0 0 16px; }
.cr-title{ margin:0 0 18px; font-weight:900; letter-spacing:-.02em; font-size:clamp(2.1rem,4.8vw,3.4rem); color:var(--text-hi); }
.cr-lead{ margin:0 auto 28px; max-width:52ch; color:var(--grey-m); font-size:1.06rem; line-height:1.65; }
.cr-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.cr-body{ max-width:760px; margin:0 auto; padding:clamp(44px,7vw,80px) 28px; }
.cr-panel{ background:var(--menu); border:1px solid var(--panel-brd); border-radius:20px; padding:clamp(24px,4vw,40px); box-shadow:0 1px 2px rgba(0,0,0,.14); text-align:center; }
.cr-panel h2{ margin:0 0 12px; font-size:1.4rem; font-weight:800; color:var(--text-hi); }
.cr-panel p{ margin:0 auto 8px; max-width:52ch; color:var(--grey-m); font-size:1rem; line-height:1.65; }
.cr-panel p a{ color:var(--ess-blue); font-weight:600; }
.cr-panel p a:hover{ text-decoration:underline; }
.cr-panel .material-symbols-rounded{ font-size:44px; color:var(--ess-blue); margin-bottom:8px; }