/* ==========================================================
   careers.css — page-specific styles for careers.html
   Extracted from inline <style> — see site.css for shared rules
   ========================================================== */

/* ══════════════════════════════════════════
   CAREERS PAGE
══════════════════════════════════════════ */

/* ── HERO ── */
.cr-hero{
  min-height:100svh; background:var(--black);
  display:grid; grid-template-rows:1fr auto;
  position:relative; overflow:hidden;
  margin-top:var(--nav-h); padding:clamp(64px,9vw,120px) clamp(28px,6vw,96px) 0;
}
/* animated bg grid lines */
.cr-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(207,173,102,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(207,173,102,.04) 1px, transparent 1px);
  background-size:80px 80px;
  animation:gridDrift 30s linear infinite;
}
@keyframes gridDrift{from{background-position:0 0}to{background-position:80px 80px}}

/* ghost watermark */
.cr-hero-ghost{
  position:absolute; bottom:-60px; right:-40px;
  font-family:var(--serif); font-size:clamp(8rem,18vw,22rem); font-weight:700;
  color:rgba(207,173,102,.04); line-height:1; letter-spacing:-.04em;
  pointer-events:none; user-select:none; white-space:nowrap;
}

.cr-hero-content{
  max-width:860px; position:relative; z-index:2;
}
.cr-hero-kicker{
  font-family:var(--sans); font-weight:700; font-size:.62rem; letter-spacing:.35em; text-transform:uppercase;
  color:var(--gold); margin-bottom:32px; display:flex; align-items:center; gap:14px;
}
.cr-hero-kicker::before{content:''; width:28px; height:1px; background:var(--gold)}
.cr-hero-h{
  font-family:var(--serif); font-weight:400; color:var(--white);
  font-size:clamp(2.4rem,5vw,5rem); line-height:1.02; letter-spacing:-.03em;
  margin-bottom:32px;
}
.cr-hero-h em{
  color:var(--gold-soft); font-style:normal; display:block;
  font-size:clamp(2rem,4.5vw,5.5rem);
}
.cr-hero-sub{
  font-size:clamp(.95rem,1.2vw,1.1rem); color:rgba(255,255,255,.55);
  line-height:1.82; max-width:620px; margin-bottom:48px;
}
.cr-hero-cta{
  display:inline-flex; align-items:center; gap:12px;
  height:54px; padding:0 32px; border-radius:9999px;
  border:1.5px solid rgba(207,173,102,.45); color:var(--white);
  font-family:var(--sans); font-size:.92rem; font-weight:600;
  transition:all .3s var(--ease); background:transparent;
}
.cr-hero-cta:hover{background:var(--gold); border-color:var(--gold); color:var(--black)}
.cr-hero-cta svg{width:14px; height:14px; stroke:currentColor; stroke-width:2; fill:none}

/* Stats strip at bottom of hero */
.cr-hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.07);
  margin-top:64px; position:relative; z-index:2;
}
.cr-hero-stat{
  padding:clamp(24px,3vw,36px) clamp(16px,2vw,28px);
  border-right:1px solid rgba(255,255,255,.07);
}
.cr-hero-stat:last-child{border-right:none}
.cr-hero-stat-n{
  font-family:var(--serif); font-weight:400; color:var(--gold-soft);
  font-size:clamp(2rem,3vw,3.2rem); line-height:1; margin-bottom:6px;
  letter-spacing:-.02em;
}
.cr-hero-stat-l{
  font-family:var(--sans); font-weight:700; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.35);
}

/* ── VALUES ── */
.cr-values{background:var(--ivory); padding:clamp(80px,10vw,120px) 0}
.cr-values-inner{max-width:var(--maxw); margin:0 auto; padding:0 clamp(28px,5vw,64px)}
.cr-sec-kicker{
  font-family:var(--sans); font-weight:700; font-size:.62rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:20px; display:flex; align-items:center; gap:12px;
}
.cr-sec-kicker::before{content:''; width:24px; height:1px; background:var(--gold)}
.cr-sec-h{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(2rem,3.5vw,3.5rem); line-height:1.1; letter-spacing:-.02em; margin-bottom:0;
}
.cr-sec-h em{color:var(--gold); font-style:normal}

