/* ============================================================
   HM Design-System · Starter CSS · Industrial Precision
   Version 2.0 · 21.05.2026
   Heskamp Medien · Elementor v4 + WebsiteStyleKit
   ============================================================
   Stilrichtung: Industrial Precision (Anthrazit / Signal Red,
   Inter + JetBrains Mono, Sharp 4 px Corners, Hard-Shadows,
   keine Soft-Shadows).
   ============================================================ */

/* ─── 1. DESIGN TOKENS ─────────────────────────────────────── */

:root {
  /* Brand Colors (Industrial Precision) */
  --color-primary:        #1A1A1A;   /* Anthrazit · Primary CTA, Headings */
  --color-primary-dark:   #000000;   /* Pures Schwarz · Hard-Shadow, Hover */
  --color-primary-light:  #F3F3F3;

  --color-accent:         #E30613;   /* Signal Red · Secondary, Akzent */
  --color-accent-dark:    #B5050F;   /* Signal Red Muted · Hover */
  --color-accent-light:   #FFDAD6;

  --color-dark:           #1A1A1A;
  --color-on-dark:        #FFFFFF;
  --color-on-dark-muted:  rgba(255,255,255,.72);

  /* Surface / Neutral */
  --color-bg:             #FFFFFF;
  --color-surface:        #F9F9F9;
  --color-surface-low:    #F3F3F3;
  --color-muted:          #E8E8E8;

  /* Text */
  --color-text:           #1A1C1C;
  --color-text-muted:     #444748;
  --color-heading:        #1A1A1A;
  --color-on-primary:     #FFFFFF;
  --color-on-accent:      #FFFFFF;

  /* Borders */
  --color-border:         #C4C7C7;   /* outline-variant */
  --color-border-strong:  #747878;   /* outline */
  --color-border-dark:    #333333;
  --color-border-hairline: #EAEAEA;

  /* State */
  --color-success:        #16A34A;
  --color-warning:        #F59E0B;
  --color-danger:         #BA1A1A;
  --color-info:           #0EA5E9;

  --color-white:          #FFFFFF;
  --color-black:          #000000;
  --color-focus:          #E30613;

  /* Typography Tokens */
  --font-heading:         'Inter', system-ui, -apple-system, sans-serif;
  --font-body:            'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:            'JetBrains Mono', ui-monospace, monospace;

  --type-scale:           1;

  --type-display:         calc(clamp(2.5rem, 2rem + 2.5vw, 3rem)         * var(--type-scale));
  --type-h1:              calc(clamp(2.5rem, 2rem + 2.5vw, 3rem)         * var(--type-scale));
  --type-h2:              calc(clamp(2rem, 1.7rem + 1.5vw, 2.25rem)      * var(--type-scale));
  --type-h3:              calc(clamp(1.5rem, 1.3rem + 1vw, 1.75rem)      * var(--type-scale));
  --type-h4:              calc(1.5rem  * var(--type-scale));
  --type-h5:              calc(1.25rem * var(--type-scale));
  --type-h6:              calc(1.125rem* var(--type-scale));
  --type-lead:            calc(1.125rem* var(--type-scale));
  --type-body:            calc(1rem    * var(--type-scale));
  --type-small:           calc(.875rem * var(--type-scale));
  --type-eyebrow:         calc(.75rem  * var(--type-scale));
  --type-button:          .875rem;
  --type-nav:             .875rem;

  /* Letter Spacing (Industrial: eng bei Headlines, weit bei Labels) */
  --ls-display:          -0.04em;
  --ls-headline:         -0.02em;
  --ls-mono:             0.05em;
  --ls-nav:              0.02em;

  /* Spacing Tokens (4 px Baseline) */
  --space-scale:          1;
  --space-2xs:            calc(.25rem  * var(--space-scale)); /*  4px */
  --space-xs:             calc(.5rem   * var(--space-scale)); /*  8px stack-sm */
  --space-s:              calc(1rem    * var(--space-scale)); /* 16px stack-md */
  --space-m:              calc(1.5rem  * var(--space-scale)); /* 24px gutter */
  --space-l:              calc(2rem    * var(--space-scale)); /* 32px stack-lg, margin-edge */
  --space-xl:             calc(3rem    * var(--space-scale)); /* 48px */
  --space-2xl:            calc(4rem    * var(--space-scale)); /* 64px */
  --space-3xl:            calc(5rem    * var(--space-scale)); /* 80px section-gap */
  --space-4xl:            calc(7.5rem  * var(--space-scale)); /* 120px */
  --space-5xl:            calc(10rem   * var(--space-scale)); /* 160px */

  --section-space-s:      calc(clamp(3rem, 6vw, 4rem)   * var(--space-scale));
  --section-space-m:      calc(clamp(4rem, 8vw, 5rem)   * var(--space-scale));
  --section-space-l:      calc(clamp(5rem, 10vw, 7rem)  * var(--space-scale));
  --section-space-xl:     calc(clamp(7rem, 14vw, 10rem) * var(--space-scale));

  /* Radii (Industrial Sharp) */
  --radius-none:          0;
  --radius-button:        4px;     /* Industrial soft */
  --radius-input:         0;       /* Blueprint sharp */
  --radius-card:          4px;
  --radius-image:         0;       /* Raw machinery */
  --radius-pill:          9999px;

  /* Hard-Shadows (Industrial · keine Blur-Schatten!) */
  --shadow-hard:          4px 4px 0 0 rgba(0,0,0,1);
  --shadow-hard-red:      4px 4px 0 0 #E30613;
  --shadow-hard-sm:       2px 2px 0 0 rgba(0,0,0,1);
  --shadow-step:          0 0 0 1px var(--color-border-hairline);

  /* Container */
  --container-narrow:     720px;
  --container-default:    1280px;
  --container-wide:       1440px;
  --container-gutter:     var(--space-l);

  /* Transitions */
  --t-fast:               150ms ease;
  --t-base:               200ms ease;
  --t-slow:               350ms ease;
}

