/* Self-hosted web fonts. This site makes no third-party requests. */
/* Generated by _src\fetch-fonts.ps1 - do not edit by hand. */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/IBMPlexMono-400-latin.woff2') format('woff2');
  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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/IBMPlexMono-500-latin.woff2') format('woff2');
  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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/IBMPlexMono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/Inter-latin.woff2') format('woff2');
  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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/SpaceGrotesk-latin.woff2') format('woff2');
  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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/SpaceGrotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* ==========================================================================
   Artabel AG — artabel.ch
   Design system. Edit here, then run _src/build.ps1 to publish into /site.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Warm stone ground, taken from the red-jasper identity studies: the
     off-white of a cut stone's matrix rather than a neutral grey-white. */
  --paper:      #F7F4F1;
  --surface:    #FFFFFF;
  --surface-2:  #F1EAE5;
  --ink:        #1C1917;
  --ink-2:      #453A33;
  --muted:      #6E6058;
  --line:       #E4DAD2;
  --line-soft:  #EFE7E1;

  /* Jasper. #A6483F is the logo disc itself; the deep step is the darker
     banding in the same stone, used for hover and emphasis. */
  --brick:      #A6483F;
  --brick-deep: #7E332C;
  --brick-tint: #F6EAE7;
  --jasper-ink: #5E241F;
  --teal:       #2E6A62;
  --teal-tint:  #E6EFED;
  --sand:       #C9A227;

  /* Categorical chart palette — validated for lightness band, chroma floor,
     protan/deutan separation, normal-vision floor and contrast on white.
     Assign in this fixed order; never cycle, never reassign by rank. */
  --cat-1: #A6483F;  /* brick   — Artabel engineering */
  --cat-2: #3A6FA8;  /* blue    — specification & acceptance */
  --cat-3: #B8860B;  /* gold    — operation & handover */
  --cat-1-soft: #F2E2DF;
  --cat-2-soft: #E2EAF3;
  --cat-3-soft: #F4ECD8;

  /* Formerly near-black full-bleed bands. They now read as a band of paler
     stone: the page keeps its rhythm without going dark three times before
     the footer. Every .band-night / .panel-night rule is driven from these
     five tokens, so re-toning them re-tones each band consistently. */
  --night:      #EDE5DF;
  --night-2:    #F6F1ED;
  --on-night:   #1C1917;
  --on-night-m: #5F534C;
  --night-line: #DCD0C7;

  --display: "Space Grotesk", "Segoe UI", Inter, system-ui, sans-serif;
  --body:    Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --gut: clamp(20px, 4vw, 40px);
  --sec: clamp(64px, 8vw, 112px);
  --r:   14px;
  --r-s: 8px;

  --shadow:   0 1px 2px rgba(22,18,15,.05), 0 12px 32px -18px rgba(22,18,15,.28);
  --shadow-2: 0 2px 6px rgba(22,18,15,.07), 0 28px 60px -28px rgba(22,18,15,.38);
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #171413;
    --surface:   #1E1A18;
    --surface-2: #262120;
    --ink:       #F6F1ED;
    --ink-2:     #DCD1C9;
    --muted:     #A2938A;
    --line:      #322A2C;
    --line-soft: #251F20;

    --brick:      #D97C70;
    --brick-deep: #E39A90;
    --brick-tint: #2C1E1C;
    --teal:       #6FB3A6;
    --teal-tint:  #172623;

    /* Dark-mode categorical steps — re-selected and re-validated against the
       dark surface, not an automatic flip of the light steps. */
    --cat-1: #C2695E;
    --cat-2: #4E86C4;
    --cat-3: #B08A22;
    --cat-1-soft: #3A2320;
    --cat-2-soft: #1C2A3A;
    --cat-3-soft: #322818;

    /* Bands in dark mode: a step LIGHTER than the page, mirroring what they
       now do in light mode, instead of a second, deeper black. */
    --night:      #221D1B;
    --night-2:    #2A2422;
    --on-night:   #F5EFEA;
    --on-night-m: #BCAFA6;
    --night-line: #3A302D;

    --shadow:   0 1px 2px rgba(0,0,0,.5), 0 12px 32px -18px rgba(0,0,0,.8);
    --shadow-2: 0 2px 6px rgba(0,0,0,.55), 0 28px 60px -28px rgba(0,0,0,.9);
  }
}

