/* ============================================================
   FALDEX AGENT MODE - shared stylesheet for /careers/
   Extracted 09-07-2026 so the four pages cannot drift apart.
   Governed by 02_Brand/1.0 Brand-Guidelines/09-05-2026_Agent-Style-Pack.html
   ============================================================ */
/* ============================================================
   Faldex Financial — /careers/  ·  Agent Mode "Carbon & Citron" + Nguni bull hero
   09-05-2026
   Governed by 02_Brand/1.0 Brand-Guidelines/09-05-2026_Agent-Style-Pack.html
   Consumer pages are unaffected and keep the Master Brand Guide.

   Meaning colours (do not swap):
     stone = a cost you carry, a step you take alone
     gold  = a step Faldex does with you
   Gold is the lift. It arrives at step 08, which is the moment
   the reader stops being on their own.
   ============================================================ */
:root{
  --ink:#0A0A0B;
  --text:#F6F6F4; --dim:#A5A6A1; --dimmer:#7C7D79;
  --rose:#ADB0A6; --rose-deep:#3A3D33;
  --gold:#D7F25A; --gold-deep:#9CB33A;
  --glass:linear-gradient(180deg,rgba(255,255,255,.062),rgba(255,255,255,.02));
  --glass-hi:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.032));
  --edge:rgba(255,255,255,.11); --edge-soft:rgba(255,255,255,.065);
  /* Border for controls whose shape carries meaning: inputs, selects,
     textareas. --edge measures 1.14:1 against the panel behind it and
     WCAG 1.4.11 needs 3:1; .46 gives 3.29:1. See the note at the foot
     of /assets/agent-mode.css. */
  --edge-ctl:rgba(255,255,255,.46);
  /* This file predates the style pack's final names and calls stone
     "rose" and citron "gold". Same hex values, two vocabularies, and
     .costtable already referenced a --citron that did not exist here.
     Both names now resolve. New rules should use the pack's names. */
  --stone:#ADB0A6; --stone-deep:#3A3D33;
  --citron:#D7F25A; --citron-deep:#9CB33A;
  --r:16px; --r-in:10px;
  --wrap:1160px; --pad:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;color:var(--text);background:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(1080px 740px at 3% -16%, rgba(104,126,44,.56), transparent 62%),
  radial-gradient(940px 800px at 99% -2%, rgba(22,88,80,.52), transparent 64%),
  radial-gradient(820px 620px at 86% 58%, rgba(60,72,32,.50), transparent 66%),
  radial-gradient(980px 660px at 58% 112%, rgba(215,242,90,.20), transparent 60%),
  radial-gradient(780px 660px at 10% 84%, rgba(118,72,32,.30), transparent 66%),
  radial-gradient(700px 600px at 34% 44%, rgba(18,20,18,.55), transparent 70%),
  var(--ink)}
h1,h2,h3{font-family:'Space Grotesk',system-ui,sans-serif;margin:0;letter-spacing:-.035em;line-height:1.0}
p{margin:0 0 1em}
a{color:var(--gold)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.glass{background:var(--glass);border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);
  border-radius:var(--r)}
.eyebrow{font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rose);margin:0 0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:var(--gold);color:#0A0A0B;
  padding:10px 18px;border-radius:4px;font-weight:600}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:2px}

/* ---------- buttons: hairline, near-square ---------- */
.btn{font-family:'Inter';font-weight:500;font-size:15.5px;text-decoration:none;
  padding:14px 26px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s,transform .16s}
.btn.pri{background:rgba(0,0,0,.34);color:var(--text);border-color:rgba(255,255,255,.9)}
.btn.pri:hover{background:var(--text);color:var(--ink);transform:translateY(-1px)}
.btn.sec{background:transparent;color:var(--text);border-color:rgba(255,255,255,.24);padding:13px 25px}
/* .sec is used for both page sections and secondary buttons. Same specificity,
   so the section rule was winning and giving every secondary button 90px of
   vertical padding. The explicit padding above settles it. */
.btn.sec:hover{border-color:var(--rose);color:var(--rose);transform:translateY(-1px)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,10,11,.6);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--edge-soft)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.brand img{height:32px;width:auto;display:block}
.brandtx{font-family:'Space Grotesk';font-weight:700;font-size:15.5px;
  letter-spacing:-.02em;line-height:1.15}
.brandtx small{display:block;font-family:'Inter';font-weight:500;font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--dim);margin-top:2px}
.nav .btn{font-size:14px;padding:11px 20px}

/* ---------- hero ---------- */
.hero{padding:100px 0 88px}
.herogrid{display:grid;grid-template-columns:1.08fr .92fr;gap:62px;align-items:center}
.hero h1{font-weight:800;font-size:clamp(42px,5.6vw,74px);max-width:14ch;margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--gold)}
.lede{font-size:clamp(17px,1.5vw,19.5px);color:var(--dim);max-width:52ch;margin-bottom:34px}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}

