/**
 * MyHerbSupply design system — tokens and primitives.
 *
 * Phase 3. Loaded on every front-end view before the component layer.
 * Documented in docs/design-system.md. Every colour pair used for text has a
 * measured WCAG contrast ratio recorded there.
 *
 * Naming: all custom properties are prefixed --mh- and all classes .mh- so that
 * nothing here can collide with Woostify, WooCommerce or Elementor.
 */

/* ===========================================================================
   1. FONTS — self-hosted, two variable faces, latin subset, swap.
   Replaces six external Google Fonts requests covering 54 static weights.
   =========================================================================== */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-var-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4 Variable";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-serif-4-var-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===========================================================================
   2. TOKENS
   =========================================================================== */

:root {
  /* --- Colour: ink ------------------------------------------------------- */
  --mh-ink:            #14231D;  /* body text            16.31:1 on white */
  --mh-ink-soft:       #3A4A43;  /* secondary text        9.37:1 on white */
  --mh-muted:          #5C6660;  /* meta, captions        5.96:1 on white */

  /* --- Colour: cedar (primary brand) ------------------------------------- */
  --mh-cedar:          #1F4438;  /* primary              10.81:1 on white */
  --mh-cedar-700:      #163027;  /* primary hover        14.13:1 on white */
  --mh-cedar-900:      #0E1F19;  /* deep sections, footer */
  --mh-cedar-300:      #9DB6AB;  /* muted text on cedar   5.00:1 on cedar */
  --mh-cedar-050:      #EAF0ED;  /* tinted surface */

  /* --- Colour: clay (accent, used sparingly) ----------------------------- */
  --mh-clay:           #AD5C34;  /* accent                4.82:1 on white */
  --mh-clay-700:       #8A4726;  /* accent hover / accent text on light */
  --mh-clay-050:       #FAF1EB;  /* accent tint */

  /* --- Colour: surfaces and lines ---------------------------------------- */
  --mh-white:          #FFFFFF;
  --mh-limestone:      #F7F5F1;  /* subtle section surface */
  --mh-sand:           #EFEBE4;  /* sunken surface, table stripes */
  --mh-border:         #DFD9CF;  /* hairlines */
  --mh-border-strong:  #C6BEB1;  /* input borders, dividers that must read */

  /* Semantic aliases — components reference these, never raw colours. */
  --mh-bg:             var(--mh-white);
  --mh-bg-subtle:      var(--mh-limestone);
  --mh-bg-sunken:      var(--mh-sand);
  --mh-bg-invert:      var(--mh-cedar-900);
  --mh-text:           var(--mh-ink);
  --mh-text-secondary: var(--mh-ink-soft);
  --mh-text-muted:     var(--mh-muted);
  --mh-text-invert:    var(--mh-white);
  --mh-text-invert-muted: var(--mh-cedar-300);
  --mh-link:           var(--mh-cedar);
  --mh-link-hover:     var(--mh-clay-700);
  --mh-accent:         var(--mh-clay);

  /* --- Typography -------------------------------------------------------- */
  --mh-font-display: "Source Serif 4 Variable", Georgia, "Times New Roman", serif;
  --mh-font-body:    "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
                     Roboto, Helvetica, Arial, sans-serif;
  --mh-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --mh-text-2xs:  0.75rem;
  --mh-text-xs:   0.8125rem;
  --mh-text-sm:   0.875rem;
  --mh-text-base: 1rem;
  --mh-text-lg:   1.125rem;
  --mh-text-xl:   clamp(1.25rem,  1.16rem + 0.45vw, 1.5rem);
  --mh-text-2xl:  clamp(1.5rem,   1.32rem + 0.9vw,  1.95rem);
  --mh-text-3xl:  clamp(1.875rem, 1.55rem + 1.6vw,  2.6rem);
  --mh-text-4xl:  clamp(2.25rem,  1.75rem + 2.5vw,  3.4rem);

  --mh-leading-tight:   1.15;
  --mh-leading-snug:    1.3;
  --mh-leading-normal:  1.6;
  --mh-leading-relaxed: 1.75;

  --mh-tracking-display: -0.02em;
  --mh-tracking-normal:   0;
  --mh-tracking-label:    0.08em;

  --mh-weight-regular:  400;
  --mh-weight-medium:   500;
  --mh-weight-semibold: 600;
  --mh-weight-bold:     700;

  /* --- Spacing: 4px base ------------------------------------------------- */
  --mh-space-1:  0.25rem;
  --mh-space-2:  0.5rem;
  --mh-space-3:  0.75rem;
  --mh-space-4:  1rem;
  --mh-space-5:  1.25rem;
  --mh-space-6:  1.5rem;
  --mh-space-8:  2rem;
  --mh-space-10: 2.5rem;
  --mh-space-12: 3rem;
  --mh-space-16: 4rem;
  --mh-space-20: 5rem;
  --mh-space-24: 6rem;
  --mh-space-32: 8rem;

  /* --- Section rhythm ---------------------------------------------------- */
  --mh-section-y:    clamp(3rem, 6vw, 6rem);
  --mh-section-y-lg: clamp(4rem, 8vw, 8rem);
  --mh-section-y-sm: clamp(2rem, 4vw, 3.5rem);

  /* --- Containers -------------------------------------------------------- */
  --mh-container:      1200px;
  --mh-container-wide: 1360px;
  --mh-container-text: 68ch;   /* prose measure */
  --mh-gutter:         clamp(1rem, 4vw, 2.5rem);

  /* --- Radius ------------------------------------------------------------ */
  --mh-radius-xs:   2px;
  --mh-radius-sm:   4px;
  --mh-radius-md:   8px;
  --mh-radius-lg:   12px;
  --mh-radius-xl:   20px;
  --mh-radius-pill: 999px;

  /* --- Elevation: cedar-tinted, restrained ------------------------------- */
  --mh-shadow-sm: 0 1px 2px rgba(20, 35, 29, 0.06);
  --mh-shadow-md: 0 2px 4px rgba(20, 35, 29, 0.05), 0 8px 20px rgba(20, 35, 29, 0.06);
  --mh-shadow-lg: 0 4px 8px rgba(20, 35, 29, 0.05), 0 16px 40px rgba(20, 35, 29, 0.08);

  /* --- Motion ------------------------------------------------------------ */
  --mh-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --mh-dur:  160ms;

  /* --- Focus ------------------------------------------------------------- */
  --mh-focus-color:  var(--mh-clay-700);
  --mh-focus-width:  3px;
  --mh-focus-offset: 2px;

  /* --- Layers ------------------------------------------------------------ */
  --mh-z-base: 1;
  --mh-z-sticky: 100;
  --mh-z-overlay: 500;

  /* --- Moroccan motif ----------------------------------------------------
     An eight-point zellige star drawn as a single tiling SVG. It is used only
     as a low-contrast structural texture (alpha ~0.05) or as a hairline rule
     ornament — never as decoration in its own right. */
  --mh-motif-zellige:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g fill="none" stroke="%231F4438" stroke-width="1"><path d="M32 2 39 17 55 9 47 25 62 32 47 39 55 55 39 47 32 62 25 47 9 55 17 39 2 32 17 25 9 9 25 17Z"/><rect x="20" y="20" width="24" height="24" transform="rotate(45 32 32)"/></g></svg>');
}

