/* ==========================================================================
   J&D B.V. — howust.quest
   Practical digital & data skills for learners across Canada
   Stylesheet: mobile-first, single file.

   Palette note: the greens are taken from the painted timber houses along
   the Zuiddijk in Zaandam ("Zaans groen"), which is where the company sits.
   Ochre is reserved for data marks and negative values — never decoration.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------ */
:root {
  --ink:        #131C19;   /* primary text, near-black with green in it */
  --ink-2:      #46534D;   /* secondary text */
  --ink-3:      #6B7873;   /* captions, meta */
  --zaan:       #1C4B3C;   /* primary brand green */
  --zaan-deep:  #10302666; /* not used directly; see --zaan-tint */
  --zaan-tint:  #E4EDE7;   /* pale green fill */
  --paper:      #F1F3EF;   /* page background */
  --surface:    #FFFFFF;   /* cards, sheet */
  --rule:       #DCE2DA;   /* hairlines */
  --rule-2:     #C4CEC3;   /* stronger hairlines */
  --ochre:      #A56A16;   /* data accent / negative series */
  --ochre-tint: #F6EEDF;

  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1120px;
  --wrap-narrow: 720px;
  --pad: 1.25rem;
  --radius: 3px;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
table { border-collapse: collapse; }

/* --- Typography --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.008em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 6.4vw, 3.05rem); letter-spacing: -0.018em; }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
h3 { font-size: clamp(1.125rem, 2.4vw, 1.3rem); line-height: 1.3; }
h4 { font-size: 1.0625rem; line-height: 1.35; }
p { margin: 0 0 1.1em; max-width: 68ch; }
a { color: var(--zaan); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }
:focus-visible {
  outline: 2px solid var(--zaan);
  outline-offset: 3px;
  border-radius: 2px;
}
strong { font-weight: 600; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15rem; max-width: 68ch; }
li { margin-bottom: 0.4em; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

.lede {
  font-size: clamp(1.09rem, 2.4vw, 1.24rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--zaan);
  margin: 0 0 1rem;
  display: block;
}
.eyebrow--ochre { color: var(--ochre); }
.meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}

/* --- Layout ------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding: 3rem 0; }
.section--tight { padding: 2rem 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section--surface { background: var(--surface); }
.section--dark { background: var(--zaan); color: #EAF1EC; }
.section--dark h2, .section--dark h3 { color: #FFFFFF; }
.section--dark a { color: #FFFFFF; }
.section--dark .eyebrow { color: #A9C9B7; }
.section-head { max-width: 62ch; margin-bottom: 2rem; }

@media (min-width: 48rem) {
  .section { padding: 4.5rem 0; }
  .section--tight { padding: 2.75rem 0; }
}

.grid { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--2 { gap: 1.75rem; }
  .grid--3 { gap: 1.25rem; }
}
.split { display: grid; gap: 2rem; }
@media (min-width: 60rem) {
  .split { grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
  .split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
  .split--wide-right { grid-template-columns: 0.85fr 1.15fr; }
}

/* --- Skip link ---------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--zaan); color: #fff; padding: 0.7rem 1rem; z-index: 100;
  font-size: 0.9rem;
}
.skip:focus { left: 0; }

/* --- Header ------------------------------------------------------------- */
.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 50;
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 62px;
}
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.brand__mark {
  width: 30px; height: 30px; flex: 0 0 30px;
  background: var(--zaan); color: #fff;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  display: grid; place-items: center; border-radius: 2px;
}
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.1; }
.brand__sub {
  display: block; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px;
}
.nav-toggle {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; background: none; border: 1px solid var(--rule-2);
  color: var(--ink); padding: 0.45rem 0.7rem; border-radius: 2px; cursor: pointer;
}
.nav {
  display: none;
  border-top: 1px solid var(--rule);
  padding: 0.5rem 0 1rem;
}
.nav[data-open="true"] { display: block; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; border-bottom: 1px solid var(--rule); }
.nav a {
  display: block; padding: 0.7rem 0; text-decoration: none;
  color: var(--ink); font-size: 0.98rem;
}
.nav a[aria-current="page"] { color: var(--zaan); font-weight: 500; }

@media (min-width: 56rem) {
  .nav-toggle { display: none; }
  .masthead__inner { min-height: 70px; }
  .nav {
    display: block; border: 0; padding: 0;
  }
  .nav ul { display: flex; gap: 1.6rem; align-items: center; }
  .nav li { border: 0; }
  .nav a { padding: 0.2rem 0; font-size: 0.94rem; }
  .nav a:hover { color: var(--zaan); }
  .nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--zaan); }
}

