/* GC Job Applications — role cards with edge-glow hover + a blurred "coming soon" locked group. */

@keyframes gc-gja-reveal { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }

.gc-gja {
  --gja-ink: #14212B;
  --gja-blue: #5BA7DB;
  --gja-muted: #5A6B75;
  --gja-card-bg: #FFFFFF;
  /* Text-weight blue: --gja-blue is the accent for icons, rules and fills, and
     at 2.63:1 on the white card it is too pale to set small text in. Same hue
     (205deg), lower lightness, 4.94:1 on white.
     --gja-lock-ink is a literal rather than var(--gja-ink) on purpose: every
     token this widget exposes as an Elementor colour control gets its saved
     value baked onto the wrapper at 0,4,0, and on /careers/ --gja-ink is
     currently #FFFFFF (and --gja-card-bg #EE0808), so it cannot be trusted to
     mean "the dark one". These two names are ours alone. */
  --gja-blue-ink: #36769F;
  --gja-lock-ink: #14212B;
  --gja-border: #DCEEFA;
  --gja-tag-bg: #EAF3FA;
  --gja-glow-op: 0.45;
  position: relative;
  padding: 64px 48px;
  box-sizing: border-box;
}

.gc-gja *,
.gc-gja *::before,
.gc-gja *::after { box-sizing: border-box; }

.gc-gja [data-reveal] {
  opacity: 0;
  translate: 0 28px;
  animation: gc-gja-reveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .gc-gja [data-reveal] { opacity: 1; translate: none; animation: none; }
}

.gc-gja-inner {
  width: 100%;
}

.gc-gja-header { margin: 0 0 48px; }

.gc-gja-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gja-blue);
  margin: 0 0 14px;
}

.gc-gja-eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: .28;
}

.gc-gja-title {
  font-family: var(--gc-font-heading, 'Manrope', system-ui, sans-serif);
  font-weight: 700;
  color: var(--gja-ink);
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2.25rem);
  line-height: 1.14;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0 0 16px;
}

.gc-gja-lead {
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--gja-muted);
  max-width: 640px;
  margin: 0;
}

.gc-gja-cards {
  display: grid;
  grid-template-columns: repeat(var(--gja-cols, 3), 1fr);
  gap: 24px;
}

.gc-gja-card {
  position: relative;
  background: var(--gja-card-bg);
  border: 1px solid var(--gja-border);
  border-radius: var(--gc-radius-md, 16px);
  padding: 32px 28px;
  overflow: hidden;
  box-shadow: var(--gc-shadow-card, 0 10px 28px -8px rgba(20, 33, 43, 0.12));
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Everything but the lock badge/teaser lives in here, so a locked card can
   grey out its whole content in one go without a `filter` (which composites
   an entire subtree as one bitmap) washing out the teaser/lock too. */
.gc-gja-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Top accent sweep — hidden until hover, the theme's recurring brand cue. */
.gc-gja-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gja-blue), #6EC1E4);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  z-index: 1;
}

/* Idle breathing glow — a separate pseudo-element so it never fights the
   entrance reveal animation or the hover glow on the card itself. */
.gc-gja-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.gc-gja-card:nth-child(2)::after { animation-delay: 1.1s; }
.gc-gja-card:nth-child(3)::after { animation-delay: 2.3s; }

.gc-gja-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  color: var(--gja-blue);
  margin: 0 0 18px;
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.gc-gja-icon svg { width: 30px; height: 30px; display: block; }
.gc-gja-icon img { width: 30px; height: 30px; object-fit: contain; display: block; }
.gc-gja-icon .dashicons { width: 30px; height: 30px; font-size: 30px; line-height: 1; }

.gc-gja-dept {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gja-blue);
  margin: 0 0 6px;
}

.gc-gja-card h3 {
  position: relative;
  z-index: 1;
  font-family: var(--gc-font-heading, 'Manrope', system-ui, sans-serif);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.3;
  color: var(--gja-ink);
  margin: 0 0 14px;
  transition: color 0.25s ease;
}

.gc-gja-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.gc-gja-tag {
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--gja-ink);
  background: var(--gja-tag-bg);
  padding: 6px 14px;
  border-radius: var(--gc-radius-pill, 999px);
}

