/* ============================================================
   ASCENDION · JOB DETAIL (Job Inner) — page styles
   Figma spec for this page: every heading uses the H4 type style,
   every paragraph/list/label uses the Body-XS type style. Values
   flow from tokens.css.
   Sections: Banner · Description (About / Role / Responsibilities /
             Skills / Salary / Benefits / Preferred Skills / Job
             details / About Ascendion) · Apply form · Footer
   ============================================================ */

/* ───────────────────────────── Reset ───────────────────────────── */
/* Pricing to the truth  */
.page-id-5058 .platform-ad__text h2 {
    color: var(--neutral-black);
    font-family: var(--typeface-primary);
    font-weight: var(--weight-plain-regular);
    font-size: var(--font-body_l);
    line-height: var(--lh-body_l);
    letter-spacing: -0.01em;
    margin-bottom: var(--space-32);
}

.page.page-id-5058 .platform-ad__content {
    grid-template-columns: 1fr 1fr;
	    gap: var(--responsive-spacing-20);
}

.page.page-id-5058 .platform-ad__content .platform-ad__image {
    height: 100%;
    position: relative;
}

.page.page-id-5058 .platform-ad__content .platform-ad__image:after {
    position: absolute;
    content: "";
    background: #f4f4f4;
    width: 20px;
    height: 20px;
    top: 0;
    right: 0;
}

.page.page-id-5058 .pe-work {
    padding-top: 0;
    position: relative;
}

.page.page-id-5058 .platform-ad {
    padding: var(--responsive-spacing-40) var(--space-60);
}
.page.page-id-5058 p.pe-stat__value {
    color: var(--brand-dark-teal);
    font-weight: bold;
}

.page.page-id-5058 .pe-work__inner:after {
    display: none;
}

.page.page-id-5058 section.pe-work:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--space-20);
    pointer-events: none;
    z-index: 5;
    background-image: linear-gradient(#000, #000), linear-gradient(#000, var(--pixel-bottom, #000));
    background-position: bottom left, bottom right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}

.page.page-id-5058 section.ecosystem:before {
    background-image: linear-gradient(#f4f4f4, #f4f4f4), linear-gradient(#f4f4f4, #f4f4f4);
}

.page.page-id-5058 section.ecosystem {
    background: #000;
    padding-bottom: var(--responsive-spacing-80);
}



.page.page-id-5058 .ecosystem__row:hover {
    background: var(--neutral-deep-black);
}

.page.page-id-5058 .ecosystem__row:hover p.heading_ecosystem {
    color: var(--brand-neural-mint);
}
.page.page-id-5058 .ecosystem::after {
    display: none;
}

.page.page-id-5058 section.fwt {
    padding-top: 0;
    background: #000;
    position: relative;
}

.page.page-id-5058 .fwt__inner {
    background: #1a1a1a;
    padding: 20px;
    padding-right: 10%;
    position: relative;
}

.page.page-id-5058 .fwt__text {
    color: #fff;
}

.page.page-id-5058 .fwt__inner:after {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    top: 0;
    right: 0;
    background: #000;
}
.page.page-id-5058 .sp-cta::before {
    background-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
}
.page.page-id-5058 .fwt:after {
      content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--space-20);
    pointer-events: none;
    z-index: 5;
    background-image: linear-gradient(#1a1a1a, #1a1a1a), linear-gradient(#1a1a1a, var(--pixel-bottom, #1a1a1a));
    background-position: bottom left, bottom right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}
/* Pricing to the truth  */
/* partner page  */
.page.page-id-4988 .promo-grid__card-media {
    aspect-ratio: auto;
    background: #fff;
    height: 50px;
    width: 100%;
    max-width: 400px;
    text-align: left;
}
.page.page-id-4988 .promo-grid__card-media img {
    width: auto;
    object-fit: contain;
    text-align: left;
}


.page.page-id-4988 a.cta-primary.cta-primary--solid-dark.promo-grid__card-cta span.cta-primary__arrow {
    background: #1a1a1a;
}

.page.page-id-4988 a.cta-primary.cta-primary--solid-dark.promo-grid__card-cta span.cta-primary__arrow span.pixel-arrow {
    color: #fff;
}


.page.page-id-4988 a.cta-primary.cta-primary--solid-dark.promo-grid__card-cta:hover span.cta-primary__arrow {
    background: var(--brand-neural-mint);
}
.page.page-id-4988 .promo-grid {
    background: var(--neutral-white);
    padding: var(--responsive-spacing-80) var(--margin-margin);
}

.page.page-id-4988 .promo-grid__head {
    margin: 0 auto;
    margin-bottom: var(--responsive-spacing-32);
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}
.page.page-id-4988 .promo-grid__inner {
    background: #fff;
    position: relative;
    grid-template-columns: repeat(3, 1fr);
}

.page.page-id-4988 .promo-grid__card {
       padding: var(--responsive-spacing-32);
}

.page.page-id-4988 .promo-grid__inner:after {
    position: absolute;
    content: "";
    background: #f4f4f4;
    width: 20px;
    height: 20px;
    top: 0;
    right: 0;
}
.page.page-id-4988 .fwt__text {
    margin: 0;
    padding-top: 0;
    font-family: var(--typeface-primary);
    font-size: var(--font-h3);
    line-height: var(--lh-h3);
    color: var(--neutral-white);
    width: 100%;
}

.page.page-id-4988 section.fwt {
    background: #1a1a1a;
    position: relative;
}

.page.page-id-4988 .bn__pixels {
    background: #1a1a1a;
}

.page.page-id-4988 section.fwt:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--space-20);
    pointer-events: none;
    z-index: 5;
    background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
    background-position: top left, top right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}

