/* ============================================================
   Green Heart Kilifi — Careers site shared styles
   Official brand palette + self-hosted brand fonts.
   ============================================================ */

/* ---- Brand fonts, self-hosted (woff2 in /fonts) ---- */
@font-face { font-family:'Cabinet Grotesk'; src:url('fonts/CabinetGrotesk-Regular.woff2') format('woff2');   font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Cabinet Grotesk'; src:url('fonts/CabinetGrotesk-Medium.woff2') format('woff2');    font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Cabinet Grotesk'; src:url('fonts/CabinetGrotesk-Bold.woff2') format('woff2');      font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Cabinet Grotesk'; src:url('fonts/CabinetGrotesk-Extrabold.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Gazpacho'; src:url('fonts/Gazpacho-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Gazpacho'; src:url('fonts/Gazpacho-Medium.woff2') format('woff2');  font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Gazpacho'; src:url('fonts/Gazpacho-Italic.woff2') format('woff2');  font-weight:400; font-style:italic; font-display:swap; }

:root {
  --green-deep: #152F1C;   /* PRIMARY dark forest green — sampled live from greenheartkilifi.life (rgb 21,47,28) */
  --green:      #267F70;   /* PRIMARY teal — Pantone 327 C (rgb 38,127,112, matches live) */
  --green-soft: #4f9a83;
  --sand:       #FCF2D7;   /* SECONDARY cream (rgb 252,242,215, matches live) */
  --sand-deep:  #F3E8C6;
  --ink:        #22301f;
  --accent:     #F7CD45;   /* TERTIARY gold (rgb 247,205,69, matches live) */
  --accent-dk:  #E6B82E;
  --accent-ink: #152F1C;   /* gold-button text = forest green, as on live site */
  --lime:       #CDF546;   /* TERTIARY lime — Pantone 374 C */
  --white:      #ffffff;
  --font-head:   'Cabinet Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:   'Cabinet Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-accent: 'Gazpacho', Georgia, 'Times New Roman', serif;
  --maxw: 980px;
  --radius: 14px;
  --shadow: 0 18px 40px -24px rgba(21,47,28,.5);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:var(--font-body); color:var(--ink); background:var(--sand); line-height:1.65; -webkit-font-smoothing:antialiased; }
