/* styles.css - company-registration-austria.com
 *
 * The component layer. Contract: DESIGN.md sections 4, 5 and 6.
 * Values come from tokens.css; nothing here invents a colour, size or radius.
 *
 * Three things the harvest could NOT give us, derived from the system's own logic and
 * marked below, so nobody looks for them in drafts/design-harvest/:
 *   - tables      (zero on all four captured pages, and client rule R6 makes one mandatory per page)
 *   - accordions  (zero captured; the FAQ is a native <details>)
 *   - mobile nav  (the reference has no burger; this site has eight nav items, so we add one)
 */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  padding-top: var(--header-h);
}

/* ---------- Layout primitives ---------- */

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

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) / 2); }
.section--surface { background: var(--surface); }

/* The hairline is the structural element of this system. */
.rule { border: 0; border-top: var(--rule-weight) solid var(--rule); margin: 0; }
.rule--soft { border-top-color: var(--rule-soft); }

/* ---------- Type ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  margin: 0 0 var(--s-5);
  color: var(--ink-strong);
  /* This site prints German compound nouns at display size: Zweigniederlassung,
     Beitragsgrundlage, Grundaufzeichnungen, Wirtschaftstreuhandberufsgesetz. At 390px one of them
     is wider than the viewport and pushes the whole page sideways.
     `hyphens: auto` was tried first and rejected: the page is `lang="en"`, so the browser applied
     ENGLISH hyphenation to every heading and broke ordinary words, "you say yes" becoming
     "un-til you say yes". `overflow-wrap: break-word` fires only when a single word genuinely
     cannot fit, which is exactly the German-compound case and never the English one. */
  overflow-wrap: break-word;
}

h1 { font-size: var(--t-display); line-height: var(--t-display-lh); letter-spacing: var(--t-display-ls); }
h2 { font-size: var(--t-h2);      line-height: var(--t-h2-lh);      letter-spacing: var(--t-h2-ls); }
h3 { font-size: var(--t-h3);      line-height: var(--t-h3-lh);      letter-spacing: var(--t-h3-ls); }
h4 { font-size: var(--t-h4);      line-height: var(--t-h4-lh);      font-weight: 500; }

p { margin: 0 0 var(--s-5); }
p:last-child { margin-bottom: 0; }

.lede { font-size: var(--t-lede); line-height: var(--t-lede-lh); }
.small, figcaption { font-size: var(--t-small); line-height: var(--t-small-lh); color: var(--muted); }

/* The mono micro-label is this design's signature.
   NOTE: it must never carry a founding date or any claim about the firm (no-invention rule);
   ours carry subject and jurisdiction. See DESIGN.md section 2. */
.label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  letter-spacing: var(--t-label-ls);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  display: block;
  margin-bottom: var(--s-5);
}
.label--rule { display: flex; align-items: center; gap: var(--s-4); }
/* The kicker rule carries the mandatory secondary heritage colour, Habsburg gold. It is
   decorative at 2.95:1 and never carries meaning on its own. */
/* THE FLAG, NOT THE FURNITURE. This 44px dash was Habsburg gold and it was the ONLY piece of colour
   with any structural job on the page. Measured 2026-09-18: the accent carried 1.7% of the painted
   weight of a page against 7% on the reference, and never once as a background. The owner read that
   as washed out and was right. The dash is now flag red and 3px, and it opens every section. */
.label--rule::before { content: ""; width: 56px; height: 3px; background: var(--accent); flex: none; }

/* Used once per page at most, on the H1. Never in body copy. */
.accent-italic { font-style: italic; font-weight: 500; color: var(--accent); }

a { color: var(--ink-strong); text-decoration: none; }
/* A link inside a card or a step was rendering at #000 against #1a1a1a body text with no underline,
   which is a 1.1:1 difference: indistinguishable from ordinary words. Cards carry most of this
   site's internal linking, so this was the worst place for it. */
.card a, .step a, .section__lead a, .hero__body a, .faq__a a, figcaption a {
  color: var(--accent-ink); text-decoration: none; transition: color var(--t-fast);
}
.card a:hover, .step a:hover, .section__lead a:hover, .hero__body a:hover,
.faq__a a:hover, figcaption a:hover { text-decoration: underline; }
.hero__body .btn, .card .btn, .cta a.btn { color: var(--accent-contrast); }
.btn--secondary, .cta a.btn--on-dark { color: var(--ink-strong); }
.prose a, a.link { color: var(--accent-ink); text-decoration: none; transition: color var(--t-fast); }
.prose a:hover, a.link:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* 736px was ~62 characters at this size, which is a fine measure and a bad column: it sat at no
   particular fraction of the 1320px grid, so it read as an accident. 880px is ~74 characters, still
   inside the comfortable band, and it lands on the grid. */
