:root { --mono: "JetBrains Mono", ui-monospace, monospace; }

/* === REVEAL === */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
.car-d1 { transition-delay: 0.12s; }
.car-d2 { transition-delay: 0.22s; }
.car-d3 { transition-delay: 0.32s; }

/* =====================
   HERO — FULL-BLEED VIDEO
   ===================== */
.car-hero {
  position: relative;
  width: 100%;
  height: 100vh;  /* fallback for browsers without svh */
  height: 100svh;
  overflow: hidden;
}

/* video fills the frame */
.car-hero__right {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.car-hero__right video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  will-change: transform;
}

/* layered overlays: flat dark + bottom-up gradient for text legibility */
.car-hero__right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(22,23,25,0.48);
  z-index: 1;
}

.car-hero__right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(22,23,25,0.72) 0%,
    rgba(22,23,25,0.18) 45%,
    transparent 100%
  );
  z-index: 2;
}

/* text panel anchored to lower-left */
.car-hero__left {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  padding: 0 64px 56px;
}

.car-hero__content {
  max-width: 560px;
}

.car-hero__h1 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 3.7vw, 70px);
  line-height: 1.0;
  color: #F4F4F4;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
  opacity: 0;
  animation: carFadeUp 0.9s ease 0.45s forwards;
}

.car-hero__h1 em {
  color: #00BDFF;
  font-style: normal;
  display: inline;
}

.car-hero__sub {
  font-family: 'Libre Franklin', sans-serif;
  font-size: clamp(17.5px, 1.05vw, 20px);
  line-height: 1.7;
  color: #B0B2B5;
  margin-bottom: 28px;
  opacity: 0;
  animation: carFadeUp 0.9s ease 0.6s forwards;
}

.car-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  opacity: 0;
  animation: carFadeUp 0.8s ease 0.75s forwards;
}

@keyframes carFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.car-hero__awards {
  position: absolute;
  bottom: 56px;
  right: 64px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 20px;
  opacity: 0;
  animation: carFadeUp 0.9s ease 0.75s forwards;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
/* Once the entry animation has played, js/careers.js settles the strip onto a
   static opacity — otherwise the crowding fade below would be fighting an
   animation that fills forwards, and every return would replay the 0.75s
   delayed entry mid-resize. */
.car-hero__awards.is-settled { animation: none; opacity: 1; }
/* Measured in js/careers.js: the copy panel is within 40px of the strip. */
.car-hero__awards.is-crowded {
  animation: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.car-hero__award {
  display: flex;
  align-items: center;
  gap: 14px;
}
.car-hero__award-logo {
  height: 60px;
  width: auto;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}
.car-hero__award-divider {
  width: 1px;
  height: 52px;
  background: rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.car-hero__award-title {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
.car-hero__award-sub {
  display: block;
  font-family: 'Libre Franklin', sans-serif;
  font-size: 13px;
  color: #F4F4F4;
  margin-top: 5px;
  line-height: 1.3;
}

/* =====================
   BUTTONS
   ===================== */
/* Primary/white CTAs use the global .btn system (styles.css) — the old
   page-local .car-btn-primary / .car-btn-white pair was retired. */

.car-btn-ghost {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F4F4F4;
  background: transparent;
  border: 1px solid rgba(244,244,244,0.25);
  padding: 20px 36px;
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.2s, color 0.2s;
  border-radius: 0 24px 24px 24px;
}

.car-btn-ghost:hover {
  border-color: #00BDFF;
  color: #00BDFF;
}

/* =====================
   WHY JG — CONVICTION PROSE
   ===================== */
.car-why {
  padding: 120px 0;
  background: #0d1012;
}

.car-why__wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

.car-why__label {
  position: sticky;
  top: 120px;
}

.car-why__ghost {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(120px, 14vw, 200px);
  line-height: 1;
  color: #F4F4F4;
  opacity: 0.04;
  display: block;
  letter-spacing: -0.02em;
  user-select: none;
  pointer-events: none;
}

.car-why__label-text {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 3vw, 46px);
  text-transform: uppercase;
  line-height: 1.05;
  color: #F4F4F4;
  margin-top: -8px;
}

.car-why__label-text em {
  color: #00BDFF;
  font-style: normal;
  display: block;
}

.car-why__bar {
  width: 40px;
  height: 3px;
  background: #00BDFF;
  margin-top: 20px;
}

.car-why__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.car-why__p {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 18px;
  line-height: 1.8;
  color: rgba(244,244,244,0.68);
}

.car-why__p strong { color: #F4F4F4; font-weight: 600; }

/* =====================
   OPEN ROLES
   ===================== */
.car-roles {
  padding: 120px 0;
  background: #0d1012;
}

.car-roles__wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 48px;
}

.car-roles__head { margin-bottom: 56px; }

.car-roles__h2 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 68px);
  text-transform: uppercase;
  color: #F4F4F4;
  line-height: 1;
}

.car-roles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.car-role {
  background: #161719;
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
  display: flex;
  flex-direction: column;
}

.car-role:hover { background: rgba(0,189,255,0.03); }

.car-role__dept {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #00BDFF;
  margin-bottom: 14px;
  display: block;
}

.car-role__title {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 32px);
  text-transform: uppercase;
  color: #F4F4F4;
  line-height: 1.05;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.car-role__desc {
  font-family: 'Libre Franklin', sans-serif;
  line-height: 1.7;
  color: #B0B2B5;
  margin-bottom: 24px;
  flex: 1;
}

.car-role__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.car-role__tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F4F4F4;
  border: 1px solid rgba(0,189,255,0.18);
  padding: 4px 12px;
}

