/* ============================================================
   AMBIZENT HR CONSULTANTS — Design System
   Brand colours sampled directly from the Ambizent logo:
   Navy #00439A · Amber #E17E00 · Clay #D56D2C
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --navy:#00439A;
  --navy-600:#0A3D8A;
  --navy-deep:#002F6C;
  --navy-ink:#001B3F;
  --amber:#E17E00;
  --amber-soft:#FFB84D;
  --clay:#D56D2C;

  --steel:#EEF3FA;
  --steel-2:#E2EAF6;
  --line:#D3DEEE;
  --line-soft:#E8EEF7;

  --ink:#0C1524;
  --body:#3D4859;
  --muted:#68758A;
  --white:#fff;

  --ok:#0E7C66;
  --ok-bg:#E4F4F0;
  --warn-bg:#FFF3E0;

  --wrap:1240px;
  --r-sm:6px;
  --r:12px;
  --r-lg:20px;

  --sh-1:0 1px 2px rgba(0,27,63,.06), 0 4px 14px rgba(0,27,63,.06);
  --sh-2:0 12px 34px rgba(0,27,63,.12);
  --sh-3:0 24px 60px rgba(0,27,63,.18);

  --f-display:'Archivo',-apple-system,'Segoe UI',sans-serif;
  --f-body:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  --f-data:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --ease:cubic-bezier(.22,.75,.3,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;font-family:var(--f-body);color:var(--body);background:var(--white);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--navy);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5{font-family:var(--f-display);color:var(--ink);margin:0 0 .5em;letter-spacing:-.02em;line-height:1.08;font-weight:700}
p{margin:0 0 1.1em}
ul{margin:0 0 1.1em;padding-left:1.15em}
li{margin-bottom:.45em}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}

/* ---------- 3. Type scale ---------- */
.h-xxl{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:800;letter-spacing:-.035em}
.h-xl{font-size:clamp(2.1rem,4.4vw,3.35rem);font-weight:800;letter-spacing:-.03em}
.h-lg{font-size:clamp(1.65rem,3vw,2.35rem);font-weight:700}
.h-md{font-size:clamp(1.25rem,2vw,1.55rem);font-weight:700}
.lede{font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.6;color:var(--body)}

/* Eyebrow — echoes the letterspaced small-caps of the logo tagline */
.eyebrow{
  font-family:var(--f-data);font-size:.72rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--clay);
  display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;
}
.eyebrow::before{
  content:"";width:16px;height:10px;flex:none;background:var(--amber);
  clip-path:polygon(50% 0,100% 100%,72% 100%,50% 42%,28% 100%,0 100%);
}
.eyebrow.on-dark{color:var(--amber-soft)}
.eyebrow.centered{justify-content:center}

.mono{font-family:var(--f-data);font-size:.82rem;letter-spacing:.04em}