.prose { max-width: var(--container-prose); }
/* Inside a section the text runs the full container, on the owner's instruction, repeated: every other
   block spans it and a narrower text column read as a defect. The reading-measure token stays for the
   legal shells and the FAQ answers, where the page is text alone. */
.section > .wrap > .prose, .section .prose { max-width: none; }
.prose > :last-child { margin-bottom: 0; }
strong { font-weight: 600; }
code { font-family: var(--font-mono); font-size: .9em; }

blockquote {
  margin: 0 0 var(--s-5); padding-left: var(--s-5);
  border-left: 2px solid var(--ink-strong); font-size: var(--t-small);
}

/* ---------- Buttons. Every measured variant has radius 0. ---------- */

.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: var(--t-label-ls); text-transform: uppercase;
  padding: 14px 18px; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
/* The reference's primary button carries its accent colour, measured: it is one of the three places
   the accent appears as a background. Ours was black. Red here puts the flag in the header of every
   page and on every CTA; white on #C4121F measures 6.08:1. Hover keeps the reference's own move
   on this control, the inversion to white with a black rule, set two lines below. */
.btn--primary { background: var(--accent-ink); color: var(--accent-contrast); border-color: var(--accent-ink); }
.btn--primary:hover { background: var(--bg); color: var(--ink-strong); }
.btn--secondary { background: transparent; color: var(--ink-strong); border-color: var(--ink-strong); }
.btn--secondary:hover { background: var(--ink-strong); color: var(--accent-contrast); }
.btn--accent    { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); padding: 16px 32px; }
.btn--accent:hover { filter: brightness(.9); }
.btn--on-dark   { background: var(--bg); color: var(--ink-strong); border-color: var(--bg); }
.btn--on-dark:hover { background: transparent; color: var(--accent-contrast); }
.btn__arrow { font-family: var(--font-text); }

/* ---------- Header ---------- */

.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h); background: var(--bg);
  border-bottom: var(--rule-weight) solid var(--rule-soft);
}
.header__inner { display: flex; align-items: center; gap: var(--s-6); height: 100%; }
/* Plain wordmark, no enclosing shape: the square enclosed mark belongs to another site in the batch. */
.wordmark { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; letter-spacing: -.01em; white-space: nowrap; color: var(--ink-strong); }
/* align-items: center, and it is the whole fix for the ragged menu. The links were being STRETCHED to
   the row height (28px) while the Services <summary> inside its <details> sat at its own content height
   (23px), three pixels lower. Measured: links top 21, summary top 24. The reference has every item at
   top 19-20, height 32-33. Centering gives each item its content box and the same midline. */
.nav { display: flex; align-items: center; gap: var(--s-5); margin-left: auto; }
/* nowrap, because at 1200px one link was breaking onto a second line (measured 46px tall beside 23px
   neighbours), which is the ragged menu back in a narrower window. A menu item is one line or it is in
   the drawer. */
.nav a, .nav__svc > summary { white-space: nowrap; }
.nav a { font-size: .875rem; color: var(--ink); transition: color var(--t-fast); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent-ink); }
.header .btn { margin-left: var(--s-5); }

.burger { display: none; margin-left: auto; background: none; border: 1px solid var(--ink-strong); padding: 10px 12px; cursor: pointer; }
.burger__bar { display: block; width: 18px; height: 1px; background: var(--ink-strong); }
.burger__bar + .burger__bar { margin-top: 5px; }

/* DERIVED, not harvested: the reference carries no burger. See DESIGN.md section 4. */
.navdrawer {
  position: fixed; inset: var(--header-h) 0 0; background: var(--bg); z-index: 49;
  padding: var(--s-7) var(--gutter); display: none; overflow-y: auto;
}
.navdrawer[data-open="true"] { display: block; }
.navdrawer a { display: block; font-family: var(--font-display); font-size: 1.75rem; font-weight: 300; padding: var(--s-4) 0; border-bottom: 1px solid var(--rule-soft); }

/* THE BURGER TAKES OVER AT 1279. It was 1199, and before that 1023. Measured 2026-09-18 after the Services item joined the row:
   at 1024 and 1100 the Contact button's right edge landed at 1103px, outside the viewport, and the
   header scrolled sideways. Eight items plus a 254px wordmark and a button need 1280 to sit comfortably;
   below that the drawer holds them, and the drawer now carries the full service list anyway. */
@media (max-width: 1279px) {
  .nav, .header .btn { display: none; }
  .burger { display: block; }
}

/* ---------- Hero. Typographic, no image behind: the photograph lives in a later section. ---------- */

/* Measured against the reference's own hero, which this build was not reproducing.
   Four things carry its character and all four were missing: the mono kicker on a rule, the sheer
   SIZE of the display line, the accent italic clause, and a lede set in the SERIF rather than the
   sans. Without them the page was merely tidy. */
.hero { padding-block: var(--s-9) var(--s-9); }
/* The hero photograph was pressed flat against the CTA button (measured gap: 0px) and rendered at
   1392 x 927, a wall. The reference has no photograph in its hero at all; client rule R6 puts one on
   every page, so ours is a band, not a wall: 21:9, capped at 480px, cover-fitted. Width and height
   attributes still reserve the box, aspect-ratio overrides the ratio they imply, so no layout shift. */
.hero > .wrap--wide { margin-top: var(--s-8); }
.hero figure { margin: 0; }
.hero figure img { aspect-ratio: 21 / 9; max-height: 480px; object-fit: cover; }
.hero .label { margin-bottom: var(--s-7); }
.hero h1 { max-width: 15ch; margin-bottom: var(--s-7); }
.hero h1 .accent-italic { display: inline-block; }

.hero__body { max-width: none; }
.hero__body > p { max-width: 56ch; }
/* The lede is Fraunces, not Inter Tight. The reference sets its opening paragraph in the display
   face at text size, and that is most of why its hero reads as editorial rather than as a product
   page. */
.hero__body > p:first-of-type {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-lede);
  line-height: 1.45;
  color: var(--ink-strong);
}
/* The hero's key facts were a thin list: grey index, small text, one hairline each. They are the
   three or four numbers a reader came for, so they now take the reference's strongest device, the
   indexed card row (DESIGN.md: "hairline, indexed card row"): a grid under one black rule, red mono
   index above each fact, the fact itself in the display face at h4 size. Same markup, styled as cards. */
/* Flex, not grid: pages carry three or four facts, and auto-fit grid tracks left an empty fifth
   column beside four cards at 1272px. Flex items stretch to fill the row whatever the count. */
.hero__body ul {
  list-style: none; padding: 0; margin: var(--s-8) 0 0; max-width: none;
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--rule);
}
.hero__body ul li {
  flex: 1 1 240px; min-width: 0;
  display: block; border-bottom: 1px solid var(--rule-soft); border-right: 1px solid var(--rule-soft);
  padding: var(--s-5) var(--s-5) var(--s-6) 0; margin-right: 0;
  font-family: var(--font-display); font-size: var(--t-h4); line-height: var(--t-h4-lh);
  font-weight: 400; color: var(--ink-strong);
}
.hero__body ul li:not(:first-child) { padding-left: var(--s-5); }
.hero__body ul li:last-child { border-right: 0; }
.hero__body ul li::before {
  content: counter(heroitem, decimal-leading-zero); counter-increment: heroitem;
  display: block; margin-bottom: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls);
  color: var(--accent-ink);
}
@media (max-width: 719px) {
  .hero__body ul li { border-right: 0; padding-left: 0 !important; }
}
.hero__body ul { counter-reset: heroitem; }
.hero__body .cta-p { margin-top: var(--s-7); }

/* The section head carries the same rule as the kicker, so a page reads as one system. */
.section > .wrap > h2 { max-width: 20ch; }
/* THE RULE IS WHAT ALIGNS THE PAGE, NOT THE TEXT.
   Measured 2026-09-18 against the reference: it carries 47 black 1px borders and 56 grey ones, and its
   sections all end on the same vertical line because a hairline spans the container under every heading.
   Ours had that rule only under sections that happen to contain a card grid or a table, so a prose
   section ended at the 736px measure and a card section at 1320px, and the right edge jumped by 584px
   from one section to the next. That is the "uneven" the owner saw. Every section heading now carries
   the same full-width rule, so the measure of the text no longer decides where the page ends. */
.section__lead { margin-bottom: var(--s-7); }

/* ---------- Cards. No fill, no border box: cards are separated by hairlines. ---------- */

.cards { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.card {
  padding: var(--s-6) var(--s-5) var(--s-7) var(--s-4); margin-left: calc(-1 * var(--s-4));
  border-bottom: 1px solid var(--rule-soft);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
.cards--2 .card:nth-child(odd), .cards--3 .card:not(:nth-child(3n)), .cards--4 .card:not(:nth-child(4n)) {
  border-right: 1px solid var(--rule-soft);
}
.cards--2 .card:nth-child(even), .cards--3 .card:nth-child(3n+2), .cards--3 .card:nth-child(3n),
.cards--4 .card:not(:nth-child(4n+1)) { padding-left: var(--s-5); }
/* Inside a two-to-four column grid a 100px numeral would crowd the card; the same face at h2 size keeps
   the proportion the reference's own mid-size numbers (p-num, m-num) have to its stage numbers. */
.card__index {
  font-family: var(--font-display); font-weight: 300; font-size: var(--t-h2); line-height: .9;
  letter-spacing: -.03em; color: var(--accent); display: block; margin-bottom: var(--s-4);
  font-variant-numeric: tabular-nums;
}
.card h3, .card h4 { margin-bottom: var(--s-3); font-size: var(--t-h4); font-weight: 500; }
.card > :last-child { margin-bottom: 0; }

/* ---------- Checklist. The indexed grid, applied to the things a reader has to gather. ---------- */
.checklist {
  list-style: none; margin: 0; padding: 0; counter-reset: chk;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7);
  border-top: 1px solid var(--rule);
}
.checklist li {
  counter-increment: chk; position: relative;
  padding: var(--s-5) var(--s-4) var(--s-5) calc(var(--s-4) + 3.25rem); margin-left: calc(-1 * var(--s-4));
  border-bottom: 1px solid var(--rule-soft); font-size: var(--t-body); line-height: var(--t-body-lh);
  transition: background .3s ease, box-shadow .3s ease;
}
.checklist li:hover { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
.checklist li::before {
  content: counter(chk, decimal-leading-zero); position: absolute; left: var(--s-4); top: var(--s-5);
  font-family: var(--font-display); font-weight: 300; font-size: var(--t-h3); line-height: 1;
  letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums;
}
@media (max-width: 719px) { .checklist { grid-template-columns: 1fr; } }

@media (max-width: 899px) {
  .cards--2, .cards--3, .cards--4 { grid-template-columns: 1fr; }
  .card { border-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
}

/* ---------- Steps ---------- */

.steps { border-top: 1px solid var(--rule); }
/* THE NUMBER IS THE REFERENCE'S NUMBER. Measured on its stage list: Fraunces 300 at 100.8px, line-height
   0.9, letter-spacing -0.04em, in the accent colour, in a 100px first column of a full-width row. Ours
   was a 10px mono label. The row also takes the state the owner pointed at on the reference: on hover, a
   surface tint and an accent bar down the left. The bar sits in a negative left margin so the text does
   not move; nothing shifts, only colour arrives. */
.step {
  display: grid; grid-template-columns: 120px 1fr; gap: var(--s-5); padding: var(--s-6) var(--s-4);
  margin-inline: calc(-1 * var(--s-4)); border-bottom: 1px solid var(--rule-soft);
  transition: background .3s ease, box-shadow .3s ease;
}
.step:hover { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
.step__n {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(3.25rem, 6.5vw, 6rem);
  line-height: .9; letter-spacing: -.04em; color: var(--accent); margin-top: -.06em;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--t-h3); font-weight: 400; margin-bottom: var(--s-3); }
.step > div > :last-child { margin-bottom: 0; }
@media (max-width: 599px) { .step { grid-template-columns: 1fr; gap: var(--s-3); } .step__n { font-size: 3rem; } }

/* ---------- Table. DERIVED: the harvest found zero tables on the reference.
   Client rule R6 makes at least one mandatory on every page. ---------- */

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: var(--s-6); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
thead th {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls);
  text-transform: uppercase; font-weight: 500; color: var(--ink-strong); text-align: left;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: var(--s-3) var(--s-4) var(--s-3) 0; vertical-align: bottom;
}
tbody td { border-bottom: 1px solid var(--rule-soft); padding: var(--s-4) var(--s-4) var(--s-4) 0; vertical-align: top; overflow-wrap: break-word; }
tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
table th:last-child, table td:last-child { padding-right: 0; }
/* A column whose longest cell is short, marked by the build: as wide as that cell and no wider. */
.col--tight { white-space: nowrap; width: 1%; }

/* THE BLOCKS WERE GLUED AND THE SECTIONS WERE FAR APART, and both were true at once. Measured on
   /flexco-austria/: 22 of 25 gaps between consecutive blocks inside a section were under 32px, four of
   them under 8px (a caption pressed to its prose, a figure pressed to the paragraph above it), while
   the sections themselves sat 240px apart. The reference's equivalent gaps cluster at 64px and above.
   One flow rule fixes the inside: every block that follows another block inside a section gets a real
   gap, and the heavy blocks, figures, infographics and tables, get a larger one on both sides. A
   caption is the one exception and stays close to what it captions. */
.section > .wrap > * + * { margin-top: var(--s-6); }
.section > .wrap > .small { margin-top: var(--s-3); }
.section > .wrap > figure, .section > .wrap > .tablewrap { margin-top: var(--s-8); }
.section > .wrap > figure + *, .section > .wrap > .tablewrap + * { margin-top: var(--s-8); }
.section > .wrap > figure + .small, .section > .wrap > .tablewrap + .small { margin-top: var(--s-3); }
.prose > figure, .prose > .tablewrap { margin-block: var(--s-7); }
.prose > figure + figure, figure + figure { margin-top: var(--s-8); }
figure { margin: 0 0 var(--s-6); }
figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--surface); }
/* Body photographs were rendering at 1272 x 849. A photograph on a statutory page is a pause, not the
   point, so it takes the reading measure and a 3:2 crop capped at 440px. Infographics are exempt: they
   are markup, and their height is their content. */
.section figure:not(.infographic) img { aspect-ratio: 21 / 9; max-height: 440px; object-fit: cover; }
figcaption { margin-top: var(--s-3); }

/* ---------- CTA band. The only inverse surface on the site. ---------- */

/* THE CTA BAND IS THE FLAG. It is the only full-bleed surface on the site and it appears on every
   content page, so it is the one place where Austrian red can carry real area without the page turning
   into a flag, which `references/design-archetypes.md` §3 forbids. It was black; black is not Austria's
   colour and it left the site reading as grey-on-white with pink links.
   #C4121F rather than #ED2939: white on the brighter red measures 3.9:1 and fails AA for body text,
   while white on this one is 6.1:1 and passes. The flag colour stays for rules, markers and the display
   italic, where it is large text and 4.22:1 is enough. */
.cta { background: var(--accent-ink); color: var(--accent-contrast); padding-block: var(--s-8); }
.cta h2 { color: var(--accent-contrast); max-width: 24ch; }
.cta h2 .accent-italic { color: var(--accent-contrast); }
.cta p { max-width: 60ch; color: #ffe3e5; }
.cta a { color: var(--accent-contrast); text-decoration: underline; text-underline-offset: 3px; }
.cta a:hover { text-decoration-thickness: 2px; }
/* /onboarding/ may only ever be the SECOND link in a band. Resolved in master.md. */

/* ---------- FAQ. DERIVED: zero accordions captured. Native <details>, no JS.
   The rendered text must match the FAQPage JSON-LD byte for byte. ---------- */

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule-soft); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-5) var(--s-7) var(--s-5) 0; position: relative;
  font-family: var(--font-display); font-size: var(--t-h4); font-weight: 500; line-height: var(--t-h4-lh);
  color: var(--ink-strong);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--font-text); font-size: 1.5rem; color: var(--muted); }
.faq details[open] summary::after { content: "\2212"; }
.faq__a { padding: 0 var(--s-7) var(--s-6) 0; max-width: var(--container-prose); }
.faq__a > :last-child { margin-bottom: 0; }

/* ---------- Forms. Two-column labelled grid on a hairline.
   NOT "single column + summary rail": that archetype belongs to another site in the batch. ---------- */

.form { border-top: 1px solid var(--rule); }
.fieldset { border: 0; margin: 0; padding: var(--s-6) 0; border-bottom: 1px solid var(--rule-soft); }
.fieldset legend { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--muted); padding: 0; }
.fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-6); margin-top: var(--s-5); }
.field--full { grid-column: 1 / -1; }
.field label { display: block; font-size: var(--t-small); margin-bottom: var(--s-2); color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-text); font-size: var(--t-body); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--rule-soft);
  border-radius: var(--radius-input); padding: 12px 0; min-height: 52px;
  transition: border-color var(--t-base);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom: 2px solid var(--accent); }
.field__help { font-size: var(--t-small); color: var(--muted); margin-top: var(--s-2); }
.field__error { font-size: var(--t-small); color: var(--error); margin-top: var(--s-2); }
/* The honeypot. Must be reachable by nothing: not the eye, not a screen reader, not the tab order. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 767px) { .fields { grid-template-columns: 1fr; } }

/* ---------- Footer. White with black text: the harvest is explicit, and my first draft had this wrong. ---------- */

.footer { background: var(--surface); color: var(--ink); padding-block: var(--s-9) var(--s-6); }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
.footer h2, .footer h3 { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; font-weight: 500; color: var(--muted); margin-bottom: var(--s-4); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--s-3); }
.footer a { font-size: var(--t-small); color: var(--ink); }
.footer a:hover { color: var(--accent-ink); }
.footer__base { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule-soft); display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; font-size: var(--t-small); color: var(--muted); }
@media (max-width: 899px) { .footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px) { .footer__cols { grid-template-columns: 1fr; } }

/* Table heads take the black hairline the reference uses, not the pale grey one. Measured: the
   reference splits its borders 47 black to 56 grey; ours ran 48 to 134, which is why the page read as
   grey. The grey stays for row separators, where a black line every row would be noise. */
table thead th { border-bottom: 2px solid var(--accent); }

/* ---------- Breadcrumb, sources, utilities ---------- */

.crumbs { font-size: var(--t-small); color: var(--muted); padding-block: var(--s-5) 0; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent-ink); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: var(--s-3); z-index: 100; background: var(--bg); padding: var(--s-3) var(--s-4); border: 1px solid var(--ink-strong); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Reveal ----------
   The reference's measured reveal: opacity over 0.7s on cubic-bezier(0.22, 1, 0.36, 1), six elements a
   page (behaviors.md). The `.reveal` class that used to live here was declared and then applied to
   nothing at all: the site shipped with no animation while DESIGN.md claimed it had one.

   THE HIDING IS DONE BY JAVASCRIPT, NOT BY THIS FILE, and that is the whole safety argument. If
   /js/reveal.js does not run, `is-reveal` is never added, nothing is ever transparent, and the page
   reads exactly as it does now. A CSS-first version hides content and hopes a script arrives to show
   it; when the script fails the page is blank and the failure is total. */
.is-reveal {
  opacity: 0;
  transform: translateY(24px);   /* the reference's exact travel: .reveal { transform: translateY(24px) } */
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .is-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* A page is printed and read by machines in states where no scroll ever happens. An element left at
   opacity 0 would print blank and be skipped by find-in-page, so both are forced visible. */
@media print {
  .is-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* The transition set the reference actually runs, applied where those properties change. */
.nav a, .footer a, .prose a, a.link, .crumbs a, .related-links__list a, .nav__panel a {
  transition: color .2s ease;
}
.btn { transition: background .3s ease, color .2s ease, border-color .3s ease; }
.card, .faq details { transition: border-color .3s ease; }
.faq summary { transition: color .2s ease; }

/* ---------- Related pages ----------
   The block between <!-- interlinks:start --> and <!-- interlinks:end -->, written by build.mjs and
   rebuilt weekly by rebuild-interlinks.mjs (client rule R9). It is the last thing on a content page,
   below the CTA band, and it is navigation rather than reading: mono label, hairline rules, no card,
   no shadow, square corners, in keeping with the rest of the system. */
/* No rule above this block and none above the footer, on the owner's instruction: two black lines
   sat within 100px of each other at the foot of every page. The footer's own inner hairline above the
   copyright row stays, as its one division. */
.related-links {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: var(--gutter); padding-block: var(--s-8) var(--s-9);
}
.related-links__title {
  font-family: var(--font-mono); font-size: var(--t-label); line-height: var(--t-label-lh);
  letter-spacing: var(--t-label-ls); text-transform: uppercase; font-weight: 500;
  color: var(--muted); margin: 0 0 var(--s-5);
}
.related-links__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
.related-links__list li { border-top: 1px solid var(--rule-soft); }
.related-links__list li:nth-child(-n+2) { border-top: 0; }
.related-links__list a {
  display: block; padding-block: var(--s-4); font-size: var(--t-body);
  color: var(--ink-strong); text-decoration: none;
}
.related-links__list a:hover { color: var(--accent-ink); text-decoration: underline;
  text-underline-offset: 3px; }
@media (max-width: 719px) {
  .related-links__list { grid-template-columns: 1fr; }
  .related-links__list li:nth-child(2) { border-top: 1px solid var(--rule-soft); }
}

/* ---------- Services dropdown ----------
   Nineteen service pages had no route from the header. A <details> carries the panel so it opens from
   the keyboard and on touch, not only under a mouse; the hover rules below are an addition to that, not
   the mechanism. The panel is full-bleed with a hairline top and bottom, which is how the reference
   handles every band, and it uses the same mono column labels as the footer. */
.nav__svc { position: static; }
.nav__svc > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-size: .875rem; color: var(--ink); transition: color var(--t-fast);
}
.nav__svc > summary::-webkit-details-marker { display: none; }
.nav__svc > summary:hover, .nav__svc[open] > summary,
.nav__svc[data-current="true"] > summary { color: var(--accent-ink); }
.nav__caret {
  width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform var(--t-fast);
}
.nav__svc[open] .nav__caret { transform: rotate(-135deg) translateY(-2px); }
.nav__panel {
  position: absolute; left: 0; right: 0; top: var(--header-h); background: var(--bg);
  border-top: 1px solid var(--rule-soft); border-bottom: 2px solid var(--accent);
  padding-block: var(--s-7); z-index: 60;
}
.nav__panel-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-7); }
.nav__panel h3 {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls);
  text-transform: uppercase; font-weight: 500; color: var(--muted); margin: 0 0 var(--s-4);
}
.nav__panel ul { list-style: none; margin: 0; padding: 0; }
.nav__panel li { margin-bottom: var(--s-3); }
.nav__panel a { font-size: var(--t-small); color: var(--ink-strong); text-decoration: none; }
.nav__panel a:hover, .nav__panel a[aria-current="page"] {
  color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px;
}
/* Pointer users get it on hover; everyone else gets it on click or focus, which is what <details> does
   on its own. Guarded so a touch device does not open the panel under a finger that is only scrolling. */
.nav__svc:not([open]) > .nav__panel { display: none; }
@media (hover: hover) and (min-width: 1280px) {
  .nav__svc:hover > .nav__panel, .nav__svc:focus-within > .nav__panel { display: block; }
}
.navdrawer__group {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls);
  text-transform: uppercase; color: var(--muted); margin: var(--s-6) 0 var(--s-3);
}
.navdrawer__group:first-child { margin-top: 0; }
@media (max-width: 1279px) { .nav__svc { display: none; } }

/* ---------- Wordmark ----------
   The mark is the section sign, and it is not decoration: this site's whole position is that every
   figure on it sits beside the paragraph of Austrian law that sets it, which the measured competitor
   set does not do on a single page. The one character that says so is §.

   Inside the glyph run three vertical bands in the proportions of the Austrian flag. The middle band is
   ink rather than white, because white on a white page would break the glyph in half; the proportions
   carry the flag, the legibility carries the letter. `references/design-archetypes.md` §3 forbids the
   flag as a background and this is not one: it is a 1.35rem character.

   DESIGN.md forbids an enclosing shape, because company-in-italy.com shipped a square enclosed mark.
   There is none here: no box, no circle, no badge.

   The gradient is progressive. A browser without background-clip: text, and every printer, gets the
   solid Austrian red set on the line above, which is the whole mark minus the banding. */
.wordmark { display: inline-flex; align-items: baseline; gap: .44em; text-decoration: none; }
.wordmark__mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--accent);
  transform: translateY(.02em);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .wordmark__mark {
    background-image: linear-gradient(90deg,
      var(--accent) 0 34%, var(--ink-strong) 34% 66%, var(--accent) 66% 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
  }
}
.wordmark__name { color: var(--ink-strong); }
.wordmark:hover .wordmark__name { color: var(--accent-ink); }
@media print {
  .wordmark__mark { -webkit-text-fill-color: var(--accent); color: var(--accent); background: none; }
}
@media (max-width: 559px) {
  /* On a narrow phone the full name costs the row; the mark alone still identifies the site and the
     aria-label on the link keeps it announced in full. */
  .wordmark__name { font-size: 1rem; }
}