.car-role__apply {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F4F4F4;
  background: rgba(244,244,244,0.06);
  border: 1.5px solid rgba(244,244,244,0.45);
  padding: 14px 28px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
  border-radius: 0 24px 24px 24px;
  align-self: flex-start;
}

.car-role__apply:hover {
  background: #00BDFF;
  border-color: #00BDFF;
  color: #161719;
  transform: translateY(-2px);
}

/* About + Apply share a row; About is the quieter twin (dimmer border, no
   fill) — same modal, it just starts at the job post instead of the form. */
.car-role__ctas {
  display: flex;
  gap: 10px;
  align-self: flex-start;
}
.car-role__ctas .car-role__apply { align-self: auto; }
.car-role__about {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244,244,244,0.75);
  background: transparent;
  border: 1.5px solid rgba(244,244,244,0.22);
  padding: 14px 28px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
  border-radius: 0 24px 24px 24px;
}
.car-role__about:hover {
  border-color: rgba(0,189,255,0.6);
  color: #F4F4F4;
  transform: translateY(-2px);
}

/* =====================
   ROLES SEE MORE
   ===================== */
.car-roles__more {
  margin-top: 48px;
  text-align: center;
}

/* =====================
   DAY TO DAY — FACTS STRIP
   ===================== */
.car-facts {
  padding: 100px 0;
  background: #0C4B5F;
  position: relative;
  overflow: hidden;
}


.car-facts__wrap {
  position: relative;
  z-index: 1;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.car-facts__left { text-align: center; }

.car-facts__big {
  display: block;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(100px, 14vw, 180px);
  line-height: 0.88;
  color: #F4F4F4;
  opacity: 0.12;
  letter-spacing: -0.02em;
  user-select: none;
}

.car-facts__num-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244,244,244,0.5);
  margin-top: 12px;
  display: block;
}

.car-facts__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.car-facts__item {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(244,244,244,0.78);
  padding-left: 22px;
  position: relative;
}

.car-facts__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 8px;
  background: #00BDFF;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* =====================
   AWARDS — COMPACT STRIP
   ===================== */
.car-awards {
  padding: 60px 0;
  background: #161719;
  border-top: 1px solid rgba(0,189,255,0.08);
}

.car-awards__wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 48px;
  text-align: center;
}

.car-awards__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.car-awards__logos img {
  height: 44px;
  width: auto;
  opacity: 0.55;
  filter: brightness(0) invert(1);
  transition: opacity 0.3s;
}

