/* SystemHustle recruiting page - one design system for all sections.
   Values measured from the 15 reference screens (docs/niches/recruiting/site/images). */
:root{
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* surfaces */
  --bg:#faf9f3;            /* ivory page */
  --bg-2:#f5f2e9;          /* band / soft fill */
  --card:#fffefb;
  --line:#e7e4da;
  --line-2:#efede5;
  --dark:#062f28;          /* hero / final */
  --dark-2:#0a3a31;
  --dark-line:rgba(170,220,195,.16);

  /* ink */
  --ink:#0f1a17;
  --ink-2:#3d4a47;
  --muted:#66737a;         /* slate body copy on light */
  --muted-2:#8a959a;
  --on-dark:#f3efe4;
  --on-dark-2:#c9d3cc;

  /* brand */
  --green:#063d33;         /* buttons on light */
  --green-h:#0b5244;
  --green-ink:#14503f;     /* green words in headlines */
  --mint:#63b896;          /* accent on dark */
  --mint-2:#e3f2ea;        /* mint fill */
  --mint-3:#f1f8f4;
  --sage:#9db6aa;
  --gold:#c99a55;          /* section label */
  --gold-2:#f2c05a;        /* signal dot */
  --gold-3:#fbf1dc;
  --rose:#fcf2f2;
  --rose-2:#f7dfe0;
  --rose-ink:#a2353a;
  --cream-btn:#f5f1e6;

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:24px;
  --sh-1:0 1px 2px rgba(16,30,25,.04),0 6px 18px rgba(16,30,25,.05);
  --sh-2:0 2px 6px rgba(16,30,25,.06),0 18px 40px rgba(16,30,25,.10);
  --sh-dark:0 18px 40px rgba(0,0,0,.28);

  --wrap:1416px;
  --gutter:clamp(16px,4vw,60px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.ico{width:1em;height:1em;flex:none;display:inline-block;vertical-align:middle}

/* type */
.serif{font-family:var(--serif)}
.h-xl,.h-lg,.h-md,.h-sm{font-family:var(--serif);font-weight:600;letter-spacing:-.035em;line-height:1.02;font-variation-settings:'opsz' 72}
.h-xl{font-size:clamp(38px,4.15vw,64px)}
.h-lg{font-size:clamp(30px,3vw,46px)}
.h-md{font-size:clamp(26px,2.5vw,38px);line-height:1.06}
.h-sm{font-size:clamp(22px,1.75vw,27px);letter-spacing:-.025em;line-height:1.12}
.g{color:var(--green-ink)}
.lead{font-size:clamp(17px,1.55vw,23px);line-height:1.38;color:var(--muted);letter-spacing:.005em}
.body{font-size:16px;line-height:1.55;color:var(--muted)}
.small{font-size:13.5px;line-height:1.45;color:var(--muted)}

/* section label: "02 —— THE HIDDEN MARKET" */
.label{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--green-ink)}
.label .n{font-size:13px;letter-spacing:.06em;color:var(--ink-2);font-weight:600}
.label .n.chip{width:36px;height:36px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;font-weight:500}
.label i{width:36px;height:1px;background:currentColor;opacity:.55}
.label.gold{color:#b78a45}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 28px;border-radius:var(--r);font-size:17px;font-weight:500;transition:transform .2s var(--ease),background .2s,box-shadow .2s;white-space:nowrap}
.btn .ico{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover .ico{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn-green{background:var(--green);color:#fff;box-shadow:0 8px 24px rgba(6,61,51,.22)}
.btn-green:hover{background:var(--green-h)}
.btn-cream{background:var(--cream-btn);color:#0b2e27;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.btn-cream:hover{background:#fff}
.btn-ghost{border:1px solid var(--green);color:var(--green);height:44px;font-size:15px;padding:0 18px}
.btn-lg{height:72px;padding:0 44px;font-size:21px;border-radius:19px;font-weight:400}
.link{display:inline-flex;align-items:center;gap:10px;font-weight:500;color:var(--green-ink)}
.link .ico{width:16px;height:16px;transition:transform .25s var(--ease)}
.link:hover .ico{transform:translateX(3px)}

/* card */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.iconbox{width:56px;height:56px;border-radius:14px;display:grid!important;place-items:center;background:var(--bg-2);color:var(--ink);flex:none}
.iconbox .ico{width:26px;height:26px}
.iconbox.round{border-radius:50%}
.iconbox.mint{background:var(--mint-2);color:var(--green-ink)}
.iconbox.rose{background:var(--rose-2);color:var(--rose-ink)}

/* pill / tag */
.tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;font-size:12.5px;font-weight:500;background:var(--mint-2);color:var(--green-ink);white-space:nowrap}
.tag.gold{background:var(--gold-3);color:#8a5d17}
.tag.blue{background:#e8eefb;color:#2b4fa0}
.tag.violet{background:#efe9fb;color:#5b3fa6}
.tag.rose{background:var(--rose-2);color:var(--rose-ink)}
.chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:14.5px;font-weight:500;color:var(--ink-2);transition:all .2s var(--ease)}
.chip:hover{border-color:var(--sage)}
.chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.chip .ck{width:18px;height:18px;border-radius:50%;background:#fff;color:var(--green);display:none;place-items:center}
.chip .ck .ico{width:12px;height:12px;stroke-width:3}
.chip[aria-pressed="true"] .ck{display:grid}

/* logo / avatar */
.logo{width:44px;height:44px;border-radius:11px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;flex:none}
.logo img{width:72%;height:72%;object-fit:contain}
.logo.mono{background:var(--green);color:#fff;font-family:var(--serif);font-weight:600;font-size:20px;border:0}
.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;background:var(--bg-2)}

/* accordion (shared by 05 Our Approach and 10 FAQ) */
.acc{display:flex;flex-direction:column;gap:10px}
.acc-item{background:var(--card);border:1px solid var(--line);border-radius:var(--r);transition:box-shadow .25s,border-color .25s}
.acc-item:hover{border-color:#dcd8cc}
.acc-item.open{box-shadow:var(--sh-1)}
.acc-q{width:100%;display:flex;align-items:center;gap:22px;padding:16px 24px 16px 16px;text-align:left;font-size:17px;font-weight:500;color:var(--ink)}
.acc-q .num{width:36px;height:36px;border-radius:50%;background:var(--mint-3);color:var(--green-ink);display:grid;place-items:center;font-size:13px;font-weight:600;flex:none}
.acc-q .t{flex:1}
.acc-q .pm{width:22px;height:22px;flex:none;position:relative;color:var(--ink-2)}
.acc-q .pm:before,.acc-q .pm:after{content:'';position:absolute;left:3px;right:3px;top:50%;height:1.6px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease)}
.acc-q .pm:after{transform:rotate(90deg)}
.acc-item.open .pm:after{transform:rotate(0)}
.acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.acc-item.open .acc-a{grid-template-rows:1fr}
.acc-a>div{overflow:hidden}
.acc-a p{padding:0 64px 20px 74px;color:var(--muted);font-size:15.5px;line-height:1.6;max-width:980px}
.acc-a p+p{margin-top:-8px}

/* reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  *,*:before,*:after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}
@media (max-width:640px){
  .acc-a p{padding:0 20px 18px 20px}
  .acc-q{gap:14px;font-size:16px;padding:14px 16px 14px 12px}
  .btn-lg{height:62px;font-size:18px;padding:0 30px}
}