:root[data-theme="dark"] {
  --paper:     #171413;
  --surface:   #1E1A18;
  --surface-2: #262120;
  --ink:       #F6F1ED;
  --ink-2:     #DCD1C9;
  --muted:     #A2938A;
  --line:      #322A2C;
  --line-soft: #251F20;
  --brick:      #D97C70;
  --brick-deep: #E39A90;
  --brick-tint: #2C1E1C;
  --teal:       #6FB3A6;
  --teal-tint:  #172623;
  --cat-1: #C2695E;
  --cat-2: #4E86C4;
  --cat-3: #B08A22;
  --cat-1-soft: #3A2320;
  --cat-2-soft: #1C2A3A;
  --cat-3-soft: #322818;
  --night:      #221D1B;
  --night-2:    #2A2422;
  --on-night:   #F5EFEA;
  --on-night-m: #BCAFA6;
  --night-line: #3A302D;
  --shadow:   0 1px 2px rgba(0,0,0,.5), 0 12px 32px -18px rgba(0,0,0,.8);
  --shadow-2: 0 2px 6px rgba(0,0,0,.55), 0 28px 60px -28px rgba(0,0,0,.9);
}

/* ---- 2. Base ------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1, "cv05" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* German compounds (Entscheidungsunterstuetzung, Ingenieurunternehmen) are
     wider than a 360px phone column. Last-resort breaking here; proper
     hyphenation below, where the browser can use the page's lang attribute. */
  overflow-wrap: break-word;
}

@media (max-width: 620px) {
  h1, h2, h3, h4, p, li, summary, figcaption, dd, dt, .wt, .lede { hyphens: auto; }
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.021em;
  line-height: 1.08;
  margin: 0 0 .55em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6.2vw, 4.35rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(1.85rem, 3.9vw, 2.85rem); letter-spacing: -0.026em; }
h3 { font-size: clamp(1.18rem, 1.9vw, 1.42rem); }
h4 { font-size: 1.02rem; letter-spacing: -0.012em; }

p  { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--brick); text-decoration-color: color-mix(in srgb, var(--brick) 35%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--brick-deep); text-decoration-color: currentColor; }

strong, b { font-weight: 650; color: var(--ink); }
em { font-style: italic; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
img, svg { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2.5px solid var(--brick);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: color-mix(in srgb, var(--brick) 26%, transparent); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper); padding: .7rem 1.1rem; border-radius: 0 0 var(--r-s) 0;
}
.skip:focus { left: 0; }

/* ---- 3. Layout ---------------------------------------------------------- */

.wrap { width: min(1180px, 100% - (var(--gut) * 2)); margin-inline: auto; }
.wrap-n { width: min(820px, 100% - (var(--gut) * 2)); margin-inline: auto; }

section { padding-block: var(--sec); position: relative; }
section.tight { padding-block: clamp(44px, 5vw, 72px); }