/* ---------- 4. Layout ---------- */
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem,840px);margin-inline:auto}
section{padding:clamp(4rem,8vw,7rem) 0}
.pad-sm{padding:clamp(2.75rem,5vw,4rem) 0}
.bg-steel{background:var(--steel)}
.bg-navy{background:var(--navy-deep);color:#CBDAF0}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff}
.bg-ink{background:var(--navy-ink);color:#B9CBE6}
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4{color:#fff}

.grid{display:grid;gap:1.5rem}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.section-head{max-width:720px;margin-bottom:3rem}
.section-head.centered{margin-inline:auto;text-align:center}
.section-head.centered .eyebrow{justify-content:center}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--f-display);font-weight:600;font-size:.97rem;letter-spacing:-.005em;
  padding:.9rem 1.6rem;border-radius:var(--r-sm);border:2px solid transparent;
  cursor:pointer;transition:all .22s var(--ease);text-align:center;
}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover{background:var(--navy-deep);border-color:var(--navy-deep);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-amber{background:var(--amber);color:#26170A;border-color:var(--amber)}
.btn-amber:hover{background:#F79212;border-color:#F79212;transform:translateY(-2px);box-shadow:0 12px 28px rgba(225,126,0,.34)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy);background:var(--steel)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-sm{padding:.6rem 1.1rem;font-size:.88rem}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.9rem}

/* ---------- 6. Header ---------- */
.topbar{
  background:var(--navy-ink);color:#9FB6D8;font-family:var(--f-data);
  font-size:.74rem;letter-spacing:.05em;padding:.5rem 0;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.topbar a{color:#CFE0F5}
.topbar a:hover{color:var(--amber-soft)}
.topbar-badge{display:inline-flex;align-items:center;gap:.4rem}
.topbar-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(225,126,0,.25)}

.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);transition:box-shadow .25s}
.site-header.scrolled{box-shadow:var(--sh-1)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.85rem 0}
.brand img{height:44px;width:auto}
.nav-links{display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0}
.nav-links li{margin:0}
.nav-links a{
  display:block;padding:.55rem .8rem;border-radius:var(--r-sm);
  font-weight:500;font-size:.95rem;color:var(--ink);transition:.18s;
}
.nav-links a:hover{background:var(--steel);color:var(--navy)}
.nav-links a.active{color:var(--navy);box-shadow:inset 0 -2px 0 var(--amber)}
.nav-cta{display:flex;align-items:center;gap:.6rem}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:.55rem .7rem;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--navy);margin:4px 0;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;overflow:hidden;color:#D5E3F7;
  background:
    radial-gradient(1100px 620px at 88% -10%,rgba(225,126,0,.26),transparent 62%),
    radial-gradient(900px 700px at 8% 110%,rgba(0,67,154,.85),transparent 60%),
    linear-gradient(160deg,#001B3F 0%,#002F6C 55%,#00439A 130%);
  padding:clamp(3.5rem,7vw,6rem) 0 clamp(3.5rem,7vw,5.5rem);
}
.hero::before{ /* photographic ground — assets/img/hero-uae.jpg */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.62;
  background:
    linear-gradient(100deg,rgba(0,27,63,.94) 0%,rgba(0,27,63,.80) 26%,rgba(0,27,63,.28) 58%,rgba(0,27,63,.10) 100%),
    url("../img/hero-uae.jpg") center/cover no-repeat;
}
/* The chevron texture field that used to sit here has been removed.
   It existed to give the hero depth when the background was a flat gradient.
   With hero-uae.jpg behind it, two textures competed and the grid read as a
   watermark over the photograph. The chevron motif still carries the brand
   elsewhere: eyebrow marks, list bullets, sector tiles, the Ascent Track
   milestones, and the portal login panel (which has no photograph). */
.hero .wrap{position:relative;z-index:2}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--amber-soft);position:relative}
.hero .lede{color:#BDD1EC;max-width:36em}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4rem);align-items:center}

/* Live requisition board — hero signature */
.reqboard{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg);padding:1.35rem;backdrop-filter:blur(8px);box-shadow:var(--sh-3);
}
.reqboard-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:.9rem;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:.35rem}
.reqboard-head h3{font-size:.95rem;margin:0;color:#fff;letter-spacing:0}
.pulse{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--f-data);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-soft)}
.pulse i{width:7px;height:7px;border-radius:50%;background:var(--amber);animation:pulse 1.9s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(225,126,0,.65)}50%{box-shadow:0 0 0 7px rgba(225,126,0,0)}}
.req{
  display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;align-items:center;
  padding:.85rem .55rem;border-bottom:1px solid rgba(255,255,255,.09);border-radius:var(--r-sm);
  transition:background .2s;
}
.req:hover{background:rgba(255,255,255,.06)}
.req:last-of-type{border-bottom:0}
.req-title{grid-column:1;grid-row:1;color:#fff;font-weight:600;font-size:.96rem;line-height:1.3}
.req-meta{
  grid-column:1;grid-row:2;font-family:var(--f-data);font-size:.72rem;
  color:#9FBAE0;letter-spacing:.03em;
}
.req-days{
  grid-column:2;grid-row:1/span 2;justify-self:end;align-self:center;
  font-family:var(--f-data);font-size:.7rem;color:var(--amber-soft);
  border:1px solid rgba(225,126,0,.45);border-radius:100px;
  padding:.25rem .6rem;white-space:nowrap;
}
.reqboard-foot{padding-top:.9rem;margin-top:.4rem;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.reqboard-foot span{font-family:var(--f-data);font-size:.72rem;color:#9FBAE0}

/* Hero stat strip */
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.16);border-radius:var(--r);overflow:hidden;margin-top:clamp(2.5rem,5vw,3.5rem)}
.statstrip div{background:rgba(0,27,63,.5);padding:1.4rem 1.2rem}
.statstrip b{display:block;font-family:var(--f-display);font-size:clamp(1.65rem,3vw,2.2rem);font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1}
.statstrip small{display:block;margin-top:.4rem;font-family:var(--f-data);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:#8FAAD4}

/* ---------- 8. Cards ---------- */
.card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:1.75rem;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line)}
.card h3{font-size:1.16rem;margin-bottom:.5rem}
.card p:last-child{margin-bottom:0}
.card-icon{
  width:46px;height:46px;border-radius:10px;display:grid;place-items:center;
  background:var(--steel);color:var(--navy);margin-bottom:1.1rem;
}
.card-icon svg{width:22px;height:22px}
.card-amber .card-icon{background:var(--warn-bg);color:var(--clay)}

