/* ===========================================================
   territory-manager-application v1 (2026-10-19). Visual layer only, loaded after site.v2.css.
   Deep-navy hero (replaces the purple variant), the application form in an elevated card that
   overlaps the hero, mint submit button, and a photo side panel on wide screens.
   The form, its fields, and the .form-shell/.form-success structure main.v4.js uses are unchanged.
   =========================================================== */

.page-hero.purple {
  background: radial-gradient(120% 140% at 85% 0%, #1B3FA0 0%, rgba(27,63,160,0) 55%), linear-gradient(160deg, #0A1E5C 0%, #071645 70%);
  padding-bottom: 120px;
}
.page-hero.purple .eyebrow { color: #2FD6B0; }

.tm-form-section { padding-top: 0; }
.tm-layout { max-width: 880px; }
.tm-layout .form-shell {
  position: relative; z-index: 3; margin-top: -84px;
  border-radius: 26px; border-color: #E3E9F3; border-top: 4px solid #2FD6B0;
  box-shadow: 0 40px 80px -44px rgba(7,22,69,.5), 0 14px 28px -16px rgba(7,22,69,.22);
}
.tm-layout .field input, .tm-layout .field textarea { border-radius: 12px; }

/* Mint submit, like every primary action on the homepage. */
.tm-layout .btn-purple {
  background: #2FD6B0; color: #04382E; font-weight: 700; min-height: 52px;
  box-shadow: 0 12px 24px -12px rgba(47,214,176,.8), inset 0 2px 0 rgba(255,255,255,.3);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, background .2s;
}
.tm-layout .btn-purple:hover, .tm-layout .btn-purple:focus-visible { background: #3BE3BD; color: #04382E; transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(47,214,176,.9); }

/* Photo side panel (wide screens only; hidden on smaller screens so the form comes first). */
.tm-side { display: none; }
@media (min-width: 1100px) {
  .tm-layout { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
  .tm-side { display: block; position: sticky; top: 96px; margin-top: 24px; }
}
.tm-photo { margin: 0; border-radius: 24px; overflow: hidden; position: relative;
  box-shadow: 0 34px 64px -34px rgba(7,22,69,.5), 0 10px 20px -12px rgba(7,22,69,.24);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s; }
.tm-photo:hover { transform: translateY(-5px); }
.tm-photo picture { display: block; }
.tm-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 50%; }
.tm-photo figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 14px 18px; border-radius: 16px;
  background: rgba(255,255,255,.94); color: #0A1E5C; box-shadow: 0 16px 34px -18px rgba(7,22,69,.5);
  font-family: "Caveat", "Segoe Script", cursive; font-weight: 600; font-size: 26px; line-height: 1.1; }

@media (max-width: 760px) {
  .page-hero.purple { padding-bottom: 96px; }
  .tm-form-section { padding: 0 0 48px; }
  .tm-layout .form-shell { margin-top: -64px; padding: 24px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-layout .btn-purple, .tm-photo { transition: none; }
  .tm-layout .btn-purple:hover, .tm-photo:hover { transform: none; }
}