/* ===== Fonts (paths relative to assets/css/) ===== */
@font-face{
  font-family:"Circular";
  src:url("../fonts/circular/CircularStd-Book.woff2") format("woff2"),
      url("../fonts/circular/CircularStd-Book.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Circular";
  src:url("../fonts/circular/CircularStd-Medium.woff2") format("woff2"),
      url("../fonts/circular/CircularStd-Medium.woff") format("woff");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Circular";
  src:url("../fonts/circular/CircularStd-Bold.woff2") format("woff2"),
      url("../fonts/circular/CircularStd-Bold.woff") format("woff");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ===== Theme tokens ===== */
:root{
  --zr-green-950:#062c23;
  --zr-green-900:#0b3d31;
  --zr-green-800:#0f4f3f;
  --zr-bg:#f7f7f6;
  --zr-card:rgba(255,255,255,.72);
  --zr-border:rgba(0,0,0,.08);
  --zr-border-strong:rgba(6,44,35,.22);
  --zr-shadow:0 6px 24px rgba(0,0,0,.06);
  --zr-radius-lg:24px;
  --zr-radius-xl:28px;

  /* spacing */
  --zr-gap-main:24px;
  --zr-gap-sections:16px;
}

.zr-candidature{
  font-family:"Circular",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:linear-gradient(to bottom,#fafafa,var(--zr-bg));
  color:#0b0e0c;
}

.zr-wrap{max-width:1120px;margin:0 auto;padding:32px 24px 80px;}

.zr-breadcrumb{display:flex;gap:12px;align-items:center;font-size:14px;color:#6b7280;}
.zr-link-back{display:inline-flex;gap:8px;align-items:center;color:#415058;text-decoration:none}
.zr-link-back:hover{color:#111827}
.zr-dot{opacity:.6}

/* ===== Hero ===== */
.zr-hero{
  position:relative;margin-top:28px;background:var(--zr-card);
  backdrop-filter:saturate(180%) blur(8px);border:1px solid var(--zr-border);
  border-radius:var(--zr-radius-xl);padding:28px 28px 32px;box-shadow:var(--zr-shadow);overflow:hidden;
}
.zr-hero-bg{
  position:absolute;inset:0;
  background:radial-gradient(1200px 400px at 20% -10%, rgba(16,185,129,.15), transparent 60%),
             radial-gradient(900px 300px at 100% 100%, rgba(16,185,129,.12), transparent 60%);
  pointer-events:none;
}
.zr-hero-grid{position:relative;z-index:1;display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap}
.zr-hero-main{min-width:280px;flex:1}
.zr-title{
  font-size:clamp(32px,5vw,56px);line-height:1.05;font-weight:800;color:var(--zr-green-950);
  text-shadow:0 6px 16px rgba(0,0,0,.08);letter-spacing:-.02em;margin:0 0 12px;
}
.zr-meta{display:flex;flex-wrap:wrap;gap:16px;color:#374151;font-size:14px}
.zr-meta-item{display:inline-flex;gap:8px;align-items:center}
.zr-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.zr-pill{
  display:inline-flex;align-items:center;border:1px solid rgba(0,0,0,.1);
  background:#fff;padding:6px 12px;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.04);
  font-size:12px;color:#586269;
}

/* ===== Buttons (base) ===== */
.zr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:999px;font-weight:600;font-size:14px;
  border:1px solid transparent;cursor:pointer;transition:.2s ease;box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.zr-btn--white{background:#fff;border-color:rgba(0,0,0,.08);color:var(--zr-green-900)}
.zr-btn--white:hover{background:#f6f8f7}
.zr-btn--green{background:var(--zr-green-900);color:#fff}
.zr-btn--green:hover{background:var(--zr-green-800)}
.zr-btn--outline{background:#fff;color:var(--zr-green-900);border-color:rgba(9,83,65,.35)}
.zr-btn--outline:hover{background:#f6faf8}

/* ===== Hero actions — pill & compact ===== */
.zr-hero-actions{display:flex;gap:12px;align-items:center;}
.zr-hero-actions .zr-btn{
  height:46px;padding:10px 18px;border-radius:999px;flex-direction:row;background:#fff;
  border:1px solid #e6e7e9;color:var(--zr-green-900);font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.85);
}
.zr-hero-actions .zr-btn svg{width:18px;height:18px;margin:0 6px 0 0;}
.zr-hero-actions .zr-btn:hover{background:#f6faf8;border-color:#e2efe9;}

/* ===== Layout grid ===== */
.zr-grid{display:grid;grid-template-columns:1fr;gap:var(--zr-gap-main);margin-top:24px}
@media (min-width:1024px){.zr-grid{grid-template-columns:2fr 1fr}}

/* Cards */
.zr-card{
  background:var(--zr-card);backdrop-filter:saturate(180%) blur(6px);
  border:1px solid var(--zr-border);border-radius:var(--zr-radius-lg);
  box-shadow:var(--zr-shadow);padding:24px;margin-bottom:18px;
}
.zr-h2{font-size:20px;font-weight:700;margin:0 0 12px}
.zr-h3{font-size:16px;font-weight:700;margin:0 0 8px}
.zr-list{margin:12px 0 0 18px;padding:0;display:grid;gap:8px}
.zr-list li{list-style:disc;color:#2b3130}

/* ===== Section spacing ===== */
.zr-main{display:grid;gap:var(--zr-gap-sections)}
.zr-main > .zr-card, .zr-main > .zr-why{margin:0}

/* Dark brand block */
.zr-why{
  background:var(--zr-green-950);color:#ecfdf5;padding:24px;border-radius:28px;box-shadow:var(--zr-shadow)
}
.zr-why h3{margin:0 0 10px;font-size:20px}
.zr-why-grid{display:grid;gap:12px}
@media (min-width:640px){.zr-why-grid{grid-template-columns:1fr 1fr}}

/* About */
.zr-about{display:flex;gap:16px;align-items:center}
.zr-about-icon{
  height:48px;width:48px;border-radius:18px;background:#d1fae5;color:var(--zr-green-900);
  display:grid;place-items:center;flex-shrink:0
}

/* ===== Sidebar ===== */
.zr-side{position:relative;gap:14px;}
@media (min-width:1024px){.zr-side{position:sticky;top:24px}}

/* Sidebar bits */
.zr-side-info{display:grid;gap:12px;margin:0;padding:0;font-size:14px;color:#334155}
.zr-side-info li{display:flex;gap:8px;align-items:center}

/* ===== CTA card + buttons — TIGHT STACK (buttons + legal) ===== */
.zr-card.zr-cta{padding:14px 14px 10px;}       /* tighter top/bottom padding */
.zr-cta{display:grid;gap:6px;}                  /* gap between btn1 / btn2 / legal */
.zr-file{display:none}
.zr-legal{font-size:12px;color:#6b7280;text-align:center;margin-top:4px;} /* small offset */

/* CTA buttons sizing */
.zr-cta .zr-btn{
  height:56px;                 /* a bit shorter than before for tighter feel */
  border-radius:34px;
  font-weight:700;font-size:15px;gap:6px;
}

/* filled green (top) */
.zr-cta .zr-btn.zr-btn--green{
  background:var(--zr-green-900);color:#fff;border:0;box-shadow:0 8px 20px rgba(6,44,35,.18);
}
.zr-cta .zr-btn.zr-btn--green:hover{background:var(--zr-green-800);}

/* outlined (second) */
.zr-cta .zr-btn.zr-btn--outline{
  background:#fff;color:var(--zr-green-900);border:1.4px solid #a6d2c4;box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.zr-cta .zr-btn.zr-btn--outline:hover{background:#f6faf8;border-color:#9acdbd;}

/* ===== Mobile sticky footer CTA ===== */
.zr-mobile-cta{
  position:sticky;bottom:0;left:0;right:0;display:flex;gap:12px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
  border-top:1px solid var(--zr-border);padding:12px 16px;
}
@media (min-width:1024px){.zr-mobile-cta{display:none}}