.band-alt   { background: var(--surface-2); }
.band-paper { background: var(--surface); }
.band-night { background: var(--night); color: var(--on-night); }
.band-night h1, .band-night h2, .band-night h3, .band-night h4, .band-night strong { color: var(--on-night); }
.band-night p, .band-night li { color: var(--on-night-m); }
.band-night a { color: #EFA99D; }
.band-night .eyebrow { color: #EFA99D; }
.band-night .rule-line { background: var(--night-line); }

/* minmax(0, 1fr), not the implicit 1fr: a bare .grid with no .g-N modifier
   would otherwise take its width from the longest German compound in it and
   overflow its own container. */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-split { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.g-split-r { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(28px, 5vw, 72px); align-items: start; }

@media (max-width: 980px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-split, .g-split-r { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
}

.sticky-col { position: sticky; top: 108px; }
@media (max-width: 980px) { .sticky-col { position: static; } }

/* ---- 4. Brand mark ------------------------------------------------------ */

.mark { display: block; width: 1em; height: 1em; color: var(--brick); flex: none; }

.lockup { display: inline-flex; align-items: center; gap: .62rem; text-decoration: none; color: inherit; }
.lockup .mark { font-size: 30px; }
.lockup .word {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--ink);
  padding-left: .06em;
  line-height: 1;
}
.band-night .lockup .word { color: var(--on-night); }
/* The footer is deep jasper, not the light stone band: --on-night is dark ink
   there and would put near-black lettering on a red ground. */
.site-foot .lockup .word { color: #FFFFFF; }
.site-foot .lockup .mark { color: #E8CFC9; }

/* ---- 5. Header / nav ---------------------------------------------------- */

.site-head {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.site-head.is-stuck { border-bottom-color: var(--line); }

.head-in {
  display: flex; align-items: center; gap: 1.6rem;
  min-height: 74px;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: .15rem; }
.nav a {
  font-size: .905rem; font-weight: 500; letter-spacing: -0.005em;
  color: var(--ink-2); text-decoration: none;
  padding: .52rem .74rem; border-radius: var(--r-s);
  transition: color .16s, background .16s;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav a.is-here { color: var(--brick); }
.nav a.is-here::after {
  content: ""; display: block; height: 2px; border-radius: 2px;
  background: var(--brick); margin-top: 4px;
}

.nav-cta {
  margin-left: .6rem;
  font-size: .885rem !important; font-weight: 600 !important;
  color: var(--paper) !important; background: var(--ink);
  padding: .56rem 1.02rem !important; border-radius: 100px !important;
}
.nav-cta:hover { background: var(--brick) !important; color: #fff !important; }

/* ---- 5b. Language switcher --------------------------------------------- */

.langs {
  display: inline-flex; align-items: center; gap: 1px;
  margin-left: .9rem; padding-left: .9rem;
  border-left: 1px solid var(--line);
}
.langs a {
  font-family: var(--mono); font-size: .705rem; letter-spacing: .09em;
  color: var(--muted); text-decoration: none;
  padding: .34rem .42rem; border-radius: 5px; line-height: 1;
  transition: color .16s, background .16s;
}
.langs a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.langs a.is-here { color: var(--brick); font-weight: 500; }
.langs a.is-here::after { content: none; }

.site-foot .langs { border-left: 0; margin: 0; padding: 0; }
.site-foot .langs a { color: var(--on-night-m); padding: .3rem .5rem .3rem 0; }
.site-foot .langs a:hover { color: var(--on-night); background: none; text-decoration: underline; text-underline-offset: 3px; }
.site-foot .langs a.is-here { color: #EFA99D; }

@media (max-width: 1180px) {
  .nav .langs {
    margin: 1.1rem 0 0; padding: 1rem 0 0;
    border-left: 0; border-top: 1px solid var(--line-soft);
    gap: .3rem;
  }
  .nav .langs a { font-size: .86rem; padding: .5rem .7rem; border: 1px solid var(--line); }
}

.burger {
  display: none; margin-left: auto;
  width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--surface); color: var(--ink); cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span, .burger span::before, .burger span::after {
  content: ""; display: block; width: 17px; height: 1.8px; background: currentColor; border-radius: 2px;
  transition: transform .22s var(--ease), opacity .16s;
}
.burger span::before { position: absolute; transform: translateY(-5.5px); }
.burger span::after  { position: absolute; transform: translateY(5.5px); }
.burger span { position: relative; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: rotate(-45deg); }

@media (max-width: 1180px) {
  .burger { display: inline-flex; }
  .nav {
    position: fixed; inset: 74px 0 auto 0; z-index: 55;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: .5rem var(--gut) 1.4rem;
    box-shadow: var(--shadow-2);
    transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
    max-height: calc(100dvh - 74px); overflow-y: auto;
  }
  .nav.is-open {
    opacity: 1; transform: none; pointer-events: auto; visibility: visible;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s;
  }
  .nav a { padding: .82rem .2rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; font-size: 1.02rem; }
  .nav a.is-here::after { display: none; }
  .nav-cta { margin: 1rem 0 0; text-align: center; border-bottom: 0 !important; }
}

/* ---- 6. Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--body); font-size: .955rem; font-weight: 600; letter-spacing: -0.006em;
  padding: .82rem 1.4rem; border-radius: 100px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .16s var(--ease), background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--brick); color: #fff; box-shadow: 0 10px 24px -14px var(--brick); }
.btn-primary:hover { background: var(--brick-deep); color: #fff; box-shadow: 0 16px 30px -14px var(--brick); }

.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--brick); color: #fff; }

.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

.band-night .btn-ghost { background: transparent; border-color: var(--night-line); color: var(--on-night); }
.band-night .btn-ghost:hover { border-color: var(--on-night); color: var(--on-night); }
.band-night .btn-ink { background: var(--on-night); color: var(--night); }
.band-night .btn-ink:hover { background: var(--brick); color: #FFFFFF; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.arrow { transition: transform .18s var(--ease); }
.btn:hover .arrow, .lnk:hover .arrow { transform: translateX(3px); }

.lnk {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .935rem; text-decoration: none;
  color: var(--brick); border-bottom: 1px solid color-mix(in srgb, var(--brick) 30%, transparent);
  padding-bottom: 2px;
}
.lnk:hover { border-bottom-color: currentColor; }

/* ---- 7. Section headers ------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: .715rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase;
  color: var(--brick); margin: 0 0 1rem;
  display: flex; align-items: center; gap: .7rem;
}
.eyebrow::before {
  content: ""; width: 20px; height: 1.5px; background: currentColor; flex: none; opacity: .65;
}

.sec-head { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head .lede { font-size: clamp(1.03rem, 1.5vw, 1.16rem); color: var(--muted); }

.lede { font-size: clamp(1.08rem, 1.7vw, 1.28rem); line-height: 1.55; color: var(--ink-2); }

.rule-line { height: 1px; background: var(--line); margin-block: clamp(40px, 5vw, 64px); }

/* ---- 8. Hero ------------------------------------------------------------ */

.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(64px, 9vw, 130px) clamp(48px, 6vw, 84px);
  background:
    radial-gradient(900px 480px at 12% -8%, var(--brick-tint), transparent 62%),
    radial-gradient(760px 420px at 96% 6%, color-mix(in srgb, var(--cat-2) 8%, transparent), transparent 58%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 4.5%, transparent) 1px, transparent 1px);
  background-size: clamp(60px, 7vw, 96px) 100%;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent);
}
.hero > * { position: relative; z-index: 1; }

.hero h1 { max-width: 15ch; }
.hero .lede { max-width: 56ch; margin-top: 1.2rem; }
.hero .btn-row { margin-top: 2.1rem; }

.hero-tag {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .1rem .6rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line); border-radius: 100px; padding: .42rem 1.05rem;
  margin-bottom: 1.5rem;
}
.hero-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brick); flex: none; }

/* Below the pill's comfortable width it becomes a plain line rather than a lumpy blob. */
@media (max-width: 620px) {
  .hero-tag {
    display: block; border: 0; background: none; padding: 0;
    letter-spacing: .1em; line-height: 1.7; color: var(--muted);
  }
  .hero-tag .dot { display: inline-block; vertical-align: middle; margin: 0 .5rem; }
}

/* ---- 9. Stat strip ------------------------------------------------------ */

.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  margin-top: clamp(44px, 6vw, 76px);
}
.stats > div {
  padding: 1.5rem 1.4rem 0 0;
  border-right: 1px solid var(--line);
}
.stats > div:last-child { border-right: 0; }
.stats > div + div { padding-left: 1.4rem; }
.stat-n {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: -0.03em;
  color: var(--ink); display: block;
}
.stat-n .u { color: var(--brick); }
.stat-l { font-size: .855rem; color: var(--muted); margin-top: .55rem; line-height: 1.4; }
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div { border-bottom: 1px solid var(--line); padding-bottom: 1.3rem; }
  .stats > div:nth-child(2n) { border-right: 0; }
  .stats > div:nth-child(2n+1) { padding-left: 0; }
  .stats > div:nth-child(n+3) { padding-top: 1.3rem; }
  .stats > div:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ---- 10. Cards ---------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(22px, 2.6vw, 30px);
  display: flex; flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: .955rem; }
a.card { text-decoration: none; color: inherit; }
a.card:hover, .card.hoverable:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--brick) 40%, var(--line));
}
a.card:hover h3 { color: var(--brick); }
.card .foot { margin-top: auto; padding-top: 1.1rem; }