/* --- Hero --------------------------------------------------------------- */
.hero { background: var(--surface); border-bottom: 1px solid var(--rule); padding: 2.5rem 0 3rem; }
@media (min-width: 60rem) { .hero { padding: 4rem 0 4.25rem; } }
.hero h1 { max-width: 15ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.95rem; font-weight: 500;
  padding: 0.72rem 1.15rem;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid var(--zaan);
  background: var(--zaan); color: #fff;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.btn:hover { background: #163E31; color: #fff; }
.btn--ghost { background: transparent; color: var(--zaan); }
.btn--ghost:hover { background: var(--zaan-tint); color: var(--zaan); }
.btn--light { background: #fff; border-color: #fff; color: var(--zaan); }
.btn--light:hover { background: #E4EDE7; color: var(--zaan); }

/* --- The sheet (signature element) -------------------------------------- */
.sheet {
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  box-shadow: 0 1px 0 var(--rule);
}
.sheet__bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.55rem;
  border-bottom: 1px solid var(--rule);
  background: #FAFBF9;
}
.sheet__ref {
  border: 1px solid var(--rule-2); background: #fff;
  padding: 0.1rem 0.45rem; color: var(--ink-2); border-radius: 2px;
}
.sheet__formula { color: var(--zaan); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sheet table { width: 100%; min-width: 300px; font-size: 0.72rem; }
.sheet td:last-child, .sheet thead th:last-child { border-right: 0; width: 30%; }
.sheet th, .sheet td {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.34rem 0.5rem;
  text-align: right;
  font-weight: 400;
  white-space: nowrap;
  color: var(--ink);
}
.sheet thead th, .sheet .rowhead {
  background: #F4F6F2; color: var(--ink-3); text-align: center;
  font-size: 0.66rem; letter-spacing: 0.04em;
}
.sheet .rowhead { width: 1.9rem; }
.sheet td:first-child, .sheet th:first-child { text-align: center; }
.sheet .cell--text { text-align: left; }
.sheet tr.is-header td { font-weight: 500; background: #FBFCFA; }
.sheet td.is-selected { box-shadow: inset 0 0 0 2px var(--zaan); background: var(--zaan-tint); }
.sheet .cell--neg { color: var(--ochre); }
.sheet .cell--pos { color: var(--zaan); }

.bar { position: relative; display: block; width: 100%; min-width: 72px; height: 9px; }
.bar::before {
  content: ""; position: absolute; left: 50%; top: -2px; height: 13px;
  border-left: 1px solid var(--rule-2);
}
.bar__fill {
  position: absolute; top: 0; left: 50%; height: 100%;
  background: var(--zaan);
  width: calc(var(--w, 0%) / 2);
  animation: grow 900ms cubic-bezier(0.22, 0.9, 0.3, 1) both;
  animation-delay: var(--d, 0ms);
}
.bar__fill--neg { left: auto; right: 50%; background: var(--ochre); }
@media (max-width: 30rem) {
  .sheet, .sheet table { font-size: 0.63rem; }
  .sheet th, .sheet td { padding: 0.3rem 0.34rem; }
  .sheet .rowhead { width: 1.5rem; }
  .bar { min-width: 52px; }
}
@keyframes grow { from { width: 0%; } to { width: calc(var(--w, 0%) / 2); } }
@media (prefers-reduced-motion: reduce) { .bar__fill { animation: none; width: calc(var(--w, 0%) / 2); } }

.figcap {
  font-family: var(--font-mono);
  font-size: 0.72rem; line-height: 1.5;
  color: var(--ink-3); margin-top: 0.7rem; max-width: 46ch;
}

/* --- Cards -------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.35rem;
}
.card h3 { margin-bottom: 0.45rem; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card--flat { background: transparent; border: 0; padding: 0; border-top: 2px solid var(--ink); padding-top: 1rem; }

.module {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.35rem;
  display: flex; flex-direction: column;
}
.module__code {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--ochre); display: block; margin-bottom: 0.55rem;
}
.module h3 { margin-bottom: 0.5rem; }
.module p { font-size: 0.97rem; color: var(--ink-2); }
.module ul { font-size: 0.94rem; color: var(--ink-2); margin-bottom: 1rem; }
.module__foot {
  margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3);
}

/* --- Definition-style lists --------------------------------------------- */
.deflist { margin: 0; padding: 0; }
.deflist > div {
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
}
.deflist > div:last-child { border-bottom: 1px solid var(--rule); }
.deflist dt { font-weight: 600; font-family: var(--font-display); font-size: 1.08rem; margin-bottom: 0.3rem; }
.deflist dd { margin: 0; color: var(--ink-2); max-width: 66ch; }
@media (min-width: 48rem) {
  .deflist > div { display: grid; grid-template-columns: 15rem 1fr; gap: 1.5rem; }
  .deflist dt { margin-bottom: 0; }
}

/* --- Steps -------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; max-width: 70ch; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.4rem 2.6rem;
  border-left: 1px solid var(--rule-2);
  margin-left: 0.75rem;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute; left: -0.75rem; top: 0;
  width: 1.5rem; height: 1.5rem;
  background: var(--zaan); color: #fff;
  font-family: var(--font-mono); font-size: 0.72rem;
  display: grid; place-items: center; border-radius: 50%;
}
.steps h3 { margin-bottom: 0.3rem; }
.steps p { color: var(--ink-2); margin-bottom: 0; }

/* --- Callout / disclaimer ----------------------------------------------- */
.callout {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--zaan);
  border-radius: var(--radius);
  padding: 1.4rem;
}
.callout h2, .callout h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout--ochre { border-left-color: var(--ochre); }
.callout ul { font-size: 0.97rem; color: var(--ink-2); }

/* --- Figures (SVG diagrams) --------------------------------------------- */
.figure {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 0;
}
.figure svg { width: 100%; height: auto; }

/* --- Tables (content) ---------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; font-size: 0.95rem; background: var(--surface); }
.data-table th, .data-table td {
  border-bottom: 1px solid var(--rule); padding: 0.75rem 0.85rem; text-align: left; vertical-align: top;
}
.data-table thead th {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule-2);
}
.data-table td:first-child { font-weight: 500; white-space: nowrap; }

/* --- FAQ ---------------------------------------------------------------- */
.faq { border-top: 1px solid var(--rule); max-width: 70ch; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; padding: 1rem 0; font-weight: 500;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--zaan); }
.faq details[open] summary::after { content: "–"; }
.faq details > *:not(summary) { color: var(--ink-2); }
.faq details p:last-child { padding-bottom: 0.6rem; }

/* --- Form --------------------------------------------------------------- */
.form { max-width: 34rem; }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: 0.92rem; font-weight: 500; margin-bottom: 0.35rem; }
.field .hint { display: block; font-size: 0.82rem; color: var(--ink-3); font-weight: 400; margin-top: 0.15rem; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--rule-2); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--zaan); }
.checkline { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; color: var(--ink-2); }
.checkline input { width: auto; margin-top: 0.25rem; }
.form-error {
  display: none; margin-bottom: 1rem; padding: 0.75rem 0.9rem; font-size: 0.9rem;
  background: var(--ochre-tint); border-left: 3px solid var(--ochre); color: #5C3B08;
}
.form-error[data-visible="true"] { display: block; }

