/* ============================================
   CONTACT PAGE STYLES
   ============================================ */

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

@keyframes ctEyebrowIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ctHeadingIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ctLeadIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ctButtonsIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ctVisualIn {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ctCardIn {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ctConnIn {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes ctVertConnIn {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes ctStepIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.contact-hero {
  padding: 100px 0 90px;
  background: radial-gradient(circle at 82% 30%, rgba(19, 184, 244, 0.08), transparent 26%),
              radial-gradient(circle at 65% 70%, rgba(18, 77, 216, 0.06), transparent 28%),
              #fff;
  overflow: hidden;
}

.contact-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 70px;
}

.contact-hero-copy {
  max-width: 680px;
}

.contact-hero-copy .eyebrow {
  margin-bottom: 20px;
}

.contact-heading {
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  color: var(--navy);
  margin-bottom: 24px;
}

.contact-lead {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 560px;
  margin-bottom: 32px;
}

.contact-sequence > * {
  opacity: 0;
}

.contact-sequence .eyebrow {
  animation: ctEyebrowIn 240ms ease forwards;
}

.contact-sequence .contact-heading {
  animation: ctHeadingIn 300ms ease 80ms forwards;
}

.contact-sequence .contact-lead {
  animation: ctLeadIn 280ms ease 180ms forwards;
}

.contact-sequence .button-row {
  animation: ctButtonsIn 260ms ease 280ms forwards;
}

/* Conversation Routing Diagram */
.crd-panel {
  position: relative;
  border: 1px solid rgba(18, 77, 216, 0.12);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(232, 242, 255, 0.75));
  box-shadow: 0 8px 32px rgba(6, 16, 79, 0.06);
  min-height: 420px;
  opacity: 0;
}

.crd-panel.crd-visible {
  animation: ctVisualIn 300ms ease 400ms forwards;
}

.crd-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(18, 77, 216, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 77, 216, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.crd-inner {
  position: relative;
  z-index: 1;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 420px;
}

.crd-header {
  margin-bottom: 10px;
}

.crd-label {
  font: 600 0.6rem Manrope, sans-serif;
  letter-spacing: 0.16em;
  color: var(--blue);
  text-transform: uppercase;
}

.crd-need-zone {
  width: 100%;
  max-width: 520px;
  margin-bottom: 12px;
}

.crd-zone-label {
  display: block;
  font: 700 0.58rem Manrope, sans-serif;
  letter-spacing: 0.14em;
  color: var(--navy);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 10px;
}

.crd-need-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.crd-need-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 10px;
  min-height: 56px;
  cursor: default;
  transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 170ms ease;
  opacity: 0;
}

.crd-need-card:hover {
  transform: translateY(-3px);
  border-color: var(--blue);
  background-color: rgba(8, 126, 245, 0.04);
  box-shadow: 0 6px 16px rgba(6, 16, 79, 0.08);
}

.crd-need-card:hover .crd-need-icon {
  color: var(--blue);
}

.crd-need-icon {
  font-size: 0.65rem;
  color: rgba(8, 126, 245, 0.35);
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  transition: color 150ms ease;
}

.crd-need-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.crd-need-title {
  font: 700 0.68rem/1.2 Manrope, sans-serif;
  color: var(--navy);
  white-space: nowrap;
}

.crd-need-desc {
  font: 400 0.55rem/1.2 Inter, sans-serif;
  color: var(--muted);
  white-space: nowrap;
}

.crd-collector {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 24px;
  margin-bottom: 10px;
}

.crd-collector-line {
  position: absolute;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  opacity: 0.35;
  top: 50%;
  transform: scaleX(0);
  transform-origin: left center;
}

.crd-cl-1 { left: 0; width: 30%; }
.crd-cl-2 { left: 35%; width: 30%; }
.crd-cl-3 { right: 0; width: 30%; }

.crd-collector-branch {
  position: absolute;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(8, 126, 245, 0.3), rgba(8, 126, 245, 0.5));
  top: 50%;
  transform: scaleX(0);
  transform-origin: left center;
}

.crd-cb-1 { left: 15%; width: 25%; }
.crd-cb-2 { right: 15%; width: 25%; }

.crd-collector-vert {
  position: absolute;
  width: 1.5px;
  height: 14px;
  background: linear-gradient(180deg, var(--blue), var(--cyan));
  left: 50%;
  bottom: -14px;
  transform: scaleY(0);
  transform-origin: top center;
}

.crd-router {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  opacity: 0;
}

.crd-router-inner {
  background: linear-gradient(135deg, var(--navy), var(--deep));
  border-radius: 10px;
  padding: 12px 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-width: 260px;
  transition: transform 160ms ease, box-shadow 180ms ease;
}

.crd-router-inner:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(6, 16, 79, 0.2);
}