.cr-val-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px);
  margin-top:clamp(40px,5vw,64px);
}
.cr-val{
  background:var(--white); border:1px solid var(--hairline); border-radius:20px;
  padding:clamp(28px,3.5vw,44px); position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.cr-val:hover{transform:translateY(-5px); box-shadow:0 16px 48px rgba(37,37,37,.09)}
.cr-val::after{
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--gold),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.cr-val:hover::after{transform:scaleX(1)}
.cr-val-icon{
  width:52px; height:52px; border-radius:14px; margin-bottom:22px;
  background:linear-gradient(135deg,rgba(207,173,102,.14),rgba(207,173,102,.04));
  border:1px solid rgba(207,173,102,.2);
  display:flex; align-items:center; justify-content:center;
}
.cr-val-icon svg{width:22px; height:22px; stroke:var(--gold-deep); stroke-width:1.5px; fill:none}
.cr-val-h{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(1.1rem,1.4vw,1.3rem); line-height:1.2; margin-bottom:12px;
}
.cr-val-text{font-size:.88rem; color:var(--body); line-height:1.75}

/* ── IMAGE BAND ── */
.cr-band{
  background:var(--black); overflow:hidden; position:relative;
  height:clamp(280px,35vw,480px);
}
.cr-band img{
  width:100%; height:100%; object-fit:cover; object-position:bottom;
  opacity:.6; transition:transform 8s ease-in-out;
}
.cr-band:hover img{transform:scale(1.04)}
.cr-band-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(37,37,37,.35);
}
.cr-band-quote{
  font-family:var(--serif); font-weight:400; color:var(--white);
  font-size:clamp(1.4rem,3vw,2.8rem); text-align:center; line-height:1.25;
  letter-spacing:-.01em; max-width:800px; padding:0 clamp(24px,5vw,64px);
}
.cr-band-quote em{color:var(--gold-soft); font-style:normal}

/* ── JOBS ── */
.cr-jobs-sec{background:var(--white); padding:clamp(80px,10vw,120px) 0}
.cr-jobs-inner{max-width:var(--maxw); margin:0 auto; padding:0 clamp(28px,5vw,64px)}
.cr-jobs-head{
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end;
  margin-bottom:clamp(40px,5vw,56px);
}

/* Filter chips */
.cr-filter{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,40px);
}
.cr-chip{
  height:34px; padding:0 18px; border-radius:9999px;
  border:1.5px solid var(--hairline); background:transparent;
  font-family:var(--sans); font-size:.82rem; font-weight:500;
  color:var(--body); cursor:pointer; transition:all .2s var(--ease);
  white-space:nowrap;
}
.cr-chip:hover{border-color:var(--gold); color:var(--ink)}
.cr-chip.active{background:var(--gold); border-color:var(--gold); color:var(--white)}

/* Job count */
.cr-job-count{
  font-family:var(--sans); font-weight:700; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}

