/* ──────────────────────────────────────────────────────────────
   Recruitment Services — shared design system
   Palette: warm ink / bronze / gold / sand (from approved design)
   ────────────────────────────────────────────────────────────── */
:root{
  --ink:#221a11;
  --bronze-900:#3a2e1d;
  --bronze-700:#6b5436;
  --gold-500:#8a7350;
  --gold-400:#a78f64;
  --gold-300:#c7ae85;
  --gold-200:#e1d0ad;
  --sand-100:#f1e9da;
  --paper:#fbf8f2;
  --white:#ffffff;
  --bronze-950:#473822;
  --line:rgba(138,115,80,0.22);
  --shadow:0 20px 50px -25px rgba(58,46,29,0.35);
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Source Serif 4", Georgia, serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Space Grotesk", sans-serif;
  color:var(--ink);
  margin:0;
  letter-spacing:-0.01em;
}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img,svg,video{display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

.eyebrow{
  font-family:"IBM Plex Mono", monospace;
  font-weight:600;
  font-size:0.74rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold-500);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;
  background:var(--gold-500);
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  flex:none;
}

.btn{
  font-family:"Space Grotesk", sans-serif;
  font-weight:600;
  font-size:0.95rem;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  border-radius:3px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--bronze-700); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--gold-500); background:var(--sand-100); }
.btn-on-gold{ background:var(--gold-500); color:var(--paper); }
.btn-on-gold:hover{ background:var(--gold-400); }

/* ---------- NAV (logo top right) ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px 32px;
  max-width:var(--maxw); margin:0 auto;
}
.nav-links{ display:flex; gap:32px; align-items:center; }
.nav-links a{
  font-family:"Space Grotesk", sans-serif;
  font-weight:500; font-size:0.92rem; color:var(--bronze-900);
  position:relative;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a.active{ color:var(--ink); }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--gold-500);
}
.nav-right{ display:flex; align-items:center; gap:22px; }
.nav-logo img{ height:46px; width:auto; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:4px; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; }

/* ---------- SECTION SHELLS ---------- */
section{ padding:96px 0; }
.alt-bg{ background:var(--sand-100); }
.section-head{ max-width:640px; margin-bottom:54px; }
.section-head h2{
  font-size:clamp(1.9rem, 2.6vw, 2.5rem);
  margin-top:16px;
  font-weight:600;
}

/* ---------- CTA BAND ---------- */
.cta-band{
  background:var(--bronze-950);
  color:var(--paper);
  padding:80px 0;
  position:relative;
  overflow:hidden;
}
.cta-band .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  position:relative; z-index:2;
}
.cta-band h2{ color:var(--paper); font-size:clamp(1.7rem,2.4vw,2.3rem); max-width:480px; }
.cta-band p{ color:var(--gold-200); margin-top:12px; max-width:420px; }
.cta-band-right{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.cta-band small{ font-family:"IBM Plex Mono", monospace; font-size:0.78rem; color:var(--gold-300); }
.cta-hexfield{
  position:absolute; right:-60px; top:-40px; bottom:-40px; width:420px;
  opacity:0.18; z-index:1;
}
.cta-hexfield .hex{
  position:absolute; width:80px; height:70px;
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  border:1px solid var(--gold-300);
  background:rgba(199,174,133,0.25);
}

/* ---------- FOOTER (Return2SA structure, RS info) ---------- */
footer{ background:var(--paper); border-top:1px solid var(--line); padding:64px 0 30px; }
.foot-top{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:44px;
  padding-bottom:44px; border-bottom:1px solid var(--line);
}
.foot-about img{ height:56px; width:auto; margin-left:-6px; }
.foot-about p{ color:var(--bronze-900); max-width:320px; margin-top:16px; font-size:0.96rem; }
.foot-col h4{
  font-family:"IBM Plex Mono", monospace; font-size:0.72rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--gold-500); margin:4px 0 16px; font-weight:600;
}
.foot-col a, .foot-col span{
  display:block; font-family:"Space Grotesk", sans-serif; font-size:0.92rem;
  color:var(--bronze-900); margin-bottom:10px;
}
.foot-col a:hover{ color:var(--ink); }
.foot-col .soon{ color:var(--gold-400); }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:26px;
  font-family:"IBM Plex Mono", monospace; font-size:0.72rem; color:var(--gold-500);
  flex-wrap:wrap; gap:10px;
}

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px){
  .foot-top{ grid-template-columns:1fr 1fr; }
  .foot-about{ grid-column:1/-1; }
}
@media (max-width: 820px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  header.site .nav-links.open{
    display:flex; flex-direction:column; align-items:flex-start;
    position:absolute; top:100%; left:0; right:0;
    background:var(--white); padding:20px 32px; gap:18px;
    border-bottom:1px solid var(--line);
  }
}
@media (max-width: 680px){
  .cta-band .wrap{ flex-direction:column; align-items:flex-start; }
  .foot-top{ grid-template-columns:1fr; }
  section{ padding:64px 0; }
  .nav .btn{ display:none; }
}