.page.page-id-4988 .sp-cta__headline {
    color: #000;
    max-width: 100%;
      margin-bottom: var(--responsive-spacing-32);
}

.page.page-id-4988 .acc-block__tile {
    flex: 0 0 50%;
    max-width: 50%;
    background: #f4f4f4;
}

.page.page-id-4988 .acc-block__tile img.acc-block__tile-img {
  inset: 30px;
  width: 90%;
  height: auto;
  margin: auto;
  object-fit: scale-down;
}

.acc-block__list {
    background: transparent !important;
}

.page.page-id-4988 .acc-block {
    background: transparent;
}

.page.page-id-4988 .acc-item--open .acc-item__name {
    color: var(--brand-dark-teal);
    font-weight: 600;
}

.page.page-id-4988 .acc-item--open .acc-item__icn-box {
    border: none;
}

.page.page-id-4988 .acc-item__body {
    color: #1a1a1a;
    padding: 0;
    width: 100%;
}
.page.page-id-4988 .standards__top {
    display: none;
}

.page.page-id-4988 .standards__logos {
    flex-direction: column;
}

.page.page-id-4988 p.standards__logo-label {
    display: none;
}

.page.page-id-4988 .standards__logo-row {
    flex-direction: column;
    justify-content: start;
    align-items: start;
}

.page.page-id-4988 section.standards {
    padding-top: 0;
}

.page.page-id-4988 .standards__inner {
    background: #f4f4f4;
    padding: 30px;
}

.page.page-id-4988 .standards__logo-panel {
    padding: 0;
	width:100%;
}

.page.page-id-4988 span.standards__pixel {
    display: none;
}

.page.page-id-4988 section.standards:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--space-20);
    pointer-events: none;
    z-index: 5;
    background-image: linear-gradient(#f4f4f4, #f4f4f4), linear-gradient(#f4f4f4, #f4f4f4);
    background-position: top left, top right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}
.page.page-id-4988 .acc-block__tile {
    position: relative;
}


.page.page-id-4988 .acc-block__tile:after {
    position: absolute;
    content: "";
    background: #fff;
    width: 20px;
    height: 20px;
    top: 0;
    right: 0;
}
.page.page-id-4988 section.promo-grid:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--space-20);
    pointer-events: none;
    z-index: 5;
    background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
    background-position: top left, top right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}

