/* ============================================================
   MOUNT OLYMPUS AI : careers.css
   Recruitment pages only. Everything here sits on the tokens and
   components of style.css (wrap, eyebrow, btn, nav, reveal, footer);
   this file adds the parts a job page needs and the home page does not.
   ============================================================ */

:root{--cr-error:#F2A79A;--cr-ok:#E7CD88}
:root[data-theme="light"]{--cr-error:#9B2C1F;--cr-ok:#5D451A}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The fixed nav would otherwise cover the top of a section reached by anchor */
[id]{scroll-margin-top:calc(var(--nav-h) + 20px)}

/* ---------- Hero band: dark in BOTH themes, like the home hero, because the
   unscrolled nav above it is drawn in light-on-dark tokens. ---------- */
.cr-hero,
:root[data-theme="light"] .cr-hero{
  --bone:#F4EFE6;--bone-dim:#D6D1C8;--muted:#BDB7B0;--muted-2:#A9A39C;
  --gold-1:#A8843A;--gold-2:#C9A24B;--gold-3:#E7CD88;
  --gold-line:rgba(201,162,75,.28);--gold-faint:rgba(201,162,75,.12);
  --obsidian:#0A0A0F;--hair:rgba(244,239,230,.14);
  --grad-gold:linear-gradient(118deg,#A8843A 0%,#E7CD88 46%,#C9A24B 100%);
}
.cr-hero{
  position:relative;overflow:hidden;background:#0A0A0F;color:var(--bone);
  padding:calc(var(--nav-h) + 76px) 0 88px;
}
.cr-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;
  background-image:url("../images/texture-1200.jpg");
  background-image:image-set(url("../images/texture-1200.webp") type("image/webp"), url("../images/texture-1200.jpg") type("image/jpeg"));
  background-size:1100px auto;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
}
.cr-hero::after{
  content:"";position:absolute;left:50%;top:-30%;width:120%;height:90%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(201,162,75,.2),transparent 70%);
}
.cr-hero .wrap{position:relative;z-index:1}
.cr-hero h1{
  font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1.02;letter-spacing:-.01em;
  font-size:clamp(2.9rem,7.2vw,5.4rem);color:var(--bone);margin-top:22px;
}
.cr-h1-sub{
  display:block;margin-top:18px;max-width:none;font-family:'JetBrains Mono',monospace;font-weight:400;
  font-size:clamp(.78rem,1.5vw,.95rem);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-3);
}
.cr-intro{margin-top:30px;max-width:64ch;font-size:1.12rem;font-weight:300;color:var(--bone-dim)}
.cr-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.cr-terms{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;
  border-top:1px solid var(--hair);
}
.cr-terms li{padding:26px 22px 0 0}
.cr-terms li + li{padding-left:22px;border-left:1px solid var(--hair)}
.cr-terms b{
  display:block;font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.cr-terms span{display:block;margin-top:10px;font-size:.86rem;line-height:1.5;color:var(--muted)}

/* ---------- Section rhythm ---------- */
.cr-sec{padding:104px 0}
.cr-sec + .cr-sec{border-top:1px solid var(--hair)}
.cr-sec h2{max-width:20ch}
.cr-copy{max-width:66ch}
.cr-copy p{margin-top:20px;font-size:1.06rem;font-weight:300;color:var(--bone-dim)}
.cr-copy p strong,.cr-blunt strong{font-weight:500;color:var(--bone)}
.cr-two{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:start}

/* ---------- The money: worked examples ---------- */
.cr-examples{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px}
.cr-ex{
  border:1px solid var(--gold-line);border-radius:22px;padding:34px 34px 30px;background:var(--card-grad);
  position:relative;overflow:hidden;
}
.cr-ex-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cr-ex-kind{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2)}
.cr-ex-deal{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:2rem;line-height:1;color:var(--bone)}
.cr-ledger{list-style:none;margin-top:28px;display:grid;gap:18px}
.cr-ledger li{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:baseline}
.cr-ledger .lbl{font-size:.92rem;color:var(--bone-dim)}
.cr-ledger .amt{font-family:'JetBrains Mono',monospace;font-size:.98rem;color:var(--bone);text-align:right;white-space:nowrap}
.cr-ledger .bar{grid-column:1 / -1;height:6px;border-radius:6px;background:var(--hair);position:relative;overflow:hidden}
.cr-ledger .bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:6px;background:var(--muted-2)}
.cr-ledger .minus .amt{color:var(--muted)}
.cr-ledger .minus .bar::after{background:repeating-linear-gradient(135deg,var(--muted-2) 0 4px,transparent 4px 8px)}
.cr-ledger .you{margin-top:6px;padding-top:20px;border-top:1px solid var(--gold-line)}
.cr-ledger .you .lbl{color:var(--bone);font-weight:500}
.cr-ledger .you .amt{
  font-family:'Cormorant Garamond',serif;font-weight:600;font-size:2.7rem;line-height:1;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.cr-ledger .you .bar{height:10px}
.cr-ledger .you .bar::after{background:var(--grad-gold)}
.cr-ex-note{margin-top:24px;font-size:.95rem;font-weight:300;color:var(--muted)}
.cr-usd{margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- Tier ramp ---------- */
.cr-ramp{
  margin-top:24px;border:1px solid var(--hair);border-radius:22px;padding:34px;background:var(--card-grad);
  display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;
}
.cr-ramp h3,.cr-tiles h3{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.6rem;line-height:1.15;color:var(--bone)}
.cr-ramp p{margin-top:14px;font-size:1rem;font-weight:300;color:var(--bone-dim)}
.cr-ramp-fig{position:relative;padding:34px 0 40px}
.cr-ramp-fig svg{display:block;width:100%;height:auto;overflow:visible}
.cr-ramp-fig .slope{fill:none;stroke:url(#crGold);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.cr-ramp-fig .area{fill:url(#crFade)}
.cr-ramp-fig .mark{stroke:var(--gold-line);stroke-width:1.5;stroke-dasharray:4 6}
.cr-ramp-fig .base{stroke:var(--hair);stroke-width:1.5}
.cr-ramp-l{position:absolute;font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cr-ramp-l b{display:block;font-family:'Cormorant Garamond',serif;font-weight:600;font-size:2rem;letter-spacing:0;line-height:1;text-transform:none;color:var(--gold-3)}
.cr-ramp-l.lo{left:0;bottom:0}
.cr-ramp-l.hi{right:0;top:0;text-align:right}
.cr-ramp-l.at{left:63.3%;bottom:0;transform:translateX(-50%);text-align:center;white-space:nowrap}

/* ---------- Retainer, top closer, payout tiles ---------- */
.cr-tiles{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:24px}
.cr-tile{border:1px solid var(--hair);border-radius:22px;padding:30px;background:var(--card-grad)}
.cr-tile b{
  display:block;font-family:'Cormorant Garamond',serif;font-weight:600;font-size:3rem;line-height:1;margin-bottom:14px;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.cr-tile p{font-size:.98rem;font-weight:300;color:var(--bone-dim)}
.cr-close{margin-top:40px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.3;color:var(--bone);max-width:30ch}

/* ---------- Delivery times ---------- */
.cr-clock{border:1px solid var(--hair);border-radius:22px;background:var(--card-grad);overflow:hidden}
.cr-clock div{padding:28px 30px}
.cr-clock div + div{border-top:1px solid var(--hair)}
.cr-clock span{display:block;font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.cr-clock b{display:block;margin-top:8px;font-family:'Cormorant Garamond',serif;font-weight:600;font-size:2.3rem;line-height:1.05;color:var(--gold-3)}
.cr-markets{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cr-markets li{border:1px solid var(--gold-line);border-radius:100px;padding:9px 16px;font-size:.9rem;color:var(--bone-dim)}

/* ---------- What it takes ---------- */
.cr-blunt{border-left:2px solid var(--gold-2);padding:6px 0 6px 30px;max-width:62ch}
.cr-blunt p{font-size:1.14rem;font-weight:300;color:var(--bone-dim)}
.cr-blunt p + p{margin-top:18px}
.cr-blunt .first{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.2;color:var(--bone)}

/* ---------- Path ---------- */
.cr-path{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:52px;counter-reset:step}
.cr-path li{position:relative;padding:34px 28px 0 0;border-top:1px solid var(--gold-line);counter-increment:step}
.cr-path li::before{
  content:"";position:absolute;left:0;top:-7px;width:13px;height:13px;border-radius:50%;background:var(--grad-gold);
  box-shadow:0 0 0 5px var(--obsidian),0 0 0 6px var(--gold-line);
}
.cr-path li:nth-child(2){margin-top:-22px}
.cr-path li:nth-child(3){margin-top:-44px}
.cr-path span{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.cr-path b{display:block;margin-top:8px;font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.9rem;line-height:1.1;color:var(--bone)}

/* ---------- For / not for ---------- */
.cr-fit{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cr-fit-col{border-radius:22px;padding:36px;border:1px solid var(--hair);background:var(--card-grad)}
.cr-fit-col.yes{border-color:var(--gold-line)}
.cr-fit-col h2{font-size:clamp(1.7rem,2.6vw,2.2rem);max-width:none}
.cr-fit-col.no h2{color:var(--muted)}
.cr-fit-col ul{list-style:none;margin-top:26px;display:grid;gap:16px}
.cr-fit-col li{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;font-size:1.04rem;font-weight:300;color:var(--bone-dim)}
.cr-fit-col.no li{color:var(--muted)}
.cr-fit-col svg{width:22px;height:22px;margin-top:3px;flex:none}
.cr-fit-col.yes svg{color:var(--gold-2)}
.cr-fit-col.no svg{color:var(--muted-2)}

/* ---------- Apply ---------- */
.cr-need{margin-top:26px;padding-left:1.3em;display:grid;gap:10px;color:var(--bone-dim);font-weight:300;font-size:1.04rem;max-width:62ch}
.cr-need li::marker{font-family:'JetBrains Mono',monospace;font-size:.85rem;color:var(--gold-2)}
.cr-rule{margin-top:24px;max-width:62ch;font-weight:500;color:var(--bone)}
.cr-form{margin-top:52px;border:1px solid var(--gold-line);border-radius:24px;padding:40px;background:var(--card-grad)}
.cr-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 24px}
.cr-field{display:block;min-width:0}
.cr-field.wide{grid-column:1 / -1}
.cr-label{display:block;font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.cr-label i{font-style:normal;color:var(--gold-2)}
.cr-field input,.cr-field textarea{
  width:100%;border:1px solid var(--muted-2);border-radius:12px;background:var(--obsidian);color:var(--bone);
  font-family:'Space Grotesk',sans-serif;font-size:1rem;line-height:1.5;padding:14px 16px;min-height:50px;
  transition:border-color .2s,box-shadow .2s;
}
.cr-field textarea{min-height:180px;resize:vertical}
.cr-field input::placeholder,.cr-field textarea::placeholder{color:var(--muted-2)}
.cr-field input:focus,.cr-field textarea:focus{outline:none;border-color:var(--gold-2);box-shadow:0 0 0 3px var(--gold-faint)}
.cr-field input[type=file]{padding:11px 12px;cursor:pointer}
.cr-field input[type=file]::file-selector-button{
  margin-right:14px;border:1px solid var(--gold-line);border-radius:100px;background:none;color:var(--bone);
  font-family:'Space Grotesk',sans-serif;font-size:.88rem;padding:7px 14px;cursor:pointer;
}
.cr-hint{display:block;margin-top:8px;font-size:.84rem;color:var(--muted)}
.cr-count{display:block;margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.08em;color:var(--muted)}
.cr-count.ok{color:var(--cr-ok)}
.cr-error{display:block;margin-top:8px;font-size:.9rem;font-weight:500;color:var(--cr-error)}
.cr-error:empty{display:none}
.cr-field.has-error input,.cr-field.has-error textarea{border-color:var(--cr-error)}
.cr-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cr-submit{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:34px}
.cr-submit .btn[disabled]{opacity:.6;cursor:progress}
.cr-fine{font-size:.84rem;color:var(--muted);max-width:52ch}
.cr-form-error{margin-top:20px;font-weight:500;color:var(--cr-error)}
.cr-form-error:empty{display:none}
.cr-done{margin-top:52px;border:1px solid var(--gold-line);border-radius:24px;padding:56px 40px;background:var(--card-grad);text-align:center}
.cr-done svg{width:54px;height:54px;color:var(--gold-2);margin:0 auto 22px;display:block}
.cr-done h3{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1.1;color:var(--bone)}
.cr-done p{margin-top:14px;font-size:1.1rem;font-weight:300;color:var(--bone-dim)}
.cr-done:focus{outline:none}

/* ---------- Careers index ---------- */
.cr-roles{list-style:none;margin-top:48px;display:grid;gap:20px}
.cr-role{border:1px solid var(--gold-line);border-radius:22px;padding:34px;background:var(--card-grad);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.cr-role h2{font-size:clamp(1.8rem,3vw,2.4rem);max-width:none}
.cr-role p{margin-top:10px;font-weight:300;color:var(--bone-dim);max-width:60ch}
.cr-role-langs{display:flex;flex-wrap:wrap;gap:10px}
.cr-role-langs a{
  display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border:1px solid var(--gold-line);border-radius:100px;
  color:var(--bone);font-size:.92rem;transition:border-color .2s,color .2s;
}
.cr-role-langs a:hover,.cr-role-langs a:focus-visible{border-color:var(--gold-2);color:var(--gold-3)}
.cr-role-langs a.main{background:var(--grad-gold);color:var(--obsidian);border-color:transparent;font-weight:600}

/* ---------- Footer column that lists the language versions ---------- */
.cr-foot-note{margin-top:14px;font-size:.86rem;color:var(--muted)}

/* ---------- Responsive ---------- */
@media (max-width:1040px){
  .cr-terms{grid-template-columns:1fr 1fr}
  .cr-terms li{padding:24px 18px 24px 0;border-bottom:1px solid var(--hair)}
  .cr-terms li + li{padding-left:0;border-left:0}
  .cr-terms li:nth-child(even){padding-left:22px;border-left:1px solid var(--hair)}
  .cr-two{grid-template-columns:1fr;gap:44px}
  .cr-ramp{grid-template-columns:1fr;gap:20px}
  .cr-tiles{grid-template-columns:1fr}
}
@media (max-width:820px){
  .cr-examples,.cr-fit{grid-template-columns:1fr}
  .cr-path{grid-template-columns:1fr;gap:0;margin-top:40px;border-left:1px solid var(--gold-line);margin-left:6px}
  .cr-path li,.cr-path li:nth-child(2),.cr-path li:nth-child(3){margin-top:0;border-top:0;padding:0 0 30px 28px}
  .cr-path li::before{left:-7px;top:6px}
  .cr-path li:last-child{padding-bottom:0}
  .cr-role{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cr-hero{padding:calc(var(--nav-h) + 48px) 0 64px}
  .cr-sec{padding:76px 0}
  .cr-actions .btn{width:100%;justify-content:center}
  .cr-ex{padding:26px 22px 24px}
  .cr-ledger .you .amt{font-size:2.3rem}
  .cr-ramp,.cr-tile,.cr-fit-col{padding:26px 22px}
  .cr-form{padding:26px 20px}
  .cr-grid{grid-template-columns:1fr}
  .cr-done{padding:44px 22px}
  .cr-submit .btn{width:100%;justify-content:center}
  .cr-blunt{padding-left:20px}
  .cr-terms span{font-size:.82rem}
}
@media (prefers-reduced-motion: reduce){
  .cr-field input,.cr-field textarea,.cr-role-langs a{transition:none}
}