/* Intro options K1 and K3 (Figma file QQ1lJk2AzbdIOVbO7u83xf, frames 21:4 and 30:2).
   Loaded after portfolio.css, so the palette, fonts and the .mast nav come from there.
   K1 stacks the two dark case cards; K3 (body.k3) sets them side by side. */
body.kpage { --kink: #2e3a44; }

.kwrap { max-width: var(--wide); margin-inline: auto; }

/* ---------- Masthead ---------- */
.kmast { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem 6rem; align-items: start; padding-block: 5.5rem 4rem; }
.kmast .eyebrow { margin-bottom: 1.25rem; }
.kname { font-family: var(--font-display); font-weight: 400; font-size: clamp(3.75rem, 9vw, 7rem); line-height: 1; letter-spacing: -0.027em; margin: 0; }
.ktag { font-family: var(--font-display); font-size: clamp(1.2rem, 1.8vw, 1.375rem); line-height: 1.45; color: var(--kink); margin: 1.25rem 0 0; max-width: 50rem; text-wrap: pretty; }
.kmeta { margin: 1.75rem 0 0; font-size: 0.875rem; color: var(--muted); }
.kmeta p { margin: 0 0 0.5rem; }
/* The photo keeps its 3:4 shape as a minimum and stretches with the text
   beside it, so the hero text is never taller than the photo. */
.kphoto { margin: 0; width: 100%; align-self: stretch; aspect-ratio: 3 / 4; }
.kphoto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }

/* ---------- Case cards ---------- */
.kcards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.kcard { display: flex; flex-direction: column; gap: 1.1rem; padding: 4rem; border-radius: 8px; color: #f2f4f5; }
.kcard.trust { background: #1d3346; --kick: #9cc3d9; }
.kcard.mr { background: #263f3a; --kick: #a9cdbf; }
.kcard .num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kick); }
.kcard h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.1; letter-spacing: -0.018em; color: #f2f4f5; margin: 0; text-wrap: balance; }
.kcard h2 a { color: inherit; text-decoration: none; }
.kcard p { margin: 0; max-width: 47.5rem; font-size: 1.25rem; line-height: 1.6; color: #d5dde2; }
.kcard .foot { margin-top: auto; padding-top: 0.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; font-size: 0.875rem; color: #aab6bd; }
.kcard .btn { display: inline-block; padding: 0.75rem 1.375rem; border-radius: 4px; background: #f2f4f5; font-size: 0.9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background 160ms ease; }
.kcard.trust .btn { color: #1d3346; }
.kcard.mr .btn { color: #263f3a; }
.kcard .btn:hover { background: #ffffff; }
.kcard .btn:focus-visible { outline-color: #f2f4f5; }

/* K3: the same cards side by side */
body.k3 .kcards { grid-template-columns: 1fr 1fr; }
body.k3 .kcard { padding: 3rem; gap: 1rem; }
body.k3 .kcard h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.12; }
body.k3 .kcard p { font-size: 1.125rem; }
/* half-width cards: role above the button in both, so the buttons line up */
body.k3 .kcard .foot { flex-direction: column; align-items: flex-start; gap: 1rem; }

.kearlier { margin: 4rem 0 0; font-size: 0.9375rem; color: var(--muted); }
body.kpage footer { margin-top: 4rem; }

@media (max-width: 960px) {
  body.k3 .kcards { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .kmast { grid-template-columns: 1fr; padding-block: 3rem 2.5rem; gap: 2rem; }
  .kphoto { max-width: 240px; grid-row: 1; }
  .kcard, body.k3 .kcard { padding: 2rem 1.5rem; }
}