/* =========================================================
   DQMATE SINGLE JOB PAGE
========================================================= */

:root{
  --bg:#f6f3ec;
  --bg-2:#efeadf;
  --panel:#ffffff;

  --ink:#16181a;
  --ink-2:#3a3d40;
  --ink-3:#6b6f74;

  --rule:#d9d3c3;
  --rule-2:#c8c1ad;

  --green:#2c3e27;

  --serif:"Newsreader",serif;
  --sans:"Space Grotesk",sans-serif;
  --mono:"JetBrains Mono",monospace;
}

/* =========================================================
   PAGE
========================================================= */

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
}

/* =========================================================
   TOPBAR
========================================================= */

.dq-job-single-topbar{
  position:sticky;
  top:0;
  z-index:20;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:16px 40px;

  border-bottom:1px solid var(--rule);

  background:rgba(246,243,236,.92);

  backdrop-filter:blur(10px);
}

.dq-jobs-breadcrumb{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
}

.dq-jobs-actions{
  display:flex;
  gap:10px;
}

.dq-jobs-actions a,
.dq-jobs-actions button{

  height:52px;
  padding:0 24px;

  border-radius:999px;
  border:1px solid var(--rule-2);

  display:flex;
  align-items:center;
  justify-content:center;

  background:#fff;

  text-decoration:none;

  font-size:15px;
  font-weight:600;

  cursor:pointer;

  transition:.2s ease;
}

.dq-jobs-actions a:hover,
.dq-jobs-actions button:hover{

  border-color:var(--green);
  color:var(--green);
}


.dq-jobs-actions .is-dark{
  background:#111;
  color:#fff;
  border-color:#111;
}

.dq-jobs-actions .is-dark:hover{
  background:var(--green);
  border-color:var(--green);
  color:#fff;
}

.share-btn{

  background:#111 !important;
  color:#fff !important;
  border-color:#111 !important;

}

.share-btn:hover{

  background:var(--green) !important;
  border-color:var(--green) !important;
  color:#fff !important;

}

/* =========================================================
   SINGLE PAGE
========================================================= */

.dq-job-single{
  max-width:1200px;
  margin:0 auto;
  padding:40px;
}

/* =========================================================
   HERO
========================================================= */

.dq-job-hero{
  display:flex;
  gap:24px;
  align-items:flex-start;

  padding-bottom:40px;
  margin-bottom:40px;

  border-bottom:1px solid var(--rule);
}

.dq-job-logo{
  width:54px;
  height:54px;

  border-radius:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#8d5a32;
  color:#fff;

  font-family:var(--serif);
  font-size:28px;
  font-weight:700;
}

.dq-job-logo.lg{
  width:72px;
  height:72px;
  font-size:34px;
}

.dq-job-hero-content{
  flex:1;
}

.dq-job-meta-top{
  display:flex;
  align-items:center;
  gap:10px;

  margin-bottom:12px;

  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;

  color:var(--green);
}

.live-dot{
  width:7px;
  height:7px;

  border-radius:999px;

  background:var(--green);
}

.dq-job-single-title{
  margin:0 0 14px;

  font-family:var(--serif);
  font-size:56px;
  line-height:1;
  font-weight:600;
  letter-spacing:-.04em;
}

.dq-job-company.large{
  margin-bottom:18px;

  font-size:17px;
  color:var(--ink-2);
}

.dq-job-company strong{
  color:var(--ink);
}

/* =========================================================
   TAGS
========================================================= */

.dq-job-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.dq-job-tags span{
  height:32px;
  padding:0 12px;

  border-radius:999px;
  border:1px solid var(--rule-2);

  display:flex;
  align-items:center;
  justify-content:center;

  background:#fff;

  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* =========================================================
   LAYOUT
========================================================= */

.dq-job-layout{
  display:grid;

  grid-template-columns:
  minmax(0,720px)
  240px;

  justify-content:space-between;

  gap:120px;

  align-items:start;
}
/* =========================================================
   CONTENT
========================================================= */

.dq-job-content section{
  margin-bottom:44px;
}

.dq-job-content h2{
  margin:0 0 16px;

  font-family:var(--serif);
  font-size:28px;
  font-weight:600;
  letter-spacing:-.02em;
}

.dq-job-content p{
  margin:0;

  max-width:760px;

  color:var(--ink-2);

  font-size:17px;
  line-height:1.8;
}

.dq-job-content ul{
  margin:0;
  padding:0;

  list-style:none;
}

.dq-job-content li{
  position:relative;

  padding-left:24px;
  margin-bottom:14px;

  color:var(--ink-2);

  font-size:17px;
  line-height:1.7;
}

.dq-job-content li::before{
  content:"";

  position:absolute;
  left:0;
  top:11px;

  width:7px;
  height:7px;

  border-radius:999px;

  background:var(--green);
}

/* =========================================================
   COMPANY CARD
========================================================= */

.dq-company-card{
  padding:28px;

  border:1px solid var(--rule-2);
  border-radius:24px;

  background:#fff;
}

.dq-company-top{
  display:flex;
  align-items:center;
  gap:16px;

  margin-bottom:20px;
}

.dq-company-top h3{
  margin:0 0 4px;

  font-family:var(--serif);
  font-size:28px;
}

.dq-company-meta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--ink-3);
}