.page.page-id-4988 span.acc-item__name {
    color:var(--neutral-black);
}
.page.page-id-4988 section.promo-grid {
    position: relative;
    background: #f4f4f4;
}
.page.page-id-4988  .acc-item {
    border-bottom: 1px solid #cccccc;
}

@media (max-width: 768px) {
.acc-item__icn--plus, .acc-item__icn--minus {
    position: absolute;
    inset: 0;
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: opacity 200ms ease;
}
	.page.page-id-4988 .standards__logo-panel {
    overflow: clip;
}

.page.page-id-4988 .acc-block__tile {
    flex: 0 0 100%;
    max-width: 100%;
    height: 100%;
    background: #f4f4f4;
    padding: 10px 0;
}
	.page.page-id-4988 .acc-block__tile:after{
		width:10px;
		height:10px;
	}
.page.page-id-4988 .acc-block__tile img.acc-block__tile-img {
    position: relative;
    left: 0;
    top: 0;
}
	.page.page-id-5058 .platform-ad__content {
    grid-template-columns: 1fr;
    gap: var(--responsive-spacing-20);
}
	.page.page-id-5058 .platform-ad {
           padding: var(--responsive-spacing-32) var(--margin-margin);
}
	.page.page-id-5058 .platform-ad__content .platform-ad__image:after {
    position: absolute;
    content: "";
    background: #f4f4f4;
    width: 10px;
    height: 10px;
    top: 0;
    right: 0;
}
	   .page.page-id-5058 .pe-stat {
        flex: 0 0 90%;
        width: 95%;
        min-height: 140px;
        padding: var(--space-20) var(--space-16);
        scroll-snap-align: start;
    }
	.page.page-id-5058 .pe-work__dots {
    display: none;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    margin-top: var(--responsive-spacing-24);
}
	.page.page-id-5058 .ecosystem__row{
		min-height:auto;
		        border-bottom: 1px solid var(--neutral-charcoal);
		padding: var(--space-20) var(--space-20);
	}
	.page.page-id-5058 .ecosystem__right{
	 flex-direction: column;
	        padding-right: 20px;	
	}
	.page.page-id-5058   .ecosystem__dots {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 0;
		display:none;	
    }
	.page.page-id-5058 .fwt__inner:after {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    top: 0;
    right: 0;
    background: #000;
}
}