.theme-compact   { --space-scale: .85; --type-scale: .95; }
.theme-standard  { --space-scale: 1;   --type-scale: 1; }
.theme-premium   { --space-scale: 1.15;--type-scale: 1.05; }
.theme-editorial { --space-scale: 1.30;--type-scale: 1.12; }


/* ─── 2. BASE STYLES ──────────────────────────────────────── */

body {
  font-family: var(--font-body);
  font-size:   var(--type-body);
  line-height: 1.6;
  color:       var(--color-text);
  background:  var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: var(--ls-headline);
}
h1 { font-weight: 800; letter-spacing: var(--ls-display); }
a { color: var(--color-primary); text-decoration: none; transition: color var(--t-base); }
a:hover { color: var(--color-accent); }
img, svg, video { max-width: 100%; height: auto; display: block; }
::selection { background: var(--color-accent); color: var(--color-white); }
*:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }


/* ─── 3. SECTIONS (Context-System) ─────────────────────────── */

.hm-section {
  --section-bg:                        var(--color-bg);
  --section-text:                      var(--color-text);
  --section-text-muted:                var(--color-text-muted);
  --section-heading:                   var(--color-heading);
  --section-border:                    var(--color-border);
  --section-card-bg:                   var(--color-bg);
  --section-card-border:               var(--color-border);
  --section-button-primary-bg:         var(--color-primary);
  --section-button-primary-text:       var(--color-on-primary);
  --section-button-primary-hover:      var(--color-accent);
  --section-button-secondary-border:   var(--color-primary);
  --section-button-secondary-text:     var(--color-primary);
  --section-button-secondary-hover-bg: var(--color-primary);
  --section-button-secondary-hover-text:var(--color-on-primary);
  --section-tag-bg:                    var(--color-accent);
  --section-tag-text:                  var(--color-on-accent);
  --section-link:                      var(--color-primary);
  --section-link-hover:                var(--color-accent);

  position: relative;
  background: var(--section-bg);
  color: var(--section-text);
  padding-block: var(--section-space-m);
}

.hm-section--light   { --section-bg: var(--color-bg); }
.hm-section--surface { --section-bg: var(--color-surface); }
.hm-section--muted   { --section-bg: var(--color-muted); }

.hm-section--dark {
  --section-bg:                          var(--color-dark);
  --section-text:                        var(--color-on-dark);
  --section-text-muted:                  var(--color-on-dark-muted);
  --section-heading:                     var(--color-on-dark);
  --section-border:                      rgba(255,255,255,.18);
  --section-card-bg:                     rgba(255,255,255,.04);
  --section-card-border:                 rgba(255,255,255,.12);
  --section-button-primary-bg:           var(--color-accent);
  --section-button-primary-text:         var(--color-on-accent);
  --section-button-primary-hover:        var(--color-white);
  --section-button-secondary-border:     var(--color-white);
  --section-button-secondary-text:       var(--color-white);
  --section-button-secondary-hover-bg:   var(--color-white);
  --section-button-secondary-hover-text: var(--color-primary);
  --section-link:                        var(--color-on-dark);
  --section-link-hover:                  var(--color-accent);
}