.card-num {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  color: var(--brick); margin-bottom: 1.1rem;
}

.ico {
  width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center; margin-bottom: 1.15rem;
  background: var(--brick-tint); color: var(--brick);
  border: 1px solid color-mix(in srgb, var(--brick) 16%, transparent);
}
.ico svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* One accent hue for interface chrome; the categorical blue and gold are reserved
   for figures, where they carry meaning. `.ico.t` alternates by weight, not by hue —
   a second decorative colour was making the pages feel busy. */
/* One icon treatment only. Alternating a filled and an outlined variant down a
   page reads as arbitrary rather than as rhythm -- the reader looks for the
   rule and there is none. */

.band-night .card { background: var(--night-2); border-color: var(--night-line); }
.band-night .card p { color: var(--on-night-m); }
.band-night a.card:hover h3 { color: #EFA99D; }
.band-night .ico { background: rgba(217,124,112,.13); border-color: rgba(217,124,112,.24); color: #EFA99D; }

/* ---- 11. Feature list --------------------------------------------------- */

ul.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .72rem; }
ul.ticks li {
  position: relative; padding-left: 1.75rem; font-size: .965rem; color: var(--ink-2); line-height: 1.55;
}
ul.ticks li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--brick); opacity: .85;
}
ul.ticks li strong { color: var(--ink); }
.band-night ul.ticks li { color: var(--on-night-m); }
.band-night ul.ticks li strong { color: var(--on-night); }

ul.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }

/* ---- 12. Definition rows (capabilities) --------------------------------- */

.rows { border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 44px);
  padding: clamp(22px, 2.8vw, 34px) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.row > h3 { margin: 0; font-size: 1.12rem; }
.row .kicker { font-family: var(--mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--brick); display: block; margin-bottom: .5rem; }
.row p { color: var(--muted); font-size: .965rem; }
@media (max-width: 760px) { .row { grid-template-columns: minmax(0, 1fr); gap: .8rem; } }

/* ---- 13. Steps / process ------------------------------------------------ */

.steps { counter-reset: st; display: grid; gap: 0; border-top: 1px solid var(--line); }
.steps > li {
  counter-increment: st; list-style: none;
  display: grid; grid-template-columns: 74px minmax(0, 1fr);
  gap: clamp(14px, 2vw, 28px);
  padding: clamp(20px, 2.6vw, 30px) 0;
  border-bottom: 1px solid var(--line);
}
.steps > li::before {
  content: "0" counter(st);
  font-family: var(--mono); font-size: .8rem; letter-spacing: .1em;
  color: var(--brick); padding-top: .32em;
}
.steps h4 { margin-bottom: .35rem; font-size: 1.08rem; }
.steps p { color: var(--muted); font-size: .955rem; margin: 0; }