.panel{padding:24px 24px 22px}
.panel .ptop{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--edge-soft)}
.panel .ptop span{font-weight:600;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--dim)}
.pill{font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:999px;
  background:rgba(173,176,166,.12);color:var(--rose);border:1px solid rgba(173,176,166,.26)}
.prow{display:flex;align-items:center;gap:14px;padding:12px 2px;border-bottom:1px solid var(--edge-soft)}
.prow:last-child{border-bottom:0}
.prow i{flex:0 0 auto;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:10.5px;font-weight:600;
  border:1px solid rgba(173,176,166,.4);color:var(--rose);background:rgba(58,61,51,.26)}
.prow.us i{border-color:rgba(215,242,90,.45);color:var(--gold);background:rgba(156,179,58,.13)}
.prow b{font-weight:500;font-size:15px;color:var(--text);flex:1 1 auto}
.prow em{font-style:normal;font-size:12.5px;color:var(--dim);white-space:nowrap}
.prow.us em{color:var(--gold);opacity:.85}
@media(max-width:900px){.herogrid{grid-template-columns:1fr;gap:44px}.hero{padding:70px 0 62px}}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:54px}
.facts div{padding:24px 24px 22px}
.facts b{display:block;font-family:'Space Grotesk';font-weight:700;font-size:16px;
  letter-spacing:-.02em;color:var(--text);margin-bottom:7px}
.facts span{font-size:14.5px;color:var(--dim);line-height:1.55}
@media(max-width:1080px){.facts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.facts{grid-template-columns:1fr}}

/* ---------- sections ---------- */
.sec{padding:90px 0}
.sec h2{font-weight:700;font-size:clamp(30px,4.1vw,52px);max-width:19ch;margin-bottom:20px}
.sec .intro{color:var(--dim);max-width:60ch;font-size:17.5px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
.split > div{padding:34px 32px 30px}
.split h3{font-weight:700;font-size:19px;letter-spacing:-.02em;margin-bottom:20px}
.split .yes h3{color:var(--gold)} .split .no h3{color:var(--dim)}
.split ul{list-style:none;margin:0;padding:0}
.split li{position:relative;padding-left:25px;margin-bottom:14px;font-size:16px;color:var(--dim);line-height:1.55}
.split li:last-child{margin-bottom:0}
.split li::before{content:"";position:absolute;left:0;top:10px;width:10px;height:2px;border-radius:2px;background:var(--gold)}
.split .no li::before{background:var(--dimmer)}
@media(max-width:820px){.split{grid-template-columns:1fr}}

/* ---------- spine ---------- */
.spine{list-style:none;margin:52px 0 0;padding:0;position:relative}
.spine::before{content:"";position:absolute;left:26px;top:22px;bottom:26px;width:1px;
  background:linear-gradient(180deg,rgba(173,176,166,.5) 0%,rgba(173,176,166,.5) 56%,rgba(215,242,90,.55) 64%,rgba(215,242,90,.55) 100%)}
.step{position:relative;padding:0 0 14px 74px}
.step .card{padding:22px 26px 20px}
.step .n{position:absolute;left:0;top:14px;width:53px;height:53px;border-radius:50%;
  display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;font-size:14px;
  background:rgba(10,10,11,.9);border:1px solid rgba(173,176,166,.45);color:var(--rose);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.step.us .n{border-color:rgba(215,242,90,.5);color:var(--gold)}
.step h3{font-weight:700;font-size:19.5px;letter-spacing:-.02em;margin-bottom:8px}
.step p{color:var(--dim);font-size:15.5px;margin:0 0 13px;max-width:60ch}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12.5px;font-weight:500;padding:5px 12px;border-radius:999px;
  border:1px solid rgba(173,176,166,.28);color:var(--rose);background:rgba(58,61,51,.22)}
.chip.t{border-color:var(--edge-soft);color:var(--dim);background:transparent}
.step.us .chip{border-color:rgba(215,242,90,.3);color:var(--gold);background:rgba(156,179,58,.1)}
.spinebreak{position:relative;padding:18px 0 22px 74px}
.spinebreak span{font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.costnote{margin-top:30px;padding:26px 28px;max-width:78ch}
.costnote strong{color:var(--text)}
.costnote p{color:var(--dim);font-size:16px;margin:0}
@media(max-width:620px){
  .step,.spinebreak{padding-left:58px}
  .step .n{width:42px;height:42px;font-size:12.5px;top:12px}
  .spine::before{left:21px}
}

.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:44px}
.cards > div{padding:32px 30px 28px}
.cards .wide{grid-column:1 / -1}
.cards h3{font-weight:700;font-size:19px;letter-spacing:-.02em;margin-bottom:12px;color:var(--gold)}
.cards p{color:var(--dim);font-size:16px;margin:0}
@media(max-width:820px){.cards{grid-template-columns:1fr}}

.licensed{padding:46px 44px 42px;background:var(--glass-hi)}
.licensed h2{font-size:clamp(25px,3.2vw,36px);margin-bottom:18px;max-width:24ch}
.licensed p{color:var(--dim);max-width:64ch}
.licensed p:last-of-type{margin-bottom:26px}

/* ---------- form ---------- */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
.formgrid h2{font-size:clamp(30px,3.9vw,46px);margin-bottom:20px}
.orbook{margin-top:32px;padding-top:28px;border-top:1px solid var(--edge-soft)}
.orbook p{font-size:15.5px;color:var(--dim);margin-bottom:16px}
form{padding:34px 32px 30px}
.f{margin-bottom:18px}
.f label{display:block;font-weight:600;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.f input,.f select,.f textarea{width:100%;font-family:'Inter';font-size:16px;color:var(--text);
  background:rgba(255,255,255,.05);border:1px solid var(--edge-ctl);border-radius:var(--r-in);
  padding:13px 15px;transition:border-color .16s,background .16s}
.f input::placeholder,.f textarea::placeholder{color:var(--dim)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--citron);background:rgba(255,255,255,.075);outline:none}
.f textarea{min-height:92px;resize:vertical}
.f select{appearance:none;color:var(--text);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A5A6A1' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.f select option{background:#17180F;color:var(--text)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.consent{display:flex;gap:12px;align-items:flex-start;margin:22px 0 4px}
.consent input{margin-top:3px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--citron)}
.consent label{font-size:12.5px;line-height:1.6;color:var(--dim);margin:0;
  text-transform:none;letter-spacing:0;font-weight:400}
.consent label a{color:var(--dim)}
.sub{width:100%;margin-top:18px;font-family:'Inter';font-weight:500;font-size:16px;
  color:var(--text);background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.9);
  border-radius:4px;padding:15px;cursor:pointer;transition:background .16s,color .16s,transform .16s}