.hm-section--primary {
  --section-bg:                          var(--color-accent);
  --section-text:                        var(--color-on-accent);
  --section-heading:                     var(--color-on-accent);
  --section-button-primary-bg:           var(--color-white);
  --section-button-primary-text:         var(--color-primary);
  --section-button-secondary-border:     var(--color-white);
  --section-button-secondary-text:       var(--color-white);
}

.hm-section--image {
  --section-bg:                          transparent;
  --section-text:                        var(--color-on-dark);
  --section-heading:                     var(--color-on-dark);
  --section-button-primary-bg:           var(--color-accent);
  --section-button-primary-text:         var(--color-on-accent);
  --section-button-secondary-border:     var(--color-white);
  --section-button-secondary-text:       var(--color-white);
  --section-image-overlay:               rgba(0,0,0,.55);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
  color: var(--section-text);
}
.hm-section--image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--section-image-overlay);
  z-index: -1;
}
.hm-section--image-dark  { --section-image-overlay: rgba(0,0,0,.75); }
.hm-section--image-light { --section-image-overlay: rgba(0,0,0,.35); }

/* Section Spacing */
.hm-section--space-s  { padding-block: var(--section-space-s); }
.hm-section--space-m  { padding-block: var(--section-space-m); }
.hm-section--space-l  { padding-block: var(--section-space-l); }
.hm-section--space-xl { padding-block: var(--section-space-xl); }


/* ─── 4. CONTAINER & LAYOUT ────────────────────────────────── */

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


/* ─── 5. GRID & FLEX ───────────────────────────────────────── */

.hm-grid       { display: grid; gap: var(--space-m); }
.hm-grid--2col { grid-template-columns: 1fr 1fr; align-items: center; }
.hm-grid--3col { grid-template-columns: repeat(3, 1fr); }
.hm-grid--4col { grid-template-columns: repeat(4, 1fr); }
.hm-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.hm-grid--reverse > :first-child { order: 2; }

.hm-flex          { display: flex; }
.hm-flex--row     { flex-direction: row; }
.hm-flex--column  { flex-direction: column; }
.hm-flex--center  { justify-content: center; align-items: center; }
.hm-flex--between { justify-content: space-between; }
.hm-flex--wrap    { flex-wrap: wrap; }

@media (max-width: 1024px) {
  .hm-grid--2col, .hm-grid--3col, .hm-grid--4col { grid-template-columns: 1fr; }
}

.hm-stack-xs > * + * { margin-block-start: var(--space-xs); }
.hm-stack-s  > * + * { margin-block-start: var(--space-s); }
.hm-stack-m  > * + * { margin-block-start: var(--space-m); }
.hm-stack-l  > * + * { margin-block-start: var(--space-l); }
.hm-stack-xl > * + * { margin-block-start: var(--space-xl); }

.hm-gap-xs { gap: var(--space-xs); }
.hm-gap-s  { gap: var(--space-s); }
.hm-gap-m  { gap: var(--space-m); }
.hm-gap-l  { gap: var(--space-l); }
.hm-gap-xl { gap: var(--space-xl); }


/* ─── 6. TYPOGRAPHY ────────────────────────────────────────── */

.hm-heading           { font-family: var(--font-heading); color: var(--section-heading); line-height: 1.2; font-weight: 700; letter-spacing: var(--ls-headline); }
.hm-heading--display  { font-size: var(--type-display); font-weight: 800; letter-spacing: var(--ls-display); line-height: 1.1; }
.hm-heading--h1       { font-size: var(--type-h1); font-weight: 800; letter-spacing: var(--ls-display); }
.hm-heading--h2       { font-size: var(--type-h2); }
.hm-heading--h3       { font-size: var(--type-h3); }
.hm-heading--h4       { font-size: var(--type-h4); font-weight: 600; letter-spacing: -0.01em; }
.hm-heading--h5       { font-size: var(--type-h5); font-weight: 600; }
.hm-heading--h6       { font-size: var(--type-h6); font-weight: 600; }
.hm-heading--upper    { text-transform: uppercase; }