/* Lock badge — top-right of the card, outside .gc-gja-card-body so the
   locked greyscale filter never touches it. */
.gc-gja-lock {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  color: #fff;
}

.gc-gja-lock svg { width: 17px; height: 17px; }

.gc-gja-card p {
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gja-muted);
  margin: 0 0 24px;
  flex: 1;
}

.gc-gja-apply {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--gja-blue);
  border: none;
  border-radius: var(--gc-radius-sm, 10px);
  padding: 16px 20px;
  cursor: pointer;
  margin-top: auto;
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.gc-gja-apply svg { width: 16px; height: 16px; }
.gc-gja-apply:hover { background: color-mix(in srgb, var(--gja-blue) 82%, white); transform: translateY(-2px); }

@media (hover: hover) {
  .gc-gja-card:hover,
  .gc-gja-card:focus-within {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--gja-blue) 55%, var(--gja-border));
    box-shadow:
      0 30px 60px -22px rgba(20, 33, 43, 0.4),
      0 0 32px color-mix(in srgb, var(--gja-blue) calc(var(--gja-glow-op) * 100%), transparent);
  }
  .gc-gja-card:hover::before,
  .gc-gja-card:focus-within::before { transform: scaleX(1); }
  .gc-gja-card:hover .gc-gja-icon { transform: scale(1.12) rotate(-4deg); }
  .gc-gja-card:hover h3 { color: var(--gja-blue); }
}

/* ---- Locked / coming-soon roles — stay in the same grid as open roles,
   a real grey scrim (a solid div, not a filter/opacity fade — those wash out
   to near-invisible pale grey on a white card) sits over the whole content
   block. Lock badge + teaser render above the scrim so they stay crisp. No
   Apply button — removed entirely rather than restyled/disabled-looking. */
.gc-gja-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(90, 103, 115, 0.6);
  border-radius: inherit;
  pointer-events: none;
}

.gc-gja-card.is-locked::before,
.gc-gja-card.is-locked::after { display: none; }

/* A pill badge, not bare text floating on the grey scrim — plain blue text
   directly on the grey card read as too flat/low-contrast. */
.gc-gja-teaser {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  max-width: calc(100% - 48px);
  padding: 16px 26px;
  background: #fff;
  border-radius: var(--gc-radius-md, 16px);
  box-shadow: 0 16px 34px -12px rgba(20, 33, 43, 0.45);
  pointer-events: none;
}

.gc-gja-teaser strong {
  font-family: var(--gc-font-heading, 'Manrope', system-ui, sans-serif);
  font-weight: 800;
  font-size: 22px;
  color: var(--gja-blue);
}

@media (hover: hover) {
  .gc-gja-card.is-locked:hover,
  .gc-gja-card.is-locked:focus-within {
    transform: none;
    box-shadow: var(--gc-shadow-card, 0 10px 28px -8px rgba(20, 33, 43, 0.12));
    border-color: var(--gja-border);
  }
}

@media (max-width: 960px) {
  .gc-gja { padding: 52px 32px; }
  .gc-gja-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .gc-gja { padding: 42px 20px; }
  .gc-gja-header { margin-bottom: 28px; }
  .gc-gja-eyebrow { font-size: 10.5px; gap: 10px; letter-spacing: 0.16em; margin-bottom: 10px; }
  .gc-gja-title { font-size: 1.6rem; margin-bottom: 12px; }
  .gc-gja-lead { font-size: 15px; line-height: 1.5; }
  .gc-gja-cards { grid-template-columns: 1fr; gap: 14px; }
  .gc-gja-card {
    padding: 20px 18px;
    border-radius: var(--gc-radius-sm, 14px);
    box-shadow: 0 8px 20px -14px rgba(20, 33, 43, 0.25);
  }
  .gc-gja-card::after { animation: none; }
  .gc-gja-icon { margin-bottom: 12px; }
  .gc-gja-icon svg,
  .gc-gja-icon img { width: 24px; height: 24px; }
  .gc-gja-icon .dashicons { width: 24px; height: 24px; font-size: 24px; }
  .gc-gja-dept { font-size: 11px; letter-spacing: 0.04em; }
  .gc-gja-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
  .gc-gja-tags { gap: 6px; margin-bottom: 12px; }
  .gc-gja-tag { font-size: 11.5px; padding: 4px 10px; }
  .gc-gja-card p { font-size: 14.5px; line-height: 1.5; margin-bottom: 16px; }
  .gc-gja-apply { padding: 13px 18px; min-height: 44px; letter-spacing: 0.04em; }
  .gc-gja-lock { top: 16px; right: 16px; }
  .gc-gja-teaser { padding: 12px 20px; max-width: calc(100% - 32px); }
  .gc-gja-teaser strong { font-size: 18px; }
}