.crd-router-inner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: rgba(8, 126, 245, 0.2);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.crd-router-inner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}

.crd-router-brand {
  font: 700 0.58rem/1 Manrope, sans-serif;
  letter-spacing: 0.14em;
  color: var(--cyan);
  margin-bottom: 2px;
}

.crd-router-main {
  font: 800 0.82rem/1.2 Manrope, sans-serif;
  color: #fff;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.crd-router-sub {
  font: 400 0.6rem/1 Manrope, sans-serif;
  color: rgba(255, 255, 255, 0.5);
}

.crd-router-connector {
  width: 1.5px;
  height: 14px;
  background: linear-gradient(180deg, var(--blue), var(--cyan));
  margin-bottom: 10px;
  opacity: 0;
}

.crd-process {
  display: flex;
  align-items: center;
  gap: 6px;
}

.crd-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  min-width: 90px;
  transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 170ms ease;
  opacity: 0;
}

.crd-step:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  background-color: rgba(8, 126, 245, 0.04);
  box-shadow: 0 4px 12px rgba(6, 16, 79, 0.07);
}

.crd-step:hover .crd-step-num {
  color: var(--blue);
}

.crd-step-num {
  font: 800 0.72rem Manrope, sans-serif;
  color: rgba(8, 126, 245, 0.5);
  transition: color 150ms ease;
}

.crd-step-label {
  font: 600 0.6rem Manrope, sans-serif;
  letter-spacing: 0.08em;
  color: var(--navy);
}

.crd-step-arrow {
  color: var(--cyan);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Motion-ready animation states */
.careers-motion-ready .crd-panel.crd-visible .crd-need-1 {
  animation: ctCardIn 200ms ease 500ms forwards;
}
.careers-motion-ready .crd-panel.crd-visible .crd-need-2 {
  animation: ctCardIn 200ms ease 545ms forwards;
}
.careers-motion-ready .crd-panel.crd-visible .crd-need-3 {
  animation: ctCardIn 200ms ease 590ms forwards;
}
.careers-motion-ready .crd-panel.crd-visible .crd-need-4 {
  animation: ctCardIn 200ms ease 635ms forwards;
}
.careers-motion-ready .crd-panel.crd-visible .crd-need-5 {
  animation: ctCardIn 200ms ease 680ms forwards;
}
.careers-motion-ready .crd-panel.crd-visible .crd-cl-1 {
  animation: ctConnIn 100ms ease 730ms forwards;
}
.careers-motion-ready .crd-panel.crd-visible .crd-cb-1 {
  animation: ctConnIn 100ms ease 750ms forwards;
}
.careers-motion-ready .crd-panel.crd-visible .crd-cl-2 {
  animation: ctConnIn 100ms ease 770ms forwards;
}
.careers-motion-ready .crd-panel.crd-visible .crd-cb-2 {
  animation: ctConnIn 100ms ease 790ms forwards;
}
.careers-motion-ready .crd-panel.crd-visible .crd-cl-3 {
  animation: ctConnIn 100ms ease 810ms forwards;
}
.careers-motion-ready .crd-panel.crd-visible .crd-cv-1 {
  animation: ctVertConnIn 80ms ease 830ms forwards;
}
.careers-motion-ready .crd-panel.crd-visible .crd-router {
  animation: ctCardIn 240ms ease 870ms forwards;
}
.careers-motion-ready .crd-panel.crd-visible .crd-router-connector {
  animation: ctConnIn 80ms ease 1050ms forwards;
}
.careers-motion-ready .crd-panel.crd-visible .crd-step-1 {
  animation: ctStepIn 180ms ease 1100ms forwards;
}
.careers-motion-ready .crd-panel.crd-visible .crd-step:nth-child(2) {
  animation: ctStepIn 120ms ease 1150ms forwards;
}
.careers-motion-ready .crd-panel.crd-visible .crd-step-2 {
  animation: ctStepIn 180ms ease 1170ms forwards;
}
.careers-motion-ready .crd-panel.crd-visible .crd-step:nth-child(4) {
  animation: ctStepIn 120ms ease 1220ms forwards;
}
.careers-motion-ready .crd-panel.crd-visible .crd-step-3 {
  animation: ctStepIn 180ms ease 1240ms forwards;
}

/* ============================================
   CONTACT OPTIONS SECTION
   ============================================ */

.contact-options {
  padding: 100px 0;
}

.contact-options-head {
  margin-bottom: 50px;
}

.contact-options-head h2 {
  margin-top: 0;
}

.contact-options-head p {
  color: var(--muted);
  font-size: 1rem;
  max-width: 500px;
  margin: 16px auto 0;
}

.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.contact-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 180ms ease;
  opacity: 0;
}

