/* JK Minerals — design system.
   Brief: simple, clear, professional, neat.
   Ornament budget: a 1px rule. Nothing else.

   Type: Public Sans throughout — drawn for publishing dense public information clearly,
   which is exactly this job. IBM Plex Mono carries every figure.
   Colour: #2E3192 is JK's own logo blue, sampled from the mark. Not invented. */

@font-face {
  font-family: 'Public Sans';
  src: url('/assets/fonts/public-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/assets/fonts/public-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/assets/fonts/plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light only;

  --paper: #FFFFFF;
  --paper-2: #F4F5F7;
  --rule: #E2E4E8;
  --rule-strong: #C6CAD1;
  --ink: #14161A;
  --ink-2: #3D424A;
  --ink-3: #5F6672;
  --blue: #2E3192;        /* JK's own mark. 10.66 on white. */
  --blue-deep: #1F2168;
  --blue-pale: #EEEEF6;

  --t-micro: 12px;
  --t-caption: 13px;
  --t-data: 15px;
  --t-body-s: 15px;
  --t-body: 17px;
  --t-lead: 20px;
  --t-h3: 20px;
  --t-h2: 26px;
  --t-h1: 36px;
  --t-display: 50px;

  --sans: 'Public Sans', system-ui, sans-serif;
  --mono: 'Plex Mono', ui-monospace, monospace;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 96px;

  --measure: 66ch;
  --max: 1140px;
  --margin: 64px;
}

@media (max-width: 900px) {
  :root { --margin: 24px; --t-display: 34px; --t-h1: 28px; --t-h2: 22px; }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font: 400 var(--t-body)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; color: var(--ink); text-wrap: balance; letter-spacing: -0.011em; }
h1 { font-size: var(--t-h1); line-height: 1.2; }
h2 { font-size: var(--t-h2); line-height: 1.3; }
h3 { font-size: var(--t-h3); line-height: 1.4; }
p  { margin: 0 0 var(--s4); max-width: var(--measure); }
ul { margin: 0 0 var(--s4); padding-left: var(--s5); max-width: var(--measure); }
li { margin-bottom: var(--s2); }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color 140ms ease; }
a:hover { color: var(--blue-deep); }
a:focus-visible, button:focus-visible, :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 600; color: var(--ink); }
em { font-style: normal; font-weight: 600; color: var(--ink); }

/* ── Layout ────────────────────────────────────────────────────────────────── */

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }
.section { padding-block: var(--s8); border-top: 1px solid var(--rule); }
.section--open { border-top: 0; }
.prose { max-width: var(--measure); }

.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--paper); padding: var(--s3) var(--s4); z-index: 10; }
.skip:focus { left: var(--s4); top: var(--s4); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── Type helpers ──────────────────────────────────────────────────────────── */

.display { font-size: var(--t-display); line-height: 1.15; font-weight: 600; color: var(--ink); letter-spacing: -0.017em; }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); max-width: 56ch; }
.caption { font-size: var(--t-caption); line-height: 1.5; color: var(--ink-3); max-width: 62ch; }

/* The only caps in the system. */
.micro {
  font: 400 var(--t-micro)/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Every figure is mono. A number reads as a record, not a word. */
.record { font-family: var(--mono); font-size: 0.94em; color: var(--ink); }

/* ── Tables ────────────────────────────────────────────────────────────────── */

/* position: relative contains absolutely-positioned children (e.g. .visually-hidden headers)
   so they cannot widen the page. The four backgrounds draw an edge shadow only while there is
   more table to scroll to: the "local" white covers travel with the content and hide the shadow
   at either end. */
.t-scroll {
  overflow-x: auto;
  position: relative;
  background:
    linear-gradient(to right, var(--paper) 30%, rgb(255 255 255 / 0)) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--paper) 30%, rgb(255 255 255 / 0)) right / 32px 100% no-repeat local,
    linear-gradient(to right, rgb(20 22 26 / 0.14), rgb(20 22 26 / 0)) left / 12px 100% no-repeat scroll,
    linear-gradient(to left, rgb(20 22 26 / 0.14), rgb(20 22 26 / 0)) right / 12px 100% no-repeat scroll;
}
.band .t-scroll {
  background-image:
    linear-gradient(to right, var(--paper-2) 30%, rgb(244 245 247 / 0)),
    linear-gradient(to left, var(--paper-2) 30%, rgb(244 245 247 / 0)),
    linear-gradient(to right, rgb(20 22 26 / 0.14), rgb(20 22 26 / 0)),
    linear-gradient(to left, rgb(20 22 26 / 0.14), rgb(20 22 26 / 0));
}
@media (max-width: 640px) { thead th { white-space: normal; } }