@media (max-width: 480px) {
  .gc-gja { padding: 36px 16px; }
  .gc-gja-title { font-size: 1.45rem; }
  .gc-gja-card { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .gc-gja-card { transition: none; }
  .gc-gja-card::after { animation: none; }
  .gc-gja-card:hover { transform: none; }
}

.gc-gja-header {
  max-width: 940px;
  margin: 0 auto 44px;
  text-align: center;
}

.gc-gja-header .gc-gja-lead { margin-inline: auto; }

.gc-gja-cards { gap: 16px; }

.gc-gja-card {
  border: 1px solid var(--gc-line, #E1E9EE);
  border-radius: var(--gc-radius-md, 16px);
  background: var(--gc-white, #fff);
  box-shadow: none;
  padding: 0;
  transition: border-color .3s ease;
}

.gc-gja-card::before,
.gc-gja-card::after { display: none; }

.gc-gja-card:hover {
  transform: none;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--gja-blue) 45%, transparent);
}

.gc-gja-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 26px 26px 24px;
}

/* Icon comes from the Gencore admin picker (icon_key or a custom upload).
   Bare glyph, no tinted chip. */
.gc-gja-card-body > .gc-gja-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 0 0 16px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--gja-blue);
  transition: transform .25s ease;
}

.gc-gja-card-body > .gc-gja-icon svg,
.gc-gja-card-body > .gc-gja-icon img { width: 24px; height: 24px; }
.gc-gja-card:hover .gc-gja-card-body > .gc-gja-icon { transform: translateY(-2px); }

.gc-gja-card-body > .gc-gja-dept {
  margin: 0 0 14px;
  padding-bottom: 12px;
  width: 100%;
  border-bottom: 1px solid var(--gc-line, #E1E9EE);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gja-blue-ink);
}

.gc-gja-card-body > h3 {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.24;
  letter-spacing: -.016em;
}

.gc-gja-card-body > p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--gja-muted);
}

.gc-gja-card-body > .gc-gja-tags {
  order: 4;
  margin: 18px 0 0;
  gap: 0 8px;
}

.gc-gja-card .gc-gja-tag {
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gja-muted);
}

.gc-gja-card .gc-gja-tag + .gc-gja-tag::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
}

/* Apply reads as a link, not a third filled button competing with the two
   primary CTAs further up the page. */
.gc-gja-card-body > .gc-gja-apply {
  order: 5;
  margin: 20px 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--gja-blue-ink);
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  min-height: 0;
}

.gc-gja-card-body > .gc-gja-apply svg {
  width: 15px;
  height: 15px;
  transition: transform .25s ease;
}

.gc-gja-card-body > .gc-gja-apply:hover {
  transform: none;
  background: none;
  color: var(--gja-blue-ink);
}

/* Apply Now, again and deeper. The widget exposes the link's colour as an
   Elementor control, and Elementor writes the saved value out as
   `.elementor-N .elementor-element.elementor-element-XXX .gc-gja-apply` --
   specificity 0,4,0, in a stylesheet loaded after this one, so the rule above
   never reaches the page. On /careers/ that baked value is the global primary,
   #6EC1E4, which is 2.02:1 on the white card. Five classes outranks it; there
   is no lower-specificity way to put a floor under the control. */
.gc-gja .gc-gja-cards .gc-gja-card .gc-gja-card-body .gc-gja-apply,
.gc-gja .gc-gja-cards .gc-gja-card .gc-gja-card-body .gc-gja-apply:hover {
  color: var(--gja-blue-ink);
}

