/* Hallmark · pre-emit critique: P4 H5 E5 S4 R5 V4 · slop test 58/58 (sector family; diversification gates skipped, designed-as-app) */
/* Hallmark · genre: modern-minimal · macrostructure: Workbench (sector variant) · theme: custom (Apple-slick, one brand violet) · design-system: tokens.css + home.css · designed-as-app
 * enrichment: Tier-A sector dossier on the shared hero stage (fictional example per sector) · nav: N5 glass capsule + N11 sector panel (shared) · footer: Ft5 statement (shared)
 * tone: Apple-like SaaS · audience: projectleiders + directie, per sector · action: Plan een demo
 * Loaded after home.css by the five sector pages in / and /en. Adds only what the homepage doesn't have;
 * nav, hero, stage + dossier card, pilot tile and footer come from home.css unchanged.
 */

/* ============ Wayfinding ============ */
.crumb { margin-bottom: var(--space-md); color: var(--color-ink-2); }
.crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-xs); }
.crumb li { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; white-space: nowrap; }
/* Separator trails its item, so a wrapped crumb never starts a line with "/" */
.crumb li:not(:last-child)::after { content: "/"; color: var(--color-ink-2); opacity: 0.5; }
/* Phones: the logo already links home, so the crumb starts at the sector level */
@media (max-width: 39.99rem) { .crumb li:first-child { display: none; } }
.crumb a { color: inherit; text-decoration: none; }
.crumb [aria-current="page"] { color: var(--color-ink); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .crumb a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.2em; } }
.crumb a:active { opacity: 0.6; }


/* ============ Type ============ */
.display-s { font-size: var(--text-display-s); }
.h2-wide { max-width: 26ch; }
/* Two-tone heads: the setup in ink, the turn in grey. Roman throughout. */
.h2 .tone { color: var(--color-ink-2); }
.on-night .h2 .tone { color: var(--color-night-ink-2); }
.sec-head { display: grid; gap: var(--space-md); }
.issue h3, .how-step h3, .gain h3 { font-size: var(--text-md); font-weight: 600; line-height: 1.25; letter-spacing: var(--track-head); text-wrap: balance; }

/* ============ Recognisable problems ============ */
.issues { padding-block: 0 var(--space-3xl); }
.issue-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); margin-top: var(--space-2xl); }
.issue { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.issue p { color: var(--color-ink-2); max-width: 30rem; }
@media (min-width: 48rem) {
  .issue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .issue-grid.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 72rem) { .issue-grid.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============ How it works (the dark act, unpinned) ============ */
.how { padding-block: var(--space-3xl); }
.how-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); margin-top: var(--space-2xl); }
.how-step { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-night-rule); }
.how-n { margin-bottom: var(--space-sm); font-size: var(--text-display); font-weight: 700; line-height: 1; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.how-step p:last-child { color: var(--color-night-ink-2); max-width: 26rem; }
@media (min-width: 48rem) { .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); } }

/* ============ What it gets you ============ */
.gains { padding-block: var(--space-3xl); background: var(--color-paper-2); }
.gain-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) var(--space-2xl); margin-top: var(--space-2xl); }
.gain { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--space-xs) var(--space-sm); align-content: start; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.gain::before {
  content: ""; grid-row: 1; width: 1.25rem; height: 1.25rem; margin-top: 0.1em;
  background: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gain h3, .gain p { grid-column: 2; }
.gain p { color: var(--color-ink-2); max-width: 30rem; }
@media (min-width: 48rem) { .gain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============ The three figures ============ */
.figures { padding-block: var(--space-3xl); }
.fig-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); margin-top: var(--space-2xl); }
.fig { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.fig-num { font-size: var(--text-xl); font-weight: 700; line-height: 1.05; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
.fig p:last-child { color: var(--color-ink-2); }
@media (min-width: 48rem) { .fig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); } }

/* ============ Other sectors ============ */
.sectors { padding-block: 0 var(--space-3xl); }
.sectors-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.s-list { border-top: var(--rule-hair) solid var(--color-rule); }
.s-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3xs) var(--space-md);
  padding-block: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink); text-decoration: none;
}
.s-name { font-weight: 600; transition: color var(--dur-short) var(--ease-out); }
.s-sub { grid-column: 1; color: var(--color-ink-2); }
.s-go, .s-here { grid-row: 1 / span 2; grid-column: 2; }
.s-go { color: var(--color-accent); font-size: 1.4em; line-height: 1; transition: transform var(--dur-short) var(--ease-out); }
.s-here { color: var(--color-ink-2); }
@media (hover: hover) and (pointer: fine) {
  a.s-row:hover .s-name { color: var(--color-accent); }
  a.s-row:hover .s-go { transform: translateX(2px); }
}
a.s-row:active { opacity: 0.7; }
@media (min-width: 60rem) { .sectors-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; } }