/* Job list */
.cr-job-list{display:flex; flex-direction:column; gap:0}
.cr-job{
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
  padding:clamp(22px,2.5vw,28px) 0;
  border-bottom:1px solid var(--hairline);
  cursor:pointer; transition:all .25s var(--ease);
  position:relative;
}
.cr-job::before{
  content:''; position:absolute; left:-clamp(28px,5vw,64px); right:-clamp(28px,5vw,64px);
  top:0; bottom:0; background:rgba(207,173,102,.04); opacity:0;
  transition:opacity .25s; pointer-events:none;
}
.cr-job:hover::before{opacity:1}
.cr-job:hover .cr-job-arr{transform:translateX(4px)}
.cr-job-info{}
.cr-job-tags{display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap}
.cr-job-tag{
  font-family:var(--sans); font-weight:700; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  padding:4px 10px; border-radius:9999px;
  background:rgba(207,173,102,.1); color:var(--gold-deep);
}
.cr-job-tag.dept{background:rgba(37,37,37,.06); color:var(--ink-soft)}
.cr-job-title{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(1.05rem,1.4vw,1.35rem); line-height:1.2; letter-spacing:-.01em;
  margin-bottom:8px;
}
.cr-job-meta{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.cr-job-meta-item{
  font-size:.8rem; color:var(--muted); display:flex; align-items:center; gap:5px;
}
.cr-job-meta-item svg{width:13px; height:13px; stroke:var(--muted); stroke-width:1.5px; fill:none; flex-shrink:0}
.cr-job-right{display:flex; align-items:center; gap:16px}
.cr-job-arr{
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--hairline);
  display:flex; align-items:center; justify-content:center;
  transition:all .3s var(--ease); flex-shrink:0;
}
.cr-job-arr svg{width:16px; height:16px; stroke:var(--ink); stroke-width:1.8px; fill:none}
.cr-job:hover .cr-job-arr{border-color:var(--gold); background:var(--gold)}
.cr-job:hover .cr-job-arr svg{stroke:var(--black)}

/* No results */
.cr-no-jobs{
  text-align:center; padding:64px 24px; color:var(--muted);
  font-size:.95rem; display:none;
}

/* ── JOB DRAWER ── */
.cr-drawer-backdrop{
  position:fixed; inset:0; background:rgba(37,37,37,.5);
  z-index:1900; opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease); backdrop-filter:blur(4px);
}
.cr-drawer-backdrop.open{opacity:1; pointer-events:all}
.cr-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(600px,96vw);
  background:var(--white); z-index:1950; overflow-y:auto;
  transform:translateX(100%); transition:transform .45s var(--ease);
  display:flex; flex-direction:column;
}
.cr-drawer.open{transform:translateX(0)}
.cr-drawer-header{
  padding:clamp(28px,4vw,44px) clamp(28px,4vw,44px) 0;
  position:sticky; top:0; background:var(--white); z-index:2;
  border-bottom:1px solid var(--hairline); padding-bottom:24px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
}
.cr-drawer-close{
  width:40px; height:40px; border-radius:50%; border:1.5px solid var(--hairline);
  background:transparent; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; margin-top:4px;
}
.cr-drawer-close:hover{background:var(--ink); border-color:var(--ink)}
.cr-drawer-close:hover svg{stroke:var(--white)}
.cr-drawer-close svg{width:16px; height:16px; stroke:var(--ink); stroke-width:2; fill:none}
.cr-drawer-title-wrap{}
.cr-drawer-dept{
  font-family:var(--sans); font-weight:700; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:8px;
}
.cr-drawer-title{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(1.4rem,2.2vw,2rem); line-height:1.15; letter-spacing:-.01em;
}
.cr-drawer-body{padding:clamp(28px,4vw,40px) clamp(28px,4vw,44px); flex:1}
.cr-drawer-meta{
  display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px;
}
.cr-drawer-badge{
  height:30px; padding:0 14px; border-radius:9999px;
  border:1.5px solid var(--hairline); font-size:.78rem; color:var(--body);
  display:flex; align-items:center; gap:6px;
}
.cr-drawer-badge svg{width:12px; height:12px; stroke:var(--muted); stroke-width:1.5px; fill:none}
.cr-drawer-section-h{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:1.05rem; margin-bottom:14px; margin-top:28px;
  display:flex; align-items:center; gap:10px;
}
.cr-drawer-section-h::after{content:''; flex:1; height:1px; background:var(--hairline)}
.cr-drawer-text{font-size:.9rem; color:var(--body); line-height:1.78; margin-bottom:16px}
.cr-drawer-list{
  list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:8px;
}
.cr-drawer-list li{
  font-size:.88rem; color:var(--body); line-height:1.6;
  padding-left:20px; position:relative;
}
.cr-drawer-list li::before{
  content:''; position:absolute; left:0; top:9px;
  width:6px; height:6px; border-radius:50%; background:var(--gold);
}
.cr-drawer-divider{height:1px; background:var(--hairline); margin:28px 0}

