/* ═══════════════════════════════════════════════════════════════════
   style.css — layout, the eleven blocks, components.

   Layer 3 of 3:  brand.css  →  theme.css  →  style.css

   No literal colour values below this line. Every colour is a token
   from theme.css. If a colour is needed that no token provides, the
   token is missing — add it to theme.css rather than inlining a hex.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Reset and base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  /* Anchor targets clear the sticky header instead of landing under it. */
  scroll-padding-top: 80px;
}

/* Form controls do not inherit type from their ancestors. Without
   this the nav toggles and the hamburger render in the UA's Arial. */
button, input, select, textarea { font: inherit; color: inherit; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;      /* belt and braces; nothing should overflow */
}

h1, h2, h3, h4 { letter-spacing: var(--ls-head); text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 500; line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); font-weight: 500; line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-h3); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

ul, ol { list-style: none; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }

strong { font-weight: 600; }

/* Visible focus everywhere. This is the only interactive site there
   is, so the focus ring is not negotiable. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--pad); top: -60px; z-index: 40;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-btn);
  padding: 10px 16px; font-weight: 500;
  transition: top var(--t);
}
.skip:focus { top: 12px; text-decoration: none; }

/* ─── Layout primitives ──────────────────────────────────────────── */
/* The gutter sits outside the content width, so content maxes at
   exactly --w-content rather than at that minus the padding. */
.wrap {
  width: 100%;
  max-width: calc(var(--w-content) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}
.prose { max-width: var(--w-prose); }
.prose p { max-width: var(--measure); }

/* Heading to its body: 12px. Without this a prose section's first
   paragraph butts straight against the H2, since only `p + p` carries
   a margin. */
.prose h1 + p, .prose h2 + p, .prose h2 + ul,
.prose h3 + p, .type-sec h2 + p { margin-top: var(--sp-head); }

section { padding-block: var(--sp-section); }

/* Alternating section surface. Light teal tint doing the work a grey
   canvas used to do. */
.tint {
  background: var(--tint-1);
  border-block: 1px solid var(--border);
}
.ruled { border-top: 1px solid var(--border); }

/* Section header pattern: mono eyebrow, H2, one optional intro line.
   Nothing else above a section's content. */
.sec-head { margin-bottom: var(--sp-block); }
.sec-head p {
  margin-top: 10px;
  color: var(--text-soft);
  max-width: var(--measure);
}

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  color: var(--warm-ink);          /* deep value only — AA on paper */
  margin-bottom: var(--sp-head);
}

.lede {
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--text-soft);
}

.cap {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-faint);
  letter-spacing: .03em;
  margin-top: 10px;
}
/* A caption set off from what precedes it rather than tucked under it. */
.cap-loose { margin-top: var(--sp-block); }

/* The highlight rule beneath one or two headline words. Once per
   page at most — terracotta is identity, not decoration.

   One gradient does both the tint and the rule. An inset box-shadow
   cannot: on an inline box a positive Y offset paints the line along
   the top edge, above the words rather than under them. The stops are
   percentages of the inline box, which sits a little taller than the
   text, so the rule lands just below the baseline. */
.mark-hl {
  /* Never let the highlighted words split across lines: each fragment
     would draw its own tint and its own rule, so the underline appears
     twice at different lengths. Two short words always fit, even in a
     280px column at 320px. */
  white-space: nowrap;
  background-image: linear-gradient(
    transparent 56%,
    var(--warm-tint) 56%, var(--warm-tint) 84%,
    var(--warm) 84%, var(--warm) 88%,
    transparent 88%);
  padding-inline: 2px;
}

/* ─── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding-inline: 20px;
  border: 1px solid transparent; border-radius: var(--r-btn);
  font-size: 16px; font-weight: 500; cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.btn:hover { text-decoration: none; }

.btn-primary   { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--surface); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--text-faint); color: var(--text); }
.btn-onink     { background: var(--surface); color: var(--text); border-color: var(--surface); }
.btn-onink:hover { background: var(--band-text); border-color: var(--band-text); color: var(--text); }

/* ═══════════════ HEADER AND NAVIGATION ═══════════════════════════ */
header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.bar {
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-block);
}

.lock { display: flex; align-items: center; flex-shrink: 0; }
.lock:hover { text-decoration: none; }
.lock svg { display: block; width: 180px; height: auto; }