.contact-card:hover {
  transform: translateY(-3px);
  border-color: var(--blue);
  box-shadow: 0 8px 24px rgba(6, 16, 79, 0.08);
}

.contact-card:hover .cc-marker {
  color: var(--blue);
}

.contact-card:hover .cc-cta span {
  transform: translateX(3px);
}

.cc-num {
  position: absolute;
  top: 20px;
  right: 20px;
  font: 800 0.72rem Manrope, sans-serif;
  color: rgba(8, 126, 245, 0.2);
}

.cc-marker {
  font-size: 0.75rem;
  color: rgba(8, 126, 245, 0.35);
  margin-bottom: 12px;
  transition: color 160ms ease;
}

.cc-num + .cc-marker {
  margin-bottom: 0;
}

.contact-card h3 {
  font-size: 1.05rem;
  color: var(--navy);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.contact-card p {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 18px;
}

.cc-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 0.78rem Manrope, sans-serif;
  color: var(--royal);
  transition: color 160ms ease;
}

.cc-cta span {
  transition: transform 160ms ease;
}

/* Contact cards motion */
.careers-motion-ready .contact-card.cc-1 {
  animation: ctCardIn 240ms ease 200ms forwards;
}
.careers-motion-ready .contact-card.cc-2 {
  animation: ctCardIn 240ms ease 245ms forwards;
}
.careers-motion-ready .contact-card.cc-3 {
  animation: ctCardIn 240ms ease 290ms forwards;
}
.careers-motion-ready .contact-card.cc-4 {
  animation: ctCardIn 240ms ease 335ms forwards;
}
.careers-motion-ready .contact-card.cc-5 {
  animation: ctCardIn 240ms ease 380ms forwards;
}
.careers-motion-ready .contact-card.cc-6 {
  animation: ctCardIn 240ms ease 425ms forwards;
}

/* ============================================
   CONTACT FORM SECTION
   ============================================ */

.contact-form-section {
  padding: 100px 0;
  background: var(--soft);
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: start;
}

.contact-form-intro .eyebrow {
  margin-bottom: 16px;
}

.contact-form-intro h2 {
  margin-bottom: 16px;
}

.contact-form-intro > p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 32px;
}

.contact-topics {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
}

.contact-topics h4 {
  font: 700 0.68rem Manrope, sans-serif;
  letter-spacing: 0.14em;
  color: var(--navy);
  text-transform: uppercase;
  margin: 0 0 16px;
}