.car-awards__logos img:hover { opacity: 0.9; }

.car-awards__note {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 14px;
  color: #F4F4F4;
  line-height: 1.9;
}

/* =====================
   BOOKING CTA
   ===================== */
.car-cta {
  background: #0C4B5F;
  padding: 160px 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.car-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 48px,
    rgba(0,189,255,0.04) 48px,
    rgba(0,189,255,0.04) 49px
  );
}

.car-cta::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(0,189,255,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.car-cta__wrap {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 48px;
}

.car-cta__h2 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(56px, 9vw, 120px);
  line-height: 0.88;
  text-transform: uppercase;
  color: #F4F4F4;
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}

.car-cta__h2 em {
  color: #00BDFF;
  font-style: normal;
  display: block;
}

.car-cta__sub {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 18px;
  color: rgba(244,244,244,0.55);
  line-height: 1.65;
  margin-bottom: 48px;
}

.car-cta__btn {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #161719;
  background: #00BDFF;
  border: none;
  padding: 24px 72px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  border-radius: 0 28px 28px 28px;
}

.car-cta__btn:hover {
  background: #33CAFF;
  transform: translateY(-3px);
  box-shadow: 0 16px 56px rgba(0,189,255,0.35);
}

.car-cta__note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(244,244,244,0.25);
  margin-top: 28px;
  display: block;
}

/* =====================
   LEARNING & DEV
   ===================== */
.car-lnd {
  padding: 120px 0;
  background: #161719;
  border-top: 1px solid rgba(0,189,255,0.08);
}

.car-lnd__wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 48px;
}

.car-lnd__head {
  margin-bottom: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  align-items: stretch;
}

.car-lnd__head-text { grid-column: 1 / 3; padding-right: 48px; }

.car-lnd__h2 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 68px);
  text-transform: uppercase;
  color: #F4F4F4;
  line-height: 1;
}

.car-lnd__h2 em { color: #00BDFF; font-style: normal; }

.car-lnd__sub {
  font-family: 'Libre Franklin', sans-serif;
  line-height: 1.7;
  color: #B0B2B5;
  margin-top: 18px;
  max-width: 560px;
  font-style: italic;
}

.car-lnd__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: rgba(0,189,255,0.06);
}

.car-lnd__tile {
  background: #161719;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
}

.car-lnd__tile::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00BDFF, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.car-lnd__tile:hover::after { transform: scaleX(1); }

.car-lnd__tile-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: rgba(0,189,255,0.35);
  margin-bottom: 20px;
  display: block;
}

.car-lnd__tile-title {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 26px);
  text-transform: uppercase;
  color: #F4F4F4;
  line-height: 1.05;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.car-lnd__tile-body {
  font-family: 'Libre Franklin', sans-serif;
  line-height: 1.7;
  color: #B0B2B5;
}

.car-lnd__photo {
  margin: 0;
  grid-column: 3 / 5;
  position: relative;
  min-height: 220px;
  overflow: hidden;
}

.car-lnd__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

/* Photo carousel — three shots crossfade on a clock (js/careers.js);
   the dots report which is showing and click to jump. The scrim keeps
   them legible over a bright frame. */
.iy-carousel__img { opacity: 0; transition: opacity 1.1s ease; }
.iy-carousel__img.is-active { opacity: 1; }
.iy-carousel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
}
.iy-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.iy-dot {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(244, 244, 244, 0.45);
  border: 1px solid rgba(244, 244, 244, 0.6);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.iy-dot:hover { background: rgba(255, 255, 255, 0.75); }
.iy-dot.is-active {
  background: #00BDFF;
  border-color: #00BDFF;
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(0, 189, 255, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .iy-carousel__img { transition: none; }
}

.car-lnd__placeholder {
  margin-top: 40px;
  padding: 16px 24px;
  border: 1px dashed rgba(0,189,255,0.18);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.car-lnd__placeholder::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: rgba(0,189,255,0.35);
  border-radius: 50%;
}

.car-lnd__placeholder-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,189,255,0.35);
}