.card-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.92rem;margin-top:.9rem;color:var(--navy)}
.card-link::after{content:"→";transition:transform .2s}
.card:hover .card-link::after{transform:translateX(4px)}

/* Sector tiles */
.sector{
  display:flex;align-items:center;gap:.9rem;padding:1.05rem 1.15rem;background:#fff;
  border:1px solid var(--line-soft);border-radius:var(--r-sm);transition:.22s;
  font-weight:600;color:var(--ink);font-size:.95rem;
}
.sector:hover{border-color:var(--navy);box-shadow:var(--sh-1);transform:translateY(-2px)}
.sector i{
  width:10px;height:14px;flex:none;background:var(--amber);
  clip-path:polygon(50% 0,100% 100%,70% 100%,50% 46%,30% 100%,0 100%);
}
.sector small{display:block;font-weight:400;font-size:.78rem;color:var(--muted);font-family:var(--f-data);letter-spacing:.02em}

/* ---------- 9. THE ASCENT TRACK — signature element ---------- */
.ascent{position:relative;margin-top:3.5rem}
.ascent-rail{position:absolute;top:26px;left:6%;right:6%;height:2px;background:var(--line);overflow:hidden}
.ascent-rail::after{content:"";position:absolute;inset:0;width:var(--fill,0%);background:linear-gradient(90deg,var(--navy),var(--amber));transition:width 1.5s var(--ease)}
.ascent-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;position:relative}
.ascent-step{text-align:center;padding-top:0}
.ascent-mark{
  width:54px;height:54px;margin:0 auto 1.05rem;border-radius:50%;background:#fff;
  border:2px solid var(--line);display:grid;place-items:center;position:relative;
  transition:.4s var(--ease);
}
.ascent-mark i{
  width:18px;height:22px;background:var(--line);transition:.4s var(--ease);
  clip-path:polygon(50% 0,100% 100%,70% 100%,50% 46%,30% 100%,0 100%);
}
.ascent-step.lit .ascent-mark{border-color:var(--navy);box-shadow:0 0 0 6px rgba(0,67,154,.09)}
.ascent-step.lit .ascent-mark i{background:var(--amber)}
.ascent-day{font-family:var(--f-data);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);display:block;margin-bottom:.35rem}
.ascent-step h4{font-size:1.02rem;margin-bottom:.4rem}
.ascent-step p{font-size:.89rem;color:var(--muted);margin:0}