.nav-list { display: flex; align-items: center; gap: 26px; }
.nav-item { position: relative; }

.nav-link {
  display: inline-block;
  color: var(--text); font-size: 15px; padding-block: 4px;
  position: relative;
}
.nav-link:hover { color: var(--accent); text-decoration: none; }

/* Current section marker — the one teal accent allowed in the header.
   Driven by data-section on <body>, not by an attribute inside the nav:
   the drift check requires the nav region to be byte-identical on every
   page, so the page cannot mark its own link. nav.js adds aria-current
   at runtime for screen readers; the visible marker below needs no
   script. */
body[data-section="solutions"]  .nav-link[data-nav="solutions"],
body[data-section="industries"] .nav-link[data-nav="industries"],
body[data-section="about"]      .nav-link[data-nav="about"],
body[data-section="contact"]    .nav-link[data-nav="contact"] { color: var(--accent); }

body[data-section="solutions"]  .nav-link[data-nav="solutions"]::after,
body[data-section="industries"] .nav-link[data-nav="industries"]::after,
body[data-section="about"]      .nav-link[data-nav="about"]::after,
body[data-section="contact"]    .nav-link[data-nav="contact"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--accent);
}

/* The caret is a separate control from the link. A single element
   cannot be both a link and a disclosure without one of the two
   behaviours becoming unreachable by keyboard. */
.nav-toggle {
  background: none; border: 0; cursor: pointer;
  color: var(--text-faint); padding: 6px 2px;
  display: inline-flex; align-items: center;
  transition: color var(--t);
}
.nav-toggle:hover { color: var(--accent); }
.nav-toggle svg { transition: transform var(--t); }
.nav-item[data-open] .nav-toggle svg { transform: rotate(180deg); }

.sub {
  position: absolute; top: 100%; left: -14px; z-index: 21;
  min-width: 264px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 8px;
  box-shadow: 0 1px 2px var(--shadow), 0 8px 24px var(--shadow);
  display: none;
}
/* No dead gap between parent and submenu — a diagonal mouse path
   from parent to child must not dismiss it. */
.sub::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.sub a {
  display: block; padding: 9px 12px; border-radius: 6px;
  color: var(--text); font-size: 15px;
}
.sub a:hover { background: var(--tint-1); color: var(--accent); text-decoration: none; }

/* Open state set by nav.js — and, as the scriptless safety net, focus.
   If nav.js fails to load the navigation still works by keyboard and
   nothing becomes unreachable.

   Focus on the parent link reveals the submenu; focus on the toggle
   deliberately does not. That keeps the toggle a pure disclosure
   whose aria-expanded stays authoritative, and it is what makes a
   tap on the caret open the menu rather than open-then-close it on a
   touch device at desktop width. nav.js keeps aria-expanded in step
   with the focus-driven state. */
.nav-item[data-open] > .sub,
.nav-item:has(> .nav-link:focus) > .sub,
.nav-item:has(> .sub :focus) > .sub { display: block; }

.burger { display: none; }

/* ═══════════════ BLOCK 1 · HERO ══════════════════════════════════ */
/* padding-block, never the shorthand: .hero shares its element with
   .wrap, and `padding: 56px 0 60px` would reset the horizontal gutter
   to zero. Above 1200px the max-width auto-margin hides that; every
   width below it puts the headline flush against the window edge. */
.hero { padding-block: 56px 60px; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 44px; align-items: center;
}
.hero h1 { margin-bottom: 18px; }
.hero .lede { margin-bottom: 26px; max-width: 33em; }
/* The experience line under a hero lede. No top margin of its own:
   the lede's bottom margin already spaces it, and margins do not
   collapse inside the flex column the hero becomes on mobile. */