/* =====================
   OUR OFFICE — SPLIT SCREEN
   ===================== */
.car-tour {
  background: #0d1012;
  overflow: hidden;
}
.car-tour__inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 540px;
}

.car-tour__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
}

.car-tour__photo-a { grid-row: span 2; overflow: hidden; }
.car-tour__photo-b,
.car-tour__photo-c { overflow: hidden; }

.car-tour__photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.78;
  transition: transform 0.55s ease, opacity 0.35s;
}

.car-tour__photos img:hover {
  transform: scale(1.04);
  opacity: 1;
}

.car-tour__wrap {
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.car-tour__h2 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  text-transform: uppercase;
  color: #F4F4F4;
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}

.car-tour__h2 em {
  color: #00BDFF;
  font-style: normal;
  display: block;
}

.car-tour__sub {
  font-family: 'Libre Franklin', sans-serif;
  line-height: 1.65;
  color: #B0B2B5;
}

/* =====================
   CAPITAL REGION — SPLIT SCREEN
   ===================== */
.car-cr {
  background: #161719;
  overflow: hidden;
}
.car-cr__inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 540px;
}

.car-cr__wrap {
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.car-cr__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
}

.car-cr__photo-a { grid-row: span 2; overflow: hidden; }
.car-cr__photo-b,
.car-cr__photo-c { overflow: hidden; }

.car-cr__photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.78;
  transition: transform 0.55s ease, opacity 0.35s;
}

.car-cr__photos img:hover {
  transform: scale(1.04);
  opacity: 1;
}

.car-cr__h2 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 4.5vw, 64px);
  text-transform: uppercase;
  color: #F4F4F4;
  line-height: 1;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.car-cr__h2 em { color: #00BDFF; font-style: normal; }

.car-cr__body {
  font-family: 'Libre Franklin', sans-serif;
  line-height: 1.75;
  color: #B0B2B5;
  margin-bottom: 36px;
}

.car-cr__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 32px;
}

.car-cr__stat-num {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 3.5vw, 52px);
  color: #00BDFF;
  line-height: 1;
  display: block;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.car-cr__stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F4F4F4;
  display: block;
}

/* =====================
.car-cr__pts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(0,189,255,0.06);
}

.car-cr__pt {
  background: #0d1012;
  padding: 32px 36px;
  border-left: 3px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}

.car-cr__pt:hover {
  background: rgba(0,189,255,0.04);
  border-left-color: #00BDFF;
}

.car-cr__pt-title {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 24px);
  text-transform: uppercase;
  color: #F4F4F4;
  line-height: 1.05;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.car-cr__pt-body {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: #B0B2B5;
}

/* =====================
   BENEFITS
   ===================== */
.car-bene {
  padding: 100px 0;
  background: #161719;
  border-bottom: 1px solid rgba(0,189,255,0.07);
}

.car-bene__wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 48px;
}

.car-bene__head {
  margin-bottom: 56px;
}

.car-bene__h2 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 68px);
  text-transform: uppercase;
  color: #F4F4F4;
  line-height: 1;
}

.car-bene__ledger {
  border-top: 1px solid rgba(244,244,244,0.1);
}

.car-bene__row {
  display: grid;
  grid-template-columns: 48px 72px minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 28px;
  padding: 26px 12px 26px 0;
  border-bottom: 1px solid rgba(244,244,244,0.1);
  border-left: 2px solid transparent;
  transition: background 0.3s, border-left-color 0.3s;
}

.car-bene__row:hover {
  background: rgba(0,189,255,0.03);
  border-left-color: #00BDFF;
}

.car-bene__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #F4F4F4;
  text-align: center;
  transition: color 0.3s;
}

.car-bene__row:hover .car-bene__num { color: #00BDFF; }

.car-bene__glyph {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
}

/* reticle corner brackets */
.car-bene__glyph::before,
.car-bene__glyph::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(0,189,255,0.35);
  transition: border-color 0.3s, transform 0.3s;
}