.hm-text              { color: var(--section-text); font-size: var(--type-body); line-height: 1.6; }
.hm-text--lead        { font-size: var(--type-lead); }
.hm-text--small       { font-size: var(--type-small); }
.hm-text--bold        { font-weight: 600; }
.hm-text--muted       { color: var(--section-text-muted); }

/* Industrial Eyebrow / Label (Mono, uppercase, gespreizt) */
.hm-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-mono);
  color: var(--section-text-muted);
}
.hm-eyebrow--accent { color: var(--color-accent); }

/* Mono-Label (für Specs/Tags) */
.hm-mono {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  font-weight: 500;
}

.hm-link              { color: var(--section-link); }
.hm-link:hover        { color: var(--section-link-hover); }


/* ─── 7. BUTTONS (Industrial) ───────────────────────────────── */

.hm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;
  padding: var(--space-s) var(--space-l);
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-size: var(--type-button);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-mono);
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform 100ms ease;
  cursor: pointer;
  white-space: nowrap;
}
.hm-button:active { transform: scale(.97); }

.hm-button--primary {
  background: var(--section-button-primary-bg);
  color:      var(--section-button-primary-text);
}
.hm-button--primary:hover { background: var(--section-button-primary-hover); }

.hm-button--secondary {
  background: transparent;
  color:        var(--section-button-secondary-text);
  border-color: var(--section-button-secondary-border);
}
.hm-button--secondary:hover {
  background: var(--section-button-secondary-hover-bg);
  color:      var(--section-button-secondary-hover-text);
}

/* Hard-Shadow Variante (Industrial-Signature) */
.hm-button--hard-shadow         { box-shadow: var(--shadow-hard); }
.hm-button--hard-shadow:hover   { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 rgba(0,0,0,1); }
.hm-button--hard-shadow-red     { box-shadow: var(--shadow-hard-red); }

.hm-button--lg { min-height: 56px; padding: var(--space-m) var(--space-xl); font-size: 1rem; }
.hm-button--sm { min-height: 40px; padding: var(--space-xs) var(--space-s); font-size: .75rem; }

.hm-button-group { display: flex; flex-wrap: wrap; gap: var(--space-m); }

@media (max-width: 640px) {
  .hm-button-group--mobile-stack .hm-button { width: 100%; }
}


/* ─── 8. CARDS (Industrial: Sharp + 1px Border) ─────────────── */

.hm-card {
  background: var(--section-card-bg);
  border: 1px solid var(--section-card-border);
  border-radius: var(--radius-card);
  padding: var(--space-l);
  color: var(--section-text);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  height: 100%;
  transition: border-color var(--t-base), transform var(--t-base);
}
.hm-card:hover { border-color: var(--color-accent); transform: translateY(-4px); }

.hm-card--soft         { background: var(--color-surface); border-color: transparent; }
.hm-card--border       { background: transparent; }
.hm-card--inverted     { --section-card-bg: var(--color-primary); --section-text: var(--color-on-primary); }
.hm-card--interactive  { cursor: pointer; }
.hm-card--no-hover:hover { border-color: var(--section-card-border); transform: none; }

/* Card Icon (Industrial: Rotes Symbol oben) */
.hm-card__icon {
  font-size: 32px;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}


/* ─── 9. TAGS / CHIPS / PILLS (Industrial) ──────────────────── */

.hm-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-mono);
  border-radius: var(--radius-button);
  background: var(--section-tag-bg);
  color: var(--section-tag-text);
}
.hm-tag--solid-red      { background: var(--color-accent); color: var(--color-on-accent); }
.hm-tag--solid-dark     { background: var(--color-primary); color: var(--color-on-primary); }
.hm-tag--outline        { background: transparent; border: 1px solid currentColor; }
.hm-tag--ghost          { background: var(--color-surface); color: var(--color-text); }


/* ─── 10. JOB ITEM / LIST ROW (Industrial-Listenrow) ─────────── */

.hm-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-m) var(--space-l);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  transition: border-color var(--t-base), transform var(--t-base);
}
.hm-list-row:hover { border-color: var(--color-accent); }