table {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--t-body-s);
  border: 1px solid var(--rule);
}
caption { text-align: left; font-size: var(--t-caption); color: var(--ink-3); padding-bottom: var(--s3); }
thead th {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule-strong);
  font: 400 var(--t-micro)/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: var(--s3) var(--s4);
  white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--rule); }
tbody tr:last-child { border-bottom: 0; }
td, tbody th { padding: var(--s3) var(--s4); text-align: left; font-weight: 400; color: var(--ink-2); }
tbody th { color: var(--ink); font-weight: 600; }

/* Values align on the decimal, never the right edge. */
.val { font-family: var(--mono); font-size: var(--t-data); color: var(--ink); text-align: right; white-space: nowrap; }
.unit { font-family: var(--mono); font-size: var(--t-data); color: var(--ink-3); width: 1%; white-space: nowrap; }

/* Not measured. Never omitted — a missing row reads as concealment. */
.pending { font: 400 var(--t-micro)/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.awaiting { font-family: var(--mono); font-size: var(--t-data); color: var(--ink-3); }

/* ── Label/value strip ─────────────────────────────────────────────────────── */

.strip { border: 1px solid var(--rule); }
.strip div { display: grid; grid-template-columns: 160px 1fr; gap: var(--s4); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); }
.strip div:last-child { border-bottom: 0; }
.strip .k { font: 400 var(--t-micro)/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.strip .v { font-family: var(--mono); font-size: var(--t-data); color: var(--ink); }

@media (max-width: 640px) { .strip div { grid-template-columns: 1fr; gap: var(--s1); } }

/* ── The one button ────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  background: var(--blue);
  color: #FFFFFF;
  border: 1px solid var(--blue);
  border-radius: 2px;
  padding: var(--s3) var(--s5);
  font: 600 var(--t-body-s)/1.2 var(--sans);
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease;
}
.btn:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #FFFFFF; }

/* The submit control on /sample/. Deliberately not a .btn: .btn is the call to action that
   points at /sample/, and a page carries one of those. */
.btn--ghost { background: var(--paper); color: var(--blue); }
.btn--ghost:hover { background: var(--blue-pale); color: var(--blue-deep); }
button.btn { cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }

/* ── Form ──────────────────────────────────────────────────────────────────── */
/* /sample/ is the only form on the site. It borrows .strip for its rows; these rules size the
   controls and widen the label column, which has to hold a question rather than a word. */

.form fieldset { border: 0; margin: 0 0 var(--s6); padding: 0; }
.form legend { padding: 0; margin-bottom: var(--s3); }
.form .strip div { grid-template-columns: 220px 1fr; align-items: center; }
/* 16px stops iOS Safari zooming into a field on focus. --ink-3 borders clear WCAG's 3:1 for
   form controls; --rule-strong did not. */
.form :is(input, select, textarea) {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--ink-3);
  border-radius: 2px;
  padding: var(--s2) var(--s3);
  font: 400 16px/1.4 var(--sans);
  color: var(--ink);
}
.form textarea { min-height: 132px; line-height: 1.6; resize: vertical; }

@media (max-width: 640px) { .form .strip div { grid-template-columns: 1fr; align-items: start; } }

/* ── Masthead ──────────────────────────────────────────────────────────────── */

.masthead { border-bottom: 1px solid var(--rule); background: var(--paper); }
.masthead .wrap { min-height: 84px; display: flex; align-items: center; gap: var(--s7); padding-block: var(--s4); }

.brand { text-decoration: none; display: flex; align-items: center; gap: var(--s3); }
.brand__mark {
  width: 38px; height: 38px; flex: none;
  border: 1.5px solid var(--blue); border-radius: 50%;
  display: grid; place-items: center;
  font: 600 15px/1 var(--sans); color: var(--blue); letter-spacing: 0.02em;
}
.brand__name { font: 600 24px/1.1 var(--sans); color: var(--ink); letter-spacing: 0.01em; }

.nav { display: flex; gap: var(--s5); margin-left: auto; align-items: center; }
.nav a { font-size: var(--t-body-s); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--blue); }
.nav a[aria-current='page'] { color: var(--ink); font-weight: 600; }
.masthead__cta { flex: none; }