/* partner page */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  color: var(--neutral-black);
  font-family: var(--typeface-secondary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html { scroll-behavior: smooth; }
body { background: var(--neutral-white); }
img { max-width: 100%; }
a   { text-decoration: none; color: inherit; }
ul  { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }

/* ============================================================
   SITE NAV (shared glass bar)
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--responsive-spacing-24) var(--margin-margin);
  background-color: transparent;
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  transition: background-color 320ms ease, backdrop-filter 320ms ease, -webkit-backdrop-filter 320ms ease;
}
.page-template-job-inner .site-footer::before {
    display: none;
}
.page-template-job-inner main.jd-page {
    position: relative;
}

.page-template-job-inner main.jd-page:before {
    bottom: 0;
    background-image: linear-gradient(var(--pixel-bottom, #1a1a1a), #1a1a1a), linear-gradient(#1a1a1a, #1a1a1a);
    background-position: bottom left, bottom right;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: var(--space-20);
    pointer-events: none;
    z-index: 5;
    background-repeat: no-repeat, no-repeat;
    background-size: var(--space-20) var(--space-20);
}
.sp-eating::
    before, .sp-impact::before, .sp-capabilities::before, .sp-platforms::before, .sp-insights::before, .sp-cta::before, .sp-hero::after, .sp-eating::after, .sp-impact::after, .sp-capabilities::after, .sp-platforms::after, .sp-insights::after, .sp-cta::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: var(--space-20);
    pointer-events: none;
    z-index: 5;
    background-repeat: no-repeat, no-repeat;
    background-size: var(--space-20) var(--space-20);
}


aside#jd-apply:after {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    background-color: #fff;
    top: 0;
    right: 0;
}
.nav--scrolled {
  background-color: var(--neutral-deep-black-60);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
@media (min-width: 1024px) {
  .nav { padding-top: var(--responsive-spacing-12); padding-bottom: var(--responsive-spacing-12); }
}
.nav__logo { display: inline-flex; align-items: center; color: var(--neutral-white); }
.nav__logo svg { height: var(--space-32); width: auto; fill: currentColor; display: block; }
.nav__actions { display: flex; align-items: center; gap: var(--space-12); }
.nav__icon { display: inline-flex; align-items: center; padding: 0; background: none; border: 0; cursor: pointer; }
.nav__icon img, .nav__icon svg { display: block; }
.nav__icon .nav__icon-mobile { display: none; }
.nav__chip { transition: fill-opacity 320ms ease; }
.nav--scrolled .nav__chip { fill-opacity: 0; }

/* ============================================================
   SHARED ATOMS (pixel arrow + CTAs)
   ============================================================ */
.pixel-arrow { display: inline-block; width: var(--space-14); flex-shrink: 0; color: currentColor; }
.pixel-arrow svg { width: 100%; height: auto; fill: currentColor; display: block; }
.pixel-arrow--back { transform: rotate(180deg); }

.cta-primary { display: inline-flex; align-items: stretch; cursor: pointer; border: 0; background: none; padding: 0; font: inherit; }
.cta-primary__text {
  display: flex; align-items: center;
  padding: var(--space-12) var(--space-8) var(--space-12) var(--space-16);
  font-family: var(--typeface-secondary); font-weight: var(--weight-medium);
  font-size: var(--font-cta); line-height: var(--lh-cta); color: var(--neutral-white);
}
.cta-primary__arrow { display: flex; align-items: center; justify-content: center; padding: var(--space-14) var(--space-16); color: var(--neutral-white); transition: background 200ms ease, color 200ms ease; }
.cta-primary--solid-dark { background: var(--neutral-deep-black); }
.cta-primary--solid-dark:hover .cta-primary__arrow { background: var(--brand-neural-mint); color: var(--neutral-black); }

/* ============================================================
   TYPOGRAPHY — H4 headings · Body-XS content
   (Every heading on this page uses Display/H4; every paragraph,
   list item, label and value uses Body/Body-XS — per Figma spec.)
   ============================================================ */
.jd-h4 {
  margin: 0;
  font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular);
  font-size: var(--font-h4); line-height: var(--lh-h4);
}
.jd-body {
  margin: 0;
  font-family: var(--typeface-secondary); font-weight: var(--weight-regular);
  font-size: var(--font-body_xs); line-height: var(--lh-body_xs);
}

/* ============================================================
   PAGE / CONTAINER
   ============================================================ */
.jd-page { background: var(--neutral-white); }

/* ============================================================
   BANNER
   ============================================================ */
.jd-banner {
  position: relative; overflow: hidden;
  background: url(/wp-content/uploads/2026/07/img_banner_careers_inner.png);
  padding-top:var(--responsive-spacing-120) var(--margin-margin) var(--responsive-spacing-80);
	min-height:70dvh;
}
.jd-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.jd-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.55) 55%, #0a0a0a 100%);
  pointer-events: none;
}
.jd-banner__inner {
  position: relative; z-index: 1;
  display: flex; align-items: end; justify-content: space-between;
  gap: var(--responsive-spacing-40); flex-wrap: wrap;
}
.jd-banner__info { display: flex; flex-direction: column; gap: var(--space-8); }

.jd-back {
  display: inline-flex; align-items: center; gap: var(--space-8);
  color: var(--brand-neural-mint);
  font-family: var(--typeface-secondary); font-weight: var(--weight-medium);
  font-size: var(--font-body_xxs); line-height: var(--lh-body_xxs);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: var(--space-12);
  transition: opacity 150ms ease;
}
.jd-back:hover { opacity: 0.75; }
.jd-back .pixel-arrow { transform: rotate(180deg); }
.jd-back .pixel-arrow svg { fill: var(--brand-neural-mint); }
span.sp-hero__crumb-dot.big_dot {
    width: 16px;
    height: 16px;
}