.topic-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.topic-list li.contact-topic-item {
  font-size: 0.82rem;
  color: var(--muted);
  padding-left: 16px;
  position: relative;
  border-radius: 8px;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.topic-list li.contact-topic-item span {
  display: block;
  transition: transform 0.2s ease, color 0.2s ease;
}

.topic-list li.contact-topic-item::before {
  content: '◆';
  position: absolute;
  left: 0;
  font-size: 0.45rem;
  color: var(--blue);
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease, color 0.2s ease;
}

.topic-list li.contact-topic-item:hover {
  background: rgba(59, 130, 246, 0.06);
}

.topic-list li.contact-topic-item:hover span {
  transform: translateX(4px);
  color: var(--navy);
}

.topic-list li.contact-topic-item:hover::before {
  transform: translateY(-50%) scale(1.3);
  color: var(--blue);
}

.topic-list li.contact-topic-item:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Contact Form */
.contact-form-wrapper {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 36px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group-full {
  margin-bottom: 24px;
}

.form-group label {
  font: 600 0.78rem Manrope, sans-serif;
  color: var(--navy);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.form-group label em {
  color: var(--royal);
  font-style: normal;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: 400 0.88rem Inter, sans-serif;
  color: var(--text);
  background: var(--white);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #a0a8b5;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(8, 126, 245, 0.1);
}

.form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235b6475' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.field-error {
  font-size: 0.72rem;
  color: #dc2626;
  margin-top: 6px;
  min-height: 18px;
}

.form-submit {
  margin-top: 28px;
}

.form-submit .btn {
  min-width: 160px;
}

.form-consent {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 14px;
  line-height: 1.5;
}

/* ============================================
   DIRECT CONTACT SECTION
   ============================================ */

.contact-direct {
  padding: 100px 0;
}

/* ============================================
   CENTERED SECTION HEADERS
   ============================================ */

/* Contact Options - standalone centered header */
.contact-options-head {
  width: 100%;
  max-width: 820px;
  margin: 0 auto 50px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-options-head .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.contact-options-head .eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--blue);
  flex-shrink: 0;
}

.contact-options-head h2 {
  max-width: 600px;
  margin: 0 auto 16px;
  text-align: center;
}

.contact-options-head > p {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

/* Centered center-head sections */
.contact-direct .center-head,
.contact-faq .center-head {
  width: 100%;
  max-width: 820px;
  margin: 0 auto 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-direct .center-head .eyebrow,
.contact-faq .center-head .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.contact-direct .center-head .eyebrow::before,
.contact-faq .center-head .eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--blue);
  flex-shrink: 0;
}

.contact-direct .center-head h2,
.contact-faq .center-head h2 {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

/* Contact Next - dark section centered header */
.contact-next-head {
  width: 100%;
  max-width: 820px;
  margin: 0 auto 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-next-head .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--cyan);
}

.contact-next-head .eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--cyan);
  flex-shrink: 0;
}

.contact-next-head h2 {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

/* Final CTA - centered */
.contact-final-cta .final-inner {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-final-cta .final-inner .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--cyan);
}

.contact-final-cta .final-inner .eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--cyan);
  flex-shrink: 0;
}

.contact-final-cta .final-inner h2 {
  max-width: 600px;
  margin: 0 auto 16px;
  text-align: center;
  color: #fff;
}

.contact-final-cta .final-inner > p {
  max-width: 560px;
  margin: 0 auto 32px;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
}

.contact-final-cta .button-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Remove old specific overrides */
.contact-direct .center-head {
  margin-bottom: 48px;
}

.direct-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.direct-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 180ms ease;
}

.direct-card:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 6px 18px rgba(6, 16, 79, 0.07);
}

.dc-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(8, 126, 245, 0.08);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 1rem;
  margin-bottom: 14px;
}

.direct-card h3 {
  font-size: 0.95rem;
  color: var(--navy);
  margin: 0 0 6px;
}

.direct-card p {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 14px;
}

.direct-card a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 0.75rem Manrope, sans-serif;
  color: var(--royal);
  transition: color 160ms ease;
}

.direct-card a:hover {
  color: var(--blue);
}

.direct-card a span {
  transition: transform 160ms ease;
}

.direct-card a:hover span {
  transform: translateX(2px);
}

.dc-support {
  background: rgba(8, 126, 245, 0.03);
  border-color: rgba(8, 126, 245, 0.2);
}

.dc-support h3 {
  margin-bottom: 10px;
}

.dc-support p {
  margin-bottom: 14px;
}

.learning-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
}

.lc-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--royal), var(--blue));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.lc-content {
  flex: 1;
}

.lc-content h3 {
  font-size: 1rem;
  color: var(--navy);
  margin: 0 0 6px;
}

.lc-content p {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* ============================================
   AFTER YOU CONTACT US SECTION
   ============================================ */

.contact-next {
  padding: 100px 0;
}

.contact-next-head {
  width: 100%;
  max-width: 820px;
  margin: 0 auto 52px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-next-head .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--cyan);
}

.contact-next-head .eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--cyan);
  flex-shrink: 0;
}