h1, h2, h3 { font-family:var(--font-head); font-weight:800; line-height:1.08; letter-spacing:-0.02em; }
a { color:var(--green); }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* Header — forest-green brand bar with centered logo + split nav (mirrors greenheartkilifi.life) */
header.site { position:sticky; top:0; z-index:20; background:var(--green-deep); border-bottom:1px solid rgba(252,242,215,.10); }
header.site .wrap { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; min-height:96px; padding-top:14px; padding-bottom:14px; }
.nav-left, .nav-links { display:flex; align-items:center; gap:26px; }
.nav-left { justify-content:center; flex-wrap:wrap; }
.nav-right { display:flex; flex-direction:column; align-items:flex-end; gap:11px; }
header.site .brand { justify-self:center; display:block; text-decoration:none; }
header.site .brand img { height:52px; width:auto; display:block; }
header.site nav a, .nav-left a, .nav-links a { color:var(--sand); text-decoration:none; font-family:var(--font-head); font-weight:700; font-size:.95rem; letter-spacing:.005em; transition:color .18s ease; white-space:nowrap; }
header.site nav a:hover, .nav-left a:hover, .nav-links a:hover { color:var(--accent); }
.nav-cta { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--white); background:var(--green); padding:11px 22px; border-radius:22px; text-decoration:none; white-space:nowrap; transition:background .2s ease, transform .15s ease; }
.nav-cta:hover { background:#2f9484; transform:translateY(-1px); }

@media (max-width:860px){
  header.site .wrap { grid-template-columns:1fr; justify-items:center; min-height:0; gap:12px; text-align:center; }
  .nav-left, .nav-links { justify-content:center; flex-wrap:wrap; gap:18px; }
  .nav-right { align-items:center; }
  header.site .brand { order:-1; }
}

/* Hero */
.hero { background: radial-gradient(1200px 500px at 80% -10%, rgba(95,162,146,.45), transparent 60%), linear-gradient(160deg, var(--green-deep), var(--green) 72%); color:var(--white); padding:78px 0 86px; position:relative; overflow:hidden; }
.hero::after { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px); background-size:22px 22px; opacity:.5; pointer-events:none; }
.hero > .wrap { position:relative; z-index:1; }
.backlink { display:inline-block; margin-bottom:16px; color:#cfe3d6; text-decoration:none; font-size:.88rem; font-weight:700; }
.backlink:hover { color:var(--white); }
.eyebrow { display:inline-block; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:var(--lime); margin-bottom:18px; }
.hero h1 { font-size:clamp(2.5rem,6vw,4.2rem); margin:0 0 14px; color:var(--white); }
.hero .meta { font-size:1rem; color:#d9e6dd; margin-bottom:22px; }
.hero .meta strong { color:var(--white); font-weight:700; }
.hero p.lead { font-size:1.18rem; max-width:620px; color:#eaf2ec; margin:0 0 32px; }
.cta-row { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.btn { display:inline-block; font-weight:700; text-decoration:none; border-radius:22px; padding:14px 28px; font-size:1rem; border:1.5px solid transparent; transition:transform .15s ease, background .2s ease; }
.btn-primary { background:var(--accent); color:var(--accent-ink); border-color:var(--green-deep); }
.btn-primary:hover { background:var(--accent-dk); transform:translateY(-2px); }
.btn-ghost { color:var(--sand); border-color:var(--sand); background:rgba(247,205,69,.02); }
.btn-ghost:hover { background:rgba(252,242,215,.10); }
.hero .note { margin-top:18px; font-size:.9rem; color:#bcd2c2; max-width:560px; }

/* Sections */
section.block { padding:62px 0; }
section.block.tint { background:var(--sand-deep); }
.kicker { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--green); margin:0 0 10px; }
h2 { font-size:clamp(1.7rem,3.6vw,2.5rem); margin:0 0 22px; color:var(--green-deep); }
.lead-text { font-size:1.1rem; max-width:680px; }
.lead-text strong { color:var(--green-deep); }

/* Brand quote band */
.quoteband { background:var(--green-deep); color:var(--white); padding:60px 0; }
.quoteband .q { font-family:var(--font-accent); font-style:italic; font-weight:400; font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.3; max-width:820px; color:#f1f6f0; }
.quoteband .q .hl { color:var(--lime); font-style:italic; }
.quoteband .sub { margin-top:18px; font-size:1rem; color:#bcd2c2; max-width:640px; }

/* Open roles list (hub) */
.role-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:18px; margin-top:30px; }
.role-card { display:block; background:var(--white); border:1px solid var(--sand-deep); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .2s ease; }
.role-card:hover { transform:translateY(-3px); box-shadow:0 26px 52px -26px rgba(28,49,44,.6); }
.role-card .rc-meta { font-size:.78rem; color:var(--green); font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.role-card h3 { font-size:1.5rem; margin:10px 0 12px; color:var(--green-deep); }
.role-card p { margin:0 0 18px; color:#41483c; font-size:.98rem; }
.role-card .rc-cta { font-weight:700; color:var(--green); }
.role-card:hover .rc-cta { color:var(--green-deep); }

/* Cards (responsibilities) */
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:18px; margin-top:30px; }
.card { background:var(--white); border:1px solid var(--sand-deep); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); }
.card .tag { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green); }
.card h3 { font-size:1.16rem; font-weight:700; margin:8px 0 8px; color:var(--green-deep); }
.card p { margin:0; font-size:.96rem; color:#41483c; }

/* Checklists */
ul.checks { list-style:none; padding:0; margin:26px 0 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px 28px; }
ul.checks li { position:relative; padding-left:30px; font-size:1rem; }
ul.checks li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--white); background:var(--green); width:20px; height:20px; border-radius:50%; font-size:.72rem; display:grid; place-items:center; margin-top:4px; }

/* Metrics (success) */
ul.metrics { list-style:none; padding:0; margin:24px 0 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:14px 28px; }
ul.metrics li { font-size:.98rem; padding-left:18px; position:relative; }
ul.metrics li::before { content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%; background:var(--accent); }
ul.metrics li strong { color:var(--green-deep); }

/* Offer */
.offer-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; margin-top:28px; }
.offer { background:var(--white); border-radius:var(--radius); padding:22px 24px; border:1px solid var(--sand-deep); }
.offer h3 { font-size:1.05rem; font-weight:700; margin:0 0 6px; color:var(--green-deep); }
.offer p { margin:0; font-size:.94rem; color:#41483c; }

/* Apply band */
.apply { background:linear-gradient(160deg, var(--green) 0%, var(--green-deep) 100%); color:var(--white); border-radius:22px; padding:52px 40px; text-align:center; box-shadow:var(--shadow); }
.apply h2 { color:var(--white); }
.apply p { color:#e7f0e9; max-width:640px; margin:0 auto 26px; }
.apply .karibu { font-family:var(--font-accent); font-style:italic; font-size:1.35rem; color:var(--lime); margin-bottom:8px; }
.apply .fineprint { font-size:.86rem; color:#b9cfc0; margin-top:22px; }

/* Footer */
footer.site { background:var(--green-deep); color:#cdddd2; padding:48px 0 30px; font-size:.92rem; }
footer .cols { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; }
footer h4 { color:var(--white); font-weight:700; font-size:1.05rem; margin:0 0 12px; }
footer a { color:#cdddd2; text-decoration:none; }
footer a:hover { color:var(--white); }
footer .row { margin-bottom:7px; }
footer .tagline { font-family:var(--font-accent); font-style:italic; color:var(--lime); font-size:1.05rem; margin-top:4px; }
footer .legal { border-top:1px solid rgba(255,255,255,.12); margin-top:34px; padding-top:18px; font-size:.82rem; color:#9fb4a7; }

@media (max-width:720px){ footer .cols{ grid-template-columns:1fr; } .apply{ padding:40px 22px; } }