/* ---------- 10. Fee table ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table{width:100%;border-collapse:collapse;min-width:620px}
th,td{padding:1rem 1.15rem;text-align:left;border-bottom:1px solid var(--line-soft);font-size:.94rem;vertical-align:top}
thead th{
  background:var(--navy-ink);color:#fff;font-family:var(--f-data);font-size:.71rem;
  letter-spacing:.13em;text-transform:uppercase;font-weight:500;border:0;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--steel)}
td strong{color:var(--ink)}
.fee{font-family:var(--f-data);font-weight:600;color:var(--navy);white-space:nowrap}

/* ---------- 11. Notice / callout ---------- */
.notice{
  display:flex;gap:1rem;padding:1.35rem 1.5rem;border-radius:var(--r);
  background:var(--ok-bg);border-left:4px solid var(--ok);color:#0B4C40;
}
.notice.amber{background:var(--warn-bg);border-left-color:var(--amber);color:#6B3E05}
.notice.navy{background:var(--steel);border-left-color:var(--navy);color:#0D2A52}
.notice strong{display:block;font-family:var(--f-display);margin-bottom:.2rem}
.notice p:last-child{margin-bottom:0}
.notice-mark{flex:none;font-size:1.3rem;line-height:1.3}

/* ---------- 12. Quote / testimonial ---------- */
.quote{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);padding:1.9rem;position:relative}
.quote::before{content:"";position:absolute;top:1.9rem;left:1.9rem;width:22px;height:26px;background:var(--steel-2);clip-path:polygon(50% 0,100% 100%,70% 100%,50% 46%,30% 100%,0 100%)}
.quote blockquote{margin:0 0 1.2rem;padding-left:2.4rem;font-size:1.02rem;color:var(--ink);line-height:1.6}
.quote figcaption{padding-left:2.4rem;font-family:var(--f-data);font-size:.78rem;color:var(--muted);letter-spacing:.03em}
.quote figcaption b{display:block;font-family:var(--f-body);font-size:.95rem;color:var(--ink);letter-spacing:0;margin-bottom:.1rem}

/* ---------- 13. Media ---------- */
.media{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(150deg,var(--navy-deep),var(--navy));
  min-height:280px;box-shadow:var(--sh-2);
}
.media img{width:100%;height:100%;object-fit:cover;min-height:280px}
.media-tag{
  position:absolute;left:1rem;bottom:1rem;background:rgba(0,27,63,.85);color:#fff;
  font-family:var(--f-data);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.45rem .8rem;border-radius:100px;backdrop-filter:blur(6px);
}
.media-tall img{min-height:420px}

/* ---------- 14. Job board ---------- */
.jobfilters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:.7rem;background:#fff;padding:1rem;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.field{display:flex;flex-direction:column;gap:.3rem}
.field label{font-family:var(--f-data);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;padding:.72rem .85rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;font-size:.94rem;transition:.18s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(0,67,154,.12)}
.field textarea{min-height:110px;resize:vertical;font-family:var(--f-body)}

.job{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);padding:1.5rem;
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:start;transition:.24s var(--ease);
}
.job:hover{border-color:var(--navy);box-shadow:var(--sh-2);transform:translateY(-3px)}
.job h3{font-size:1.1rem;margin-bottom:.35rem}
.job-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.85rem}
.tag{
  font-family:var(--f-data);font-size:.71rem;letter-spacing:.05em;padding:.3rem .65rem;
  border-radius:100px;background:var(--steel);color:var(--navy-deep);border:1px solid var(--line-soft);
}
.tag-amber{background:var(--warn-bg);color:#8A4E04;border-color:#F6DEB8}
.tag-live{background:var(--ok-bg);color:var(--ok);border-color:#BFE6DC}
.job-side{text-align:right;display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
.salary{font-family:var(--f-data);font-weight:600;color:var(--ink);font-size:.92rem;white-space:nowrap}

/* ---------- 15. Accordion (FAQ) ---------- */
.acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.acc details{border-bottom:1px solid var(--line-soft)}
.acc details:last-child{border-bottom:0}
.acc summary{
  cursor:pointer;padding:1.15rem 1.4rem;font-family:var(--f-display);font-weight:600;
  color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;
  transition:background .18s;font-size:1rem;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--steel)}
.acc summary::after{content:"+";font-family:var(--f-data);font-size:1.35rem;color:var(--amber);flex:none;transition:transform .25s}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc .acc-body{padding:0 1.4rem 1.35rem;color:var(--body);font-size:.96rem}
.acc .acc-body p:last-child{margin-bottom:0}

/* ---------- 16. CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(120deg,var(--navy-ink),var(--navy) 130%);
  border-radius:var(--r-lg);padding:clamp(2.5rem,5vw,3.75rem);
}
.cta-band::after{
  content:"";position:absolute;right:-60px;top:-60px;width:340px;height:340px;
  background:radial-gradient(circle,rgba(225,126,0,.4),transparent 68%);
}
.cta-band>*{position:relative;z-index:2}
.cta-band h2{color:#fff;max-width:16em}
.cta-band p{color:#BDD1EC;max-width:44em}

/* ---------- 17. Footer ---------- */
.site-footer{background:var(--navy-ink);color:#93AACD;padding:4rem 0 0;font-size:.93rem}
.site-footer h4{color:#fff;font-size:.76rem;font-family:var(--f-data);letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin-bottom:1.1rem}
.site-footer a{color:#B9CBE6;display:block;padding:.28rem 0}
.site-footer a:hover{color:var(--amber-soft)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:2.5rem}
.footer-logo{background:#fff;border-radius:8px;padding:.7rem .9rem;display:inline-block;margin-bottom:1.1rem}
.footer-logo img{height:38px}
.footer-bottom{
  margin-top:3rem;border-top:1px solid rgba(255,255,255,.12);padding:1.4rem 0;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--f-data);font-size:.75rem;letter-spacing:.03em;color:#7C93B8;
}
.footer-bottom a{display:inline}

/* ---------- 18. Portal ---------- */
.portal-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh;background:var(--steel)}
.portal-side{background:var(--navy-ink);color:#B9CBE6;padding:1.5rem 1.1rem;position:sticky;top:0;height:100vh;overflow-y:auto}
.portal-side .footer-logo{margin-bottom:1.6rem}
.portal-nav{list-style:none;padding:0;margin:0 0 1.75rem}
.portal-nav li{margin:0}
.portal-nav a{
  display:flex;align-items:center;gap:.7rem;padding:.65rem .8rem;border-radius:var(--r-sm);
  color:#B9CBE6;font-size:.93rem;font-weight:500;transition:.18s;
}
.portal-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.portal-nav a.active{background:var(--navy);color:#fff}
.portal-nav a i{width:8px;height:11px;flex:none;background:currentColor;opacity:.7;clip-path:polygon(50% 0,100% 100%,70% 100%,50% 46%,30% 100%,0 100%)}
.portal-side h5{color:#6E86AB;font-family:var(--f-data);font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;margin:0 0 .7rem .8rem;font-weight:500}
.portal-main{padding:2rem clamp(1.25rem,3vw,2.5rem) 3.5rem;overflow-x:hidden}
.portal-topline{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem}
.portal-topline h1{font-size:1.8rem;margin-bottom:.25rem}
.portal-topline p{margin:0;color:var(--muted);font-size:.95rem}

.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;margin-bottom:1.5rem}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.panel-head h2,.panel-head h3{margin:0;font-size:1.08rem}

.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem}
.kpi-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.25rem}
.kpi-card b{display:block;font-family:var(--f-display);font-size:2rem;font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1}
.kpi-card small{display:block;margin-top:.4rem;font-family:var(--f-data);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

.meter{height:9px;border-radius:100px;background:var(--steel-2);overflow:hidden;margin:.7rem 0 .5rem}
.meter i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--navy),var(--amber));transition:width .8s var(--ease)}

.pipeline{display:grid;grid-template-columns:repeat(5,minmax(190px,1fr));gap:.9rem;overflow-x:auto;padding-bottom:.5rem}
.pipe-col{background:var(--steel);border:1px solid var(--line);border-radius:var(--r);padding:.85rem}
.pipe-col h4{font-size:.76rem;font-family:var(--f-data);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.85rem;display:flex;justify-content:space-between;font-weight:500}
.pipe-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:.8rem;margin-bottom:.6rem;box-shadow:var(--sh-1);cursor:grab}
.pipe-card b{display:block;font-size:.9rem;color:var(--ink);font-family:var(--f-body);font-weight:600}
.pipe-card span{font-family:var(--f-data);font-size:.7rem;color:var(--muted)}

.datarow{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--line-soft);align-items:center}
.datarow:last-child{border-bottom:0}
.datarow b{display:block;font-size:.96rem;color:var(--ink)}
.datarow span{font-family:var(--f-data);font-size:.75rem;color:var(--muted)}

