/* =========================
   TOKENS
========================= */
:root {
  --cream: #faf7f2;
  --cream2: #f3ede3;
  --white: #ffffff;

  --green: #2f5e47;        /* lighter main green */
  --green2: #254f3c;       /* hover */
  --green-light: #edf5f1;  /* soft background */

  --terra: #e8602c;
  --terra-light: #fdf0eb;

  --text: #111827;
  --muted: #4b5563;
  --border: #e2dbd0;

  --shadow-sm: 0 1px 3px rgba(28,61,46,0.08);
  --shadow-md: 0 4px 16px rgba(28,61,46,0.10);
  --shadow-lg: 0 12px 40px rgba(28,61,46,0.14);

  --radius: 14px;
  --radius-sm: 8px;
}

/* =========================
   RESET
========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  background: var(--cream);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Fraunces', serif;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

p {
  color: var(--muted);
}

a {
  color: inherit;
  text-decoration: none;
}

/* =========================
   LAYOUT
========================= */
.container,
.wrap,
.main,
.output-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

/* =========================
   TOPBAR
========================= */
.topbar {
  background: var(--green);
  color: #ffffff;
  padding: 18px 6%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
}

.topbar * {
  color: inherit;
}

/* =========================
   HERO
========================= */
.hero {
  background: linear-gradient(
    135deg,
    #3f7f64 0%,
    #2f5e47 100%
  );
  color: #ffffff;
  padding: 70px 6%;
  text-align: center;
}

.hero * {
  color: inherit;
}

.hero h1 {
  font-size: clamp(34px,6vw,58px);
  margin-bottom: 18px;
  color: #ffffff;
}

.hero h1 em,
.hero h1 span {
  color: var(--terra);
}

.hero p {
  font-size: 20px;
  color: rgba(255,255,255,0.9);
  max-width: 780px;
  margin: 0 auto 28px;
}

/* =========================
   BUTTONS
========================= */
.btn,
.primary {
  display: inline-block;
  background: #ffffff;
  color: var(--green);
  padding: 14px 22px;
  border-radius: var(--radius-sm);
  font-weight: 800;
  box-shadow: var(--shadow-md);
  transition: 0.2s ease;
}

.btn:hover,
.primary:hover {
  background: var(--green);
  color: #ffffff;
}

/* =========================
   CARDS
========================= */
.card,
.resume-doc,
.role,
.example-card,
.step-card,
.why-card,
.org-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* =========================
   RESUME HEADER (LIGHT)
========================= */
.resume-header,
.resume-head {
  background: var(--green-light);
  color: var(--text);
  padding: 28px;
}

.resume-head small {
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.resume-head h2 {
  margin-top: 10px;
  color: var(--text);
}

/* =========================
   RESUME BODY
========================= */
.resume-body {
  padding: 28px;
}

.label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--green);
  font-weight: 800;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 18px;
}

/* =========================
   BULLETS
========================= */
.bullet,
.bullet-list {
  padding-left: 20px;
}

.bullet li,
.bullet-list li {
  margin: 10px 0;
  line-height: 1.6;
  color: var(--text);
  font-weight: 500;
}

/* =========================
   CHIPS
========================= */
.chip {
  display: inline-block;
  background: var(--green-light);
  border: 1px solid var(--border);
  color: var(--green);
  border-radius: 8px;
  padding: 7px 10px;
  margin: 4px;
  font-size: 14px;
}

/* =========================
   PATHWAY
========================= */
.pathway {
  background: var(--green-light);
  border-left: 4px solid var(--green);
  border-radius: 0 10px 10px 0;
  padding: 16px;
  color: var(--text);
}

/* =========================
   FOOTER
========================= */
footer {
  background: var(--green);
  color: #ffffff;
  padding: 40px 6%;
}

footer * {
  color: inherit;
}

.footer-tagline {
  color: rgba(255,255,255,0.9);
}