.hero .claim { max-width: 40em; color: var(--text); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

.dia { width: 100%; height: auto; display: block; }
.dia-mobile { display: none; }

/* ═══════════════ BLOCK 2 · TYPE SECTION ══════════════════════════ */
.type-sec p + p { margin-top: 14px; }
.type-sec p { color: var(--text-soft); }
.type-sec p.first { color: var(--text); }

/* ═══════════════ BLOCK 3 · SUBSTANCE LIST ════════════════════════ */
/* An icon per item, from the site set. It gives the eye an anchor and
   makes a dense list scannable. Never the same icon twice in a list. */
.slist { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 32px; }
.slist li {
  display: flex; gap: 13px; align-items: flex-start;
  padding-block: 15px; border-bottom: 1px solid var(--border);
}
/* Only the final row loses its rule. With an odd item count the
   second-to-last sits in the row above, so it keeps one — dropping it
   leaves the row visibly lopsided. */
.slist li:last-child,
.slist li:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.slist .ic { flex: 0 0 22px; margin-top: 2px; color: var(--text); }
.slist span { font-size: 16px; line-height: 1.5; }

/* ═══════════════ BLOCK 4 · CARD GRID ═════════════════════════════ */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Two-up variant. This must be a class, never an inline style: an
   inline grid-template-columns outranks every stylesheet rule,
   including the media query that collapses the grid on a phone, and
   the page then scrolls sideways at 320px. */
.cards-2 { grid-template-columns: 1fr 1fr; }

.card {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card);
  padding: var(--sp-card);
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
/* No shadow at rest. Elevation appears in response to a person. */
.card:hover {
  border-color: var(--tint-3); transform: translateY(-2px);
  box-shadow: 0 1px 2px var(--shadow), 0 6px 18px var(--shadow);
}
.card h3 { font-size: 19px; }
.card p { font-size: 15.5px; color: var(--text-soft); line-height: 1.5; flex: 1; }
.card .more {
  font-family: var(--mono); font-size: var(--fs-mono);
  color: var(--accent); letter-spacing: .03em;
}
.card .ic-wrap {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--tint-1); color: var(--accent-hover);
  display: flex; align-items: center; justify-content: center;
}

/* Whole card is the target — 44px minimum is easy when it is the card. */
.card-link { position: relative; }
.card-link .stretch::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-card);
}
.card-link:hover h3 { color: var(--accent); }

/* Industry cards: photo on top, tighter body, four across. */
.ind { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ind .card { padding: 0; gap: 0; overflow: hidden; }
.ind .ph {
  aspect-ratio: 16 / 10; border-bottom: 1px solid var(--border);
  background: var(--tint-2);
}
.ind .ph img { width: 100%; height: 100%; object-fit: cover; }
.ind .body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ind h3 { font-size: 16.5px; }
.ind p { font-size: 14.5px; color: var(--text-soft); flex: 1; }
.ind .more { font-family: var(--mono); font-size: 12.5px; color: var(--accent); }

/* Two-up variant for the industries overview, where each card carries a
   full sentence or two rather than the home page's one line. */
.ind-2 { grid-template-columns: 1fr 1fr; gap: 20px; }
.ind-2 .ph { aspect-ratio: 16 / 9; }
.ind-2 .body { padding: 20px; }
.ind-2 h3 { font-size: var(--fs-h3); }
.ind-2 p { font-size: 15.5px; }
@media (max-width: 800px) { .ind-2 { grid-template-columns: 1fr; } }

.note { margin-top: var(--sp-card); font-size: 15.5px; color: var(--text-soft); }

/* Short inline list — the second list variant. Mono markers, no icons.
   Used where a list is three or four outcomes rather than a substance
   list of five or six specifics. Never mixed with .slist in one
   section: two marker systems in one place reads as an accident. */
.ilist li {
  position: relative; padding-left: 26px; margin-bottom: 12px;
  max-width: var(--measure);
}
.ilist li::before {
  content: "—"; position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: var(--fs-mono);
  color: var(--text-faint);
}
.ilist li:last-child { margin-bottom: 0; }

/* Large solution mark, for a solution page's hero.
   A white plate with a hairline, not the tint the card icons use:
   --tint-1 is #eff7f5 and the page canvas is #f1f7f6, so a tint plate
   sitting directly on the canvas is invisible. Card plates work only
   because a card is white underneath them. */
.mark-plate {
  width: 64px; height: 64px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--accent-hover);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-card);
}