.jd-banner__title { color: var(--neutral-white); margin-bottom: var(--space-4); }
.jd-banner__type {
    color: var(--neutral-medium-grey);
    letter-spacing: 0.06em;
    font-weight: var(--weight-regular);
    font-size: var(--font-body_s);
    line-height: var(--lh-body_s);
}.jd-banner__company { color: var(--neutral-light-grey); margin-bottom: var(--space-8); }
.jd-banner__meta { display: flex; flex-wrap: wrap; gap: var(--space-20); align-items:center; }
.jd-banner__location, .jd-banner__date { color: var(--neutral-light-grey); }


.jd-banner__actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-20); flex-shrink: 0; }
.jd-apply-btn { white-space: nowrap; }

.jd-share { display: flex; gap: var(--space-12); }
.jd-share__link {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
}
.jd-share__link:hover { border-color: var(--brand-neural-mint); color: var(--brand-neural-mint); }
.jd-share__link svg { width: 16px; height: 16px; }

/* ============================================================
   BODY LAYOUT
   ============================================================ */
.jd-content { padding: var(--responsive-spacing-60) var(--margin-margin) var(--responsive-spacing-80); }
.jd-body__inner {
  display: grid; grid-template-columns: 1fr 400px;
  gap: var(--responsive-spacing-60); align-items: start;
}

/* ── Description column ─────────────────────────────────────── */
.jd-description { min-width: 0; display: flex; flex-direction: column; }
.jd-block { display: flex; flex-direction: column; gap: var(--space-16); padding-top: var(--responsive-spacing-48); }
.jd-block:first-child { padding-top: 0; }
.jd-section-title {
  padding-top: var(--responsive-spacing-32); border-top: 1px solid var(--neutral-light-grey);
  color: var(--neutral-black);
}
.jd-section-title--first { border-top: 0; padding-top: 0; }
.jd-block .jd-body { color: var(--neutral-charcoal); }
.jd-body--lead {
    font-weight: var(--weight-medium);
    color: var(--neutral-black);
    font-size: var(--font-body_m);
    line-height: var(--lh-body_m);
}
.jd-block--experience { position: relative; }
.jd-pixel-quad { position: absolute; right: 0; bottom: 0; width: 44px; height: 44px; color: var(--brand-neural-mint); }
.jd-pixel-quad svg { width: 100%; height: 100%; fill: currentColor; }
.jd-pixel-quad rect:nth-child(2), .jd-pixel-quad rect:nth-child(3) { opacity: 0.55; }

.jd-fields { display: flex; flex-wrap: wrap; gap: var(--responsive-spacing-48); }
.jd-field { display: flex; flex-direction: column; gap: var(--space-8); }
.jd-field__label { color: var(--neutral-medium-grey); text-transform: uppercase; letter-spacing: 0.06em; }
.jd-field__value { color: var(--neutral-black); font-weight: var(--weight-medium); }

/* Card wrapper for "About the Role" — soft-grey box with a pixel corner-cut
   (same notch technique as aside#jd-apply:after, just a different corner). */
.jd-role-card {
  position: relative;
  background: var(--neutral-soft-grey);
  padding: var(--responsive-spacing-32);
}
.jd-role-card::after {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 20px; height: 20px;
  background: var(--neutral-white);
}
.jd-role-card--right::after { left: auto; right: 0; }
.jd-role-card__title { border-top: 0; padding-top: 0; }

.jd-list { display: flex; flex-direction: column; gap: var(--space-12); }
.jd-list li { position: relative; padding-left: var(--space-20); color: var(--neutral-charcoal); }
.jd-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; background: var(--brand-dark-teal); }
.jd-list--plain li::before { display: none; }
.jd-list--plain li { padding-left: 0; }

.jd-skills { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--responsive-spacing-16) var(--responsive-spacing-40); }

.jd-meta-item {
    display: flex;
    gap: var(--space-20);
    margin-bottom: 10px;
}
.jd-meta-item__label {
    color: var(--neutral-medium-grey);
    letter-spacing: 0.06em;
    width: 260px;
}.jd-meta-item__value { color: var(--neutral-black); font-weight: var(--weight-medium); }
.jd-meta-item__value a { color: var(--brand-dark-teal); }
.jd-meta-item__value a:hover { text-decoration: underline; }