/* ===========================================================================
   3. BASE
   =========================================================================== */

body.mh {
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-base);
  line-height: var(--mh-leading-normal);
  color: var(--mh-text);
  background-color: var(--mh-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.mh h1, body.mh h2, body.mh h3,
body.mh .mh-display {
  font-family: var(--mh-font-display);
  font-weight: var(--mh-weight-semibold);
  line-height: var(--mh-leading-tight);
  letter-spacing: var(--mh-tracking-display);
  /* Inherit rather than assert: an inverted band sets `color` once on the band and
     every heading inside it follows, with no per-section override. */
  color: inherit;
  text-wrap: balance;
}

body.mh h4, body.mh h5, body.mh h6 {
  font-family: var(--mh-font-body);
  color: inherit;
  font-weight: var(--mh-weight-semibold);
  line-height: var(--mh-leading-snug);
  letter-spacing: var(--mh-tracking-normal);
}

body.mh h1 { font-size: var(--mh-text-4xl); }
body.mh h2 { font-size: var(--mh-text-3xl); }
body.mh h3 { font-size: var(--mh-text-2xl); }
body.mh h4 { font-size: var(--mh-text-xl); }
body.mh h5 { font-size: var(--mh-text-lg); }
body.mh h6 { font-size: var(--mh-text-base); }

body.mh p { text-wrap: pretty; }

body.mh a { color: var(--mh-link); text-underline-offset: 0.18em; }
body.mh a:hover { color: var(--mh-link-hover); }

/* Numerals in tabular contexts must line up — this is why Inter was chosen. */
.mh-tabular { font-variant-numeric: tabular-nums; }

/* ===========================================================================
   4. FOCUS — one visible treatment, everywhere, never removed.
   =========================================================================== */

body.mh :focus-visible {
  outline: var(--mh-focus-width) solid var(--mh-focus-color);
  outline-offset: var(--mh-focus-offset);
  border-radius: var(--mh-radius-xs);
}

/* On dark surfaces the clay ring loses contrast, so invert it. */
body.mh .mh-on-dark :focus-visible,
body.mh .mh-section--invert :focus-visible {
  outline-color: var(--mh-white);
}

@media (prefers-reduced-motion: reduce) {
  body.mh *,
  body.mh *::before,
  body.mh *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   5. LAYOUT PRIMITIVES
   =========================================================================== */

.mh-container {
  width: 100%;
  max-width: var(--mh-container);
  margin-inline: auto;
  padding-inline: var(--mh-gutter);
}
.mh-container--wide { max-width: var(--mh-container-wide); }
.mh-container--text { max-width: var(--mh-container-text); }

.mh-section { padding-block: var(--mh-section-y); }
.mh-section--lg { padding-block: var(--mh-section-y-lg); }
.mh-section--sm { padding-block: var(--mh-section-y-sm); }
.mh-section--subtle { background-color: var(--mh-bg-subtle); }
.mh-section--sunken { background-color: var(--mh-bg-sunken); }

.mh-section--invert {
  background-color: var(--mh-bg-invert);
  color: var(--mh-text-invert);
}
.mh-section--invert a { color: var(--mh-white); }
.mh-section--invert .mh-section__lead,
.mh-section--invert .mh-muted { color: var(--mh-text-invert-muted); }

/* Section heading block: eyebrow + title + lead, consistent everywhere. */
.mh-section__head { max-width: 46rem; margin-bottom: var(--mh-space-10); }
.mh-section__head--center { margin-inline: auto; text-align: center; }

.mh-eyebrow {
  display: block;
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-xs);
  font-weight: var(--mh-weight-semibold);
  letter-spacing: var(--mh-tracking-label);
  text-transform: uppercase;
  color: var(--mh-clay-700);
  margin-bottom: var(--mh-space-3);
}
.mh-section--invert .mh-eyebrow { color: var(--mh-cedar-300); }

.mh-section__title { margin: 0 0 var(--mh-space-4); }

.mh-section__lead {
  font-size: var(--mh-text-lg);
  line-height: var(--mh-leading-relaxed);
  color: var(--mh-text-secondary);
  margin: 0;
}

/* Grid */
.mh-grid { display: grid; gap: var(--mh-space-6); grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .mh-grid--2, .mh-grid--3, .mh-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .mh-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .mh-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Hairline rule carrying the zellige motif at low contrast. */
.mh-rule {
  height: 1px;
  border: 0;
  background: var(--mh-border);
  margin-block: var(--mh-space-12);
}
.mh-rule--motif {
  height: 16px;
  background-image: var(--mh-motif-zellige);
  background-size: 32px 32px;
  background-repeat: repeat-x;
  background-position: center;
  opacity: 0.14;
}

.mh-muted { color: var(--mh-text-muted); }
.mh-lead  { font-size: var(--mh-text-lg); line-height: var(--mh-leading-relaxed); color: var(--mh-text-secondary); }

/* ===========================================================================
   6. BUTTONS
   Three ranks only. Anything beyond these is a link.
   Minimum target 44x44 per WCAG 2.5.8.
   =========================================================================== */

.mh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mh-space-2);
  min-height: 44px;
  padding: var(--mh-space-3) var(--mh-space-6);
  border: 1px solid transparent;
  border-radius: var(--mh-radius-md);
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-sm);
  font-weight: var(--mh-weight-semibold);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--mh-dur) var(--mh-ease),
              border-color var(--mh-dur) var(--mh-ease),
              color var(--mh-dur) var(--mh-ease),
              transform var(--mh-dur) var(--mh-ease);
}