.sub:hover{background:var(--text);color:var(--ink);transform:translateY(-1px)}
.err{color:#FF9E8E;font-size:13.5px;margin:12px 0 0;display:none}
.err.on{display:block}
.formnote{font-size:12.5px;color:var(--dim);margin:16px 0 0;text-align:center}
@media(max-width:860px){.formgrid{grid-template-columns:1fr;gap:36px}}

.disclose{padding:0 0 82px}
.disclose > .wrap > div{padding:32px 34px}
.disclose h2{font-family:'Space Grotesk';font-weight:600;font-size:17px;
  letter-spacing:-.01em;color:var(--dim);margin-bottom:14px}
.disclose p{font-size:13.5px;color:var(--dim);line-height:1.75;margin:0;max-width:92ch}
.foot{padding:34px 0 60px;border-top:1px solid var(--edge-soft)}
.foot .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.foot a{color:var(--dim);text-decoration:none;font-size:14.5px;margin-right:24px}
.foot a:hover{color:var(--gold)}
.foot small{color:var(--dim);font-size:13px}

.rv{opacity:0;transform:translateY(16px)}
.rv.in{opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){.rv,.rv.in{opacity:1;transform:none;transition:none}}
/* Space Grotesk tops out at 700. */
.hero h1{font-weight:700}

/* ---------- Nguni bull, hero atmosphere layer (09-07-2026) ----------
   Carbon's discipline is that citron is the only colour on the page, so the
   bull is desaturated in CSS rather than baked monochrome. One line reverses
   that decision if the hide should ever carry its own colour again.

   It sits behind the glass panel deliberately: the translucent surface over a
   photograph is the whole reason the glass treatment exists.

   Source: local, self-hosted. AVIF with a WebP fallback at 800/1200/1600w.
   Largest AVIF is 45KB, largest WebP 59KB. The uncompressed 5.9MB master lives
   beside this file as 09-07-2026_nguni-bull-master.png and must NOT be copied
   into a deploy. Regenerate the derivatives from it if the treatment changes. */
.hero{position:relative}
/* Fixed to the viewport, not to the hero, so it reads as a background the
   page moves over rather than a picture that scrolls away. z-index -1 puts
   it above the ambient field at -2 and below all content. */
.bullwrap{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
/* Centred on the viewport rather than anchored to a corner. left:50% plus
   translateX(-50%) is what centres it regardless of how wide it gets. */
.bullwrap picture,.bullwrap .bullvid{
  position:absolute; left:50%; bottom:-14%;
  transform:translateX(-50%);
  width:min(155%,2600px); height:auto; display:block;
}
/* Exactly one of these is ever visible. Both painting at once meant two
   bulls stacked at 48% opacity, which is what a ghosted double image looks
   like. The video carries the still as its poster, so it covers the gap
   while loading without a second element behind it. */
.bullwrap picture{display:none}
.bullvid{z-index:1}
.bull,.bullvid{
  width:100%; height:auto; display:block;
  filter:grayscale(.72) saturate(1.1) contrast(1.12) brightness(.88);
  opacity:.48;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 26%, #000 82%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 26%, #000 82%, transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.hero .wrap{position:relative; z-index:1}
/* Below the hero grid breakpoint the bull sits behind body copy rather than
   beside it, so it drops back further or the text stops passing contrast. */
@media(max-width:900px){
  .bullwrap picture,.bullwrap .bullvid{bottom:-8%; width:240%}
  .bull{opacity:.18}
  /* No autoplaying video on phones. It costs battery and data for something
     sitting at 18% opacity behind text. The still takes over here. */
  .bullvid{display:none}
  .bullwrap picture{display:block}
}
@media (prefers-reduced-motion:no-preference){
  .bull{transition:opacity .6s ease}
}
/* Someone who has asked their system for less motion gets the still. */
@media (prefers-reduced-motion:reduce){
  .bullvid{display:none}
  .bullwrap picture{display:block}
}

/* ============================================================
   Additions for the /careers/ sub-pages (09-07-2026).
   The index page keeps the bull; sub-pages do not, so their heroes
   are shorter and carry a back link instead.
   ============================================================ */
.subhero{padding:78px 0 54px}
.subhero h1{font-weight:700;font-size:clamp(34px,4.6vw,60px);max-width:17ch;margin-bottom:20px}
.subhero .lede{font-size:clamp(17px,1.5vw,19px);color:var(--dim);max-width:56ch;margin-bottom:30px}
.crumb{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--dim);
  text-decoration:none;margin-bottom:22px}
.crumb:hover{color:var(--citron)}
.crumb::before{content:"";width:14px;height:1px;background:currentColor;display:block}

/* cost table */
.costtable{margin-top:26px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.costtable table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px}
.costtable th,.costtable td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--edge-soft)}
.costtable th{font-weight:600;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.costtable td{color:var(--dim)}
.costtable td:first-child{color:var(--text)}
.costtable tr:last-child td{border-bottom:0}
.costtable tr.total td{color:var(--citron);font-weight:500;border-top:1px solid var(--edge)}

/* faq */
.faq{margin-top:40px;display:flex;flex-direction:column;gap:12px}
.faq details{padding:0;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:22px 26px;display:flex;gap:18px;
  align-items:baseline;justify-content:space-between;
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:18px;
  letter-spacing:-.02em;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Inter';font-weight:400;font-size:22px;
  color:var(--citron);line-height:1;flex:0 0 auto;transition:transform .18s}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--citron)}
