/* The framed photo hero for the affiliate pages (/agents, /lenders,
   /insurance, /escrow, /affiliate/start, /affiliate/login).

   The photo is a design piece inside a card, not a full-bleed background:
   the card is inset from the page edges with the homepage's large radius
   (hark.css --r-xl), overflow hidden and a soft shadow. Inside it sit the
   homepage hero's dark overlay and the eyebrow and headline in white, as on
   the homepage and /inspector-portal. The subline, the button and the fine
   print sit under the card on white, so no text crosses the busy part of a
   photo.

   Motion is the homepage's, exactly: the photo zooms with x-kenburns (20s,
   ease-in-out, 600ms delay, infinite alternate) inside the still frame, and
   the text comes in with x-sharpen. Reduced motion: no zoom, no fade.

   Each page sets where its photo is anchored:
     --x-ph-pos      object-position on a desktop (default center)
     --x-ph-pos-sm   object-position on a phone (default --x-ph-pos)

   Loaded LAST in each page's head (after the page's own <style>), so these
   rules win ties with the page's centered-hero rules. Not Brandan's file. */

.x-hero.x-hero--photo {
  min-height: 0; display: block; overflow: visible; isolation: auto;
  padding: 16px clamp(12px, 2vw, 24px) clamp(56px, 7vw, 96px);
  background: #ffffff; text-align: left; color: var(--x-body-ink, #424245);
}
.x-hero.x-hero--photo::before,
.x-hero.x-hero--photo::after { display: none; }
/* The page's own fade-in runs on the hero's children; here the frame stays
   still and only the text moves (below). */
.x-hero.x-hero--photo > * { animation: none; }

/* ---------- The card ---------- */
.x-phero {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; max-width: 1240px; margin-inline: auto;
  min-height: clamp(460px, 64vh, 660px);
  display: flex; align-items: flex-end;
  border-radius: var(--r-xl, 32px); background: #2c3150;
  box-shadow: 0 24px 60px rgb(20 24 44 / 0.22);
}
.x-phero__img {
  position: absolute; inset: 0; z-index: -2; display: block;
  width: 100%; height: 100%; object-fit: cover; object-position: var(--x-ph-pos, center);
  transform-origin: 50% 50%;
}
/* The homepage hero card's overlay (dark at the top, clear through the
   middle), held darker toward the bottom where the white type sits. */
.x-phero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(10 12 24 / 0.38) 0%, rgb(10 12 24 / 0) 26%, rgb(10 12 24 / 0) 40%, rgb(10 12 24 / 0.5) 68%, rgb(10 12 24 / 0.78) 100%);
}
.x-phero__in { width: 100%; max-width: 820px; padding: clamp(28px, 4.5vw, 64px); }
/* x-phero--top: the text sits at the top, for a photo whose calm part is the
   sky (/lenders). The overlay is held darker at the top instead. */
.x-phero.x-phero--top { align-items: flex-start; }
.x-phero.x-phero--top::after {
  background: linear-gradient(180deg, rgb(10 12 24 / 0.62) 0%, rgb(10 12 24 / 0.4) 34%, rgb(10 12 24 / 0) 62%, rgb(10 12 24 / 0) 82%, rgb(10 12 24 / 0.32) 100%);
}
.x-hero--photo .x-phero .x-eyebrow {
  margin: 0; font: 600 15px/1.2 var(--sans); letter-spacing: -0.01em; color: rgb(255 255 255 / 0.86);
}
.x-hero--photo .x-phero h1 {
  margin: 14px 0 0; max-width: 16ch;
  font: 700 clamp(40px, 5.6vw, 76px)/1.04 var(--sans); letter-spacing: -0.04em;
  color: #ffffff; text-wrap: balance; text-shadow: 0 2px 24px rgb(0 0 0 / 0.18);
}

/* ---------- Under the card: subline, button, fine print ---------- */
.x-phero__after {
  width: 100%; max-width: 1240px; margin: clamp(28px, 4vw, 48px) auto 0;
  padding-inline: clamp(4px, 2.5vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px 56px; align-items: start;
}
.x-hero--photo .x-phero__after .x-hero__sub {
  margin: 0; max-width: 46ch;
  font: 400 clamp(18px, 1.6vw, 21px)/1.5 var(--sans); letter-spacing: -0.01em; color: #3a3a3c; text-wrap: pretty;
}
.x-phero__act { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.x-hero--photo .x-phero__act .x-btn { margin: 0; }
.x-hero--photo .x-phero__act .x-fine { margin: 0; max-width: 44ch; font-size: 13px; line-height: 1.5; color: #6e6e73; }

/* ---------- Motion: the homepage's, exactly ---------- */
@keyframes x-kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes x-sharpen { from { opacity: 0; filter: blur(10px); transform: translateY(12px); } to { opacity: 1; filter: blur(0); transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .x-phero__img { animation: x-kenburns 20s ease-in-out 600ms infinite alternate both; }
  .x-phero__in > *, .x-phero__after > * { animation: x-sharpen 900ms var(--x-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) both; }
  .x-phero__in > :nth-child(1) { animation-delay: 380ms; }
  .x-phero__in > :nth-child(2) { animation-delay: 500ms; }
  .x-phero__after > :nth-child(1) { animation-delay: 620ms; }
  .x-phero__after > :nth-child(2) { animation-delay: 740ms; }
}

/* ---------- Tablet and phone ---------- */
@media (max-width: 900px) {
  .x-phero__after { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 640px) {
  .x-hero.x-hero--photo { padding: 10px 10px 48px; }
  .x-phero { min-height: 0; aspect-ratio: 4 / 5; max-height: 560px; border-radius: var(--r-l, 24px); }
  .x-phero__img { object-position: var(--x-ph-pos-sm, var(--x-ph-pos, center)); }
  .x-phero__in { padding: 24px 22px; }
  .x-hero--photo .x-phero .x-eyebrow { font-size: 14px; }
  .x-hero--photo .x-phero h1 { margin-top: 10px; font-size: clamp(34px, 9.6vw, 42px); line-height: 1.06; letter-spacing: -0.035em; }
  .x-phero__after { margin-top: 28px; padding-inline: 12px; }
  .x-hero--photo .x-phero__after .x-hero__sub { font-size: 17px; }
}