.contact-next-head h2 {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

/* Process Flow Grid */
.next-steps-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 1060px;
  margin: 0 auto;
  padding-top: 50px;
}

/* Process Stage */
.process-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px;
}

/* Stage Node (Number Circle) */
.stage-node {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
  transition: transform 150ms ease, box-shadow 170ms ease;
}

.stage-num {
  color: #fff;
  font: 800 1rem Manrope, sans-serif;
}

.process-stage:hover .stage-node {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(8, 126, 245, 0.35);
}

/* Stage Connector - horizontal line between stages */
.stage-connector {
  position: absolute;
  top: 24px;
  left: calc(50% + 28px);
  width: calc(100% - 56px);
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  opacity: 0.6;
  z-index: 1;
  transform-origin: left center;
}

.process-stage:last-child .stage-connector {
  display: none;
}

/* Stage Content */
.stage-content {
  margin-top: 20px;
  padding: 18px 14px;
  border-radius: 12px;
  background: transparent;
  transition: background-color 150ms ease, transform 150ms ease;
}

.process-stage:hover .stage-content {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.035);
}

.stage-content h3 {
  font: 700 0.8rem Manrope, sans-serif;
  letter-spacing: 0.05em;
  color: #fff;
  margin: 0 0 10px;
}

.stage-content p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0;
  max-width: 180px;
}

.process-stage:hover .stage-content h3 {
  color: var(--cyan);
}

.process-stage:hover .stage-content p {
  color: rgba(255, 255, 255, 0.85);
}

/* Stage 4 final emphasis */
.process-stage.ps-4 .stage-node {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.process-stage.ps-4:hover .stage-node {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4), 0 8px 20px rgba(8, 126, 245, 0.35);
}

/* ============================================
   ENTRANCE ANIMATIONS
   ============================================ */

.contact-next-head .eyebrow {
  opacity: 0;
  transform: translateY(5px);
}

.contact-next-head h2 {
  opacity: 0;
  transform: translateY(8px);
}

.process-stage {
  opacity: 0;
  transform: translateY(6px) scale(0.985);
}

.stage-connector {
  transform: scaleX(0);
  transform-origin: left center;
}

/* Motion ready state - animations enabled */
.careers-motion-ready .contact-next-head .eyebrow {
  animation: ctEyebrowIn 220ms ease forwards;
}
.careers-motion-ready .contact-next-head h2 {
  animation: ctHeadingIn 280ms ease 80ms forwards;
}
.careers-motion-ready .contact-next .ps-1 {
  animation: ctCardIn 240ms ease 240ms forwards;
}
.careers-motion-ready .contact-next .ps-1 .stage-connector {
  animation: ctConnIn 120ms ease 380ms forwards;
}
.careers-motion-ready .contact-next .ps-2 {
  animation: ctCardIn 240ms ease 440ms forwards;
}
.careers-motion-ready .contact-next .ps-2 .stage-connector {
  animation: ctConnIn 120ms ease 580ms forwards;
}
.careers-motion-ready .contact-next .ps-3 {
  animation: ctCardIn 240ms ease 640ms forwards;
}
.careers-motion-ready .contact-next .ps-3 .stage-connector {
  animation: ctConnIn 120ms ease 780ms forwards;
}
.careers-motion-ready .contact-next .ps-4 {
  animation: ctCardIn 240ms ease 860ms forwards;
}

@keyframes ctEyebrowIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ctHeadingIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ctCardIn {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ctConnIn {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 0.6; transform: scaleX(1); }
}

@keyframes ctVertConnIn {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}

/* ============================================
   FAQ SECTION
   ============================================ */

.contact-faq {
  padding: 100px 0;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item:first-child {
  border-top: 1px solid var(--line);
}

.faq-item h3 {
  font-size: 1rem;
  margin: 0;
}

.faq-item h3 button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--navy);
  transition: color 160ms ease;
}

.faq-item h3 button:hover {
  color: var(--blue);
}

.faq-item h3 button span {
  flex: 1;
  padding-right: 20px;
}

.faq-item h3 button i {
  font-style: normal;
  font-size: 1.2rem;
  color: var(--blue);
  transition: transform 200ms ease;
}

.faq-item h3 button[aria-expanded="true"] i {
  transform: rotate(45deg);
}