/* ---- 14. Tables --------------------------------------------------------- */

.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 620px; }
table.data th, table.data td { text-align: left; padding: .92rem 1.1rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.data thead th {
  font-family: var(--mono); font-size: .69rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; background: var(--surface-2);
  border-bottom: 1px solid var(--line); position: sticky; top: 0;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--brick) 3.5%, transparent); }
table.data td strong { color: var(--ink); font-weight: 600; }
table.data .mono { font-family: var(--mono); font-size: .84rem; color: var(--brick); white-space: nowrap; }

/* ---- 15. Quote / callout ------------------------------------------------ */

.callout {
  border-left: 3px solid var(--brick);
  background: var(--brick-tint);
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 32px);
  border-radius: 0 var(--r) var(--r) 0;
}
.callout p { color: var(--ink-2); }
.callout .label {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brick); display: block; margin-bottom: .6rem;
}

.pull {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.32rem, 2.5vw, 1.9rem); line-height: 1.28; letter-spacing: -0.022em;
  color: var(--ink); margin: 0;
}
.pull-cite { display: block; font-family: var(--body); font-size: .9rem; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-top: 1.1rem; }

/* ---- 16. Chips ---------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font-family: var(--mono); font-size: .735rem; letter-spacing: .04em;
  padding: .36rem .72rem; border-radius: 100px;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--surface);
  white-space: nowrap;
}
.chip.on { border-color: color-mix(in srgb, var(--brick) 38%, transparent); color: var(--brick); background: var(--brick-tint); }
/* "Strukturierte Metadaten und Ontologien" is wider than a 320px phone. Below
   that width a chip stops being a pill and is allowed to run to two lines. */
@media (max-width: 480px) { .chip { white-space: normal; max-width: 100%; } }
.band-night .chip { background: var(--night-2); border-color: var(--night-line); color: var(--on-night-m); }

/* ---- 17. Project cards -------------------------------------------------- */

.proj { display: grid; gap: 0; border-top: 1px solid var(--line); }
.proj > article {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(18px, 3.5vw, 52px);
  padding: clamp(26px, 3.4vw, 42px) 0;
  border-bottom: 1px solid var(--line);
}
.proj .meta .who { font-family: var(--display); font-weight: 600; font-size: 1.14rem; letter-spacing: -0.02em; margin: 0 0 .3rem; }
.proj .meta .where { font-size: .88rem; color: var(--muted); margin: 0 0 .9rem; }
.proj .meta .yr { font-family: var(--mono); font-size: .73rem; letter-spacing: .1em; color: var(--brick); }
.proj h3 { font-size: 1.24rem; margin-bottom: .55rem; }
.proj p { color: var(--muted); font-size: .965rem; }
.proj .chips { margin-top: 1.1rem; }
@media (max-width: 760px) { .proj > article { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

/* ---- 18. Two-tone panel ------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(26px, 3.6vw, 48px);
  box-shadow: var(--shadow);
}
.panel-night {
  background: var(--night); color: var(--on-night);
  border-radius: var(--r);
  padding: clamp(28px, 4vw, 56px);
}
.panel-night h2, .panel-night h3, .panel-night strong { color: var(--on-night); }
.panel-night p, .panel-night li { color: var(--on-night-m); }
.panel-night .eyebrow { color: #EFA99D; }

/* ---- 19. Diagram -------------------------------------------------------- */

figure.dia { margin: 0; }
figure.dia svg { width: 100%; height: auto; }
figure.dia figcaption { font-size: .855rem; color: var(--muted); margin-top: 1rem; line-height: 1.5; }
.dia-ink   { fill: var(--ink); }
.dia-muted { fill: var(--muted); }
.dia-line  { stroke: var(--line); }
.dia-brick { fill: var(--brick); }
.dia-surf  { fill: var(--surface); }
.dia-tint  { fill: var(--brick-tint); }
/* (a teal helper lived here; retired when the palette was cut back to one UI accent
   plus the validated categorical trio, so the pages stopped feeling busy) */

/* ---- 20. FAQ / disclosure ----------------------------------------------- */

details.q {
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 0;
}
details.q summary {
  cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: 1.06rem; letter-spacing: -0.018em;
  color: var(--ink);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.4rem;
}
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after {
  content: "+"; font-family: var(--mono); font-size: 1.24rem; line-height: 1; color: var(--brick);
  flex: none; transition: transform .2s var(--ease);
}
details.q[open] summary::after { transform: rotate(45deg); }
details.q .a { padding-top: .85rem; color: var(--muted); font-size: .965rem; max-width: 70ch; }
details.q .a p:last-child { margin-bottom: 0; }

/* ---- 21. Contact -------------------------------------------------------- */

.contact-card {
  display: grid; gap: 1.5rem;
}
.contact-line { display: flex; gap: .95rem; align-items: flex-start; }
.contact-line .ico { width: 36px; height: 36px; margin: 0; border-radius: 9px; }
.contact-line .ico svg { width: 17px; height: 17px; }
.contact-line .k { font-size: .76rem; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .18rem; }
.contact-line .v { font-weight: 550; color: var(--ink); }
.contact-line .v a { text-decoration: none; }

/* ---- 22. Footer --------------------------------------------------------- */

.site-foot {
  /* The one dark element left on the page. Deep jasper rather than black, so
     it reads as the base of the stone the rest of the palette is cut from. */
  background: var(--jasper-ink); color: #D9C6C0;
  padding-block: clamp(52px, 6vw, 76px) 2rem;
  font-size: .925rem;
}
.site-foot a { color: #D9C6C0; text-decoration: none; }
.site-foot a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 48px);
}
@media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }
.foot-grid h4 {
  font-family: var(--mono); font-size: .69rem; letter-spacing: .15em; text-transform: uppercase;
  color: #FFFFFF; opacity: .62; font-weight: 500; margin-bottom: 1rem;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .58rem; }
.foot-blurb { color: #CDB7B1; max-width: 34ch; margin-top: 1.1rem; font-size: .92rem; }
.foot-bar {
  margin-top: clamp(36px, 5vw, 56px); padding-top: 1.6rem;
  border-top: 1px solid #7A382F;
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center;
  font-size: .845rem; color: #CDB7B1;
}
.foot-bar .sp { margin-left: auto; }
@media (max-width: 640px) { .foot-bar .sp { margin-left: 0; } }

/* ---- 23. Utilities ------------------------------------------------------ */

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.xs { font-size: .8rem; }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .6rem; } .mt-2 { margin-top: 1.2rem; }
.mt-3 { margin-top: 2rem; } .mt-4 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1.2rem; } .mb-3 { margin-bottom: 2rem; }
.maxw { max-width: 66ch; }
.nowrap { white-space: nowrap; }