.gc-gja-card:hover .gc-gja-apply svg { transform: translateX(4px); }

@media (max-width: 640px) {
  .gc-gja-header { text-align: left; margin-inline: 0; }
  .gc-gja-header .gc-gja-lead { margin-inline: 0; }
  .gc-gja-card-body { padding: 22px 20px 20px; }
}

/* Equal-height cards: the description takes the slack so the meta line and
   the apply link sit on the same baseline across the whole row. */
.gc-gja-cards { align-items: stretch; }
.gc-gja-card { height: 100%; }
.gc-gja-card-body > p { flex: 1; }

/* Locked roles. The state has to be legible in two directions at once: the
   role itself still has to read (it is the teaser -- these are the jobs opening
   next), and "Coming Soon" has to be the loudest thing on the card.

   The old treatment did neither. A 72% accent scrim over the white card
   resolved to rgb(137,192,229) and was painted OVER the card body, so the
   title came out at 2.22:1 and the department at 1.34:1; "Coming Soon" was set
   in #fff directly on that wash, 1.96:1, and landed across the middle of the
   description, so the one word that mattered was both unreadable and colliding
   with the text behind it.

   Now: the wash is a light tint that marks the card without swallowing it, and
   the padlock + status chip sit at the foot of the card, exactly where an open
   card puts Apply Now. Nothing overlaps, and the chip carries its own dark
   ground so it is readable whatever the tint does. */