.faq-answer {
  padding-bottom: 22px;
}

.faq-answer p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0;
}

/* ============================================
   FINAL CTA SECTION
   ============================================ */

.contact-final-cta {
  padding: 100px 0;
}

.contact-final-cta .center-head {
  margin-bottom: 0;
}

.contact-final-cta .center-head .eyebrow {
  color: var(--cyan);
}

.contact-final-cta .center-head h2 {
  color: #fff;
}

.final-inner {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.final-inner p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 1rem;
  margin: 16px 0 32px;
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .careers-motion-ready .crd-panel,
  .careers-motion-ready .contact-sequence > *,
  .careers-motion-ready .contact-card,
  .careers-motion-ready .process-stage,
  .careers-motion-ready .crd-need-card,
  .careers-motion-ready .crd-router,
  .crd-step,
  .crd-collector-line,
  .crd-collector-branch,
  .crd-collector-vert,
  .crd-router-connector {
    opacity: 1;
    animation: none;
  }

  .faq-item h3 button i {
    transition: none;
  }
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (max-width: 1024px) {
  .contact-hero-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .crd-panel {
    max-width: 600px;
    margin: 0 auto;
    min-height: auto;
  }

  .crd-inner {
    min-height: auto;
    padding: 16px 16px 14px;
  }

  .crd-need-grid {
    gap: 6px;
  }

  .crd-need-card {
    padding: 8px 8px;
    min-height: 52px;
  }

  .crd-need-desc {
    display: none;
  }

  .crd-router-inner {
    min-width: 220px;
    padding: 10px 18px;
  }

  .crd-router-main {
    font-size: 0.72rem;
  }

  .crd-step {
    padding: 6px 10px;
    min-width: 76px;
  }

  .crd-step-label {
    font-size: 0.55rem;
  }

  .contact-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .direct-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .next-steps-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    justify-content: center;
  }

  .process-stage {
    max-width: 160px;
  }

  .stage-connector {
    display: none;
  }
}

@media (max-width: 900px) {
  .crd-panel {
    max-width: 500px;
  }

  .crd-need-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .crd-need-3 {
    grid-column: span 2;
  }

  .crd-need-4,
  .crd-need-5 {
    grid-column: span 1;
  }

  .crd-collector {
    display: none;
  }
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media (max-width: 768px) {
  .contact-hero {
    padding: 80px 0 70px;
  }

  .contact-heading {
    font-size: 2.2rem;
  }

  .crd-panel {
    max-width: 100%;
  }

  .crd-inner {
    padding: 14px 14px 12px;
  }

  .crd-need-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .crd-need-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 8px 6px;
    min-height: 50px;
  }

  .crd-need-3 {
    grid-column: span 2;
  }

  .crd-need-desc {
    display: none;
  }

  .crd-router-inner {
    min-width: 200px;
    padding: 10px 16px;
  }

  .crd-router-main {
    font-size: 0.68rem;
  }

  .crd-process {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .crd-step {
    padding: 6px 10px;
    min-width: 70px;
  }

  .crd-step-label {
    font-size: 0.52rem;
  }

  .crd-step-arrow {
    display: none;
  }

  .contact-options {
    padding: 80px 0;
  }

  .contact-cards-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-section {
    padding: 80px 0;
  }

  .contact-form-wrapper {
    padding: 24px 20px;
  }

  .form-grid,
  .form-row {
    grid-template-columns: 1fr;
  }

  .direct-cards {
    grid-template-columns: 1fr;
  }

  .learning-card {
    flex-direction: column;
    text-align: center;
  }

  .contact-next {
    padding: 80px 0;
  }

  .next-steps-flow {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 0;
  }

  .process-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    max-width: 280px;
    margin: 0 auto;
  }

  .stage-node {
    margin-bottom: 0;
  }

  .stage-connector {
    display: block;
    position: absolute;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 24px;
    margin: 8px 0;
    background: linear-gradient(180deg, var(--blue), var(--cyan));
    transform-origin: top center;
  }

  .process-stage:last-child .stage-connector {
    display: none;
  }

  .stage-content {
    margin-top: 16px;
    padding: 14px 12px;
  }

  .contact-faq {
    padding: 80px 0;
  }

  .contact-final-cta {
    padding: 80px 0;
  }
}