.note {
  font-size: .845rem; color: var(--muted); line-height: 1.55;
  border-left: 2px solid var(--line); padding-left: 1rem;
}

/* ---- 23b. Hero with a visual ------------------------------------------- */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
/* On narrow screens the headline and what we do come first; the graphic follows.
   It used to be the other way round, which put decoration above the answer. */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}


/* Slow drift on the lattice nodes. Three offset phases so it never pulses in unison. */
@keyframes drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes glow  { 0%,100% { opacity: .30; } 50% { opacity: .85; } }
@keyframes dash  { to { stroke-dashoffset: -28; } }



/* The hero graphic scales rather than scrolls, so its captions grow in viewBox
   units to stay legible once the artwork is rendered small. */

/* ---- 23c. Figures, legends and chart furniture ------------------------- */

.viz {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 2.6vw, 32px);
  margin: 0;
}
.viz > svg { width: 100%; height: auto; display: block; }
.viz figcaption { font-size: .855rem; color: var(--muted); margin-top: 1.1rem; line-height: 1.5; max-width: 76ch; }
.band-night .viz { background: var(--night-2); border-color: var(--night-line); }

/* A 960-unit diagram scaled into a phone makes 12px labels illegible. Below the
   width where that happens, the figure scrolls sideways instead of shrinking.
   Block children (caption, legend, table) keep the container width and do not scroll. */
@media (max-width: 900px) {
  .viz { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .viz > svg { min-width: 700px; }
}

.viz-head { margin-bottom: 1.4rem; }
.viz-head h3 { margin-bottom: .3rem; font-size: 1.1rem; }
.viz-head p { font-size: .9rem; color: var(--muted); margin: 0; }

.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; margin-bottom: 1.1rem; }
.legend-item { display: inline-flex; align-items: center; gap: .48rem; font-size: .845rem; color: var(--ink-2); }
.legend-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.band-night .legend-item { color: var(--on-night-m); }

/* Theme-following fills for SVG figures */
.f-ink    { fill: var(--ink); }
.f-muted  { fill: var(--muted); }
.f-surf   { fill: var(--surface); }
.f-line   { fill: var(--line); }
.f-c1     { fill: var(--cat-1); }
.f-c2     { fill: var(--cat-2); }
.f-c3     { fill: var(--cat-3); }
.f-c1s    { fill: var(--cat-1-soft); }
.f-c2s    { fill: var(--cat-2-soft); }
.f-c3s    { fill: var(--cat-3-soft); }
.s-line   { stroke: var(--line); }
.s-muted  { stroke: var(--muted); }
.s-c1     { stroke: var(--cat-1); }
.s-brick  { stroke: var(--brick); }
.t-lab    { font: 500 12.5px var(--body); fill: var(--ink); }
.t-sub    { font: 400 11.5px var(--body); fill: var(--muted); }
.t-mono   { font: 500 10.5px var(--mono); fill: var(--muted); letter-spacing: .06em; }
.t-head   { font: 600 14px var(--display); fill: var(--ink); }

