/* kx-hero: port of site/Hero.tsx. The template's <main> already clears the fixed header, so the
   design's pt-[6rem] / lg:pt-[9rem] become 6rem - header-h / 9rem - header-h-lg. */
.kx.kx-hero { position: relative; isolation: isolate; overflow: hidden; padding-top: calc(6rem - var(--kx-header-h)); padding-bottom: 4rem; }
@media (min-width: 1024px) { .kx.kx-hero { display: flex; flex-direction: column; justify-content: center; min-height: calc(56rem - var(--kx-header-h-lg)); padding-top: calc(9rem - var(--kx-header-h-lg)); padding-bottom: 4rem; } }

.kx.kx-hero .kx-hero__photo { position: absolute; inset: 0; z-index: -20; pointer-events: none; }
.kx.kx-hero .kx-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
.kx.kx-hero.kx-hero--focus-center .kx-hero__photo img { object-position: 50% 50%; }
.kx.kx-hero.kx-hero--focus-right .kx-hero__photo img { object-position: 100% 50%; }
.kx.kx-hero .kx-hero__lift { position: absolute; inset: 0; z-index: -10; pointer-events: none;
  background: linear-gradient(100deg, rgb(255 255 255 / 0.96) 0%, rgb(255 255 255 / 0.92) 24%, rgb(255 255 255 / 0.72) 38%, rgb(255 255 255 / 0.3) 52%, rgb(255 255 255 / 0.08) 62%, transparent 72%); }
.kx.kx-hero .kx-hero__fade { position: absolute; inset-inline: 0; bottom: 0; height: 16rem; z-index: -10; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, rgb(255 255 255 / 0.72) 52%, var(--kx-paper) 100%); }

.kx.kx-hero .kx-hero__grid { display: grid; align-items: center; row-gap: 3rem; }
@media (min-width: 1024px) { .kx.kx-hero .kx-hero__grid { grid-template-columns: 30rem minmax(0, 1fr); column-gap: 2rem; } }
.kx.kx-hero .kx-hero__copy { position: relative; max-width: 30rem; }
.kx.kx-hero .kx-hero__eyebrow { display: flex; align-items: center; gap: 0.75rem; color: var(--kx-ink); }
.kx.kx-hero .kx-hero__eyebrow-rule { display: block; width: 2.5rem; height: 1px; background: rgb(4 49 75 / 0.25); }
.kx.kx-hero .kx-hero__lockup { margin: 1.25rem 0 1.75rem; }
.kx.kx-hero .kx-hero__lockup img { height: clamp(3.25rem, 4.6vw, 4.25rem); width: auto; }
.kx.kx-hero .kx-hero__heading { color: var(--kx-navy); }
.kx.kx-hero .kx-hero__accent { color: var(--kx-blue); } /* was --kx-sky: 2.3:1 on the washed photo; Kairos blue clears 3:1 for display text (Andre, q15, 7 Oct) */
/* Phones and tablets: a near-solid white wash behind the copy (q15, M3). The eyebrow measured 1.1:1 over the bare photo. */
@media (max-width: 1023px) { .kx.kx-hero .kx-hero__lift { background: rgb(255 255 255 / 0.9); } .kx.kx-hero .kx-hero__fade { display: none; } }
.kx.kx-hero .kx-hero__lede { margin-top: 1.5rem; max-width: 40ch; color: var(--kx-ink); }
.kx.kx-hero .kx-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2.25rem; }
.kx.kx-hero .kx-hero__magnet { display: inline-block; }

.kx.kx-hero .kx-hero__stage { position: relative; perspective-origin: 38% 50%; }
@media (min-width: 1024px) { .kx.kx-hero .kx-hero__stage { perspective: 1600px; } }
.kx.kx-hero .kx-hero__tilt { position: relative; will-change: transform; }
@media (min-width: 1024px) { .kx.kx-hero .kx-hero__tilt { max-width: 31rem; } .kx.kx-hero .kx-hero__tilt.is-tilted { transform: rotateY(-14deg) rotateX(3.5deg); } }
.kx.kx-hero .kx-hero__panel { width: 100%; border-radius: 1.25rem; }