.faq .a{padding:0 26px 24px;color:var(--dim);font-size:16px;max-width:70ch}
.faq .a p{margin:0 0 .9em}
.faq .a p:last-child{margin-bottom:0}
.faq .a strong{color:var(--text);font-weight:600}

/* two-up prose */
.prose{max-width:66ch;color:var(--dim);font-size:17px}
.prose h3{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:21px;
  letter-spacing:-.02em;color:var(--text);margin:34px 0 12px}
.prose p{margin:0 0 1.1em}
.prose strong{color:var(--text);font-weight:600}

/* closing call to action */
.cta{padding:46px 44px 42px;background:var(--glass-hi);text-align:left}
.cta h2{font-size:clamp(25px,3.2vw,36px);margin-bottom:16px;max-width:22ch}
.cta p{color:var(--dim);max-width:60ch;margin-bottom:26px}
.cta .btns{margin:0}

/* nav links, added when the section moved to clean URLs (09-07-2026) */
.navlinks{display:flex;gap:26px;align-items:center;margin-left:auto;margin-right:26px}
.navlinks a{font-family:'Inter',sans-serif;font-weight:500;font-size:14.5px;color:var(--dim);
  text-decoration:none;transition:color .16s}
.navlinks a:hover{color:var(--text)}
.navlinks a[aria-current="page"]{color:var(--citron)}
@media(max-width:820px){
  .nav .wrap{flex-wrap:wrap;row-gap:12px}
  .navlinks{order:3;width:100%;margin:0;gap:20px;justify-content:flex-start;
    padding-top:11px;border-top:1px solid var(--edge-soft)}
  .navlinks a{font-size:13.5px}
  .navbook{margin-left:auto}
}