.hm-list-row__content { flex: 1 1 auto; }
.hm-list-row__meta    { display: flex; gap: var(--space-xs); margin-bottom: var(--space-xs); flex-wrap: wrap; }
.hm-list-row__title   { font-size: var(--type-h5); font-weight: 700; color: var(--color-heading); margin: 0; }
.hm-list-row__sub     { font-size: var(--type-small); color: var(--color-text-muted); margin-top: var(--space-2xs); }
.hm-list-row__aside   { display: flex; align-items: center; gap: var(--space-m); }

@media (max-width: 768px) {
  .hm-list-row { flex-direction: column; align-items: flex-start; }
  .hm-list-row__aside { width: 100%; justify-content: space-between; }
}


/* ─── 11. STEP-NUMBER (4-Schritt-Prozess) ───────────────────── */

.hm-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-s);
  flex: 1 1 0;
  position: relative;
}
.hm-step__number {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.75rem;
  border-radius: var(--radius-card);
}
.hm-step__title { font-size: var(--type-h6); font-weight: 700; color: var(--section-heading); }
.hm-step__text  { font-size: var(--type-small); color: var(--section-text-muted); max-width: 200px; }

/* Connector-Line zwischen Steps */
.hm-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-m);
  position: relative;
}
.hm-steps::before {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(12.5% + 32px);
  right: calc(12.5% + 32px);
  height: 2px;
  background: var(--color-accent);
  opacity: .35;
  z-index: -1;
}
@media (max-width: 768px) { .hm-steps { grid-template-columns: 1fr; } .hm-steps::before { display: none; } }


/* ─── 12. TESTIMONIAL ────────────────────────────────────────── */

.hm-testimonial {
  position: relative;
  padding: var(--space-2xl) var(--space-l);
}
.hm-testimonial__quote {
  position: absolute;
  top: var(--space-l);
  right: var(--space-l);
  font-family: var(--font-heading);
  font-size: 200px;
  font-weight: 900;
  line-height: 1;
  color: var(--color-muted);
  z-index: 0;
}
.hm-testimonial__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}
.hm-testimonial__text {
  font-size: var(--type-h3);
  font-weight: 600;
  letter-spacing: var(--ls-headline);
  color: var(--color-text);
  line-height: 1.4;
}
.hm-testimonial__author { margin-top: var(--space-m); }
.hm-testimonial__name   { font-weight: 700; }
.hm-testimonial__role   { font-family: var(--font-mono); font-size: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--ls-mono); color: var(--color-text-muted); }


/* ─── 13. STATS / NUMBERS BLOCK ──────────────────────────────── */

.hm-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-l);
  border-radius: var(--radius-card);
  min-height: 200px;
}
.hm-stat--red    { background: var(--color-accent); color: var(--color-on-accent); }
.hm-stat--dark   { background: var(--color-primary); color: var(--color-on-primary); }
.hm-stat--light  { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
.hm-stat__icon   { font-size: 32px; }
.hm-stat__value  { font-family: var(--font-heading); font-size: var(--type-h1); font-weight: 800; line-height: 1; }
.hm-stat__label  { font-family: var(--font-mono); font-size: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--ls-mono); }


/* ─── 14. NAV / HEADER ───────────────────────────────────────── */

.hm-nav__link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  font-family: var(--font-body);
  font-size: var(--type-nav);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-nav);
  color: var(--color-text);
  text-decoration: none;
  padding-block: var(--space-s);
  border-top: 3px solid transparent;
  transition: color var(--t-base);
}
.hm-nav__link:hover,
.hm-nav__link.is-active {
  color: var(--color-accent);
  border-top-color: var(--color-accent);
}


/* ─── 15. UTILITIES ─────────────────────────────────────────── */

.hm-text-center { text-align: center; }
.hm-text-left   { text-align: left; }
.hm-text-right  { text-align: right; }

.hm-divider {
  height: 2px;
  background: var(--color-border);
  border: 0;
  margin: 0;
}
.hm-divider--accent { background: var(--color-accent); }

.hm-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 1025px) { .hm-hide-desktop { display: none !important; } }
@media (max-width: 1024px) { .hm-hide-tablet  { display: none !important; } }
@media (max-width: 640px)  { .hm-hide-mobile  { display: none !important; } }


/* ─── 16. COMPONENT-WRAPPER (für DOM-Strukturen aus Library) ── */

.hm-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(480px, 70vh, 720px);
}
.hm-hero__content { max-width: 720px; }

.hm-feature-grid { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.hm-job-list { display: flex; flex-direction: column; gap: var(--space-s); }


/* ─── END · Industrial Precision ─────────────────────────── */