/* ── Apply column ────────────────────────────────────────────── */
.jd-apply-col {  position: sticky; top: 100px;
  display: flex; flex-direction: column; gap: var(--space-8);
  background: var(--neutral-black);
  padding: var(--responsive-spacing-32); }

.jd-apply__title { color: var(--neutral-black); }
.jd-apply__location { color: var(--neutral-slate-grey); margin-bottom: var(--space-16); }
/* Decorative pattern — pulled out of flow so it sits outside/below the
   (sticky, dark) apply card instead of getting visually swallowed by it. */
.jd-apply__pattern {
  position: absolute; top: 100%; right: 0;
  margin-top: var(--space-16);
  width: 140px; max-width: 45%;
  display: block; z-index: 2; pointer-events: none;
}

.jd-form { display: flex; flex-direction: column; gap: var(--space-20); }
.jd-form__field { display: flex; flex-direction: column; gap: var(--space-8); }
.jd-form__label { color: var(--neutral-charcoal); font-weight: var(--weight-medium); }
.jd-form__input {
  width: 100%; padding: var(--space-12) var(--space-16);
  border: 1px solid var(--neutral-light-grey); background: var(--neutral-white);
  font-family: var(--typeface-secondary); font-size: var(--font-body_xs); line-height: var(--lh-body_xs);
  color: var(--neutral-black);
}
.jd-form__input:focus { outline: 2px solid var(--brand-dark-teal); outline-offset: 1px; }
.jd-form__submit { justify-content: center; }
.jd-form__submit .cta-primary__text { flex: 1; justify-content: center; }

.jd-dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-8);
  padding: var(--space-24) var(--space-16);
  border: 1px dashed var(--neutral-light-grey); background: var(--neutral-white);
  cursor: pointer; transition: border-color 150ms ease, background 150ms ease;
}
.jd-dropzone:hover, .jd-dropzone.is-dragover { border-color: var(--brand-dark-teal); background: var(--neutral-soft-grey); }
.jd-dropzone__icon { width: 28px; height: 28px; color: var(--brand-dark-teal); }
.jd-dropzone__text { color: var(--neutral-black); font-weight: var(--weight-medium); }
.jd-dropzone__hint { color: var(--neutral-medium-grey); }
.jd-dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.jd-checkbox { display: flex; align-items: flex-start; gap: var(--space-8); cursor: pointer; }
.jd-checkbox input { margin-top: 4px; flex-shrink: 0; accent-color: var(--brand-dark-teal); }
.jd-checkbox .jd-body { color: var(--neutral-charcoal); }
.jd-link { color: var(--brand-dark-teal); text-decoration: underline; }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .jd-body__inner { grid-template-columns: 1fr 340px; gap: var(--space-40); }
  .jd-meta-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 719px) {
  .jd-container { padding: 0 var(--space-20); }
  .jd-banner { padding-top: 112px; padding-bottom: var(--space-40); }
  .jd-banner__inner { flex-direction: column; gap: var(--space-24); }
  .jd-banner__actions { align-items: flex-start; width: 100%; }
  .jd-apply-btn { width: 100%; }
  .jd-apply-btn .cta-primary__text { flex: 1; }

  .jd-content { padding: var(--space-40) var(--space-20) var(--space-60); }
  /* mobile order (Figma): apply form first, then the job description */
  .jd-body__inner { display: flex; flex-direction: column; gap: var(--space-40); }
  .jd-apply-col { order: -1; }
  .jd-apply { position: static; padding: var(--space-24); }
  .jd-apply__pattern { position: static; width: 120px; margin: var(--space-16) 0 0 auto; }

  .jd-skills { grid-template-columns: 1fr; }
  .jd-fields { gap: var(--space-24); }

  .site-footer__top { flex-direction: column; gap: var(--responsive-spacing-48); }
  .site-footer__logo { height: 72px; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--responsive-spacing-40) var(--grid-gutter); }
}