.car-bene__glyph::before {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.car-bene__glyph::after {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

.car-bene__row:hover .car-bene__glyph::before {
  border-color: #00BDFF;
  transform: translate(-3px, -3px);
}

.car-bene__row:hover .car-bene__glyph::after {
  border-color: #00BDFF;
  transform: translate(3px, 3px);
}

.car-bene__glyph svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #F4F4F4;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s;
}

.car-bene__glyph svg .blp {
  stroke: rgba(0,189,255,0.6);
  transition: stroke 0.3s;
}

.car-bene__row:hover .car-bene__glyph svg { stroke: #00BDFF; }
.car-bene__row:hover .car-bene__glyph svg .blp { stroke: rgba(0,189,255,0.75); }

.car-bene__label {
  font-family: 'Anton', sans-serif;
  font-size: clamp(18px, 1.7vw, 26px);
  font-weight: 400;
  text-transform: uppercase;
  color: #F4F4F4;
  line-height: 1.15;
  transition: color 0.3s;
}

.car-bene__row:hover .car-bene__label { color: #F4F4F4; }

.car-bene__desc {
  font-weight: 300;
  color: #B0B2B5;
  line-height: 1.55;
  transition: color 0.3s;
}

.car-bene__row:hover .car-bene__desc { color: #F4F4F4; }

/* =====================
   RESPONSIVE
   ===================== */
@media (max-width: 960px) {
  .car-hero__left { padding: 0 32px 48px; }
  .car-hero__content { max-width: 100%; }

  .car-why { padding: 80px 0; }
  .car-why__wrap {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 32px;
  }
  .car-why__label { position: static; }

  .car-roles { padding: 80px 0; }
  .car-roles__wrap { padding: 0 32px; }
  .car-roles__grid { grid-template-columns: repeat(2, 1fr); }

  .car-facts { padding: 80px 0; }
  .car-facts__wrap {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 0 32px;
  }
  .car-facts__left { text-align: left; }

  .car-bene { padding: 80px 0; }
  .car-bene__wrap { padding: 0 32px; }
  .car-bene__row {
    grid-template-columns: 36px 56px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 20px;
    row-gap: 6px;
    padding-right: 0;
  }
  .car-bene__num { grid-row: 1 / 3; }
  .car-bene__glyph { grid-row: 1 / 3; }
  .car-bene__label { grid-column: 3; align-self: end; }
  .car-bene__desc { grid-column: 3; grid-row: 2; align-self: start; }

  .car-lnd { padding: 80px 0; }
  .car-lnd__wrap { padding: 0 32px; }
  .car-lnd__grid { grid-template-columns: repeat(2, 1fr); }
  .car-lnd__head { grid-template-columns: 1fr 1fr; }
  .car-lnd__head-text { grid-column: 1; padding-right: 32px; }
  .car-lnd__photo { grid-column: 2; min-height: 200px; }

  .car-tour__inner { grid-template-columns: 1fr; }
  /* Once these stack, the photo grid inherits the full column width while the
     copy beside it keeps its gutter — the photos ran flush to both screen
     edges under text that didn't. Match the copy's gutter instead; full-bleed
     on this site is for hero backgrounds, not section media. */
  .car-tour__photos { min-height: 360px; padding-inline: 32px; }
  .car-tour__wrap { padding: 56px 32px; }

  .car-cr__inner { grid-template-columns: 1fr; }
  .car-cr__photos { min-height: 360px; order: -1; padding-inline: 32px; }
  .car-cr__wrap { padding: 56px 32px; }

  .car-awards__wrap { padding: 0 32px; }

  .car-cta { padding: 100px 0; }
  .car-cta__h2 { font-size: clamp(48px, 11vw, 80px); }
  .car-cta__wrap { padding: 0 32px; }
}

@media (max-width: 600px) {
  .car-hero__left { padding: 0 24px 40px; }
  .car-hero__actions { flex-direction: column; }
  .car-hero__awards { display: none; }
  .car-hero__actions .btn { text-align: center; }

  .car-why__wrap { padding: 0 24px; }
  .car-roles__wrap { padding: 0 24px; }
  .car-roles__grid { grid-template-columns: 1fr; }
  .car-facts__wrap { padding: 0 24px; }
  .car-bene__wrap { padding: 0 24px; }
  .car-bene__row { grid-template-columns: 24px 48px 1fr; gap: 16px; row-gap: 6px; }
  .car-bene__glyph { width: 44px; height: 44px; }
  .car-bene__glyph svg { width: 26px; height: 26px; }

  .car-lnd__wrap { padding: 0 24px; }
  .car-lnd__grid { grid-template-columns: 1fr; }
  .car-lnd__head { grid-template-columns: 1fr; gap: 32px; }
  .car-lnd__head-text { grid-column: auto; padding-right: 0; }
  .car-lnd__photo { grid-column: auto; aspect-ratio: 2 / 1; min-height: 0; }

  .car-tour__wrap { padding: 48px 24px; }
  .car-tour__photos { padding-inline: 24px; }

  .car-cr__wrap { padding: 48px 24px; }
  .car-cr__photos { padding-inline: 24px; }

  .car-awards__wrap { padding: 0 24px; }
  .car-awards__logos { gap: 28px; }
  .car-cta__wrap { padding: 0 24px; }
  .car-cta::after { display: none; }
}

/* ============================================================
   LIVE ROLES (Greenhouse)
   Cards rendered from the ATS carry no description — every JG posting opens
   with the same mission boilerplate, so an excerpt would repeat itself across
   the grid. Without .car-role__desc (which held `flex: 1`) the tag row takes
   over pushing Apply to the bottom, keeping card feet aligned across the row.
   ============================================================ */
.car-role--live .car-role__tags { margin-top: auto; }

/* Tag modifiers were defined only in positions.css, where these cards used to
   live. Careers now renders the same live cards, so the location tag needs the
   same cyan treatment here or it silently falls back to the plain white tag. */
.car-role__tag--location {
  color: rgba(0,189,255,0.65);
  border-color: rgba(0,189,255,0.28);
}

.car-role__tag--external {
  color: rgba(255,181,71,0.75);
  border-color: rgba(255,181,71,0.28);
}

.car-roles__status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 24px;
}

.car-roles__status--error { color: #FF6B6B; text-transform: none; letter-spacing: 0.02em; }

/* Location reads as a subheader under the role title rather than competing in
   the tag row — it answers "where", while the tags answer "what kind of role". */
.car-role--live .car-role__title { margin-bottom: 8px; }

.car-role__loc {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(244,244,244,0.55);
  margin-bottom: 20px;
}

/* Internal = a role on the Jahnel Group team. External = a placement at a
   client or partner, already amber; internal takes the cyan house accent. */
.car-role__tag--internal {
  color: rgba(0,189,255,0.75);
  border-color: rgba(0,189,255,0.32);
}

/* Separator lines are drawn per-card rather than by a tint behind the grid gaps.
   The old approach painted the whole grid area, so any row that didn't fill
   completely (8 internal roles across 3 columns) left a visibly tinted empty
   cell once the section behind it went dark. A 1px ring on each card yields the
   same 2px lines between neighbours and nothing where there is no card — and it
   holds up at every breakpoint, unlike filler elements sized for 3 columns. */
/* Cards are tiles, not a lattice.
   While they sat flush with a 2px gap, every interior line was two cards'
   outlines meeting — reading double the weight of the perimeter, and thinner
   again beside an empty slot. Separating them lets each card own a complete
   border on all four sides, so nothing is shared and nothing can double. Holds
   at every breakpoint and with any number of ragged rows. */
.car-roles__grid,
.pos-grid {
  background: transparent;
  gap: 20px;
}

.car-role--live {
  box-shadow: 0 0 0 2px rgba(0,189,255,0.28);
  transition: background 0.3s, box-shadow 0.3s ease, transform 0.3s ease;
}

.car-role--live:hover {
  box-shadow: 0 0 0 2px rgba(0,189,255,0.6);
  transform: translateY(-3px);
}