/* ═══════════════ BLOCK 5 · DIAGRAM SECTION ═══════════════════════ */
/* The text equivalent must stand alone if the diagram fails to load. */
.dia-sec { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.dia-sec .dia-text p + p { margin-top: 14px; }
.dia-sec .dia-text p { color: var(--text-soft); }

/* ═══════════════ BLOCK 6 · NARRATED CASE ═════════════════════════ */
.case {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 28px 30px;
}
.case .label {
  display: block; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 14px;
}
.case h3 { margin-bottom: var(--sp-head); }
.case p + p { margin-top: 14px; }
.case p { color: var(--text-soft); max-width: var(--measure); }

/* ═══════════════ BLOCK 7 · TABLE ═════════════════════════════════ */
.tbl-wrap {
  margin-top: 26px;
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--surface); overflow: hidden;
}
table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
th, td {
  text-align: left; padding: 13px 16px;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
tr:last-child td { border-bottom: none; }
th {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint);
}
/* Row labels are <th scope="row"> for screen readers, but they are
   content and not column headers — so they drop the mono-caps
   treatment the header row carries. */
th[scope="row"] {
  font-family: var(--sans); font-size: 15.5px; font-weight: 400;
  text-transform: none; letter-spacing: normal; color: var(--text-soft);
}
/* The "after" column is an outcome, which is terracotta's job. */
th.after { color: var(--warm-ink); background: var(--warm-tint); }
td.after { background: var(--warm-tint); color: var(--text); }

/* ═══════════════ BLOCK 8 · STATEMENT BAND ════════════════════════ */
.band { background: var(--band); color: var(--band-text); padding-block: var(--sp-section); }
.band h2 { font-size: var(--fs-band-h2); max-width: 24em; margin-bottom: var(--sp-card); }
.band .rule {
  width: 52px; height: 3px; border-radius: 2px;
  background: var(--band-rule); margin-bottom: var(--sp-block);
}
.band p { color: var(--band-soft); max-width: 60ch; }

/* ═══════════════ BLOCK 9 · MEDIA SPLIT ═══════════════════════════ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.photo {
  aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--tint-2);
}
.photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9);   /* sit inside the palette, not on top of it */
}
.split p + p { margin-top: 14px; }
.split p { color: var(--text-soft); font-size: 16.5px; }
.split p.first { color: var(--text); }

/* ═══════════════ BLOCK 10 · STEP SEQUENCE ════════════════════════ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { border-top: 2px solid var(--border); padding-top: 16px; }
.step .num {
  display: block; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: var(--ls-mono); color: var(--text-faint); margin-bottom: 10px;
}
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { font-size: 15.5px; color: var(--text-soft); }
/* The point at which software first exists. */
.step.is-key { border-top-color: var(--accent); }

/* ─── Team cards ─────────────────────────────────────────────────
   4:5 portraits, cropped to the same head size and eye line so the
   pair reads as deliberate rather than assembled. The slight
   desaturation matches the treatment the other photographs get, so
   faces sit inside the palette instead of on top of it. */
/* Capped, because two cards across a 1200px grid render a 4:5
   portrait nearly 600px wide — a head-and-shoulders photograph at
   that size reads as a billboard, not a team page. */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 720px; }
.portrait {
  aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card);
  display: flex; align-items: center; justify-content: center;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); }
.member h3 { margin-top: 16px; }
.member .role {
  font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono); color: var(--text-faint); margin-top: 6px;
}

/* ─── Contact ────────────────────────────────────────────────────
   The address is the page's one action, so it is set at display size
   rather than buried in a paragraph. */
.contact-card {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 32px 30px;
}
.mail {
  display: inline-block;
  font-size: clamp(24px, 4vw, 34px); font-weight: 500;
  letter-spacing: var(--ls-head); line-height: 1.2;
  word-break: break-word;
}
.postal {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--text-soft); font-size: 15.5px; font-style: normal;
}
.postal .label {
  display: block; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 8px;
}

/* ─── Legal pages ────────────────────────────────────────────────
   Plain and unstyled on purpose: no hero, no photo, no CTA band. */
/* Every h2 keeps its top margin. The old `:first-of-type { margin-top: 0 }`
   assumed the first h2 sat directly under the h1; on both legal pages it
   actually follows a paragraph, so it zeroed a gap that was needed. */
.legal h2 {
  font-size: var(--fs-h3); margin-top: 32px;
  /* Insurance against a long legal term overflowing the 280px column at
     320px, which "Umsatzsteueridentifikationsnummer" did when this page
     was German — 302px of unbreakable word. The labels are English now,
     but German names still appear inline and legal vocabulary runs long
     in any language. Hyphenation follows the element's lang. */
  -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
}
.legal p, .legal address { margin-top: var(--sp-head); color: var(--text-soft); font-style: normal; }
/* legal-sub, not .sub: .sub is the nav submenu, and it carries
   display:none. Reusing the name here hid the subtitle on both legal
   pages completely — the rule below never set display, so the nav's
   won. A generic class name colliding across two unrelated components
   is exactly how that happens. */
.legal .legal-sub {
  font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono); color: var(--text-faint);
  margin-top: 8px;
}
.legal ul { margin-top: var(--sp-head); }
.legal .ilist li { color: var(--text-soft); }

/* ─── 404 ────────────────────────────────────────────────────────── */
.notfound { padding-block: 96px; text-align: center; }
.notfound .motif { margin: 0 auto 24px; display: block; }
.notfound p { color: var(--text-soft); margin-top: var(--sp-head); }
.notfound .actions { justify-content: center; margin-top: 28px; }

/* Inline links in body copy carry an underline, not colour alone —
   a link inside a paragraph has to be distinguishable without it. They
   also take the deeper teal: #2e7d74 measures 4.49:1 on the tinted
   section surfaces, which is under the line for normal text. */
main :is(p, .ilist li) a:not(.btn) {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
main :is(p, .ilist li) a:not(.btn):hover { text-decoration-thickness: 2px; }

/* ═══════════════ BLOCK 11 · CTA BAND ═════════════════════════════ */
/* One band per page, and never two competing buttons in it. */
.cta {
  background: var(--warm-tint);
  border-block: 1px solid var(--border);
  padding-block: 56px; text-align: center;
}
.cta h2 { margin-bottom: var(--sp-head); }
.cta p { color: var(--text-soft); margin-bottom: 22px; }
.cta .motif { margin: 0 auto 20px; display: block; }

/* ═══════════════ FOOTER ══════════════════════════════════════════ */
footer { background: var(--band); color: var(--band-text); padding: 48px 0 28px; }
.fgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
footer .lock svg { width: 168px; }
footer h2 {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--band-faint); margin-bottom: var(--sp-head);
}
footer li { margin-bottom: 8px; }
footer a { color: var(--band-link); font-size: 15px; }
footer a:hover { color: var(--surface); }
.ftag { color: var(--band-soft); font-size: 15px; max-width: 30em; margin-top: var(--sp-head); }
/* The one outbound link on the site. Plain text, not a LinkedIn glyph:
   the footer carries no icons, and reproducing another company's mark
   is a different job from drawing our own set. */
.fsocial {
  display: inline-block; margin-top: 18px;
  color: var(--band-link); font-size: 15px;
  border-bottom: 1px solid var(--band-line); padding-bottom: 2px;
}
.fsocial:hover { color: var(--surface); border-bottom-color: var(--band-soft); text-decoration: none; }
.fbot {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--band-line);
  font-family: var(--mono); font-size: 12px; color: var(--band-faint);
  letter-spacing: .03em;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE

   Not a narrowed desktop, and not the lesser version. Four things get
   a genuinely different design rather than a smaller one: the
   navigation, the diagrams, the tables, and the footer.

   Nothing is hidden. Content reflows, relabels or gets redrawn.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root {
    --fs-h1: 32px; --fs-h2: 24px; --fs-h3: 19px;
    --fs-lede: 19px; --fs-body: 16px; --fs-small: 14px; --fs-mono: 12px;
    --fs-band-h2: 26px;
    --sp-section: 48px;
  }
  body { font-size: var(--fs-body); }
  .bar { height: 56px; }

  /* ─── Type floors ────────────────────────────────────────────────
     Body copy never below 16px: iOS zooms the page on focus below
     that, and it simply reads as cramped. The desktop sizes are tuned
     for a 1200px grid where a card is a third of the width; at one
     column on a phone there is room to set them properly.
     Mono labels stay at 12–13px — they are labels, not copy. */
  .card p, .ind p, .split p, .note, .ftag,
  td, .case p, .step p, .dia-text p { font-size: 16px; }
  .ind h3 { font-size: 18px; }
  /* p.cap, not .cap: the body-copy floor above includes `.split p`,
     which otherwise outranks it and pushes photo captions to 16px.
     A mono caption is a label, and labels stay at 13px. */
  p.cap { font-size: 13px; }

  .hero { padding-block: 36px 48px; }   /* padding-block — see the desktop rule */
  .hero-grid, .split, .dia-sec { grid-template-columns: 1fr; gap: 28px; }
  .cards, .cards-2, .steps, .team { grid-template-columns: 1fr; }
  .ind { grid-template-columns: 1fr 1fr; }
  /* One column, borders between every item. */
  .slist { grid-template-columns: 1fr; }
  .slist li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--border); }
  .slist li:last-child { border-bottom: none; }
  .slist .ic { flex-basis: 22px; }     /* icons do not shrink */

  /* The authored break stays on mobile. Hiding it lets the wrap fall
     mid-sentence — "…already know. Nobody" on one line — which reads
     worse than the break it replaces. Keeping it puts each sentence on
     its own line and lets each wrap naturally inside that. */
  /* Buttons stay above the diagram, so the call to action is
     reachable without scrolling past a tall graphic. */
  .hero-col { display: flex; flex-direction: column; }
  .actions { order: 2; }
  .hero-media { order: 3; }

  /* A diagram scaled to phone width is decoration pretending to be
     information. The mobile file is a different drawing. */
  .dia-desktop { display: none; }
  .dia-mobile { display: block; max-width: 340px; margin-inline: auto; }

  .photo { aspect-ratio: 16 / 10; }

  /* ─── Navigation: full-height panel ──────────────────────────── */

  /* The frosted header is a desktop nicety, and it has to come off
     here: any backdrop-filter other than `none` makes the element a
     containing block for its position:fixed descendants. With it on,
     the panel below resolves top/bottom against the 56px bar instead
     of the viewport and collapses to a 40px scrolling sliver — it
     opens, but there is nothing usable in it. */
  header { backdrop-filter: none; background: var(--bg); }

  .burger {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -10px;
    background: none; border: 0; border-radius: var(--r-btn);
    color: var(--text); cursor: pointer;
  }
  .burger:hover { background: var(--tint-1); }

  .nav {
    display: none;
    position: fixed; left: 0; right: 0; top: 56px; bottom: 0; z-index: 19;
    background: var(--bg); padding: 8px var(--pad) 32px; overflow-y: auto;
  }
  .nav[data-open] { display: block; }

  .nav-list { flex-direction: column; gap: 0; align-items: stretch; }
  .nav-item { border-bottom: 1px solid var(--border); }
  .nav-link { display: block; padding-block: 16px; font-size: 18px; font-weight: 500; }
  .nav-link[data-nav]::after { display: none; }   /* no underline in the panel */
  .nav-toggle { display: none; }       /* nothing to toggle — all flat */

  /* All eleven destinations flat and visible. No accordions to tap
     through; the hierarchy is readable without interaction. */
  .sub {
    display: block; position: static; min-width: 0;
    border: 0; border-radius: 0; padding: 0 0 14px;
    box-shadow: none; background: none;
  }
  .sub::before { display: none; }
  .sub a { padding: 7px 0; font-size: 15.5px; color: var(--text-soft); }
  .sub a:hover { background: none; }

  /* ─── Tables reflow into cards; they never scroll sideways ───── */
  .tbl-wrap { border: 0; border-radius: 0; background: none; overflow: visible; margin-top: 22px; }
  table, thead, tbody, tr, th, td { display: block; width: auto; }
  thead { display: none; }
  tbody tr {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); padding: 14px 16px; margin-bottom: 12px;
  }
  tbody tr:last-child { margin-bottom: 0; }
  td { border: 0; padding: 0; }
  /* The row label becomes the card's heading. */
  th[scope="row"] {
    display: block; font-weight: 600; color: var(--text); font-size: 16px;
    margin-bottom: 10px; white-space: normal;
  }
  /* The column header comes back as the cell's own label. */
  td[data-l] { position: relative; padding: 8px 10px; border-radius: 6px; margin-top: 6px; font-size: 16px; }
  td[data-l]::before {
    content: attr(data-l); display: block;
    font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-faint); margin-bottom: 3px;
  }
  td.before { background: var(--tint-1); }
  td.after::before { color: var(--warm-ink); }

  .case { padding: 22px 20px; }
}

@media (max-width: 560px) {
  .ind { grid-template-columns: 1fr; }
  .actions .btn { flex: 1 1 auto; min-width: 140px; }
  .fgrid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .fgrid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 400px) {
  :root { --fs-h1: 29px; }
  .fgrid { grid-template-columns: 1fr; }
}

/* Honour a reduced-motion preference by removing motion entirely,
   including opening and closing the nav. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}