/* ---- 23d. Horizontal timeline ------------------------------------------ */

.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr);
  gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: .5rem;
  scroll-snap-type: x proximity;
}
.rail > li { list-style: none; position: relative; padding: 0 1.3rem 0 0; scroll-snap-align: start; }
.rail > li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px;
  background: var(--line);
}
.rail > li:first-child::before { left: 7px; }
.rail > li:last-child::before { right: auto; width: 7px; }
.rail .dot {
  position: relative; z-index: 1; width: 15px; height: 15px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--brick); display: block; margin-bottom: 1.15rem;
}
.rail .yr { font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; color: var(--brick); display: block; margin-bottom: .4rem; }
.rail h4 { font-size: .98rem; margin-bottom: .35rem; }
.rail p { font-size: .87rem; color: var(--muted); margin: 0; padding-right: .6rem; }
.band-night .rail > li::before { background: var(--night-line); }
.band-night .rail .dot { background: var(--night-2); }

/* ---- 23e. Practice / capability tiles ---------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tile { background: var(--surface); padding: clamp(20px, 2.4vw, 28px); }
.tile .n { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; color: var(--brick); display: block; margin-bottom: .9rem; }
.tile h3 { font-size: 1.04rem; margin-bottom: .45rem; }
.tile p { font-size: .9rem; color: var(--muted); margin: 0; }
.tile ul { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .3rem; }
.tile ul li { font-size: .845rem; color: var(--muted); padding-left: .85rem; position: relative; }
.tile ul li::before { content: ""; position: absolute; left: 0; top: .56em; width: 4px; height: 4px; border-radius: 50%; background: var(--brick); opacity: .7; }
.band-night .tiles { background: var(--night-line); border-color: var(--night-line); }
.band-night .tile { background: var(--night-2); }
.band-night .tile p, .band-night .tile ul li { color: var(--on-night-m); }

/* ---- 23e2. People ------------------------------------------------------ */

/* Two columns from tablet up: these people have real biographies and a 270px
   column turns them into a wall of text. */
/* Two columns from tablet up. Cards stretch to a common height per row, which only
   looks right because the copy is budgeted to roughly equal length and every card
   carries the same four parts: header, two paragraphs, three facts, tags. */
.people { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2.4vw, 28px); align-items: stretch; }
/* grid-auto-rows: 1fr makes every row as tall as the tallest, so all four cards
   are the same size rather than only matching their row neighbour. */
@media (min-width: 860px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; } }

.person {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(22px, 2.8vw, 32px);
  display: flex; flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.person:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--brick) 32%, var(--line)); }

.person-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.person-head .av { margin-bottom: 0; }
.person-head .nm, .person-head .rl { margin: 0; }

/* Monogram in place of a photograph: nobody's likeness is published without asking. */
.av {
  width: 54px; height: 54px; border-radius: 15px; flex: none;
  display: grid; place-items: center; margin-bottom: 1.15rem;
  font-family: var(--display); font-weight: 600; font-size: 1.08rem; letter-spacing: .01em;
  border: 1px solid transparent;
}
/* Avatar colour is not decoration: it matches the person's box in the structure
   diagram on this page — brick for leadership, blue for the programme layer,
   gold for the two domain-expertise roles. */
.av-1 { background: var(--cat-1-soft); color: var(--cat-1); border-color: color-mix(in srgb, var(--cat-1) 22%, transparent); }
.av-2 { background: var(--cat-2-soft); color: var(--cat-2); border-color: color-mix(in srgb, var(--cat-2) 22%, transparent); }
.av-3 { background: var(--cat-3-soft); color: var(--cat-3); border-color: color-mix(in srgb, var(--cat-3) 24%, transparent); }
.av-4 { background: var(--cat-3-soft); color: var(--cat-3); border-color: color-mix(in srgb, var(--cat-3) 24%, transparent); }

.person .nm { font-family: var(--display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.02em; margin: 0 0 .25rem; color: var(--ink); }
.person .rl { font-family: var(--mono); font-size: .705rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brick); margin: 0 0 .9rem; line-height: 1.35; }
.person p { font-size: .925rem; color: var(--muted); margin: 0 0 .85rem; }
.person p strong { color: var(--ink); font-weight: 600; }
/* Three uniform fact rows per card — the device that makes very different
   biographies occupy the same space and scan at the same speed. */