.mh-btn--primary {
  background-color: var(--mh-cedar);
  border-color: var(--mh-cedar);
  color: var(--mh-white);
}
.mh-btn--primary:hover,
.mh-btn--primary:focus-visible {
  background-color: var(--mh-cedar-700);
  border-color: var(--mh-cedar-700);
  color: var(--mh-white);
}

.mh-btn--secondary {
  background-color: transparent;
  border-color: var(--mh-cedar);
  color: var(--mh-cedar);
}
.mh-btn--secondary:hover,
.mh-btn--secondary:focus-visible {
  background-color: var(--mh-cedar-050);
  color: var(--mh-cedar-700);
  border-color: var(--mh-cedar-700);
}

.mh-btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--mh-cedar);
  padding-inline: var(--mh-space-2);
}
.mh-btn--ghost:hover,
.mh-btn--ghost:focus-visible { color: var(--mh-clay-700); }

/* On inverted sections the ranks flip so contrast is preserved. */
.mh-section--invert .mh-btn--primary {
  background-color: var(--mh-white);
  border-color: var(--mh-white);
  color: var(--mh-cedar-900);
}
.mh-section--invert .mh-btn--primary:hover {
  background-color: var(--mh-cedar-050);
  border-color: var(--mh-cedar-050);
  color: var(--mh-cedar-900);
}
.mh-section--invert .mh-btn--secondary {
  border-color: var(--mh-cedar-300);
  color: var(--mh-white);
}
.mh-section--invert .mh-btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--mh-white);
  color: var(--mh-white);
}

