/* =====================================================================
   KashManajers public site, image layer ("kv-" classes). Sits on top of kash-public.css.
   Photos live in /images/photos, illustrations in /images/illustrations. Everything adapts to light and dark.
   ===================================================================== */
.kv-photo { position: relative; margin: 0; border-radius: 28px; overflow: hidden; background: var(--hover-bg); box-shadow: var(--kash-shadow-md); border: 1px solid var(--border-color); }
.kv-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kv-photo.r43 { aspect-ratio: 4 / 3; }
.kv-photo.r45 { aspect-ratio: 4 / 5; }
.kv-photo.r169 { aspect-ratio: 16 / 9; }
html[data-theme="dark"] .kv-photo img { filter: brightness(.9) contrast(1.02); }
.kv-ill { width: 100%; display: block; height: auto; }

/* ---------- hero with photo ---------- */
.kv-hero { position: relative; padding: 64px 0 56px; overflow: hidden; }
.kv-hero::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 90%; z-index: 0; pointer-events: none;
  background: radial-gradient(700px 380px at 85% 10%, rgba(29,155,240,.18), transparent 62%), radial-gradient(640px 360px at 5% 8%, rgba(0,201,138,.16), transparent 62%); }
.kv-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.05fr; gap: 44px; align-items: center; }
.kv-hero h1 { font-size: clamp(36px, 5vw, 58px); font-weight: 800; }
.kv-hero .lead { font-size: clamp(17px, 2vw, 20px); color: var(--text-muted); max-width: 540px; margin: 20px 0 28px; line-height: 1.6; }
.kv-stage { position: relative; padding: 0 0 26px 26px; }
.kv-stage .kv-photo { border-radius: 32px; }
.kv-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border-color);
  border-radius: 16px; padding: 10px 14px; font-weight: 800; font-size: 14px; box-shadow: var(--kash-shadow-md); animation: kv-bob 6s ease-in-out infinite; }
.kv-chip i { width: 32px; height: 32px; border-radius: 10px; background: var(--kash-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.kv-chip small { display: block; color: var(--text-muted); font-weight: 600; font-size: 12px; }
.kv-chip.c1 { left: 0; bottom: 70px; }
.kv-chip.c2 { right: -10px; top: 26px; animation-delay: -2s; }
@keyframes kv-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .kv-chip { animation: none; } }
@media (max-width: 900px) {
  .kv-hero { padding: 36px 0 30px; }
  .kv-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .kv-stage { padding: 0 0 20px 0; order: -1; }
  .kv-chip.c2 { right: 8px; top: 12px; } .kv-chip.c1 { left: 8px; bottom: 34px; }
}

/* ---------- trust bar ---------- */
.kv-trustbar { border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); background: var(--surface); }
.kv-trustbar .kp-wrap { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 14px; align-items: center; padding-top: 18px; padding-bottom: 18px; }
.kv-trust-item { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.kv-trust-item i { flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 21px; color: var(--brand-green);
  background: var(--kash-grad-soft); border: 1px solid var(--border-color); }
.kv-trust-more { font-weight: 800; font-size: 14px; text-decoration: none; color: var(--kash-accent) !important; white-space: nowrap; }
@media (max-width: 1000px) { .kv-trustbar .kp-wrap { grid-template-columns: repeat(2, 1fr); } .kv-trust-more { grid-column: 1 / -1; } }
@media (max-width: 520px) { .kv-trustbar .kp-wrap { grid-template-columns: 1fr; } }

/* ---------- split sections with photos ---------- */
.kv-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.kv-split.rev .kv-art { order: -1; }
.kv-split h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; margin-bottom: 14px; }
.kv-split p { color: var(--text-muted); font-size: 17px; margin: 0 0 14px; }
.kv-art { position: relative; }
.kv-float { position: absolute; width: 46%; max-width: 280px; right: -14px; bottom: -26px; background: var(--surface); border: 1px solid var(--border-color); border-radius: 22px;
  padding: 8px; box-shadow: var(--kash-shadow-md); }
