/* Guided contact and routing */
.contact-page { overflow: clip; }
.contact-intro { padding: 76px 24px 36px; }
.contact-intro h1 { max-width: 850px; margin: 0; color: #2a2737; font-family: var(--font-apple-display); font-size: clamp(48px, 6.2vw, 82px); line-height: .98; letter-spacing: var(--title-tracking); font-weight: 530; }
.contact-intro > p { max-width: 720px; margin: 25px 0 0; color: var(--muted); font-size: .9625rem; line-height: 1.7; }
.contact-panel { margin-bottom: 90px; padding: 0 24px; }
.contact-routing { border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.62); overflow: hidden; }
.contact-steps { min-height: 72px; margin: 0; padding: 0 42px; display: flex; align-items: center; gap: 42px; border-bottom: 1px solid var(--line-soft); list-style: none; }
.contact-steps li { display: flex; align-items: center; gap: 9px; color: #7a8489; font-size: .6875rem; }
.contact-steps li > span { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: #59666c; font-size: .61875rem; }
.contact-steps li.is-current { color: #2a2737; font-weight: 650; }
.contact-steps li.is-current > span { color: #fff; border-color: #5f51a1; background: #5f51a1; }
.contact-steps li.is-complete { color: #4fabaa; }
.contact-steps li.is-complete > span { color: #4fabaa; border-color: rgba(79,171,170,.3); background: rgba(79,171,170,.08); }
.contact-workspace { min-height: 610px; display: grid; grid-template-columns: minmax(0,1fr) 330px; }
.contact-stage { padding: 42px; }
.contact-stage > header { max-width: 690px; }
.contact-stage > header > span { color: #5f51a1; font-size: .61875rem; letter-spacing: .08em; }
.contact-stage h2 { margin: 10px 0 12px; color: #2a2737; font-family: var(--font-apple-display); font-size: clamp(30px,3.6vw,46px); line-height: 1.05; font-weight: 530; }
.contact-stage > header p { margin: 0; color: var(--muted); font-size: .75625rem; line-height: 1.65; }
.contact-department-grid { --contact-card-shadow: 0 5px 14px rgba(42,39,55,.075), inset 0 1px 0 rgba(255,255,255,.9); --contact-card-shadow-hover: 0 8px 18px rgba(42,39,55,.11), inset 0 1px 0 rgba(255,255,255,.96); margin-top: 30px; display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.contact-department-grid button { min-height: 148px; padding: 21px; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto 1fr; gap: 8px 12px; text-align: left; border: 0; border-radius: 10px; color: var(--ink); background: var(--button-glass-light); box-shadow: var(--contact-card-shadow); backdrop-filter: blur(17px) saturate(128%); -webkit-backdrop-filter: blur(17px) saturate(128%); cursor: pointer; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.contact-department-grid button:hover { transform: translateY(-1px); background: var(--button-glass-light-hover); box-shadow: var(--contact-card-shadow-hover); }
.contact-department-grid button.is-selected { color: #fff; background: var(--button-glass-teal); box-shadow: var(--contact-card-shadow-hover); }
.contact-department-grid button.is-selected :is(strong,small) { color: inherit; }
.contact-department-grid button > span { width: 32px; height: 32px; grid-row: 1 / 3; display: grid; place-items: center; border-radius: 9px; color: #5f51a1; background: rgba(95,81,161,.08); }
.contact-department-grid strong { align-self: center; color: #2a2737; font-size: .825rem; font-weight: 600; }
.contact-department-grid small { color: var(--muted); font-size: .61875rem; line-height: 1.55; }
.contact-actions { margin-top: 30px; display: flex; gap: 10px; }
.contact-actions .button, .contact-form-actions .button { gap: 9px; }
.contact-actions .button:disabled, .contact-form-actions .button:disabled { opacity: .42; cursor: not-allowed; }
.contact-subject-list { margin-top: 30px; display: grid; gap: 9px; }
.contact-subject-list label { min-height: 62px; padding: 0 18px; display: grid; grid-template-columns: 1fr 20px; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 11px; color: #42535a; background: rgba(247,248,250,.68); cursor: pointer; }
.contact-subject-list label.is-selected { color: #2a2737; border-color: rgba(79,171,170,.55); background: rgba(79,171,170,.07); }
.contact-subject-list input { position: absolute; opacity: 0; pointer-events: none; }
.contact-subject-list svg { color: #c1c8cb; }
.contact-subject-list label.is-selected svg { color: #4fabaa; }
.contact-careers-route { min-height: 210px; margin-top: 30px; padding: 28px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 20px; border: 1px solid rgba(79,171,170,.22); border-radius: 14px; background: rgba(79,171,170,.055); }
.contact-careers-route > svg { color: #4fabaa; }
.contact-careers-route strong { color: #2a2737; font-size: 1rem; }
.contact-careers-route p { max-width: 520px; margin: 8px 0 0; color: var(--muted); font-size: .6875rem; line-height: 1.6; }
.contact-form { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.contact-form .careers-field { min-width: 0; display: grid; gap: 9px; }
.contact-form .careers-field-full { grid-column: 1 / -1; }
.contact-form .careers-field > span { color: #42535a; font-size: .6875rem; font-weight: 620; }
.contact-form .careers-field > span small { color: #59666c; font-size: .55rem; font-weight: 400; }
.contact-form .careers-field :is(input, select, textarea) { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: rgba(247,248,250,.74); font: inherit; outline: none; }
.contact-form .careers-field textarea { resize: vertical; }
.contact-form .careers-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; }
.contact-form .careers-consent { margin-top: 4px; display: flex; align-items: flex-start; gap: 11px; color: var(--muted); font-size: .6875rem; line-height: 1.55; }
.contact-form .careers-consent input { width: 17px; height: 17px; flex: 0 0 auto; margin: 2px 0 0; accent-color: #2a2737; }
.contact-form .careers-consent a { color: #4fabaa; text-decoration: underline; text-underline-offset: 3px; }
.contact-form-actions { display: flex; gap: 10px; }
.contact-form-error { margin: 0; color: #9d4a35; font-size: .6875rem; }
.contact-success { min-height: 330px; margin-top: 30px; display: grid; place-items: center; align-content: center; text-align: center; border: 1px solid rgba(79,171,170,.25); border-radius: 15px; background: rgba(79,171,170,.055); }
.contact-success svg { color: #4fabaa; }
.contact-success h3 { margin: 18px 0 8px; color: #2a2737; font-size: 1.5rem; font-weight: 540; }
.contact-success p { max-width: 480px; margin: 0; color: var(--muted); font-size: .75625rem; line-height: 1.6; }
.contact-success strong { margin-top: 20px; color: #5f51a1; font-size: .6875rem; letter-spacing: .04em; }
.contact-routing-summary { padding: 34px 30px; border-left: 1px solid var(--line-soft); background: linear-gradient(145deg, rgba(95,81,161,.055), rgba(79,171,170,.035)); }
.contact-routing-summary > span { color: #5f51a1; font-size: .61875rem; letter-spacing: .08em; text-transform: uppercase; }
.contact-routing-summary > p { margin: 22px 0 0; color: var(--muted); font-size: .6875rem; line-height: 1.65; }
.contact-routing-summary > small { display: block; margin-top: 22px; color: #59666c; font-size: .61875rem; }
.contact-routing-summary > div { margin-top: 25px; padding: 20px 0; display: flex; align-items: center; gap: 13px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.contact-routing-summary > div > svg { color: #4fabaa; }
.contact-routing-summary > div > span { display: grid; gap: 5px; }
.contact-routing-summary > div small { color: #59666c; font-size: .55rem; text-transform: uppercase; }
.contact-routing-summary > div strong { color: #2a2737; font-size: .825rem; font-weight: 600; }
.contact-routing-summary em { margin-top: 18px; padding: 10px 12px; display: block; border-radius: 8px; color: #4fabaa; background: rgba(79,171,170,.08); font-size: .61875rem; font-style: normal; line-height: 1.5; }
.contact-routing-summary button { margin-top: 22px; padding: 0; border: 0; color: #4fabaa; background: transparent; font-size: .61875rem; cursor: pointer; }
.contact-admin-role { display: flex; align-items: center; gap: 7px; color: #4fabaa !important; }
.contact-admin-list footer > span { color: #59666c; font-size: .61875rem; }
html[data-theme="dark"] :is(.contact-routing, .contact-department-grid button, .contact-subject-list label) { background: var(--dark-surface-2); }
html[data-theme="dark"] .contact-department-grid { --contact-card-shadow: 0 5px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12); --contact-card-shadow-hover: 0 8px 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.16); }
html[data-theme="dark"] .contact-form .careers-field :is(input, select, textarea) { color: var(--ink); border-color: var(--line); background: rgba(30,24,44,.88); }
html[data-theme="dark"] .contact-routing-summary { background: linear-gradient(145deg, var(--dark-surface-2), var(--dark-surface-1)); }
html[data-theme="dark"] :is(.contact-department-grid button.is-selected, .contact-subject-list label.is-selected, .contact-careers-route, .contact-success) { background: color-mix(in srgb, var(--dark-accent) 13%, var(--dark-surface-2)); }
html[data-theme="dark"] :is(.contact-steps li.is-current, .contact-department-grid strong, .contact-careers-route strong, .contact-routing-summary > div strong) { color: var(--ink); }
html[data-theme="dark"] :is(.contact-steps li, .contact-steps li > span, .contact-form .careers-field > span small, .contact-routing-summary small) { color: var(--dark-readable-muted); }
html[data-theme="dark"] :is(.contact-stage > header > span, .contact-routing-summary > span, .contact-success strong, .contact-department-grid button > span) { color: var(--dark-readable-accent); }
html[data-theme="dark"] :is(.contact-subject-list label, .contact-subject-list label.is-selected, .contact-form .careers-field > span) { color: var(--ink); }
html[data-theme="dark"] .contact-steps li.is-current > span { color: #fff; background: #5f51a1; }
html[data-theme="dark"] .contact-form-error { color: #ffb4bd; }
html[data-theme="dark"] :is(.contact-subject-list label, .contact-form .careers-field input, .contact-form .careers-field select, .contact-form .careers-field textarea) { border-color: var(--dark-control-border); }
html[data-theme="dark"] .contact-subject-list label:focus-within { outline: 2px solid var(--dark-readable-accent); outline-offset: 3px; }

@media (max-width: 820px) {
  .contact-page { overflow-x: clip; }
  .contact-page :is(.contact-routing, .contact-workspace, .contact-stage, .contact-routing-summary, .contact-department-grid, .contact-form, .contact-careers-route) { min-width: 0; }
  .contact-intro { padding: 60px 18px 30px; }
  .contact-intro h1 { font-size: clamp(46px, 11vw, 68px); }
  .contact-panel { margin-bottom: 60px; padding: 0 14px; }
  .contact-routing { border-radius: 18px; }
  .contact-steps { min-height: 68px; padding: 0 22px; gap: 24px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .contact-steps li { min-width: max-content; flex: 0 0 auto; }
  .contact-workspace { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .contact-stage { padding: 34px 26px; }
  .contact-routing-summary { padding: 29px 26px; border-top: 1px solid var(--line-soft); border-left: 0; }
  .contact-actions, .contact-form-actions { flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .contact-intro { padding: 48px 4px 26px; }
  .contact-intro h1 { font-size: clamp(40px, 12vw, 52px); overflow-wrap: anywhere; }
  .contact-intro > p { margin-top: 21px; font-size: .9rem; }
  .contact-panel { margin-bottom: 48px; padding: 0; }
  .contact-routing { border-radius: 16px; }
  .contact-steps { min-height: 64px; padding: 0 15px; gap: 18px; }
  .contact-stage { padding: 27px 16px; }
  .contact-stage h2 { font-size: clamp(28px, 9vw, 38px); overflow-wrap: anywhere; }
  .contact-department-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .contact-department-grid button { width: 100%; min-height: 92px; padding: 15px; }
  .contact-subject-list label { min-height: 68px; padding: 10px 15px; }
  .contact-careers-route { min-height: 0; padding: 23px 20px; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; }
  .contact-careers-route .button { width: 100%; }
  .contact-form { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .contact-form .careers-field-full { grid-column: auto; }
  .contact-actions, .contact-form-actions { align-items: stretch; flex-direction: column; }
  .contact-actions .button, .contact-form-actions .button { width: 100%; }
  .contact-success { min-height: 280px; padding: 24px 18px; }
  .contact-routing-summary { padding: 27px 21px; }
  .contact-routing-summary :is(p, strong, em) { overflow-wrap: anywhere; }
}