.tabs{display:flex;gap:.4rem;border-bottom:1px solid var(--line);margin-bottom:1.5rem;overflow-x:auto}
.tab{
  padding:.75rem 1.1rem;background:none;border:0;border-bottom:2px solid transparent;
  cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:.94rem;color:var(--muted);white-space:nowrap;
}
.tab:hover{color:var(--navy)}
.tab.active{color:var(--navy);border-bottom-color:var(--amber)}

.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.form-grid .full{grid-column:1/-1}

.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .75rem;border-radius:100px;background:var(--steel);border:1px solid var(--line);font-size:.83rem;margin:0 .4rem .4rem 0}
.chip button{background:none;border:0;cursor:pointer;color:var(--muted);font-size:1rem;line-height:1;padding:0}
.chip button:hover{color:var(--clay)}

.lock-note{
  background:var(--navy-ink);color:#A9C0E0;border-radius:var(--r);padding:1.1rem 1.3rem;
  font-size:.87rem;display:flex;gap:.85rem;align-items:flex-start;margin-top:1.5rem;
}
.lock-note b{color:#fff;display:block;margin-bottom:.15rem;font-family:var(--f-display)}

/* Login */
.login-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login-visual{
  background:
    radial-gradient(800px 500px at 80% 0%,rgba(225,126,0,.28),transparent 60%),
    linear-gradient(160deg,#001B3F,#00439A);
  color:#fff;padding:clamp(2rem,5vw,4rem);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
}
.login-visual::after{
  content:"";position:absolute;inset:0;opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpath d='M30 8 46 40h-9L30 25 23 40h-9z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size:60px 52px;
}
.login-visual>*{position:relative;z-index:2}
.login-form{padding:clamp(2rem,5vw,4rem);display:flex;flex-direction:column;justify-content:center;max-width:520px;margin-inline:auto;width:100%}

/* ---------- 19. Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- 20. Utilities ---------- */
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.divider{height:1px;background:var(--line);border:0;margin:3rem 0}
.pill-list{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0}
.pill-list li{margin:0}
.check{list-style:none;padding:0}
.check li{position:relative;padding-left:1.75rem;margin-bottom:.65rem}
.check li::before{
  content:"";position:absolute;left:0;top:.42em;width:11px;height:14px;background:var(--amber);
  clip-path:polygon(50% 0,100% 100%,70% 100%,50% 46%,30% 100%,0 100%);
}
.bg-navy .check li::before,.bg-ink .check li::before{background:var(--amber-soft)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;background:var(--navy);color:#fff;padding:.75rem 1.2rem;z-index:999}
.skip:focus{left:1rem;top:1rem}

/* ---------- 21. Responsive ---------- */
@media (max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .jobfilters{grid-template-columns:1fr 1fr}
  .jobfilters .btn{grid-column:1/-1}
  .kpi{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .nav-links{
    position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:.6rem 1.25rem 1.2rem;border-bottom:1px solid var(--line);
    box-shadow:var(--sh-2);display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:.8rem .5rem;border-bottom:1px solid var(--line-soft)}
  .burger{display:block}
  .nav-cta .btn:not(.burger){display:none}
  .site-header{position:relative}
  .hero-grid,.split{grid-template-columns:1fr}
  .statstrip{grid-template-columns:repeat(2,1fr)}
  .ascent-steps{grid-template-columns:1fr;gap:1.6rem;text-align:left}
  .ascent-rail{display:none}
  .ascent-step{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;text-align:left;align-items:start}
  .ascent-mark{margin:0}
  .portal-shell{grid-template-columns:1fr}
  .portal-side{position:relative;height:auto}
  .login-page{grid-template-columns:1fr}
  .login-visual{min-height:auto}
}
@media (max-width:720px){
  body{font-size:16px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .job{grid-template-columns:1fr}
  .job-side{text-align:left;align-items:flex-start}
  .kpi{grid-template-columns:1fr 1fr}
  .topbar .wrap{justify-content:center;font-size:.68rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}

@media print{
  .site-header,.topbar,.site-footer,.btn{display:none}
}