/* kx-menu-column: one column of a header mega panel (Kairos Menu Column widget, widgets/menu-column).
   Depends on kx-tokens. Markup keeps the .kx-header__col classes; the root carries .kx itself so the
   column also renders on its own in the saved template's editor. Panel-level rules (--wide) apply
   once the column sits inside the header. */
.kx.kx-header__col, .kx .kx-header__col { display: flex; flex-direction: column; gap: 47px; width: 400px; max-width: calc(50% - 24px); }
.kx .kx-header__panel--wide .kx-header__col { flex: 1 1 0; min-width: 0; width: auto; max-width: none; gap: 15px; }
.kx .kx-header__col-head { display: flex; flex-direction: column; gap: 0.5rem; }
.kx .kx-header__col-title { font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.018em; font-weight: 600; font-stretch: 100%; color: #fff; } /* Figma size, Kairos heading voice (kx-heading--h3) */
.kx .kx-header__col-logo { display: flex; align-items: flex-end; height: 32px; margin-bottom: 9px; }
.kx .kx-header__col-logo img { width: 193px; height: auto; }
.kx .kx-header__col-lead { font-size: 1rem; line-height: 1.5; letter-spacing: -0.006em; color: var(--kx-green); } /* kx-lead tracking */
.kx .kx-header__groups { display: flex; align-items: flex-start; gap: 24px; }
.kx .kx-header__panel--wide .kx-header__groups { gap: 8px; padding-top: 32px; border-top: 1px solid var(--kx-blue); }
.kx .kx-header__group { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; gap: 14px; }
.kx .kx-header__group-label { font-size: var(--kx-text-label); line-height: 1.2; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(255 255 255 / 0.6); } /* kx-eyebrow, as the footer column headings */
.kx .kx-header__group-links { display: flex; flex-direction: column; gap: 14px; }
.kx .kx-header__group-links a { display: block; font-size: var(--kx-text-small); line-height: 1.45; color: rgb(255 255 255 / 0.9); transition: color var(--kx-duration-base); } /* as the footer links */
.kx .kx-header__group-links a:hover { color: var(--kx-green); }
/* product cards: 180 x 260, photo on top, Dark Navy base with the photo fading into it */
.kx .kx-header__cards { display: flex; justify-content: space-between; gap: 24px; }
.kx .kx-header__card { position: relative; display: block; flex: none; width: 180px; height: 260px; overflow: hidden; border-radius: 8px; background: var(--kx-navy); color: #fff; }
.kx .kx-header__card-media { position: absolute; inset: 0 0 auto 0; height: 176px; }
.kx .kx-header__card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--kx-duration-slow) var(--kx-ease-kairos); }
.kx .kx-header__card:hover .kx-header__card-media img { transform: scale(1.04); }
.kx .kx-header__card-media::after { content: ""; position: absolute; inset: 92px 0 -18px 0; background: linear-gradient(to top, var(--kx-navy) 13.7%, rgb(4 49 75 / 0)); }
.kx .kx-header__card-body { position: absolute; left: 15px; right: 15px; top: 185px; display: flex; flex-direction: column; gap: 0.25rem; }
.kx .kx-header__card-title { font-size: 1rem; line-height: 1.3; letter-spacing: -0.012em; font-weight: 600; font-stretch: 100%; }
.kx .kx-header__card-text { font-size: var(--kx-text-label); line-height: 1.45; color: rgb(255 255 255 / 0.8); }