/* Apply form inside drawer */
.cr-apply-form{
  background:var(--ivory); border-radius:16px;
  padding:clamp(24px,3vw,36px); margin-top:28px;
}
.cr-apply-h{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:1.2rem; margin-bottom:4px;
}
.cr-apply-sub{font-size:.82rem; color:var(--muted); margin-bottom:22px}
.cr-apply-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.cr-apply-field{margin-bottom:12px}
.cr-apply-label{display:block; font-size:.76rem; font-weight:600; color:var(--ink); margin-bottom:5px; letter-spacing:.02em}
.cr-apply-input{
  width:100%; height:44px; padding:0 14px;
  border:1.5px solid var(--hairline); border-radius:9px;
  font-family:var(--sans); font-size:.88rem; color:var(--ink); background:var(--white);
  outline:none; transition:border .2s; box-sizing:border-box;
}
.cr-apply-input:focus{border-color:var(--gold)}
.cr-apply-input::placeholder{color:var(--muted)}
.cr-apply-select{
  width:100%; height:44px; padding:0 14px;
  border:1.5px solid var(--hairline); border-radius:9px;
  font-family:var(--sans); font-size:.88rem; color:var(--ink); background:var(--white);
  appearance:none; outline:none; cursor:pointer; transition:border .2s; box-sizing:border-box;
}
.cr-apply-select:focus{border-color:var(--gold)}
.cr-apply-file{
  width:100%; padding:12px 14px; border:1.5px dashed var(--hairline); border-radius:9px;
  font-family:var(--sans); font-size:.82rem; color:var(--muted); cursor:pointer;
  text-align:center; transition:border .2s; box-sizing:border-box; display:block;
  background:var(--white);
}
.cr-apply-file:hover{border-color:var(--gold); color:var(--gold-deep)}
.cr-apply-file input{display:none}
.cr-apply-textarea{
  width:100%; height:90px; padding:12px 14px; resize:vertical;
  border:1.5px solid var(--hairline); border-radius:9px;
  font-family:var(--sans); font-size:.88rem; color:var(--ink); background:var(--white);
  outline:none; transition:border .2s; box-sizing:border-box; line-height:1.6;
}
.cr-apply-textarea:focus{border-color:var(--gold)}
.cr-apply-textarea::placeholder{color:var(--muted)}
.cr-apply-submit{
  width:100%; height:48px; background:var(--black); color:var(--white);
  border:none; border-radius:10px; font-family:var(--sans); font-size:.92rem; font-weight:600;
  cursor:pointer; transition:all .3s var(--ease); margin-top:4px;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.cr-apply-submit:hover{background:var(--gold); color:var(--black)}
.cr-apply-submit svg{width:15px; height:15px; stroke:currentColor; stroke-width:2; fill:none}
.cr-apply-success{
  display:none; text-align:center; padding:24px 0;
}
.cr-apply-success-icon{
  width:56px; height:56px; border-radius:50%;
  background:rgba(108, 207, 102,.1); border:1.5px solid #7bcf66;
  margin:0 auto 12px; display:flex; align-items:center; justify-content:center;
}
.cr-apply-success-icon svg{width:24px; height:24px; stroke:#80d06b; stroke-width:1.5px; fill:none}
.cr-apply-success-h{font-family:var(--serif); font-size:1.2rem; color:var(--ink); margin-bottom:6px}
.cr-apply-success-text{font-size:.85rem; color:var(--muted); line-height:1.6}

/* ── PERKS SECTION ── */
.cr-perks-sec{background:var(--black); padding:clamp(80px,10vw,120px) 0; position:relative; overflow:hidden}
.cr-perks-sec::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 60% at 80% 50%, rgba(207,173,102,.05), transparent);
  pointer-events:none;
}
.cr-perks-inner{max-width:var(--maxw); margin:0 auto; padding:0 clamp(28px,5vw,64px)}
.cr-perks-head{margin-bottom:clamp(48px,6vw,72px)}
.cr-perks-head .cr-sec-kicker{color:var(--gold)}
.cr-perks-head .cr-sec-h{color:var(--white)}
.cr-perks-head .cr-sec-h em{color:var(--gold-soft)}
.cr-perks-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px);
}
.cr-perk{
  padding:clamp(24px,3vw,36px); border-radius:16px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  transition:all .3s var(--ease);
  opacity:1 !important; visibility:visible !important;
}
.cr-perk:hover{background:rgba(207,173,102,.07); border-color:rgba(207,173,102,.18); transform:translateY(-4px)}
.cr-perk-icon{
  width:46px; height:46px; border-radius:12px; margin-bottom:18px;
  background:rgba(207,173,102,.1); border:1px solid rgba(207,173,102,.18);
  display:flex; align-items:center; justify-content:center;
}
.cr-perk-icon svg{width:20px; height:20px; stroke:var(--gold); stroke-width:1.5px; fill:none}
.cr-perk-h{font-size:.92rem; font-weight:600; color:rgba(255,255,255,.9); margin-bottom:8px}
.cr-perk-text{font-size:.8rem; color:rgba(255,255,255,.45); line-height:1.7}