.facts { margin: .35rem 0 1.25rem; display: grid; gap: .62rem; border-top: 1px solid var(--line-soft); padding-top: 1.1rem; }
.facts > div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: .85rem; align-items: start; }
.facts dt { font-family: var(--mono); font-size: .655rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brick); padding-top: .25em; }
.facts dd { margin: 0; font-size: .855rem; color: var(--muted); line-height: 1.52; }
.facts dd em { font-style: italic; }
@media (max-width: 420px) {
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
}
.band-night .facts { border-top-color: var(--night-line); }
.band-night .facts dd { color: var(--on-night-m); }

.person .tags { margin-top: auto; padding-top: .3rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.person .tags span { font-family: var(--mono); font-size: .69rem; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 100px; padding: .26rem .6rem; }
.band-night .person .tags span { border-color: var(--night-line); }

.band-night .person { background: var(--night-2); border-color: var(--night-line); }
.band-night .person .nm { color: var(--on-night); }
.band-night .person p { color: var(--on-night-m); }

/* ---- 23f. Footprint strip ---------------------------------------------- */

.footprint { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: clamp(14px, 2vw, 24px); }
.fp { border-top: 2px solid var(--brick); padding-top: .9rem; }
.fp .cc { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; color: var(--brick); }
.fp .pl { font-family: var(--display); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.015em; margin: .3rem 0 .25rem; color: var(--ink); }
.fp .wt { font-size: .83rem; color: var(--muted); line-height: 1.45; }
.band-night .fp .pl { color: var(--on-night); }
.band-night .fp .wt { color: var(--on-night-m); }

/* ---- 24. Reveal on scroll ----------------------------------------------- */

/* Progressive enhancement, and in that order. Content is visible by default; the
   reveal is only armed once a small inline script in <head> has confirmed the
   browser can run it AND app.js has reported ready. If either fails, nothing is
   ever hidden. Seven homepage cards used to vanish when scripting was off. */
.rv { opacity: 1; transform: none; }
.js-reveal .rv { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js-reveal .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-reveal .rv { opacity: 1; transform: none; transition: none; } }

/* ---- 25. Print ---------------------------------------------------------- */

@media print {
  .site-head, .site-foot, .burger, .btn-row { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  section { padding-block: 1.2rem; }
  a { color: #000; }

  /* Print everything, whether or not the reader scrolled past it first. */
  .js-reveal .rv, .rv { opacity: 1 !important; transform: none !important; }
  details.q > .a { display: block !important; }
  details.q > summary::after { content: none; }

  /* Keep small blocks together; never try to hold a whole section on one page. */
  .card, .person, .tile, .fp, .steps > li, .row { page-break-inside: avoid; }
  h1, h2, h3, h4 { page-break-after: avoid; }
  .viz { overflow: visible; }
  .viz > svg { min-width: 0; max-width: 100%; }
  .tbl-wrap { overflow: visible; }
  table.data { min-width: 0; }
}


/* ---- Hero mark ----------------------------------------------------------
   Replaces a SOURCES/FEATURES/MODEL/RELEASE pipeline diagram that was drawn
   for one of four areas of work, mixed a data pipeline with a delivery step,
   and named a feature-engineering stage the current retrieval work does not
   have. No single honest architecture covers applied AI, enterprise software,
   systems integration and instrumentation at once, so the hero carries the
   identity mark instead of a technical claim that invites correction. */
/* The hero is a single text column. It previously held a pipeline diagram
   that misrepresented the company, then briefly a large logo mark, which was
   more assertive than the diagram it replaced. A headline, one paragraph and
   the proof points below carry the page; nothing decorative is needed. */
.hero-single { max-width: 62ch; }


/* ---- 24. Stone -----------------------------------------------------------
   The red-jasper identity, used as material rather than as illustration: a
   band of cut stone separating the hero from the page, and a thin seam of the
   same stone as a section rule. Both are crops of one studio image, so they
   read as the same block of jasper cut at different depths.

   Rules: the stone is never behind text, never a background for content, and
   never more than twice on a page. It marks an edge; it does not decorate. */

.stone-band {
  height: clamp(86px, 13vw, 168px);
  background: url('/img/stone-band.jpg') center/cover no-repeat, var(--brick-deep);
  border-block: 1px solid color-mix(in srgb, var(--jasper-ink) 55%, transparent);
}
/* A seam, not a band: the same stone at 1/8 the height, for section breaks. */
.stone-rule {
  height: 10px;
  background: url('/img/stone-rule.jpg') center/cover no-repeat, var(--brick-deep);
}
.stone-rule.thick { height: 18px; }

/* The band is a full-bleed element: it must escape the .wrap gutter. */
.bleed-out { margin-inline: calc(50% - 50vw); width: 100vw; }

@media (prefers-reduced-motion: no-preference) {
  .stone-band { background-attachment: scroll; }
}