.mh-btn--block { width: 100%; }

.mh-btn[aria-disabled="true"],
.mh-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Button group: stacks full-width on small screens. */
.mh-actions { display: flex; flex-wrap: wrap; gap: var(--mh-space-3); }
@media (max-width: 480px) {
  .mh-actions { flex-direction: column; }
  .mh-actions .mh-btn { width: 100%; }
}

/* Text link that reads as an action without being a button. */
.mh-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-space-2);
  font-weight: var(--mh-weight-semibold);
  font-size: var(--mh-text-sm);
  text-decoration: none;
  color: var(--mh-cedar);
}
.mh-link-arrow::after { content: "\2192"; transition: transform var(--mh-dur) var(--mh-ease); }
.mh-link-arrow:hover { color: var(--mh-clay-700); text-decoration: underline; }
.mh-link-arrow:hover::after { transform: translateX(3px); }

/* ===========================================================================
   7. CARDS
   =========================================================================== */

.mh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--mh-white);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius-lg);
  overflow: hidden;
  transition: border-color var(--mh-dur) var(--mh-ease),
              box-shadow var(--mh-dur) var(--mh-ease),
              transform var(--mh-dur) var(--mh-ease);
}
.mh-card:hover {
  border-color: var(--mh-border-strong);
  box-shadow: var(--mh-shadow-md);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .mh-card:hover { transform: none; }
}

.mh-card__media {
  aspect-ratio: 4 / 3;
  background-color: var(--mh-sand);
  overflow: hidden;
}
.mh-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mh-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-3);
  padding: var(--mh-space-6);
  flex: 1 1 auto;
}
.mh-card__title { font-size: var(--mh-text-xl); margin: 0; }
.mh-card__title a { text-decoration: none; color: inherit; }
.mh-card__meta { font-size: var(--mh-text-sm); color: var(--mh-text-muted); margin: 0; }
.mh-card__text { margin: 0; color: var(--mh-text-secondary); }
.mh-card__foot { margin-top: auto; padding-top: var(--mh-space-2); }

/* Whole-card click target, keyboard-safe: the real link stays the only tab stop. */
.mh-card--linked .mh-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Quietly branded card used for families and industries. */
.mh-card--feature .mh-card__body { gap: var(--mh-space-4); }
.mh-card--feature::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mh-cedar), var(--mh-clay));
  opacity: 0;
  transition: opacity var(--mh-dur) var(--mh-ease);
}
.mh-card--feature:hover::before { opacity: 1; }