.kv-float.left { right: auto; left: -14px; }
.kv-float img { border-radius: 16px; }
@media (max-width: 860px) {
  .kv-split { grid-template-columns: 1fr; gap: 30px; }
  .kv-split.rev .kv-art { order: 0; }
  .kv-float { right: 8px; bottom: -22px; width: 44%; } .kv-float.left { left: 8px; }
}

/* ---------- illustration panel ---------- */
.kv-panel { background: radial-gradient(520px 260px at 90% 0%, rgba(29,155,240,.13), transparent 62%), radial-gradient(520px 260px at 0% 100%, rgba(0,201,138,.12), transparent 62%), var(--surface);
  border: 1px solid var(--border-color); border-radius: 30px; padding: 22px; }

/* ---------- big banner (careers, about) ---------- */
.kv-banner { position: relative; isolation: isolate; color: #fff; overflow: hidden; border-radius: 0 0 36px 36px; min-height: 440px; display: flex; align-items: flex-end; }
.kv-banner > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.kv-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,14,26,.86) 0%, rgba(8,14,26,.62) 48%, rgba(8,14,26,.12) 100%), linear-gradient(0deg, rgba(8,14,26,.55), transparent 55%); }
.kv-banner .kp-wrap { padding-top: 90px; padding-bottom: 56px; }
.kv-banner h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 800; color: #fff; max-width: 720px; }
.kv-banner h1 span { background: linear-gradient(120deg, #7CC8FF, #4DF0B8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.kv-banner p { font-size: clamp(16px, 2vw, 19px); color: rgba(255,255,255,.86); max-width: 560px; margin: 16px 0 26px; }
.kv-banner .kp-btn.ghost { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff !important; }
.kv-banner .kp-btn.ghost:hover { background: rgba(255,255,255,.24); }
.kv-banner .kv-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-weight: 700; font-size: 14px; color: rgba(255,255,255,.88); }
.kv-banner .kv-facts span { display: inline-flex; gap: 7px; align-items: center; } .kv-banner .kv-facts i { color: #4DF0B8; font-size: 18px; }
@media (max-width: 700px) { .kv-banner { min-height: 400px; border-radius: 0 0 26px 26px; } .kv-banner::after { background: linear-gradient(0deg, rgba(8,14,26,.9), rgba(8,14,26,.45)); } .kv-banner .kp-wrap { padding-top: 70px; padding-bottom: 36px; } }

/* ---------- wide photo under a page header ---------- */
.kv-wide { margin: 0 auto 10px; }
.kv-wide .kv-photo { aspect-ratio: 21 / 9; border-radius: 34px; }
.kv-wide .kv-photo img { object-position: 50% 35%; }
@media (max-width: 700px) { .kv-wide .kv-photo { aspect-ratio: 4 / 3; border-radius: 24px; } }

/* ---------- dark feature band (security teaser) ---------- */
.kv-dark { position: relative; isolation: isolate; border-radius: 34px; overflow: hidden; color: #fff; margin: 0 auto; }
.kv-dark > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.kv-dark::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6,12,24,.94) 0%, rgba(6,12,24,.78) 50%, rgba(6,12,24,.25) 100%); }
.kv-dark-in { padding: 64px 44px; max-width: 620px; }
.kv-dark h2 { color: #fff; font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; }
.kv-dark p { color: rgba(255,255,255,.82); font-size: 17px; margin: 14px 0 22px; }
.kv-dark .kp-ticks li { color: #fff; }
.kv-dark .kp-btn.ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff !important; }
@media (max-width: 700px) { .kv-dark-in { padding: 40px 24px; } .kv-dark::after { background: linear-gradient(0deg, rgba(6,12,24,.92), rgba(6,12,24,.6)); } }

/* ---------- steps next to an illustration ---------- */
.kv-steps { display: grid; gap: 14px; margin-top: 20px; counter-reset: s; }
.kv-steps li { list-style: none; counter-increment: s; position: relative; background: var(--surface); border: 1px solid var(--border-color); border-radius: 18px; padding: 16px 18px 16px 66px; }
.kv-steps li::before { content: counter(s); position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--kash-grad); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.kv-steps b { display: block; font-size: 16.5px; margin-bottom: 2px; }
.kv-steps span { color: var(--text-muted); font-size: 15px; }
.kv-steps { padding: 0; margin-bottom: 0; }

/* ---------- call-to-action with a photo ---------- */
.kv-cta { display: grid; grid-template-columns: 1.2fr .8fr; align-items: stretch; background: var(--surface); border: 1px solid var(--border-color); border-radius: 32px; overflow: hidden; box-shadow: var(--kash-shadow-md); }
.kv-cta-text { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.kv-cta-text h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; margin-bottom: 12px; }
.kv-cta-text p { color: var(--text-muted); font-size: 17px; margin: 0 0 22px; max-width: 460px; }
.kv-cta-img { position: relative; min-height: 280px; } .kv-cta-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
@media (max-width: 800px) { .kv-cta { grid-template-columns: 1fr; } .kv-cta-img { order: -1; min-height: 240px; } .kv-cta-text { padding: 30px 24px; } }

/* ---------- how we hire (timeline cards) ---------- */
.kv-hire { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px; }
.kv-hire div { background: var(--surface); border: 1px solid var(--border-color); border-radius: 20px; padding: 20px 18px; }
.kv-hire i { display: inline-flex; width: 42px; height: 42px; border-radius: 13px; align-items: center; justify-content: center; font-size: 22px; color: #fff; background: var(--kash-grad); margin-bottom: 12px; }
.kv-hire b { display: block; font-size: 16px; margin-bottom: 4px; } .kv-hire span { color: var(--text-muted); font-size: 14.5px; }
@media (max-width: 900px) { .kv-hire { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .kv-hire { grid-template-columns: 1fr; } }

/* ---------- help card (FAQ, security) ---------- */
.kv-help { display: grid; grid-template-columns: .9fr 1.1fr; background: var(--surface); border: 1px solid var(--border-color); border-radius: 30px; overflow: hidden; box-shadow: var(--kash-shadow-md); margin: 40px auto 80px; }
.kv-help .img { position: relative; min-height: 260px; } .kv-help .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 20%; }
.kv-help .txt { padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.kv-help h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; margin-bottom: 10px; }
.kv-help p { color: var(--text-muted); font-size: 17px; margin: 0 0 20px; }
.kv-help .row { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 800px) { .kv-help { grid-template-columns: 1fr; } .kv-help .txt { padding: 28px 22px; } }

/* ---------- security hero + cards ---------- */
.kv-sec-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; padding: 56px 0 34px; }
.kv-sec-hero h1 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; }
.kv-sec-hero p { color: var(--text-muted); font-size: 18px; margin: 14px 0 18px; max-width: 520px; }
@media (max-width: 900px) { .kv-sec-hero { grid-template-columns: 1fr; padding-top: 34px; } .kv-sec-hero .kv-photo { order: -1; } }

/* ---------- app page hero ---------- */
.kv-app-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 50px 0 30px; }
.kv-app-hero h1 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; }
.kv-app-hero p { color: var(--text-muted); font-size: 18px; margin: 14px 0 0; max-width: 480px; }
.kv-app-art { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 14px; align-items: end; }
.kv-app-art .kv-photo { border-radius: 26px; }
@media (max-width: 860px) { .kv-app-hero { grid-template-columns: 1fr; padding-top: 30px; } .kv-app-art { order: -1; max-width: 520px; margin: 0 auto; } }

.kv-section-tight { padding-top: 20px; }
.kv-center { text-align: center; }

/* job page header with an illustration */
.kv-job-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 30px; align-items: center; }
.kv-job-art { max-width: 320px; justify-self: end; }
@media (max-width: 860px) { .kv-job-head { grid-template-columns: 1fr; } .kv-job-art { display: none; } }

/* careers search box must never push the page wider than a phone */
.kc-search input { min-width: 0; }
.kc-search .kp-btn { flex: none; }