/* Wakále Amotí page, redesign preview (Botonomy, 2026-10-12).
   The flagship build's type, spacing and components, re-tokened to the kwaji.org palette.
   Every colour is one of the site's own custom properties (set on the theme root, swapped by the
   Direction switch), so the page follows Direction A and B like the rest of the site. */

body { margin: 0; }
.kj *, .kj *::before, .kj *::after, .kj-theme * { box-sizing: border-box; }
.kj {
  --wa-display: "Familjen Grotesk", system-ui, -apple-system, sans-serif;
  --wa-text: "General Sans", "Familjen Grotesk", system-ui, sans-serif;
  --t-eyebrow: clamp(11px, .72vw, 12px);
  --t-small: clamp(13px, .85vw, 14px);
  --t-body: clamp(15px, 1.05vw, 17px);
  --t-lede: clamp(19px, 1.6vw, 24px);
  --t-h4: clamp(20px, 1.7vw, 26px);
  --t-h3: clamp(26px, 2.6vw, 38px);
  --t-h2: clamp(38px, 5vw, 68px);
  --t-h1: clamp(54px, 8.4vw, 120px);
  --gutter: clamp(20px, 4vw, 56px);
  --max-w: 1440px;
  --r-outer: 28px;
  --r-inner: 20px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  font-family: var(--wa-text);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink, #000);
  background: var(--bg, #fff);
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
}
.kj h1, .kj h2, .kj h3, .kj h4 {
  font-family: var(--wa-display);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.04;
  margin: 0;
  text-transform: none;
  color: inherit;
}
.kj h1 em, .kj h2 em, .kj h3 em { font-style: italic; color: var(--accent, #8f6b0f); }
.kj p { margin: 0 0 16px; max-width: 62ch; }
.kj a { color: inherit; }
.kj .shell { width: 100%; max-width: var(--max-w); margin: 0 auto; padding-inline: var(--gutter); }
.kj .section { padding-block: clamp(80px, 12vw, 168px); }
.kj .section--tight { padding-block: clamp(56px, 8vw, 104px); }

/* ---- labels ---- */
.kj .kicker {
  display: block;
  font-family: var(--wa-text);
  font-size: var(--t-small);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent, #8f6b0f);
  font-weight: 500;
  margin-bottom: 20px;
}
.kj .eyebrow {
  display: inline-block;
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 500;
  padding: 6px 14px;
  border: 1px solid var(--onprimary-line, rgba(212,175,55,.4));
  border-radius: 999px;
  color: var(--onprimary, #fff);
  background: rgba(255, 255, 255, .06);
}
.kj .lede { font-size: var(--t-lede); line-height: 1.45; max-width: 38ch; }

/* ---- on-navy and on-clay surfaces ---- */
.kj .on-primary { background: var(--primary, #003366); color: var(--onprimary, #fff); }
.kj .on-primary p, .kj .on-primary .muted { color: var(--onprimary-dim, rgba(255,255,255,.82)); }
.kj .on-primary h2 em, .kj .on-primary h3 em, .kj .on-primary .kicker { color: var(--accent-soft, #D4AF37); }
.kj .on-clay { background: var(--clay, #8B0000); color: #fbf3e6; }
.kj .on-clay p { color: rgba(251, 243, 230, .86); }
.kj .on-clay h2 em, .kj .on-clay .kicker { color: var(--accent-soft, #D4AF37); }
.kj .on-surface { background: var(--surface, #f6f7fa); }
.kj .muted { color: var(--muted, #4a4f5a); }

/* ---- buttons ---- */
.kj .cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--wa-text); font-size: var(--t-small); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  padding: 14px 22px; border-radius: 999px;
  background: var(--accent-soft, #D4AF37); color: #0b0b0b;
  border: 1px solid transparent;
  transition: transform .42s var(--ease), background .42s var(--ease);
}
.kj .cta:hover { transform: translateY(-1px); background: #e2c25a; color: #0b0b0b; }
.kj .cta--lg { padding: 18px 28px; }
.kj .cta--ghost { background: transparent; color: inherit; border-color: var(--onprimary-line, rgba(212,175,55,.4)); }
.kj .cta--ghost:hover { background: rgba(212, 175, 55, .12); color: inherit; }
.kj .cta--ink { background: var(--primary, #003366); color: var(--onprimary, #fff); }
.kj .cta--ink:hover { background: #0a4a8a; color: #fff; }
.kj .cta__arrow { font-family: var(--wa-display); }

/* ---- hero ---- */
.kj .hero { position: relative; overflow: hidden; color: var(--onprimary, #fff); }
.kj .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kj .hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,51,102,.96) 10%, rgba(0,51,102,.80) 55%, rgba(0,51,102,.46)); }
.kj .hero__inner { position: relative; padding-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(56px, 7vw, 104px); }
.kj .hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.kj .hero h1 em { color: var(--accent-soft, #D4AF37); }
.kj .hero__display { font-size: var(--t-h1); letter-spacing: -.035em; line-height: 1.0; margin: 24px 0 20px; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.kj .hero__lede { color: var(--onprimary-dim, rgba(255,255,255,.82)); margin-bottom: 32px; }
.kj .hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(40px, 5vw, 64px); }
.kj .hero__meta { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--onprimary-line, rgba(212,175,55,.4)); }
.kj .hero__meta-cell { padding: 18px 18px 0 0; border-right: 1px solid var(--onprimary-line, rgba(212,175,55,.4)); margin-right: 18px; }
.kj .hero__meta-cell:last-child { border-right: 0; margin-right: 0; }
.kj .hero__meta .k { display: block; font-size: var(--t-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--onprimary-dim, rgba(255,255,255,.82)); margin-bottom: 6px; }
.kj .hero__meta .v { display: block; font-family: var(--wa-display); font-size: var(--t-h4); line-height: 1.1; }

/* the mandala: the wheel's own markup, scaled to its column by a few lines of script */
.kj .mandala { position: relative; width: min(620px, 100%); aspect-ratio: 1; margin: 0 auto; }
.kj .mandala__box { position: absolute; left: 0; top: 0; width: 620px; height: 620px; transform-origin: 0 0; }
.kj .mandala__card { transition: transform .42s var(--ease); }
.kj .mandala__card:hover { transform: translateY(-3px); }

/* ---- section head ---- */
.kj .section-head { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.kj .section-head--solo { grid-template-columns: 1fr; }
.kj .section-head__title { font-size: var(--t-h2); letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; }
.kj .section-head__body { max-width: 50ch; font-size: var(--t-lede); line-height: 1.45; }
.kj .section-head--solo .section-head__body { max-width: 65ch; }

/* ---- bento tiles (nine modules) ---- */
.kj .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.kj .tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 240px; padding: 26px; border-radius: var(--r-outer); text-decoration: none;
  background: var(--surface, #f6f7fa); color: var(--ink, #000); border: 1px solid var(--line, #d7dbe3);
  transition: transform .42s var(--ease), box-shadow .42s var(--ease);
}
.kj .tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, .14); color: inherit; }
.kj .tile--navy { background: var(--primary, #003366); color: var(--onprimary, #fff); border-color: transparent; }
.kj .tile--clay { background: var(--clay, #8B0000); color: #fbf3e6; border-color: transparent; }
.kj .tile--gold { background: var(--accent-soft, #D4AF37); color: #0b0b0b; border-color: transparent; }
.kj .tile--span-4 { grid-column: span 4; } .kj .tile--span-5 { grid-column: span 5; }
.kj .tile--span-7 { grid-column: span 7; } .kj .tile--span-8 { grid-column: span 8; } .kj .tile--span-12 { grid-column: span 12; }
.kj .tile__head { font-size: var(--t-eyebrow); letter-spacing: .2em; text-transform: uppercase; opacity: .78; }
.kj .tile__title, .kj .tile__sub { display: block; }
.kj .tile__title { font-family: var(--wa-display); font-size: var(--t-h3); letter-spacing: -.02em; line-height: 1.05; margin-top: 28px; }
.kj .tile__sub { font-size: var(--t-small); opacity: .82; margin-top: 8px; max-width: 30ch; }
.kj .tile__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; font-size: var(--t-small); letter-spacing: .08em; text-transform: uppercase; }
.kj .tile__arrow { font-family: var(--wa-display); font-size: var(--t-h4); }

/* ---- image + text split ---- */
.kj .land { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.kj .land--rev .land__media { order: 2; }
.kj .land__media { border-radius: var(--r-outer); overflow: hidden; aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.kj .land__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kj .land__title { font-size: var(--t-h2); letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; margin-bottom: 20px; }
.kj .land__sub { display: block; font-family: var(--wa-display); font-style: italic; font-size: var(--t-h4); margin: -10px 0 20px; }

/* ---- includes list ---- */
.kj .includes { list-style: none; margin: 24px 0 28px; padding: 0; border-top: 1px solid var(--onprimary-line, rgba(212,175,55,.4)); max-width: 46ch; }
.kj .includes li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--onprimary-line, rgba(212,175,55,.4)); }
.kj .includes .label { flex: 0 0 7.5em; font-size: var(--t-eyebrow); letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.kj .includes .check { font-family: var(--wa-display); font-size: var(--t-h4); line-height: 1.1; }
.kj .section--light .includes, .kj .section--light .includes li { border-color: var(--line, #d7dbe3); }

/* ---- two-part text block + pills ---- */
.kj .tcol { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.kj .tcol__head .section-head__title { margin-bottom: 0; }
.kj .tcol__body p { max-width: 64ch; font-size: var(--t-lede); line-height: 1.45; }
.kj .pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.kj .pill {
  display: inline-flex; gap: 10px; align-items: baseline; padding: 10px 16px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line, #d7dbe3); background: var(--surface, #f6f7fa); color: var(--ink, #000);
  font-size: var(--t-small); transition: background .3s var(--ease), border-color .3s var(--ease);
}
.kj .pill:hover { border-color: var(--accent-soft, #D4AF37); background: rgba(212, 175, 55, .14); color: inherit; }
.kj .pill b { font-weight: 500; letter-spacing: .14em; font-size: var(--t-eyebrow); color: var(--accent, #8f6b0f); }

/* ---- the nine module rows ---- */
.kj .mods { display: grid; gap: clamp(56px, 8vw, 120px); }
.kj .mod { scroll-margin-top: 110px; }
.kj .mod .kicker { margin-bottom: 10px; }
.kj .mod__eyebrow { display: block; font-size: var(--t-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--muted, #4a4f5a); margin-bottom: 16px; }
.kj .mod__title { font-size: var(--t-h3); letter-spacing: -.025em; line-height: 1.06; margin-bottom: 18px; }
.kj .mod__motto { font-family: var(--wa-display); font-style: italic; font-size: var(--t-h4); line-height: 1.3; color: var(--primary, #003366); margin: 0 0 24px; max-width: 30ch; }
.kj .mod .land__media { aspect-ratio: 5 / 4; }

/* ---- workshop bench gallery ---- */
.kj .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kj .gallery figure { margin: 0; }
.kj .gallery .frame { border-radius: var(--r-inner); overflow: hidden; aspect-ratio: 4 / 3; }
.kj .gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .72s var(--ease); }
.kj .gallery figure:hover img { transform: scale(1.03); }
.kj .gallery figcaption { display: flex; justify-content: space-between; padding: 12px 4px 0; font-size: var(--t-small); letter-spacing: .08em; text-transform: uppercase; }
.kj .gallery figcaption span { color: var(--accent-soft, #D4AF37); }
.kj .note { margin-top: 40px; font-size: var(--t-small); max-width: 62ch; padding-top: 18px; border-top: 1px solid var(--onprimary-line, rgba(212,175,55,.4)); }

/* ---- steps timeline ---- */
.kj .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line, #d7dbe3); }
.kj .step { padding: 28px 24px 0 0; border-right: 1px solid var(--line, #d7dbe3); margin-right: 24px; }
.kj .step:last-child { border-right: 0; margin-right: 0; }
.kj .step__num { font-family: var(--wa-display); font-size: var(--t-h3); color: var(--accent, #8f6b0f); line-height: 1; }
.kj .step__title { font-size: var(--t-h4); margin: 24px 0 10px; }
.kj .step__body { font-size: var(--t-small); line-height: 1.55; color: var(--muted, #4a4f5a); max-width: 28ch; }

/* ---- lead figure ---- */
.kj .lead-figure { margin: 0; border-radius: var(--r-outer); overflow: hidden; aspect-ratio: 21 / 9; }
.kj .lead-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- calendar ---- */
.kj .calendar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.kj .cal-cell { display: flex; flex-direction: column; padding: 24px; border-radius: var(--r-inner); background: var(--bg, #fff); border: 1px solid var(--line, #d7dbe3); min-height: 240px; }
.kj .cal-cell__when { font-size: var(--t-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--accent, #8f6b0f); }
.kj .cal-cell__name { font-family: var(--wa-display); font-size: var(--t-h4); line-height: 1.1; margin: 14px 0 10px; }
.kj .cal-cell__desc { font-size: var(--t-small); color: var(--muted, #4a4f5a); flex: 1; }
.kj .cal-cell__cta { margin-top: 18px; font-size: var(--t-small); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--primary, #003366); }
.kj .cal-cell__cta:hover { color: var(--clay, #8B0000); }

/* ---- closing covenant ---- */
.kj .closing { text-align: center; }
.kj .closing .kicker { margin-bottom: 28px; }
.kj .closing__quote { font-family: var(--wa-display); font-style: italic; font-size: var(--t-h3); letter-spacing: -.02em; line-height: 1.25; max-width: 30ch; margin: 0 auto 36px; text-wrap: balance; }
.kj .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.kj .chip { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--onprimary-line, rgba(212,175,55,.4)); font-size: var(--t-small); letter-spacing: .08em; text-transform: uppercase; }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .kj .hero__grid { grid-template-columns: 1fr; }
  .kj .hero__meta { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .kj .hero__meta-cell:nth-child(2) { border-right: 0; }
  .kj .steps { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .kj .step:nth-child(3) { border-right: 0; }
  .kj .calendar { grid-template-columns: repeat(3, 1fr); }
  .kj .tile--span-4, .kj .tile--span-5, .kj .tile--span-7, .kj .tile--span-8 { grid-column: span 6; }
}
@media (max-width: 768px) {
  .kj .section-head, .kj .tcol, .kj .land { grid-template-columns: 1fr; }
  .kj .land--rev .land__media { order: 0; }
  .kj .hero__meta { grid-template-columns: 1fr 1fr; }
  .kj .bento { gap: 10px; }
  .kj .tile--span-4, .kj .tile--span-5, .kj .tile--span-7, .kj .tile--span-8, .kj .tile--span-12 { grid-column: span 12; }
  .kj .tile { min-height: 0; }
  .kj .gallery { grid-template-columns: 1fr 1fr; }
  .kj .steps { grid-template-columns: 1fr; }
  .kj .step { border-right: 0; margin-right: 0; padding-right: 0; border-bottom: 1px solid var(--line, #d7dbe3); padding-bottom: 24px; }
  .kj .step:last-child { border-bottom: 0; }
  .kj .calendar { grid-template-columns: 1fr; }
  .kj .cal-cell { min-height: 0; }
  .kj .includes { max-width: none; }
  .kj .lead-figure { aspect-ratio: 4 / 3; }
}
@media (max-width: 480px) {
  .kj .hero__meta { grid-template-columns: 1fr; }
  .kj .hero__meta-cell { border-right: 0; margin-right: 0; }
  .kj .gallery { grid-template-columns: 1fr; }
}

/* ---- additions for the whole-site re-set ---- */
.kj .hero--plain { min-height: 0; }
.kj .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kj .hero__seal { width: min(540px, 100%); margin: 0 auto; display: block; filter: drop-shadow(0 12px 34px rgba(0,0,0,.35)); }
.kj .hero__media { border-radius: var(--r-outer); overflow: hidden; aspect-ratio: 4 / 5; }
.kj .hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kj .notice { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line, #d7dbe3); font-size: var(--t-small); }
.kj .notice > span:first-child { font-size: var(--t-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--accent, #8f6b0f); font-weight: 500; }
.kj .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.kj .card { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-outer); background: var(--surface, #f6f7fa); border: 1px solid var(--line, #d7dbe3); }
.kj .on-primary .card, .kj .on-clay .card { background: rgba(255,255,255,.06); border-color: var(--onprimary-line, rgba(212,175,55,.4)); }
.kj .on-surface .card { background: var(--bg, #fff); }
.kj .card .kicker { margin-bottom: 14px; }
.kj .card__title { font-size: var(--t-h4); margin-bottom: 12px; }
.kj .card p { font-size: var(--t-small); line-height: 1.6; }
.kj .card .cta { margin-top: auto; align-self: flex-start; }
.kj .card .card__media { border-radius: var(--r-inner); overflow: hidden; aspect-ratio: 4 / 3; margin: 0 0 18px; }
.kj .card .card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kj .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 28px; border-top: 1px solid var(--line, #d7dbe3); margin: 8px 0 28px; max-width: 100%; }
.kj .on-primary .facts, .kj .on-clay .facts { border-color: var(--onprimary-line, rgba(212,175,55,.4)); }
.kj .facts > div { padding: 16px 0; border-bottom: 1px solid var(--line, #d7dbe3); font-size: var(--t-small); line-height: 1.5; }
.kj .on-primary .facts > div, .kj .on-clay .facts > div { border-color: var(--onprimary-line, rgba(212,175,55,.4)); }
.kj .facts .k { display: block; font-size: var(--t-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--accent, #8f6b0f); margin-bottom: 4px; }
.kj .on-primary .facts .k, .kj .on-clay .facts .k { color: var(--accent-soft, #D4AF37); }
.kj .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; border-top: 1px solid var(--line, #d7dbe3); padding-top: 24px; }
.kj .stats .v { display: block; font-family: var(--wa-display); font-size: var(--t-h2); letter-spacing: -.03em; line-height: 1; color: var(--primary, #003366); }
.kj .stats .k { display: block; margin-top: 10px; font-size: var(--t-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--muted, #4a4f5a); }
.kj .pull { font-family: var(--wa-display); font-style: italic; font-size: var(--t-h3); letter-spacing: -.02em; line-height: 1.25; max-width: 32ch; margin: 24px 0 32px; color: var(--primary, #003366); text-wrap: balance; }
.kj .on-primary .pull, .kj .on-clay .pull { color: inherit; }
.kj .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 24px; }
.kj .gallery--loose figure .frame { aspect-ratio: 4 / 3; }
.kj .gallery--loose figcaption { text-transform: none; letter-spacing: 0; color: var(--muted, #4a4f5a); }
.kj .prose p { max-width: 68ch; }
.kj .land__media--contain img { object-fit: contain; background: var(--surface, #f6f7fa); }
.kj .land__media--contain { aspect-ratio: auto; max-height: 520px; }

/* ---- the site chrome: the flagship's glossy floating pill, carrying the Nation's seal, wordmark and menu ---- */
.kj-chrome { position: fixed; top: 0; left: 0; right: 0; z-index: 60; font-family: "General Sans", system-ui, sans-serif; }
.kj-top { background: rgba(0,0,0,.92); color: rgba(255,255,255,.82); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; backdrop-filter: blur(10px); }
.kj-top__inner { max-width: 1440px; margin: 0 auto; padding: 8px clamp(20px, 4vw, 56px); display: flex; gap: 10px 24px; align-items: center; justify-content: space-between; }
.kj-top a { color: inherit; text-decoration: none; }
.kj-lang { display: inline-flex; border: 1px solid rgba(212,175,55,.5); border-radius: 999px; overflow: hidden; }
.kj-lang button { font: inherit; letter-spacing: inherit; text-transform: inherit; background: transparent; color: inherit; border: 0; padding: 5px 11px; cursor: pointer; }
.kj-lang button[aria-pressed="true"] { background: #D4AF37; color: #0b0b0b; }
.kj-header { padding: 12px clamp(20px, 4vw, 56px); }   /* even space above and below the pill (review note) */
.kj-header__inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 22px; padding: 9px 10px 9px 16px; border-radius: 999px; background: rgba(11,11,11,.74); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid rgba(212,175,55,.45); box-shadow: 0 12px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08); }
.kj-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.kj-brand img { width: 42px; height: 42px; object-fit: contain; }
.kj-brand b { display: block; font-family: "Familjen Grotesk", system-ui, sans-serif; font-weight: 500; font-size: 19px; letter-spacing: .02em; color: #D4AF37; line-height: 1; white-space: nowrap; }
.kj-brand small { display: block; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.66); margin-top: 5px; }
.kj-nav { display: flex; gap: clamp(12px, 1.6vw, 28px); margin-left: auto; margin-right: 8px; }
.kj-nav a { position: relative; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.8); text-decoration: none; white-space: nowrap; padding: 6px 0; transition: color .22s; }
.kj-nav a:hover, .kj-nav a[aria-current="page"] { color: #fff; }
.kj-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 4px; height: 4px; border-radius: 50%; background: #D4AF37; transform: translateX(-50%); }
.kj-header .cta { background: #D4AF37; color: #0b0b0b; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; text-decoration: none; padding: 12px 20px; border-radius: 999px; white-space: nowrap; transition: transform .3s; }
.kj-header .cta:hover { transform: translateY(-1px); }
.kj-burger { display: none; width: 44px; height: 44px; border: 1px solid rgba(212,175,55,.5); border-radius: 999px; background: transparent; cursor: pointer; margin-left: auto; }
.kj-burger span { display: block; width: 18px; height: 2px; background: #D4AF37; margin: 3px auto; }
.kj-sheet { display: none; position: fixed; inset: 0; z-index: 70; background: rgba(11,11,11,.97); padding: 80px clamp(20px, 6vw, 56px); flex-direction: column; gap: 4px; overflow: auto; }
html.kj-open .kj-sheet { display: flex; }
.kj-sheet a { font-family: "Familjen Grotesk", system-ui, sans-serif; font-size: clamp(24px, 6vw, 32px); color: #F7F5F0; text-decoration: none; padding: 10px 0; border-bottom: 1px solid rgba(212,175,55,.25); }
.kj-sheet__close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(212,175,55,.5); background: transparent; color: #D4AF37; font-size: 20px; cursor: pointer; }
@media (max-width: 1180px) { .kj-nav, .kj-header .cta { display: none; } .kj-burger { display: block; } }
@media (max-width: 600px) { .kj-top__inner > span:first-child { display: none; } .kj-top__inner { justify-content: center; } }
.kj .hero { padding-top: clamp(130px, 9.5vw, 144px); }   /* just clears the fixed chrome (review r2: no empty band under the nav) */
.kj .hero__inner { padding-top: clamp(20px, 2.5vw, 32px); }
.kj .hero__grid { align-items: start; }
.kj .hero__media { aspect-ratio: auto; max-height: 540px; }
.kj .hero__media img { max-height: 540px; }
.kj .hero__seal { width: min(440px, 100%); }
.kj-footer { background: var(--primary, #003366); color: var(--onprimary-dim, rgba(255,255,255,.82)); font-family: "General Sans", system-ui, sans-serif; border-top: 4px solid #D4AF37; }
.kj-footer__inner { max-width: 1440px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 56px) 32px; }
.kj-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 5vw, 64px); }
.kj-footer h4 { font-family: "Familjen Grotesk", system-ui, sans-serif; font-weight: 400; font-size: clamp(20px, 1.7vw, 26px); color: #fff; margin: 0 0 20px; letter-spacing: -.015em; }
.kj-footer ul { list-style: none; margin: 0; padding: 0; }
.kj-footer li { padding: 6px 0; font-size: clamp(14px, 1vw, 16px); }
.kj-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.kj-footer a:hover { color: #D4AF37; }
.kj-footer__brand img { width: 74px; height: 74px; object-fit: contain; }
.kj-footer__brand b { display: block; font-family: "Familjen Grotesk", system-ui, sans-serif; font-weight: 500; font-size: 24px; color: #D4AF37; margin: 16px 0 4px; }
.kj-footer__brand i { display: block; font-style: italic; color: rgba(255,255,255,.7); margin-bottom: 14px; }
.kj-footer__brand p { max-width: 36ch; font-size: 15px; line-height: 1.6; margin: 0; }
.kj-footer__legal { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--onprimary-line, rgba(212,175,55,.4)); font-size: 13px; }
.kj-direction { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff; color: #000; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-family: "General Sans", system-ui, sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.kj-direction button { font: inherit; letter-spacing: inherit; text-transform: inherit; border: 0; background: transparent; padding: 6px 10px; border-radius: 6px; cursor: pointer; color: #000; }
.kj-direction button[aria-pressed="true"] { background: #D4AF37; }
@media (max-width: 900px) { .kj-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .kj-footer__grid { grid-template-columns: 1fr; } }

/* ---- components the page designs add ---- */
.kj .hero__meta { margin-top: clamp(40px, 5vw, 64px); }
.kj .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.kj .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kj .rows { border-top: 1px solid var(--line, #d7dbe3); }
.kj .row { display: grid; grid-template-columns: 11rem 1fr auto; gap: 16px 28px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line, #d7dbe3); }
.kj .on-primary .rows, .kj .on-primary .row { border-color: var(--onprimary-line, rgba(212,175,55,.4)); }
.kj .row__k { font-size: var(--t-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--accent, #8f6b0f); font-weight: 500; }
.kj .on-primary .row__k { color: var(--accent-soft, #D4AF37); }
.kj .row__t { font-family: var(--wa-display); font-size: var(--t-h4); line-height: 1.15; }
.kj .row__b { font-size: var(--t-small); color: var(--muted, #4a4f5a); max-width: 62ch; margin: 6px 0 0; }
.kj .on-primary .row__b { color: var(--onprimary-dim, rgba(255,255,255,.82)); }
.kj .row__cta { font-size: var(--t-small); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--primary, #003366); white-space: nowrap; }
.kj .on-primary .row__cta { color: var(--accent-soft, #D4AF37); }
.kj .term { padding: 22px 0; border-bottom: 1px solid var(--line, #d7dbe3); }
.kj .term__h { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.kj .term__t { font-family: var(--wa-display); font-size: var(--t-h4); }
.kj .term__say { font-size: var(--t-small); color: var(--muted, #4a4f5a); font-style: italic; }
.kj .term__ref { font-size: var(--t-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--accent, #8f6b0f); margin-left: auto; }
.kj .term p { font-size: var(--t-small); margin: 8px 0 0; }
.kj .swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.kj .swatch { border-radius: var(--r-inner); border: 1px solid var(--line, #d7dbe3); overflow: hidden; background: var(--surface, #f6f7fa); }
.kj .swatch__chip { height: 72px; }
.kj .swatch__body { padding: 16px 18px; font-size: var(--t-small); }
.kj .swatch__body b { display: block; font-family: var(--wa-display); font-weight: 400; font-size: var(--t-h4); margin-bottom: 4px; }
.kj .form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; max-width: 920px; }
.kj .form__row { display: grid; gap: 8px; }
.kj .form__row--full { grid-column: 1 / -1; }
.kj .form__label { font-size: var(--t-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--muted, #4a4f5a); }
.kj .form__input { font: inherit; font-size: var(--t-body); padding: 14px 16px; border: 1px solid var(--line, #d7dbe3); border-radius: 14px; background: var(--bg, #fff); color: inherit; width: 100%; }
.kj .form__note { font-size: var(--t-small); color: var(--muted, #4a4f5a); }
.kj .certificate { border: 1px solid var(--accent-soft, #D4AF37); border-radius: var(--r-outer); padding: clamp(28px, 4vw, 48px); background: #fbf7ea; color: #000; text-align: center; box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 7px rgba(212,175,55,.5); }
.kj .certificate .seal { width: 110px; height: 110px; margin: 18px auto 0; display: block; }
.kj .certificate h3 { font-size: var(--t-h3); margin: 10px 0 14px; }
.kj .certificate p { margin: 0 auto 10px; max-width: 40ch; }
.kj .portal-tile { padding: 24px; border-radius: var(--r-inner); background: var(--surface, #f6f7fa); border: 1px solid var(--line, #d7dbe3); }
.kj .portal-tile .v { display: block; font-family: var(--wa-display); font-size: var(--t-h3); line-height: 1; color: var(--primary, #003366); margin: 8px 0; }
.kj .wheel-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 900px) { .kj .grid-2, .kj .grid-3, .kj .form { grid-template-columns: 1fr; } .kj .row { grid-template-columns: 1fr; gap: 6px; } }

/* ---- review round 1 fixes (2026-10-13) ---- */
.kj .hero__subline { display: block; font-size: var(--t-h3); letter-spacing: -.02em; margin-top: .25em; }
.kj .land__media--contain { aspect-ratio: auto; max-height: none; }
.kj .land__media--contain img { height: auto; max-height: 560px; object-fit: contain; }
.kj .land + .cards, .kj .land + .prose { margin-top: clamp(40px, 5vw, 72px); }
.kj .card__media--whole { aspect-ratio: auto; background: var(--surface, #f6f7fa); }
.kj .card__media--whole img { height: auto; }
.kj .on-primary .gallery--loose figcaption, .kj .on-clay .gallery--loose figcaption { color: var(--onprimary-dim, rgba(255,255,255,.82)); }
.kj .form__input { color: #000; background: #fff; border-color: #b9bfcb; }
.kj .form__input::placeholder { color: #4a4f5a; }
.kj .form__label { color: #2b2f38; }
.kj .certificate, .kj .certificate p, .kj .certificate .muted, .kj .on-primary .certificate p { color: #1a1a1a; }
.kj .certificate .kicker { color: #8f6b0f; }
.kj .certificate .facts .k { color: #8f6b0f; }
.kj .certificate .facts > div { border-color: rgba(143,107,15,.35); }
.kj .note--centred { text-align: center; margin: clamp(40px, 5vw, 64px) auto 0; max-width: 62ch; font-size: var(--t-small); color: var(--muted, #4a4f5a); }
.kj .hero--novideo-veil .hero__veil { display: none; }
.kj .hero__display--long { font-size: var(--t-h2); }
.kj .hero__media--contain { aspect-ratio: auto; }
.kj .hero__media--contain img { height: auto; max-height: 560px; object-fit: contain; background: transparent; }