.dq-company-card p{
  margin-bottom:22px;
}

.dq-company-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;

  padding-top:18px;

  border-top:1px dashed var(--rule);
}

.dq-company-stats span{
  display:block;

  margin-bottom:6px;

  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--ink-3);
}

.dq-company-stats strong{
  font-size:15px;
}

/* =========================================================
   SIDEBAR
========================================================= */

.dq-job-sidebar{
  position:sticky;
  top:40px;
}

.dq-job-apply-card{

  padding:0;

  border:0;
  border-radius:0;

  background:transparent;

}

/* =========================================================
   DQMATE SINGLE JOB PAGE
========================================================= */

:root{

  --bg:#f6f3ec;
  --bg-2:#efeadf;
  --paper:#fffdf9;

  --ink:#16181a;
  --ink-2:#43464b;
  --ink-3:#7c8087;

  --rule:#ddd6c7;
  --rule-2:#cfc7b7;

  --green:#2c3e27;
  --green-2:#355030;

  --serif:"Newsreader",serif;
  --sans:"Space Grotesk",sans-serif;
  --mono:"JetBrains Mono",monospace;

}

/* =========================================================
   PAGE
========================================================= */

body{

  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);

}

/* =========================================================
   TOPBAR
========================================================= */

.dq-job-single-topbar{

  position:sticky;
  top:0;
  z-index:40;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:16px 40px;

  border-bottom:1px solid var(--rule);

  background:rgba(246,243,236,.92);

  backdrop-filter:blur(10px);

}

.dq-jobs-breadcrumb{

  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--ink-3);

}

.dq-jobs-breadcrumb a{

  color:inherit;
  text-decoration:none;

}

.dq-jobs-actions{

  display:flex;
  gap:10px;

}

.dq-jobs-actions a{

  height:52px;
  padding:0 24px;

  border-radius:999px;
  border:1px solid #111;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#111;
  color:#fff;

  text-decoration:none;

  font-size:15px;
  font-weight:600;

  transition:.2s ease;

}

.dq-jobs-actions a:hover{

  background:var(--green);
  border-color:var(--green);

}

/* =========================================================
   ROLEBRIEF WRAPPER
========================================================= */

.dq-rolebrief{

  width:100%;

}

.rb-shell{

  max-width:1180px;
  margin:0 auto;

  padding:56px 40px 80px;

}

/* =========================================================
   HERO
========================================================= */

.rb-hero{

  padding-bottom:54px;
  border-bottom:1px solid var(--rule);

}

.rb-kicker{

  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;

  margin-bottom:28px;

  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;

  color:#916442;

}

.rb-ksep{

  width:16px;
  height:1px;

  background:var(--rule-2);

}

.rb-live{

  display:flex;
  align-items:center;
  gap:10px;

  color:var(--green-2);

}

.rb-pulse{

  width:7px;
  height:7px;

  border-radius:999px;

  background:var(--green);

}

.rb-title{
  margin:0 0 20px;
  font-family:var(--serif);
  font-size:56px;
  line-height:1;
  font-weight:600;
  letter-spacing:-.04em;
  max-width:900px;
}

.rb-lede{

  margin:0;

  max-width:760px;

  color:var(--ink-2);

  font-size:17px;
  line-height:1.8;

  font-family:var(--sans);

}
.rb-company{

  margin-top:34px;

  color:var(--ink-2);

  font-size:16px;

}

.rb-company strong{

  color:var(--ink);
  font-weight:600;

}

/* =========================================================
   FACT STRIP
========================================================= */

.rb-facts{

  display:flex;
  flex-wrap:wrap;

  margin-top:46px;

  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--rule);

}

.rb-fact{

  padding:20px 30px 20px 0;
  margin-right:30px;

  border-right:1px solid var(--rule);

}

.rb-fact:last-child{

  border-right:0;
  margin-right:0;

}

.rb-fk{

  margin-bottom:8px;

  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--ink-3);

}

.rb-fv{

  font-size:15px;
  font-weight:600;

  color:var(--ink);

}

.rb-comp .rb-fv{

  font-family:var(--serif);
  font-size:24px;
  font-weight:500;
  letter-spacing:-.02em;

}

/* =========================================================
   LAYOUT
========================================================= */

.rb-layout{

  display:grid;

  grid-template-columns:
  minmax(0,1fr)
  280px;

  gap:80px;

  align-items:start;

  padding-top:56px;

}

/* =========================================================
   ARTICLE
========================================================= */

.rb-article{

  max-width:700px;

}

.rb-sec{

  display:grid;

  grid-template-columns:60px 1fr;

  margin-bottom:54px;

}