/* Navigation card (product families).
   The title link is the card's only link and only tab stop; its ::after, from --linked,
   stretches it over the whole card, so the image, text and cue are all click targets
   without nesting anything inside an <a>. The cue is always visible, so the card reads
   as a link on touch screens where there is no hover. */
.mh-card--nav { cursor: pointer; }
.mh-card--nav .mh-card__body { gap: var(--mh-space-3); padding: var(--mh-space-6); }
.mh-card--nav .mh-card__title { color: var(--mh-cedar); }
.mh-card--nav .mh-card__title a { color: inherit; transition: color var(--mh-dur) var(--mh-ease); }

.mh-card__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  margin-block: var(--mh-space-2) var(--mh-space-3);
}
.mh-card--nav .mh-card__figure img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: transform var(--mh-dur) var(--mh-ease);
}

.mh-card--nav .mh-card__foot {
  margin-top: auto;
  padding-top: var(--mh-space-4);
  border-top: 1px solid var(--mh-border);
}
.mh-card__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-space-2);
  font-size: var(--mh-text-sm);
  font-weight: var(--mh-weight-semibold);
  color: var(--mh-clay-700);
}
.mh-card__cue::after { content: "\2192"; transition: transform var(--mh-dur) var(--mh-ease); }

/* Three families on a tablet: one row, rather than two cards and an orphan. */
@media (min-width: 768px) {
  .myherb-families.mh-grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--mh-space-4); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .myherb-families.mh-grid--3 .mh-card__body { padding: var(--mh-space-5); }
  .myherb-families.mh-grid--3 .mh-card__figure { height: 120px; }
}
@media (min-width: 1024px) {
  .myherb-families.mh-grid--3 { gap: var(--mh-space-6); }
}

@media (max-width: 639px) {
  .mh-card__figure { height: 120px; margin-block: 0 var(--mh-space-2); }
  .mh-card--nav .mh-card__body { padding: var(--mh-space-5); }
}

@media (hover: hover) and (pointer: fine) {
  .mh-card--nav:hover { border-color: var(--mh-cedar-300); }
  .mh-card--nav:hover .mh-card__title a { color: var(--mh-clay-700); }
  .mh-card--nav:hover .mh-card__cue::after { transform: translateX(4px); }
  .mh-card--nav:hover .mh-card__figure img { transform: scale(1.03); }
}
/* Touch: the base .mh-card:hover lift would stick after a tap, so show a press instead. */
@media (hover: none) {
  .mh-card--nav:hover { transform: none; box-shadow: none; border-color: var(--mh-border); }
  .mh-card--nav:active { border-color: var(--mh-cedar-300); background-color: var(--mh-limestone); }
}

/* Keyboard focus lands on the title link; ring the whole card it stands for. */
.mh-card--nav:focus-within { border-color: var(--mh-cedar-300); box-shadow: var(--mh-shadow-md); }
@supports selector(:has(*)) {
  body.mh .mh-card--nav .mh-card__link:focus-visible { outline: none; }
  body.mh .mh-card--nav:has(.mh-card__link:focus-visible) {
    outline: var(--mh-focus-width) solid var(--mh-focus-color);
    outline-offset: var(--mh-focus-offset);
  }
  body.mh .mh-card--nav:has(.mh-card__link:focus-visible)::before { opacity: 1; }
  body.mh .mh-card--nav:has(.mh-card__link:focus-visible) .mh-card__cue::after { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .mh-card__cue::after, .mh-card--nav .mh-card__figure img { transform: none !important; }
}

/* ===========================================================================
   8. SPECIFICATION TABLE
   Built to be read, cited and copied by a procurement buyer.
   =========================================================================== */

.mh-spec { margin-block: var(--mh-space-10); }

.mh-spec__title {
  font-size: var(--mh-text-xl);
  margin: 0 0 var(--mh-space-4);
}

.mh-spec__scroll {
  overflow-x: auto;
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius-lg);
  background-color: var(--mh-white);
}

.mh-spec__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mh-text-sm);
  font-variant-numeric: tabular-nums;
}

.mh-spec__table caption {
  caption-side: top;
  text-align: left;
  padding: var(--mh-space-4) var(--mh-space-5) 0;
  font-size: var(--mh-text-xs);
  color: var(--mh-text-muted);
}