@media (max-width: 560px) {
  .contact-hero {
    padding: 60px 0 50px;
  }

  .contact-heading {
    font-size: 1.85rem;
  }

  .contact-lead {
    font-size: 0.95rem;
  }

  .crd-panel {
    max-width: 100%;
  }

  .crd-inner {
    padding: 12px 12px 10px;
  }

  .crd-need-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .crd-need-card {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 10px;
    padding: 10px 12px;
    min-height: 48px;
  }

  .crd-need-3 {
    grid-column: span 1;
  }

  .crd-need-icon {
    width: 20px;
  }

  .crd-collector {
    display: none;
  }

  .crd-router-inner {
    min-width: 180px;
    padding: 10px 14px;
  }

  .crd-router-main {
    font-size: 0.65rem;
  }

  .crd-router-sub {
    font-size: 0.55rem;
  }

  .crd-process {
    flex-direction: column;
    gap: 6px;
  }

  .crd-step {
    flex-direction: row;
    gap: 8px;
    padding: 8px 14px;
    width: 100%;
    max-width: 160px;
  }

  .crd-step-arrow {
    display: block;
    transform: rotate(90deg);
  }

  .contact-options {
    padding: 60px 0;
  }

  .topic-list {
    grid-template-columns: 1fr;
  }

  .contact-direct {
    padding: 60px 0;
  }

  .contact-next {
    padding: 60px 0;
  }

  .contact-faq {
    padding: 60px 0;
  }

  .contact-final-cta {
    padding: 60px 0;
  }

  .button-row {
    flex-direction: column;
  }

  .button-row .btn {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .contact-heading {
    font-size: 1.65rem;
  }

  .contact-card {
    padding: 22px 18px;
  }

  .contact-form-wrapper {
    padding: 20px 16px;
  }

  .direct-card {
    padding: 20px 16px;
  }
}

@media (max-width: 390px) {
  .contact-heading {
    font-size: 1.5rem;
  }

  .crd-panel {
    max-width: 100%;
  }

  .crd-inner {
    padding: 10px 10px 8px;
  }

  .crd-label {
    font-size: 0.55rem;
  }

  .crd-need-title {
    font-size: 0.62rem;
  }

  .crd-router-inner {
    min-width: 160px;
    padding: 8px 12px;
  }

  .crd-router-main {
    font-size: 0.6rem;
  }
}

@media (max-width: 360px) {
  .contact-heading {
    font-size: 1.4rem;
  }

  .crd-label {
    font-size: 0.52rem;
  }

  .crd-need-card {
    padding: 8px 8px;
  }

  .crd-need-title {
    font-size: 0.6rem;
  }

  .crd-router-inner {
    min-width: 140px;
    padding: 8px 10px;
  }

  .crd-router-main {
    font-size: 0.58rem;
  }

  .crd-step {
    padding: 6px 10px;
    min-width: 140px;
  }
}

/* ===== CMS dynamic contact form-field support (added for the form builder) ===== */
/* Full-width fields rendered inside the single .form-grid span both columns. */
.contact-form-wrapper .form-grid .form-group.cf-full { grid-column: span 2; }
/* Optional help text under a field. */
.contact-form-wrapper .field-help { font: 400 0.72rem Inter, sans-serif; color: var(--muted, #6b7280); margin-top: 4px; }
/* Radio group (if a CMS field uses radio). */
.contact-form-wrapper .radio-group { display: flex; flex-direction: column; gap: 8px; }
.contact-form-wrapper .radio-option { display: flex; align-items: center; gap: 8px; font: 400 0.85rem Inter, sans-serif; }
.contact-form-wrapper .radio-option input { width: auto; }
/* Inline checkbox (if a CMS field uses checkbox). */
.contact-form-wrapper .checkbox-inline { display: flex; align-items: flex-start; gap: 8px; font: 400 0.85rem Inter, sans-serif; }
.contact-form-wrapper .checkbox-inline input { width: auto; margin-top: 3px; }
/* Success panel + submit error consistent with Nxtzen design. */
.contact-form-success .cfs-check { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--royal, #124dd8), var(--blue, #13b8f4)); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; margin-bottom: 20px; }
.form-submit-error { color: #dc2626; font-size: 0.82rem; margin-top: 12px; }