/* ── CTA BAND ── */
.cr-cta-band{
  background:var(--cream); padding:clamp(64px,8vw,96px) clamp(28px,5vw,64px);
  text-align:center;
}
.cr-cta-band-h{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(1.8rem,3.5vw,3.5rem); line-height:1.12; letter-spacing:-.02em;
  margin-bottom:20px;
}
.cr-cta-band-h em{color:var(--gold); font-style:normal}
.cr-cta-band-sub{font-size:clamp(.9rem,1.1vw,1.05rem); color:var(--body); line-height:1.7; margin-bottom:36px; max-width:560px; margin-left:auto; margin-right:auto}
.cr-cta-band-btn{
  display:inline-flex; align-items:center; gap:12px;
  height:54px; padding:0 36px; border-radius:9999px;
  background:transparent; color:var(--ink);
  font-family:var(--sans); font-size:.92rem; font-weight:600;
  transition:all .3s var(--ease); border:1.5px solid var(--ink); cursor:pointer;
}
.cr-cta-band-btn:hover{background:var(--ink); color:var(--white)}
.cr-cta-band-btn svg{width:14px; height:14px; stroke:currentColor; stroke-width:2; fill:none}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .cr-perks-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .cr-val-grid{grid-template-columns:repeat(2,1fr)}
  .cr-hero-stats{grid-template-columns:repeat(2,1fr)}
  .cr-hero-stat:nth-child(2){border-right:none}
  .cr-hero-stat:nth-child(3){border-top:1px solid rgba(255,255,255,.07)}
  .cr-hero-stat:nth-child(4){border-top:1px solid rgba(255,255,255,.07); border-right:none}
  .cr-jobs-head{grid-template-columns:1fr}
}
@media(max-width:640px){
  .cr-val-grid{grid-template-columns:1fr}
  .cr-hero-stats{grid-template-columns:1fr 1fr}
  .cr-perks-grid{grid-template-columns:1fr 1fr}
  .cr-apply-row{grid-template-columns:1fr}
  .cr-drawer{width:100%; top:auto; height:92svh; border-radius:20px 20px 0 0; bottom:0}
  .cr-drawer.open{transform:translateY(0)}
  .cr-drawer:not(.open){transform:translateY(100%)}
}
@media(max-width:320px){
  .cr-hero-h{font-size:1.8rem}
  .cr-hero-h em{font-size:1.5rem}
  .cr-step-list{grid-template-columns:1fr}
  .cr-perks-grid{grid-template-columns:1fr}
}
@media(max-width:380px){
  .cr-hero-h{font-size:2.2rem}
  .cr-hero-h em{font-size:1.8rem}
  .cr-perks-grid{grid-template-columns:1fr}
  .cr-hero-stats{grid-template-columns:1fr}
  .cr-hero-stat{border-right:none !important; border-top:1px solid rgba(255,255,255,.07)}
  .cr-hero-stat:first-child{border-top:none}
}