.mh-spec__table th,
.mh-spec__table td {
  text-align: left;
  vertical-align: top;
  padding: var(--mh-space-4) var(--mh-space-5);
  border-bottom: 1px solid var(--mh-border);
}
.mh-spec__table tr:last-child th,
.mh-spec__table tr:last-child td { border-bottom: 0; }

.mh-spec__table th[scope="row"] {
  width: 38%;
  font-weight: var(--mh-weight-semibold);
  color: var(--mh-text-secondary);
  background-color: var(--mh-limestone);
}

.mh-spec__table td { color: var(--mh-text); font-weight: var(--mh-weight-medium); }

@media (max-width: 560px) {
  .mh-spec__table th[scope="row"],
  .mh-spec__table td { display: block; width: auto; }
  .mh-spec__table th[scope="row"] {
    border-bottom: 0;
    padding-bottom: var(--mh-space-1);
    font-size: var(--mh-text-xs);
    letter-spacing: var(--mh-tracking-label);
    text-transform: uppercase;
  }
  .mh-spec__table td { padding-top: 0; }
}

/* ===========================================================================
   9. BADGES / TAXONOMY LABELS
   =========================================================================== */

.mh-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-space-1);
  padding: var(--mh-space-1) var(--mh-space-3);
  border-radius: var(--mh-radius-pill);
  font-size: var(--mh-text-2xs);
  font-weight: var(--mh-weight-semibold);
  letter-spacing: var(--mh-tracking-label);
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.mh-badge--family  { background-color: var(--mh-cedar-050); color: var(--mh-cedar-700); }
.mh-badge--process { background-color: var(--mh-clay-050);  color: var(--mh-clay-700); }
.mh-badge--neutral { background-color: var(--mh-sand);      color: var(--mh-ink-soft); }

.mh-badges { display: flex; flex-wrap: wrap; gap: var(--mh-space-2); }

/* ===========================================================================
   10. BREADCRUMBS
   =========================================================================== */

.mh-breadcrumbs {
  font-size: var(--mh-text-xs);
  color: var(--mh-text-muted);
  padding-block: var(--mh-space-4);
}
.mh-breadcrumbs a { color: var(--mh-text-secondary); text-decoration: none; }
.mh-breadcrumbs a:hover { color: var(--mh-cedar); text-decoration: underline; }
.mh-breadcrumbs .separator { margin-inline: var(--mh-space-2); color: var(--mh-border-strong); }
.mh-breadcrumbs .last { color: var(--mh-text); font-weight: var(--mh-weight-medium); }

/* ===========================================================================
   11. FORMS
   =========================================================================== */

.mh-field { display: flex; flex-direction: column; gap: var(--mh-space-2); margin-bottom: var(--mh-space-5); }

.mh-label {
  font-size: var(--mh-text-sm);
  font-weight: var(--mh-weight-semibold);
  color: var(--mh-text);
}
.mh-label .mh-req { color: var(--mh-clay-700); margin-inline-start: 2px; }
.mh-label .mh-optional {
  font-weight: var(--mh-weight-regular);
  color: var(--mh-text-muted);
  margin-inline-start: var(--mh-space-2);
}

.mh-hint { font-size: var(--mh-text-xs); color: var(--mh-text-muted); margin: 0; }

.mh-input,
.mh-select,
.mh-textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--mh-space-3) var(--mh-space-4);
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-base);
  color: var(--mh-text);
  background-color: var(--mh-white);
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-radius-md);
  transition: border-color var(--mh-dur) var(--mh-ease), box-shadow var(--mh-dur) var(--mh-ease);
}
.mh-textarea { min-height: 8rem; resize: vertical; line-height: var(--mh-leading-normal); }

.mh-input:hover, .mh-select:hover, .mh-textarea:hover { border-color: var(--mh-ink-soft); }

.mh-input:focus, .mh-select:focus, .mh-textarea:focus {
  border-color: var(--mh-cedar);
  box-shadow: 0 0 0 3px var(--mh-cedar-050);
}

.mh-input[aria-invalid="true"],
.mh-select[aria-invalid="true"],
.mh-textarea[aria-invalid="true"] { border-color: var(--mh-clay-700); }