.gc-gja-card.is-locked { background: var(--gc-white, #fff); --gja-lock-inset: 26px; }

.gc-gja-card.is-locked .gc-gja-scrim {
  display: block;
  background: color-mix(in srgb, var(--gja-blue) 30%, transparent);
}

/* Room at the foot for the padlock + chip, which are positioned out of flow. */
.gc-gja-card.is-locked .gc-gja-card-body { opacity: 1; padding-bottom: 68px; }

/* The department eyebrow is the one line the tint hurts: the accent blue over
   a tint of itself is near-invisible. On a locked card it takes the ink. */
.gc-gja-card.is-locked .gc-gja-dept { color: var(--gja-lock-ink); }

.gc-gja-card.is-locked .gc-gja-lock {
  top: auto;
  bottom: 24px;
  left: var(--gja-lock-inset);
  right: auto;
  width: 18px;
  height: 18px;
  transform: none;
  color: var(--gja-lock-ink);
  background: none;
  box-shadow: none;
  opacity: 1;
}

.gc-gja-card.is-locked .gc-gja-lock svg { width: 18px; height: 18px; }

.gc-gja-card.is-locked .gc-gja-teaser {
  top: auto;
  bottom: 16px;
  left: calc(var(--gja-lock-inset) + 28px);
  right: auto;
  transform: none;
  display: inline-block;
  width: auto;
  max-width: calc(100% - var(--gja-lock-inset) * 2 - 28px);
  margin: 0;
  padding: 6px 16px;
  text-align: center;
  background: color-mix(in srgb, var(--gja-blue) 45%, #101C25);
  border: 0;
  border-radius: var(--gc-radius-pill, 999px);
  box-shadow: 0 10px 22px -12px rgba(20, 33, 43, .6);
  color: #fff;
  font-family: var(--gc-font-heading, 'Manrope', system-ui, sans-serif);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
}

.gc-gja-card.is-locked .gc-gja-teaser strong {
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
}

/* Locked hover: the tint lifts and the chip rises, so a closed role still
   answers the pointer. */
.gc-gja-card.is-locked .gc-gja-scrim { transition: background-color .3s ease; }
.gc-gja-card.is-locked .gc-gja-lock,
.gc-gja-card.is-locked .gc-gja-teaser { transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; }

@media (hover: hover) {
  .gc-gja-card.is-locked:hover .gc-gja-scrim {
    background: color-mix(in srgb, var(--gja-blue) 22%, transparent);
  }
  .gc-gja-card.is-locked:hover .gc-gja-lock,
  .gc-gja-card.is-locked:hover .gc-gja-teaser { transform: translateY(-2px); }
}

/* The chip tracks the card body's own gutter, which narrows on small screens. */
@media (max-width: 640px) {
  .gc-gja-card.is-locked { --gja-lock-inset: 20px; }
  .gc-gja-card.is-locked .gc-gja-card-body { padding-bottom: 62px; }
}


/* Self-contained design tokens. Everything this widget needs is declared on
   its own root, so it styles itself wherever it is dropped: no page class, no
   body class, no shared stylesheet. The accent follows the widget's own
   Elementor colour control. */
.gc-gja {
	--gcab-accent: var(--gja-blue, #5BA7DB);
	--gcab-glow: var(--gja-blue, #5BA7DB);
	--gcab-line: var(--gc-line, #E1E9EE);
	--gcab-shadow: var(--gc-shadow-card, 0 10px 28px -8px rgba(20, 33, 43, 0.12));
	--gcab-radius: var(--gc-radius-md, 16px);
	--gcab-pad-y: 64px;
	--gcab-gutter: 48px;
	--gcab-eyebrow-size: 11.5px;
	--gcab-eyebrow-gap: 14px;
	--gcab-eyebrow-mb: 14px;
	--gcab-h1: clamp(2rem, 1.55rem + 2.1vw, 3rem);
	--gcab-h2: clamp(1.6rem, 1.35rem + 1vw, 2.25rem);
	--gcab-lead: 16px;
	--gcab-media-h: 420px;
	--gcab-tile-h: 236px;
	--gcab-staff-h: 230px;
	--gcab-glow-edge: 1px solid color-mix(in srgb, var(--gja-blue, #5BA7DB) 70%, transparent);
	--gcab-glow-ring:
		0 0 0 1px color-mix(in srgb, var(--gja-blue, #5BA7DB) 22%, transparent),
		0 0 34px color-mix(in srgb, var(--gja-blue, #5BA7DB) 48%, transparent),
		0 0 82px color-mix(in srgb, var(--gja-blue, #5BA7DB) 19%, transparent);
	--gcab-glow-ring-hover:
		0 0 0 1px color-mix(in srgb, var(--gja-blue, #5BA7DB) 34%, transparent),
		0 0 46px color-mix(in srgb, var(--gja-blue, #5BA7DB) 48%, transparent),
		0 0 102px color-mix(in srgb, var(--gja-blue, #5BA7DB) 24%, transparent);
}

@media (max-width: 640px) {
	.gc-gja {
		--gcab-pad-y: 42px;
		--gcab-gutter: 20px;
		--gcab-eyebrow-size: 10.5px;
		--gcab-eyebrow-gap: 10px;
		--gcab-eyebrow-mb: 12px;
		--gcab-h1: clamp(1.75rem, 7vw, 2.1rem);
		--gcab-h2: 1.6rem;
		--gcab-lead: 15px;
		--gcab-radius: 14px;
		--gcab-media-h: 240px;
		--gcab-tile-h: 200px;
		--gcab-staff-h: 190px;
	}
}

/* Eyebrow: one spec across every Gencore widget. Inter 11.5/600/.16em,
   uppercase, no trailing rule. */
.gc-gja-eyebrow {
	display: block;
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.4;
	margin-bottom: 14px;
}

.gc-gja-eyebrow::before,
.gc-gja-eyebrow::after { display: none; }

@media (max-width: 640px) {
	.gc-gja-cards { gap: 12px; }
	.gc-gja-card-body > h3 { font-size: 17.5px; }
	.gc-gja-card-body > p { font-size: 14px; line-height: 1.6; }
	.gc-gja-card-body > .gc-gja-dept { font-size: 10.5px; margin: 0 0 12px; padding-bottom: 10px; }
	.gc-gja-card-body > .gc-gja-tags { margin-top: 14px; }
	.gc-gja-card .gc-gja-tag { font-size: 12px; }
	.gc-gja-card-body > .gc-gja-apply { margin-top: 16px; font-size: 13.5px; }
}

@media (max-width: 640px) {
	.gc-gja-eyebrow { font-size: 10.5px; margin-bottom: 12px; }
}

@media (pointer: coarse) {
  .gc-gja-apply { min-height: 44px; }
  .gc-gja-card-body > .gc-gja-apply { min-height: 44px; align-items: center; }
}