/* --- Contact details block ---------------------------------------------- */
.details-list { list-style: none; margin: 0; padding: 0; font-size: 0.97rem; }
.details-list li { padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
.details-list li:first-child { border-top: 1px solid var(--rule); }
.details-list span {
  display: block; font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.15rem;
}

/* --- Legal pages -------------------------------------------------------- */
.legal { max-width: 68ch; }
.legal h2 { font-size: 1.3rem; margin-top: 2.4rem; }
.legal h3 { font-size: 1.05rem; margin-top: 1.6rem; font-family: var(--font-body); font-weight: 600; }
.legal p, .legal li { font-size: 1rem; }
.legal .meta { display: block; margin-bottom: 2rem; }

/* --- Footer ------------------------------------------------------------- */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  padding: 3rem 0 2rem;
  font-size: 0.93rem;
}
.footer__grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; } }
.footer h2 {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.9rem; font-weight: 400;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.45rem; }
.footer a { text-decoration: none; color: var(--ink); }
.footer a:hover { color: var(--zaan); text-decoration: underline; }
.footer address { font-style: normal; color: var(--ink-2); }
.footer__base {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  font-size: 0.82rem; color: var(--ink-3);
}
.footer__base p { max-width: 90ch; margin-bottom: 0.5rem; }

/* --- Utilities ---------------------------------------------------------- */
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 2rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tag {
  display: inline-block; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--zaan-tint); color: var(--zaan);
  padding: 0.2rem 0.5rem; border-radius: 2px; margin-right: 0.35rem;
}
.tag--ochre { background: var(--ochre-tint); color: var(--ochre); }