/* Career sections use the portfolio's typography, dividers and animated buttons. */
#smooth-content { overflow-x: clip; }
.career-intro { max-width: 960px; line-height: 1.7; }
.at-about-area, .at-about-title { overflow: clip; }
.career-section { padding: 100px 0; }
.career-heading { margin-bottom: 50px; }
.career-heading h2 { max-width: 1000px; line-height: 1.05; text-wrap: balance; }
.career-capabilities { padding-bottom: 0; }
.career-capability-list { border-top: 1px solid var(--at-neutral-100); }
.career-capability {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  padding: 36px 0;
  border-bottom: 1px solid var(--at-neutral-100);
}
.career-index { color: var(--at-neutral-500); font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: -.05em; }
.career-capability h3, .career-path h3 { font-size: clamp(28px, 2.8vw, 42px); font-weight: 600; line-height: 1.12; letter-spacing: -.05em; margin: 0; }
.career-capability h3 { max-width: 420px; }
.career-capability-detail p, .career-path-description { font-size: 16px; line-height: 1.65; color: var(--at-neutral-500); }
.career-capability-detail > p:first-child { margin-bottom: 22px; max-width: 580px; }
.career-capability-detail .career-stack { margin: 0; color: var(--at-neutral-900); font-size: 13px; font-weight: 500; }
.career-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--at-neutral-100); border-bottom: 1px solid var(--at-neutral-100); }
.career-path { display: flex; flex-direction: column; padding: 40px 60px 40px 0; }
.career-path + .career-path { border-left: 1px solid var(--at-neutral-100); padding: 40px 0 40px 60px; }
.career-audience { color: var(--at-neutral-500); font-size: 13px; font-weight: 600; text-transform: uppercase; margin-bottom: 22px; }
.career-path h3 { max-width: 480px; margin-bottom: 24px; }
.career-path-description { max-width: 560px; margin-bottom: 0; }
.career-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: auto; padding-top: 32px; }
.career-primary { background: var(--at-neutral-900); color: var(--at-neutral-0); }
.career-primary:hover { background: var(--at-neutral-900); color: var(--at-neutral-0); }
.career-secondary { background: transparent; color: var(--at-neutral-900); border-radius: 0; padding: 12px 0; }
.career-secondary:hover { color: var(--at-neutral-900); }
.career-secondary .text-1, .career-secondary .text-2 { text-decoration: underline; text-underline-offset: 5px; }
.career-actions a:focus-visible { outline: 2px solid var(--at-theme-primary); outline-offset: 5px; }
.hero-availability, .hero-freelance { font-size: 16px; line-height: 1.6; }
.hero-freelance { opacity: .8; }
.hero-mobile-role { font-size: 20px; line-height: 1.5; margin-bottom: 24px; }
.hero-mobile-role span { display: block; font-size: 15px; margin-top: 6px; }
@media (max-width: 991.98px) {
  .career-capability { grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; }
  .career-path { padding-right: 30px; }
  .career-path + .career-path { padding-left: 30px; }
}
@media (max-width: 767.98px) {
  .career-section { padding: 64px 0; }
  .career-capabilities { padding-bottom: 0; }
  .career-heading { margin-bottom: 32px; }
  .career-capability { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 28px 0; }
  .career-index { font-size: 22px; padding-top: 3px; }
  .career-capability-detail { grid-column: 2; }
  .career-paths { grid-template-columns: 1fr; }
  .career-path, .career-path + .career-path { padding: 32px 0; border-left: 0; }
  .career-path + .career-path { border-top: 1px solid var(--at-neutral-100); }
  .career-path h3 { max-width: 480px; }
  .career-audience { margin-bottom: 18px; }
  .at-about-thumb-wrap .row.gx-80 { margin-right: -12px; margin-left: -12px; }
  .at-about-thumb-wrap .row.gx-80 > div { padding-right: 12px; padding-left: 12px; }
  .at-about-title { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .career-section .at-btn span span, .career-section .at-btn i svg { transition: none; }
}