.rb-num{

  padding-top:6px;

  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;

  color:var(--ink-3);

}

.rb-sec h2{

  margin:0 0 18px;

  font-family:var(--serif);
  font-size:30px;
  line-height:1.1;
  font-weight:500;
  letter-spacing:-.03em;

}

.rb-body p{

  margin:0;

  color:var(--ink-2);

  font-size:17px;
  line-height:1.9;

}

#brief-text{

  white-space: pre-line;

}


.rb-lead .rb-body p:first-letter{

  float:left;

  padding:10px 12px 0 0;

  font-family:var(--serif);
  font-size:70px;
  line-height:.8;
  font-weight:500;

  color:var(--ink);

}

.rb-body ul{

  margin:0;
  padding:0;

  list-style:none;

}

.rb-body li{

  position:relative;

  margin-bottom:16px;
  padding-left:24px;

  color:var(--ink-2);

  font-size:17px;
  line-height:1.8;

}

.rb-body li:last-child{

  margin-bottom:0;

}

.rb-body li::before{

  content:"";

  position:absolute;
  left:0;
  top:13px;

  width:8px;
  height:1px;

  background:var(--green);

}

/* =========================================================
   STICKY SIDEBAR
========================================================= */

.rb-rail{

  position:sticky;
  top:120px;

}

.rb-colophon{

  border-top:2px solid var(--ink);

  padding-top:22px;

}

.rb-badge{

  display:flex;
  align-items:center;
  gap:8px;

  margin-bottom:18px;

  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;

  color:var(--green-2);

}

.rb-bdot{

  width:6px;
  height:6px;

  border-radius:999px;

  background:var(--green);

}

.rb-sidebar-salary{

  font-family:var(--serif);
  font-size:38px;
  line-height:1;
  font-weight:500;
  letter-spacing:-.03em;

}

.rb-list{

  display:flex;
  flex-direction:column;

  margin:26px 0;

}

.rb-row{

  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  gap:20px;

  padding:14px 0;

  border-bottom:1px solid var(--rule);

}

.rb-k{
  white-space:nowrap;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;

  color:var(--ink-3);

}

.rb-v{

  text-align:right;

  font-size:14px;
  font-weight:600;

  color:var(--ink);

}

.rb-apply{

  width:100%;
  height:58px;

  border-radius:0;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#111;
  color:#fff !important;

  text-decoration:none;

  font-size:15px;
  font-weight:600;

  transition:.2s ease;

}

.rb-apply:hover{

  background:var(--green);

}

/* =========================================================
   RELATED
========================================================= */

.rb-more{

  margin-top:90px;

  border-top:1px solid var(--ink);

  background:var(--bg-2);

}

.rb-more-inner{

  padding:50px 40px 70px;

}

.rb-more h3{

  margin:0 0 8px;

  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;

  color:var(--ink-3);

}

.rb-more-title{

  margin-bottom:30px;

  font-family:var(--serif);
  font-size:32px;
  letter-spacing:-.03em;
  font-weight:500;

}

.rb-related{

  display:flex;
  flex-direction:column;

}

.rb-related-row{

  display:grid;

  grid-template-columns:
  50px
  1fr
  auto;

  gap:24px;

  align-items:center;

  padding:24px 0;

  border-top:1px solid var(--rule);

  text-decoration:none;

  transition:.2s ease;

}

.rb-related-row:hover{

  padding-left:10px;

}

.rb-related-num{

  font-family:var(--mono);
  font-size:12px;

  color:var(--ink-3);

}

.rb-related-role{

  font-family:var(--serif);
  font-size:24px;
  line-height:1.2;
  letter-spacing:-.02em;

  color:var(--ink);

}

.rb-related-company{

  margin-top:6px;

  color:var(--ink-3);

  font-size:14px;

}

.rb-related-salary{

  font-family:var(--mono);
  font-size:14px;
  font-weight:600;

  color:var(--ink);

}

.rb-empty{

  padding:30px 0;

  color:var(--ink-3);

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

  .rb-layout{

    grid-template-columns:1fr;

    gap:50px;

  }

  .rb-rail{

    position:static;

  }

}

@media(max-width:768px){

  .dq-job-single-topbar{

    padding:14px 20px;

  }

  .rb-shell{

    padding:36px 20px 60px;

  }

  .rb-title{

    font-size:48px;

  }

  .rb-lede{

    font-size:20px;

  }

  .rb-facts{

    flex-direction:column;

  }

  .rb-fact{

    width:100%;

    margin-right:0;
    padding:16px 0;

    border-right:0;
    border-bottom:1px solid var(--rule);

  }

  .rb-sec{

    grid-template-columns:1fr;

  }

  .rb-num{

    margin-bottom:10px;

  }

  .rb-more-inner{

    padding:40px 20px 60px;

  }

  .rb-related-row{

    grid-template-columns:
    40px
    1fr;

  }

  .rb-related-salary{

    grid-column:2;

    margin-top:8px;

  }

}