@media (max-width: 1180px) {
  .masthead .wrap { flex-wrap: wrap; gap: var(--s4) var(--s5); }
  .brand { flex: 1 1 auto; }
  .masthead__cta { order: 2; margin-left: auto; }
  .nav { order: 3; flex-basis: 100%; margin-left: 0; flex-wrap: wrap; }
}

/* Phones: two rows (brand, then a sideways-scrolling nav). The sample CTA moves to .actionbar. */
@media (max-width: 640px) {
  .masthead .wrap { min-height: 0; padding-block: var(--s3) 0; gap: var(--s2); }
  .brand__name { font-size: 20px; }
  .masthead__cta { display: none; }
  .nav {
    flex-wrap: nowrap; overflow-x: auto; gap: var(--s5);
    margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin);
    scrollbar-width: none;
    /* Fade the right edge so it reads as "more this way". */
    mask-image: linear-gradient(to right, #000 82%, transparent);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding-block: 12px; }
}

/* ── Phone action bar ──────────────────────────────────────────────────────── */

.actionbar { display: none; }
@media (max-width: 640px) {
  .actionbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; inset: auto 0 0 0; z-index: 20;
    background: var(--paper); border-top: 1px solid var(--rule-strong);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .actionbar a {
    display: block; text-align: center; padding: 15px var(--s2);
    font: 600 var(--t-body-s)/1.2 var(--sans); color: var(--blue); text-decoration: none; white-space: nowrap;
  }
  .actionbar a + a { border-left: 1px solid var(--rule); }
  .actionbar a:last-child { background: var(--blue); color: #FFFFFF; }
  body { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
}
@media print { .actionbar { display: none; } }

/* Credentials line. Hairline separators, no badges, no seals — the words carry it. */
.creds {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}
.creds span {
  font: 400 var(--t-micro)/1.4 var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.creds span + span { border-left: 1px solid var(--rule-strong); padding-left: var(--s5); }
@media (max-width: 640px) {
  .creds { gap: var(--s2) var(--s4); }
  .creds span + span { border-left: 0; padding-left: 0; }
}

/* ── Home hero ─────────────────────────────────────────────────────────────── */

.hero { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.1fr 1fr; } }
.hero figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Three hard numbers under the hero copy. */
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 600px; gap: var(--s6); margin-top: var(--s6); }
.figs div { border-left: 1px solid var(--rule-strong); padding-left: var(--s4); }
.figs .n { display: block; font: 400 var(--t-h3)/1.25 var(--mono); color: var(--ink); white-space: nowrap; }
.figs .l { display: block; font-size: var(--t-caption); color: var(--ink-3); margin-top: var(--s1); }
@media (max-width: 640px) { .figs { grid-template-columns: 1fr; gap: var(--s4); } }

/* Reasons to buy. Plain columns — no cards, no shadows, no icons. */
.reasons {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s7) var(--s6); margin-top: var(--s6);
}
.reasons h3 { font-size: var(--t-body); margin-bottom: var(--s2); }
.reasons p { font-size: var(--t-body-s); color: var(--ink-2); margin: 0; }
.reasons--2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
.cert { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s4); margin: var(--s4) 0 0; font-size: var(--t-body-s); }
.cert dt { font: 400 var(--t-micro)/1.9 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.cert dd { margin: 0; color: var(--ink); }
@media (max-width: 900px) { .reasons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .reasons { grid-template-columns: 1fr; gap: var(--s5); } }

/* ── Bands & figures ───────────────────────────────────────────────────────── */

.band { background: var(--paper-2); border-block: 1px solid var(--rule); }

figure { margin: 0; }
figure img { border: 1px solid var(--rule); }
figcaption { font-size: var(--t-caption); color: var(--ink-3); margin-top: var(--s3); max-width: 62ch; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); max-width: 820px; }
.pair img { width: 100%; height: 240px; object-fit: cover; }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; } }

/* ── Footer ────────────────────────────────────────────────────────────────── */

.foot { background: var(--paper-2); border-top: 1px solid var(--rule); padding-block: var(--s8) var(--s6); }
.foot__label { font: 400 var(--t-micro)/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s4); }
.foot address a { display: inline-block; padding-block: 4px; }
.foot .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6); }
.foot address { font-style: normal; font-size: var(--t-body-s); line-height: 1.65; color: var(--ink-2); }
.foot .legal { border-top: 1px solid var(--rule); margin-top: var(--s7); padding-top: var(--s5); }
.foot .legal p { font-size: var(--t-caption); color: var(--ink-3); max-width: 78ch; }

@media (max-width: 860px) { .foot .cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .foot .cols { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }