/* /apply: the "Get started" contact page (photo hero, contact form and a
   "What happens next" aside). Tokens only; motion uses
   transform and opacity and switches off under prefers-reduced-motion. */

.ap-page [hidden] { display: none !important; }

/* ---------- Hero (photo band) ----------
   After the 21st.dev ResponsiveHeroBanner: full-bleed photo, glass pill badge,
   centred title, pill actions, a glass trust row, and a staggered fade-slide-in.
   The photo sits under a navy-to-TouchSuite-blue shade so text stays above 4.5:1. */
.ap-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ts-navy-900);
  color: var(--ts-on-dark-muted);
  padding-block: clamp(40px, 6vw, 72px) clamp(112px, 12vw, 152px);
  text-align: center;
}
.ap-hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%; }
.ap-hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 85% 0%, rgba(0, 167, 239, 0.35), transparent 70%),
    radial-gradient(55% 60% at 0% 100%, rgba(0, 87, 160, 0.5), transparent 70%),
    linear-gradient(180deg, rgba(15, 27, 45, 0.78) 0%, rgba(15, 27, 45, 0.86) 55%, rgba(0, 48, 90, 0.94) 100%);
}
.ap-hero-inner { max-width: var(--container); display: flex; flex-direction: column; align-items: center; }
.ap-hero .ap-crumbs { align-self: flex-start; text-align: left; margin-bottom: clamp(24px, 5vw, 56px); }
.ap-hero h1 { color: var(--ts-on-dark); max-width: 18ch; margin-inline: auto; letter-spacing: -0.02em; text-wrap: balance; }
/* Frosted glass shared by the badge, the secondary action and the trust chips. */
.ap-badge, .ap-hero-actions .btn-on-dark, .ap-hero-points li {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ap-badge {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 var(--space-5); padding: 6px 14px 6px 6px; border-radius: 999px;
  color: var(--ts-on-dark); font-size: var(--text-sm); font-weight: 600;
}
.ap-badge-label {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  background: var(--ts-blue-500); color: var(--ts-navy-900);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.ap-hero-sub { margin: var(--space-5) auto 0; font-size: var(--text-md); max-width: 60ch; }
.ap-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-7); }
.ap-hero-actions .btn { border-radius: 999px; padding-inline: 24px; }
.ap-hero-actions .btn-on-dark { border-color: rgba(255, 255, 255, 0.28); }
.ap-hero-actions .btn-on-dark:hover { background: rgba(255, 255, 255, 0.18); }
.ap-hero-actions svg { width: 18px; height: 18px; }
.ap-hero-points {
  list-style: none; padding: 0; margin: var(--space-7) 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
  max-width: 920px;
}
.ap-hero-points li {
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
  padding: 10px 16px; border-radius: var(--radius-lg);
  font-size: var(--text-sm); max-width: 520px;
}
.ap-hero-points svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ts-on-dark-blue); }
.ap-hero-points a { color: var(--ts-on-dark); font-weight: 600; }
.ap-hero :focus-visible { outline-color: var(--ts-on-dark-blue); }
@media (max-width: 640px) { .ap-br { display: none; } }

/* Staggered entrance (fadeSlideIn from the component); transform and opacity only. */
@keyframes ap-fade-slide-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.ap-in { animation: ap-fade-slide-in 700ms var(--ease) both; }
.ap-in-2 { animation-delay: 80ms; }
.ap-in-3 { animation-delay: 160ms; }
.ap-in-4 { animation-delay: 240ms; }
.ap-in-5 { animation-delay: 320ms; }

/* ---------- Layout ---------- */
.ap-main { padding-block: 0 var(--section-y); background: var(--ts-sky-50); }
.ap-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-6);
  align-items: start;
  margin-top: clamp(-80px, -7vw, -56px);
  position: relative;
}
.ap-card {
  background: var(--ts-white);
  border: 1px solid var(--ts-line-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
  padding: clamp(20px, 4vw, 48px);
  min-width: 0;
  scroll-margin-top: 96px;
}
.ap-aside {
  position: sticky; top: 96px;
  background: var(--ts-white);
  border: 1px solid var(--ts-line-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
  padding: var(--space-6);
}
.ap-aside-title { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.ap-timeline { list-style: none; padding: 0; margin: 0; counter-reset: ap; display: grid; gap: var(--space-5); }
.ap-timeline li { counter-increment: ap; position: relative; padding-left: 44px; display: grid; gap: 2px; }
.ap-timeline li::before {
  content: counter(ap);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ts-blue-tint-strong); color: var(--ts-blue-850);
  font-weight: 700; font-size: var(--text-sm);
}
.ap-timeline strong { color: var(--ts-navy-900); }
.ap-timeline span { color: var(--ts-muted); font-size: var(--text-sm); }
.ap-aside-help { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--ts-line-soft); font-size: var(--text-sm); color: var(--ts-muted); }
.ap-aside-help strong { color: var(--ts-navy-900); }
.ap-aside-help a { font-weight: 600; }

/* ---------- Fields ---------- */
.ap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.ap-span-2 { grid-column: 1 / -1; }
.ap-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ap-field > label { font-size: var(--text-sm); font-weight: 600; color: var(--ts-navy-800); }
.ap-opt { font-weight: 400; color: var(--ts-muted); }
.ap-form input[type="text"], .ap-form input[type="email"], .ap-form input[type="tel"],
.ap-form select, .ap-form textarea { width: 100%; padding: 11px 14px; }
.ap-form textarea { resize: vertical; }
.ap-hint { font-size: var(--text-sm); color: var(--ts-muted); }

/* Breadcrumb inside the dark hero (mirrors .ind-crumbs on industry pages).
   The legacy styles.css `nav` rule (sticky white bar) is reset here. */
.ap-crumbs { position: static; z-index: auto; background: none; backdrop-filter: none; box-shadow: none; border: 0; }
.ap-crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  list-style: none; margin: 0 0 clamp(24px, 3.5vw, 40px); padding: 0;
  font-size: var(--text-sm); color: var(--ts-on-dark-muted);
}
.ap-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.ap-crumbs li + li::before { content: "\203A"; content: "\203A" / ""; color: var(--ts-on-dark-muted); }
.ap-crumbs a { color: var(--ts-on-dark); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); }
.ap-crumbs a:hover { text-decoration-color: var(--ts-on-dark); }
.ap-crumbs [aria-current] { color: var(--ts-on-dark-muted); }

/* Invalid state */
.ap-form [aria-invalid="true"] { border-color: var(--ts-danger-ink); }
.ap-error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--text-sm); font-weight: 600; color: var(--ts-danger-ink); }
.ap-error::before { content: "!"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--ts-danger-ink); color: var(--ts-white); font-size: 12px; font-weight: 800; display: grid; place-items: center; line-height: 1; }

/* Error summary */
.ap-summary {
  border: 2px solid var(--ts-danger-ink); border-radius: var(--radius-md);
  background: var(--ts-danger-tint); padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.ap-summary:focus { outline: none; }
.ap-summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.ap-summary-title { font-size: var(--text-base); color: var(--ts-danger-ink); }
.ap-summary ul { margin: var(--space-2) 0 0; padding-left: 20px; }
.ap-summary a { color: var(--ts-danger-ink); font-weight: 600; }

/* Alerts */
.ap-alert { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); }
.ap-alert:focus { outline: none; }
.ap-alert:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.ap-alert svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.ap-alert--error { background: var(--ts-danger-tint); border: 1.5px solid var(--ts-danger-ink); color: var(--ts-danger-ink); }
.ap-alert--error p { color: var(--ts-ink); }
.ap-alert--error .ap-alert-title { color: var(--ts-danger-ink); font-weight: 700; }
.ap-alert a { color: var(--ts-danger-ink); font-weight: 700; }

/* Actions */
.ap-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--ts-line-soft); }
.ap-actions .btn svg { width: 18px; height: 18px; }
.ap-fineprint { font-size: var(--text-sm); color: var(--ts-muted); max-width: 48ch; }
.btn.is-busy { cursor: progress; }

/* Honeypot: off-screen, not focusable */
.ap-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Cloudflare Turnstile slot; collapses until the widget renders (no site key = no widget). */
.ap-form .ts-turnstile { margin-top: var(--space-5); }
.ap-form .ts-turnstile:empty { display: none; }

/* ---------- Success ---------- */
@keyframes ap-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ap-success { text-align: center; padding: var(--space-6) 0; display: grid; justify-items: center; gap: var(--space-4); animation: ap-enter 320ms var(--ease) both; }
.ap-success h3 { font-size: var(--text-2xl); }
.ap-success h3:focus { outline: none; }
.ap-success p { color: var(--ts-muted); max-width: 56ch; }
.ap-success-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ts-green-50); color: var(--ts-success-ink); }
.ap-success-icon svg { width: 34px; height: 34px; }

/* ---------- Card heading ---------- */
.ap-contact-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: center; margin-bottom: var(--space-6); }
.ap-contact-head h2 { font-size: var(--text-2xl); scroll-margin-top: 96px; }
.ap-contact-head h2:focus { outline: none; }
.ap-contact-head p { color: var(--ts-muted); margin-top: 4px; }
.ap-talk-icon { width: 52px; height: 52px; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--ts-blue-tint-strong); color: var(--ts-blue-850); }
.ap-talk-icon svg { width: 26px; height: 26px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .ap-layout { grid-template-columns: minmax(0, 1fr); }
  .ap-aside { position: static; }
}
@media (max-width: 720px) {
  .ap-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .ap-contact-head { grid-template-columns: minmax(0, 1fr); }
  .ap-contact-head .ap-talk-icon { display: none; }
  .ap-hero-actions .btn, .ap-actions .btn { width: 100%; }
  .ap-actions { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .ap-success, .ap-in { animation: none; }
}