/* Errors carry an icon glyph as well as colour, so colour is never the only cue. */
.mh-error {
  display: flex;
  gap: var(--mh-space-2);
  font-size: var(--mh-text-sm);
  font-weight: var(--mh-weight-medium);
  color: var(--mh-clay-700);
}
.mh-error::before { content: "\26A0"; }

.mh-fieldset {
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius-lg);
  padding: var(--mh-space-6);
  margin: 0 0 var(--mh-space-8);
}
.mh-fieldset > legend {
  padding-inline: var(--mh-space-3);
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-xs);
  font-weight: var(--mh-weight-semibold);
  letter-spacing: var(--mh-tracking-label);
  text-transform: uppercase;
  color: var(--mh-clay-700);
}

.mh-form-grid { display: grid; gap: 0 var(--mh-space-5); }
@media (min-width: 720px) {
  .mh-form-grid--2 { grid-template-columns: 1fr 1fr; }
  .mh-form-grid .mh-field--full { grid-column: 1 / -1; }
}

/* ===========================================================================
   12. PROCESS STEPS
   =========================================================================== */

.mh-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--mh-space-6);
  counter-reset: mh-step;
}
@media (min-width: 720px)  { .mh-steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .mh-steps { grid-template-columns: repeat(6, 1fr); } }

.mh-step {
  counter-increment: mh-step;
  padding-top: var(--mh-space-5);
  border-top: 2px solid var(--mh-border);
}
.mh-step::before {
  content: counter(mh-step, decimal-leading-zero);
  display: block;
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-xs);
  font-weight: var(--mh-weight-bold);
  letter-spacing: var(--mh-tracking-label);
  color: var(--mh-clay-700);
  margin-bottom: var(--mh-space-2);
}
.mh-step__title { font-size: var(--mh-text-base); font-weight: var(--mh-weight-semibold); margin: 0 0 var(--mh-space-1); }
.mh-step__text  { font-size: var(--mh-text-sm); color: var(--mh-text-secondary); margin: 0; }

/* ===========================================================================
   13. HERO
   =========================================================================== */

.mh-hero {
  position: relative;
  background-color: var(--mh-cedar-900);
  color: var(--mh-text-invert);
  padding-block: clamp(3.5rem, 9vw, 7.5rem);
  overflow: hidden;
}
/* Motif underlay: structural texture only, never legible ornament. */
.mh-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--mh-motif-zellige);
  background-size: 128px 128px;
  filter: invert(1);
  opacity: 0.05;
  pointer-events: none;
}
.mh-hero > * { position: relative; }

.mh-hero__inner { max-width: 44rem; }
.mh-hero__title { font-size: var(--mh-text-4xl); color: var(--mh-white); margin: 0 0 var(--mh-space-5); }
.mh-hero__lead {
  font-size: var(--mh-text-lg);
  line-height: var(--mh-leading-relaxed);
  color: var(--mh-cedar-300);
  margin: 0 0 var(--mh-space-8);
}
.mh-hero .mh-eyebrow { color: var(--mh-cedar-300); }

/* ===========================================================================
   14. UTILITIES
   =========================================================================== */

.mh-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.mh-stack > * + * { margin-top: var(--mh-space-4); }
.mh-stack--lg > * + * { margin-top: var(--mh-space-8); }

.mh-prose { max-width: var(--mh-container-text); }
.mh-prose > * + * { margin-top: var(--mh-space-5); }
.mh-prose h2 { margin-top: var(--mh-space-12); }
.mh-prose h3 { margin-top: var(--mh-space-8); }
.mh-prose ul, .mh-prose ol { padding-inline-start: var(--mh-space-6); }
.mh-prose li + li { margin-top: var(--mh-space-2); }

/* Skip link — first tab stop on every page. */
.mh-skip-link {
  position: absolute;
  left: var(--mh-space-4);
  top: -100px;
  z-index: var(--mh-z-overlay);
  padding: var(--mh-space-3) var(--mh-space-5);
  background: var(--mh-cedar);
  color: var(--mh-white);
  border-radius: 0 0 var(--mh-radius-md) var(--mh-radius-md);
  font-weight: var(--mh-weight-semibold);
  text-decoration: none;
  transition: top var(--mh-dur) var(--mh-ease);
}
.mh-skip-link:focus { top: 0; color: var(--mh-white); }