/* ==========================================================================
   Relocation to Austria — private-client microsite
   Design system imported from the firm’s public site (360vier-theme)
   Typefaces: Circular XX (Lineto) + Lyon Text (Commercial Type)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */

@font-face {
  font-display: swap;
  font-family: "Circular";
  font-weight: 400;
  src: url("../fonts/CircularXXWeb-Regular.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Circular";
  font-weight: 500;
  src: url("../fonts/CircularXXWeb-Medium.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Circular";
  font-weight: 700;
  src: url("../fonts/CircularXXWeb-Bold.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Circular Book";
  src: url("../fonts/CircularXXWeb-Book.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Lyon Text";
  font-weight: 400;
  src: url("../fonts/LyonText-Regular.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Lyon Text";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/LyonText-RegularItalic.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Lyon Text";
  font-weight: 600;
  src: url("../fonts/LyonText-Semibold.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Lyon Text";
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/LyonText-SemiboldItalic.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Lyon Text";
  font-weight: 700;
  src: url("../fonts/LyonDisplay-Bold.woff") format("woff");
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Lets the <details> answer animate from 0 to auto height */
  interpolate-size: allow-keywords;

  /* Palette — sampled from the firm’s public site */
  --wt-black: #000000;
  --wt-white: #ffffff;
  --wt-red: #e2130e;
  --wt-red-dark: #b50f0b;
  --wt-yellow: #ffe178;
  --wt-green: #aeddbd;
  /* The red of --wt-red at the saturation and lightness of --wt-green, so
     the "No" chip sits as quietly on the page as the "Yes" chip. */
  --wt-red-matte: #ddb1ae;
  --wt-blue-light: #82c8fa;
  --wt-blue: #5087dc;
  --wt-pink: #d2aabe;
  --wt-orange: #ff825a;
  --wt-cream: #fffbed;
  --wt-grey-100: #f0f0f0;
  --wt-grey-300: #b9b9b9;
  --wt-grey-600: #6e6e6e;
  --wt-rule: rgba(0, 0, 0, 0.15);

  /* Type */
  --font-sans: "Circular", "Circular Book", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans-book: "Circular Book", "Circular", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Lyon Text", Georgia, "Times New Roman", Times, serif;

  /* Metrics */
  --header-height: 60px;
  --container: 1140px;
  --gutter: 20px;
  --section-space: 64px;
}

@media (min-width: 1024px) {
  :root {
    --header-height: 89px;
    --section-space: 120px;
  }
}

/* --------------------------------------------------------------------------
   3. 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;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background-color: var(--wt-white);
  color: var(--wt-black);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--header-height);
  /* Sticky footer: short pages still push the footer to the bottom of the
     viewport. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > main {
  flex: 1 0 auto;
}

@media (min-width: 768px) {
  body {
    font-size: 20px;
    line-height: 32px;
  }
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--wt-black);
  margin: 0;
}

h1 {
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 28px;
  line-height: 38px;
}

h3 {
  font-size: 22px;
  line-height: 32px;
}

h4 {
  font-size: 18px;
  line-height: 28px;
}

@media (min-width: 768px) {
  h1 {
    font-size: 56px;
  }
  h2 {
    font-size: 36px;
    line-height: 46px;
  }
  h3 {
    font-size: 26px;
    line-height: 36px;
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: 68px;
  }
}

p {
  margin: 0 0 24px;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

strong,
b {
  font-weight: 600;
}

em {
  font-style: italic;
}

/* Every German term on the site is marked up with lang="de" and every one of
   them is a term quoted inside English prose, so the language mark carries the
   italic rather than each author remembering an <em>. */
[lang="de"] {
  font-style: italic;
}

/* The source pages underline the load-bearing negation. <em> carries that
   emphasis to assistive technology; this renders it as the source's underline. */
em.negation {
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 3px;
}

img,
svg {
  max-width: 100%;
}

::selection {
  background: var(--wt-yellow);
  color: var(--wt-black);
}

/* The focus ring is reserved for the controls where it does work: anything
   that behaves as a button, and the hCaptcha box (which is an iframe, so this
   is the only handle we have on it). Text fields are left out: the caret is
   already in them, and a red rectangle on a field reads as an error against a
   form whose errors the browser reports itself. Links and headings carry their
   own hover and current-page treatment and would only be cluttered by one. */
:focus-visible {
  outline: none;
}

button:focus-visible,
.btn:focus-visible,
.skip-link:focus-visible,
[type="button"]:focus-visible,
[type="submit"]:focus-visible,
.q__summary:focus-visible,
.contact__captcha iframe:focus-visible {
  outline: 2px solid var(--wt-red);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. Layout helpers
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.measure {
  max-width: 46rem;
}

.section {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

/* Tinted section surfaces — the house block colours. A black rule marks
   every edge where the background colour changes.

   The order is fixed and is the homepage's. Counting from the first section
   after the hero or the page head, the slots run green, white, orange, white,
   blue — and the closing call to action is yellow whatever slot it lands in.
   The sequence starts on the FIRST content section, not the second: a page
   whose opening section is untinted has drifted out of step with every other
   page. Shorter pages simply stop early — three sections mean green, white,
   orange — so a reader moving between pages meets the colours in the same
   sequence everywhere and the rhythm reads as one site rather than four.
   Reordering these on a page is a visible change, not a cosmetic one. */
.section--green,
.section--blue,
.section--yellow,
.section--orange {
  border-top: 2px solid var(--wt-black);
  border-bottom: 2px solid var(--wt-black);
}

/* Two tinted sections in a row would otherwise stack their rules into one 4px
   line, twice the weight of every other edge. */
:is(.section--green, .section--blue, .section--yellow, .section--orange)
  + :is(.section--green, .section--blue, .section--yellow, .section--orange) {
  border-top: 0;
}

/* Same doubling on a subpage, where `.page-head` already closes with a black
   rule and the first content section below it is the green one. The head's
   rule marks that edge; the section must not draw a second. */
.page-head + :is(.section--green, .section--blue, .section--yellow, .section--orange) {
  border-top: 0;
}

.section--green {
  background-color: var(--wt-green);
}

.section--blue {
  background-color: var(--wt-blue-light);
}

.section--yellow {
  background-color: var(--wt-yellow);
}

.section--orange {
  background-color: var(--wt-orange);
}

/* Red text clears 4.5:1 on white and on none of the four tints — 3.8:1 against
   the yellow is the best of them. A hovered link therefore stays black on a
   tinted surface and doubles its underline instead, so the hover is still
   answered without a colour that cannot be read. */
:is(.section--green, .section--blue, .section--yellow, .section--orange)
  :is(.cta-link, .prose a, .table a, .deflist__source a):is(:hover, :focus-visible) {
  color: inherit;
  text-decoration-thickness: 2px;
}

.section__title {
  margin-bottom: 40px;
}

/* A second title, prose block or callout stacked below an earlier block in
   the same section — the gap the band padding would otherwise provide. */
.section__title--stacked {
  margin-top: 48px;
}

.prose--stacked,
.callout--stacked {
  margin-top: 32px;
}

[id] {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

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

/* Skip link — hidden until it receives keyboard focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
}

.skip-link:focus {
  position: fixed;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  background-color: var(--wt-black);
  color: var(--wt-white);
  font-family: var(--font-sans-book);
  font-size: 16px;
  border-radius: 50px;
}

main:focus {
  outline: none;
}

/* Prose lists — the "-" / "--" levels of the source copy */
.prose ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.prose ul:last-child {
  margin-bottom: 0;
}

.prose li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
}

.prose li:last-child {
  margin-bottom: 0;
}

.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 2px;
  background-color: var(--wt-black);
}

.prose li ul {
  margin: 14px 0 0;
}

.prose li li::before {
  background-color: var(--wt-black);
  width: 8px;
  left: 2px;
}

.prose > p + ul {
  margin-top: -8px;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans-book);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  min-height: 48px;
  padding: 0 28px;
  border: 2px solid var(--wt-black);
  border-radius: 50px;
  background-color: var(--wt-black);
  color: var(--wt-white);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
}

/* Hover only — the focus ring must stay distinguishable from the button itself.
   Matches the design source: the fill drops out and the outline stays.
   :not(:disabled) so a button that cannot be pressed does not answer the
   pointer as though it could. */
.btn:hover:not(:disabled) {
  background-color: transparent;
  border-color: var(--wt-black);
  color: var(--wt-black);
}

/* Kept as a safety net, not as a state anything reaches on purpose: no button
   on either page is ever disabled. The send button stays live and answers a
   missing spam check with a message above it, the way the sister site does. */
.btn:disabled {
  background-color: var(--wt-grey-600);
  border-color: var(--wt-grey-600);
  color: var(--wt-white);
  cursor: default;
}

.btn--ghost {
  background-color: transparent;
  color: var(--wt-black);
}

/* :not(:disabled) matches the specificity of .btn:hover:not(:disabled) above;
   without it that rule wins and the ghost button never inverts. */
.btn--ghost:hover:not(:disabled) {
  background-color: var(--wt-black);
  border-color: var(--wt-black);
  color: var(--wt-white);
}

.btn--sm {
  min-height: 40px;
  font-size: 15px;
  padding: 0 20px;
}

/* Content links — one treatment for every link that sits inside running copy,
   whether it is a whole sentence's worth of "read this next" or three words in
   the middle of a paragraph. It inherits font and colour from whatever it is
   set in, so the link reads as the text it belongs to and the underline is the
   only thing marking it; red is kept for the hover. Nav, footer, breadcrumbs
   and buttons are chrome and keep their own conventions. */
.cta-link,
.prose a,
.table a,
.deflist__source a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-thickness 0.2s ease;
}

.cta-link:hover,
.cta-link:focus-visible,
.prose a:hover,
.prose a:focus-visible,
.table a:hover,
.table a:focus-visible,
.deflist__source a:hover,
.deflist__source a:focus-visible {
  color: var(--wt-red);
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(--wt-white);
  border-bottom: 2px solid var(--wt-black);
  z-index: 100;
}

.header__container {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 24px;
}

/* Two-line wordmark: the site title, set like the hero — bold first line,
   book-weight second. It shrinks before it wraps, so the header stays one row. */
.header__logo {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  color: var(--wt-black);
}

.header__wordmark,
.header__wordmark-sub {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sized off the measured width of the longer line against the space the nav and
   the CTA leave over — it steps up only where that space actually exists. */
.header__wordmark {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
}

.header__wordmark-sub {
  font-family: var(--font-sans-book);
  font-weight: 400;
  font-size: 11px;
  line-height: 16px;
}

@media (min-width: 900px) {
  .header__wordmark {
    font-size: 16px;
    line-height: 21px;
  }
  .header__wordmark-sub {
    font-size: 13px;
    line-height: 19px;
  }
}

@media (min-width: 1024px) {
  .header__wordmark {
    font-size: 19px;
    line-height: 26px;
  }
  .header__wordmark-sub {
    font-size: 15px;
    line-height: 22px;
  }
}

.header__nav {
  display: none;
}

.header__nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__nav a {
  font-family: var(--font-sans-book);
  font-size: 16px;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--wt-black);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}

.header__nav a:hover,
.header__nav a:focus-visible,
.header__nav a[aria-current="page"] {
  border-bottom-color: var(--wt-black);
}

.header__cta {
  margin-left: auto;
}

/* Mobile disclosure menu (<768px) — no JS, <details> does the toggling */
.header__menu {
  margin-left: auto;
  position: relative;
}

/* When the CTA is present it already claims the free space */
.header__cta + .header__menu {
  margin-left: 0;
}

.header__menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  list-style: none;
}

.header__menu > summary::-webkit-details-marker {
  display: none;
}

.header__burger {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--wt-black);
}

.header__burger::before,
.header__burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background-color: var(--wt-black);
  transition: transform 0.2s ease;
}

.header__burger::before {
  top: -7px;
}

.header__burger::after {
  top: 7px;
}

.header__menu[open] .header__burger {
  background-color: transparent;
}

.header__menu[open] .header__burger::before {
  transform: translateY(7px) rotate(45deg);
}

.header__menu[open] .header__burger::after {
  transform: translateY(-7px) rotate(-45deg);
}

.header__panel {
  position: absolute;
  top: calc(100% + 2px);
  right: -10px;
  min-width: 240px;
  background-color: var(--wt-white);
  border: 2px solid var(--wt-black);
  padding: 12px 20px 20px;
}

.header__panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__panel li {
  border-bottom: 1px solid var(--wt-rule);
}

.header__panel li:last-child {
  border-bottom: 0;
}

.header__panel a {
  display: block;
  padding: 12px 0;
  font-family: var(--font-sans-book);
  font-size: 16px;
  text-transform: uppercase;
  color: var(--wt-black);
}

/* The compact menu marks the current page too — same convention as the
   desktop nav, which is the only place the underline was drawn before. */
.header__panel a:hover,
.header__panel a:focus-visible,
.header__panel a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--wt-black);
}

/* 1024px, not 768px. The nav carried three items when this was written and
   768px was the width at which the wordmark and those three could both hold
   their line. It now carries six, because the site has six places to go rather
   than two, and six will not fit beside the wordmark and the CTA until 1024.
   Below that the compact menu carries the same list — it always did. */
@media (min-width: 1024px) {
  .header__menu {
    display: none;
  }
  .header__nav {
    display: block;
    margin-left: 24px;
  }
  .header__nav ul {
    gap: 20px;
  }
  .header__nav a {
    font-size: 15px;
  }
}

@media (min-width: 1200px) {
  .header__nav ul {
    gap: 28px;
  }
  .header__nav a {
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .header__container {
    gap: 8px;
  }
  /* The wordmark's second line and the CTA cannot share this width. The menu
     still carries Contact, and the hero's button is one screen down. */
  .header__cta {
    display: none;
  }
  /* With the CTA gone the burger has to reclaim the free space itself. */
  .header__cta + .header__menu {
    margin-left: auto;
  }
}

/* --------------------------------------------------------------------------
   7. Stage / hero
   -------------------------------------------------------------------------- */

.stage {
  padding-top: 56px;
  padding-bottom: 56px;
}

@media (min-width: 768px) {
  .stage {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.stage__title {
  max-width: 18ch;
}

.stage__lead {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 32px;
  margin: 32px 0 0;
  max-width: 34rem;
}

@media (min-width: 768px) {
  .stage__lead {
    font-size: 24px;
    line-height: 38px;
  }
}

.stage__actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* --------------------------------------------------------------------------
   8. Cases
   -------------------------------------------------------------------------- */

.cases {
  border-top: 2px solid var(--wt-rule);
}

.case {
  border-bottom: 2px solid var(--wt-rule);
}

.case__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}

.case__summary::-webkit-details-marker {
  display: none;
}

.case__heading {
  display: block;
}

@media (min-width: 768px) {
  .case__heading {
    display: flex;
    align-items: baseline;
    gap: 16px;
  }
}

.case__label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 32px;
  color: var(--wt-black);
  margin: 0;
}

@media (min-width: 768px) {
  .case__label {
    font-size: 26px;
    line-height: 36px;
  }
}

.case__ref {
  display: block;
  font-family: var(--font-sans-book);
  font-size: 15px;
  line-height: 24px;
  color: var(--wt-black);
}

/* Circular has no italic; set the Latin abbreviation in Lyon Text italic instead
   of letting the browser synthesise an oblique. */
.case__ref em {
  font-family: var(--font-serif);
  font-size: 16px;
}

.case__body {
  padding: 0 0 32px;
  max-width: 52rem;
}

.case__body > p:first-child {
  font-weight: 600;
}

.case__cta {
  margin-top: 28px;
}

/* Progressive enhancement: animate open/close where supported */
@supports selector(details::details-content) {
  .case::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
  }
  .case[open]::details-content {
    block-size: auto;
  }
}

.case[open] .faq__icon::after {
  opacity: 0;
  transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   9. FAQ
   -------------------------------------------------------------------------- */

.faq {
  border-top: 2px solid var(--wt-rule);
}

.faq__item {
  border-bottom: 2px solid var(--wt-rule);
}

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  line-height: 28px;
}

@media (min-width: 768px) {
  .faq__item summary {
    font-size: 22px;
    line-height: 32px;
  }
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: 3px;
  position: relative;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background-color: currentColor;
  border-radius: 1px;
}

.faq__icon::before {
  left: 0;
  top: 12px;
  width: 26px;
  height: 2px;
}

.faq__icon::after {
  left: 12px;
  top: 0;
  width: 2px;
  height: 26px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.faq__item[open] .faq__icon::after {
  opacity: 0;
  transform: rotate(90deg);
}

.faq__answer {
  padding: 0 0 32px;
  max-width: 52rem;
}

.faq__answer p:first-child,
.faq__answer ul:first-child {
  margin-top: 0;
}

/* The pointer to the glossary, below the last answer — it needs air so it
   reads as a way out of the list rather than another item in it. */
.faq__outro {
  margin-top: 32px;
}

/* The accordions close on a rule; without this the following line sits right
   against it. */
.cases__outro {
  margin-top: 40px;
}

/* Progressive enhancement: animate open/close where supported */
@supports selector(details::details-content) {
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
  }
  .faq__item[open]::details-content {
    block-size: auto;
  }
}

/* --------------------------------------------------------------------------
   10. Assist / closing CTA
   -------------------------------------------------------------------------- */

.assist__grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 1024px) {
  .assist__grid {
    grid-template-columns: 1fr 1.4fr;
    gap: 64px;
  }
}

.closing__inner {
  max-width: 42rem;
}

.closing__actions {
  margin-top: 36px;
}

/* The email path, below the closing block's buttons. A rule separates the two
   so they read as two ways in rather than one interrupted thought. The fields
   are the same square boxes and the send button the same pill as the rest of
   the site: one vocabulary, two entry points. */
.contact {
  margin-top: 56px;
}

/* Used only by the "Message sent" confirmation that replaces the form. Set at
   the size of the section heading above it rather than at the h3 step, because
   it is the whole of what the visitor sees once the form is gone. */
.contact__title {
  font-size: 28px;
  line-height: 38px;
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .contact__title {
    font-size: 36px;
    line-height: 46px;
  }
}

/* hCaptcha renders a fixed-width iframe that cannot be restyled. Let it scroll
   inside its own box rather than push the container wider than the viewport. */
.contact__captcha {
  max-width: 100%;
  overflow-x: auto;
}

/* The widget is something you act on, so it gets the same square black box as
   the fields above it rather than sitting loose on the yellow. The border goes
   on the wrapper because the iframe itself is not ours to style.

   :not(:empty) — the div is empty until hCaptcha fills it, and an empty box
   would draw a 4px black sliver wherever the script is blocked or absent.
   line-height: 0 drops the inline descender gap under the iframe. */
.contact__captcha .h-captcha:not(:empty) {
  display: inline-block;
  border: 2px solid var(--wt-black);
  line-height: 0;
}

/* Replaces the form in place, so the eye lands where the form was. White on
   the yellow, boxed like a field, because it is the answer to one. */
.contact__success {
  border: 2px solid var(--wt-black);
  background-color: var(--wt-white);
  padding: 28px;
}

/* Focused by script after a send, purely to move the screen reader. */
.contact__success:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.footer {
  background-color: var(--wt-black);
  color: var(--wt-white);
}

.footer__secondary-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 26px;
  padding-bottom: 26px;
}

.footer__legal ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.footer__legal a {
  font-family: var(--font-sans-book);
  font-size: 14px;
  color: var(--wt-white);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.footer__legal a:hover,
.footer__legal a:focus-visible {
  border-bottom-color: var(--wt-white);
}

/* No frame around the glyph — the 40px box is only there to keep the tap
   target at a usable size. */
.footer__top a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.footer__top a:hover,
.footer__top a:focus-visible {
  opacity: 1;
}

.footer__top svg {
  width: 14px;
  height: 14px;
  fill: var(--wt-white);
}

/* --------------------------------------------------------------------------
   12. Questionnaire page
   -------------------------------------------------------------------------- */

/* The top padding is the homepage stage's, to the pixel. A reader moving from
   the landing page to a subpage should find the title where they left it, so
   `.stage` and `.page-head` are kept on one number rather than two that happen
   to be close. */
.page-head {
  padding-top: 56px;
  padding-bottom: 40px;
  border-bottom: 2px solid var(--wt-black);
}

@media (min-width: 768px) {
  .page-head {
    padding-top: 96px;
    padding-bottom: 64px;
  }
}

.questionnaire {
  min-height: 40vh;
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

/* Placed here, after section 5, so it beats `.btn { display: inline-flex }` on
   source order rather than on !important. */
[hidden] {
  display: none;
}

/* Two mechanisms, and they must not be confused. The step machinery is the
   enhancement: without the flag the page is one long form with every question
   visible, which is the whole no-JS fallback. `.js-only` hides itself when the
   flag is absent rather than revealing itself when it is present — `display:
   revert` returns the UA value, not the author value, and would flatten
   `.q__nav`'s flex layout. */
[data-enhanced] .q__step:not(.is-current) {
  display: none;
}

html:not([data-enhanced]) .js-only {
  display: none;
}

[data-enhanced] .nojs-only {
  display: none;
}

.print-only {
  display: none;
}

.q__form {
  margin-left: auto;
  margin-right: auto;
}

/* Progress — deliberately not sticky. It carries an escape link, and a sticky
   bar with a control in it eats a small viewport at 200% zoom. Every step
   scrolls to the top, so it is in view on arrival anyway. */
/* No rule of its own: the bar is the divider. A border here stacked a third
   line under the tab underline and the bar within a few pixels. */
.q__progress {
  margin-bottom: 36px;
}

.q__phases ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.q__phase {
  font-family: var(--font-sans-book);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wt-black);
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
}

/* Matches .header__nav a[aria-current="page"]. Red here would invent a second
   current-state convention on the same site. */
.q__phase.is-current {
  font-weight: 700;
  border-bottom-color: var(--wt-black);
}

/* Outlined track, yellow fill — the outline is what makes the bar legible:
   yellow against a light interior alone would be about 1.2:1. The fill's
   dark leading edge marks the progress point at the 3:1 graphics threshold. */
.q__bar {
  height: 16px;
  background-color: var(--wt-white);
  border: 1px solid var(--wt-black);
  border-radius: 8px;
  overflow: hidden;
}

.q__bar-fill {
  display: block;
  height: 100%;
  background-color: var(--wt-yellow);
  box-shadow: 1px 0 0 var(--wt-black);
  transition: width 0.2s ease;
}

.q__bar-fill[style*="width:0%"],
.q__bar-fill[style*="width: 0%"] {
  box-shadow: none;
}

.q__meta {
  font-family: var(--font-sans-book);
  font-size: 14px;
  line-height: 22px;
  margin: 0 0 12px;
}

.q__step {
  padding-bottom: 48px;
}

.q__group-heading {
  margin: 48px 0 24px;
}

.q__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  line-height: 34px;
  margin: 0 0 16px;
}

.q__title:focus {
  outline: none;
}

@media (min-width: 768px) {
  .q__title {
    font-size: 28px;
    line-height: 38px;
  }
}

.q__lead {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 30px;
  margin: 0 0 28px;
}

.answers__note {
  font-family: var(--font-sans-book);
  font-size: 15px;
  line-height: 24px;
  margin: 0 0 20px;
  padding-left: 14px;
  border-left: 3px solid var(--wt-yellow);
}

.q__question {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.q__legend {
  display: block;
  padding: 0;
  margin: 0;
}

.q__help {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 28px;
  margin: 0 0 24px;
}

/* Options stack full width at every viewport. Three equal columns make
   "I'm not sure" wrap to two lines while "Yes" and "No" stay on one, which
   de-emphasises by layout exactly the option that must not be de-emphasised. */
.answers {
  display: grid;
  gap: 12px;
  margin: 0;
}

.answer {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 20px;
  border: 2px solid var(--wt-black);
  border-radius: 26px;
  background-color: var(--wt-white);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.answer:hover {
  border-color: var(--wt-yellow);
}

/* Native control, left visible: high-contrast mode then needs no rebuild. */
.answer__input {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 19px 0 0;
  accent-color: var(--wt-black);
}

.answer__label {
  flex: 1 1 auto;
  display: block;
  min-height: 60px;
  padding: 17px 0;
  font-family: var(--font-sans-book);
  font-size: 17px;
  line-height: 26px;
  cursor: pointer;
}

/* Extends the hit target to the whole pill. */
.answer__label::after {
  content: "";
  position: absolute;
  inset: 0;
}

.answer__sub {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 24px;
}

/* Yellow, not black: a black pill would be pixel-identical to .btn, and one
   sits a few rows below. Where :has() is missing the native radio still shows
   its own checked state, so nothing is lost. */
.answer:has(.answer__input:checked) {
  background-color: var(--wt-yellow);
}

.answer:has(.answer__input:focus-visible) {
  outline: 2px solid var(--wt-red);
  outline-offset: 3px;
}

/* The three disclosures reuse .faq__item, so they inherit the site's open and
   close animation from section 9 for free. */
.q__why {
  margin-top: 32px;
  border-top: 2px solid var(--wt-rule);
}

.q__why > summary {
  font-family: var(--font-sans-book);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  padding: 16px 0;
}

.q__answers > summary,
.q__optional > summary {
  font-family: var(--font-sans-book);
  font-weight: 400;
  font-size: 17px;
  line-height: 26px;
  padding: 18px 0;
}

.q__answers,
.q__optional {
  margin: 32px 0;
  border-top: 2px solid var(--wt-rule);
}

/* No rule of its own: it always follows the "Why we ask this" accordion,
   which already closes on one. A third grey line here read as clutter. */
.q__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.q__nav .btn:not(.btn--ghost) {
  margin-left: auto;
}

/* A solid back button (the send page) still belongs on the left with the
   clear button; only the forward/submit button takes the auto margin. */
.q__nav .btn[data-back] {
  margin-left: 0;
}

/* The solid copy button (the sent page) likewise stays on the left, paired
   with the clear button beside it. */
.q__nav .btn[data-copy] {
  margin-left: 0;
}

/* Disabled below 601px of height so it cannot eat the viewport at 200% zoom. */
@media (max-width: 767px) and (min-height: 601px) {
  .q__nav--sticky {
    position: sticky;
    bottom: 0;
    background-color: var(--wt-white);
    padding-bottom: 16px;
    box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, 0.15);
  }
}

.q__aside {
  flex-basis: 100%;
  font-family: var(--font-sans-book);
  font-size: 14px;
  line-height: 24px;
  margin: 12px 0 0;
}

/* One box, three fills — not three differently padded 2px-black boxes. */
.q__note {
  padding: 20px 24px;
  border: 2px solid var(--wt-black);
  margin: 0 0 28px;
  font-family: var(--font-sans-book);
  font-size: 15px;
  line-height: 25px;
}

.q__note--info {
  background-color: var(--wt-cream);
}

.q__note--note {
  background-color: var(--wt-yellow);
}

.q__note--plain {
  background-color: var(--wt-white);
}

.q__note p:last-child {
  margin-bottom: 0;
}

/* Result — red is never a result surface. It is the focus ring and the brand
   accent; as a verdict it would read as a rejection stamp. */
.q__result {
  padding: 32px 24px;
  margin-bottom: 28px;
  border: 2px solid var(--wt-black);
}

@media (min-width: 768px) {
  .q__result {
    padding: 40px;
  }
}

.q__result--match {
  background-color: var(--wt-green);
}

.q__result--open {
  background-color: var(--wt-yellow);
}

.q__result--none {
  background-color: var(--wt-grey-100);
}

/* Same rule as section 4: red drops below 3:1 on the tinted surfaces. */
.q__result .prose li::before {
  background-color: var(--wt-black);
}

.q__verdict {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  line-height: 34px;
  margin: 0 0 20px;
}

.q__verdict:focus {
  outline: none;
}

@media (min-width: 768px) {
  .q__verdict {
    font-size: 30px;
    line-height: 40px;
  }
}

.points {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  border-top: 2px solid var(--wt-black);
}

.point {
  padding: 24px 0;
  border-bottom: 1px solid var(--wt-rule);
}

.point__badge {
  margin: 0 0 10px;
}

.point__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  line-height: 28px;
  margin: 0 0 14px;
}

.point__docs {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 28px;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border: 2px solid var(--wt-black);
  border-radius: 50px;
  background-color: var(--wt-white);
  font-family: var(--font-sans-book);
  font-size: 14px;
  line-height: 1;
}

.chip--yes {
  background-color: var(--wt-green);
}

.chip--no {
  background-color: var(--wt-red-matte);
}

/* A note colour, never a warning colour. */
.chip--unsure {
  background-color: var(--wt-grey-100);
}

.review {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--wt-black);
}

.review__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--wt-rule);
}

.review__q {
  grid-column: 1 / -1;
  font-family: var(--font-sans-book);
  font-size: 16px;
  line-height: 26px;
  margin: 0;
}

.review__a,
.review__change {
  margin: 0;
}

.review__change a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 17px;
  line-height: 26px;
}

/* Rhymes with the landing page's closing "Are you eligible?" block. */
.q__cta {
  margin: 36px 0 28px;
  border: 2px solid var(--wt-black);
  padding-left: 24px;
  padding-right: 24px;
}

.q__group {
  border: 0;
  padding: 0;
  margin: 0 0 40px;
  min-width: 0;
}

.q__group-legend {
  display: block;
  padding: 0;
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
}

.q__group-note {
  font-family: var(--font-sans-book);
  font-size: 15px;
  line-height: 25px;
  margin: 0 0 24px;
}

.field {
  margin-bottom: 22px;
}

.field__label {
  display: block;
  font-family: var(--font-sans-book);
  font-size: 16px;
  line-height: 26px;
  margin-bottom: 8px;
}

.field__hint {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 24px;
  margin: 0 0 8px;
}

/* Square box for anything you type into, pill for anything you press, so a
   field is never mistaken for a button. 18px stops iOS zooming on focus. */
.field__input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 2px solid var(--wt-black);
  border-radius: 0;
  background-color: var(--wt-white);
  color: var(--wt-black);
  font-family: var(--font-sans-book);
  font-size: 18px;
  line-height: 28px;
}

textarea.field__input {
  min-height: 120px;
  resize: vertical;
}

/* --wt-red-dark is 6.9:1 on white. The invalid state is an inset shadow rather
   than a border-width change, so nothing reflows when it appears. */
.field__error {
  margin: 8px 0 0;
  font-family: var(--font-sans-book);
  font-size: 15px;
  line-height: 24px;
  color: var(--wt-red-dark);
}

/* A field the browser itself has just objected to. Pressing Send with the name
   box empty raises the native message against the box, which is report enough.
   Firefox paints its own red glow on the same state; both forms on this site
   leave their errors to the browser, so nothing here paints a field red. */
.field__input:user-invalid {
  box-shadow: none;
}

/* The asterisk is decoration: the input carries `required`, which is what a
   screen reader announces, so the mark itself is aria-hidden. Black rather
   than red — red is the error colour on this page, and nothing is wrong yet. */
.field__ast {
  font-family: var(--font-sans-book);
}

.field__req {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 10px;
  margin-left: 8px;
  border: 1px solid var(--wt-black);
  border-radius: 50px;
  background-color: var(--wt-yellow);
  font-family: var(--font-sans-book);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.checks {
  display: grid;
  gap: 10px;
  margin: 0;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
}

.check__input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 11px 0 0;
  accent-color: var(--wt-black);
}

.check__label {
  padding: 10px 0;
  font-family: var(--font-sans-book);
  font-size: 16px;
  line-height: 26px;
  cursor: pointer;
}

.gen {
  border: 2px solid var(--wt-rule);
  padding: 20px;
  margin-bottom: 16px;
  min-width: 0;
}

.gen__legend {
  padding: 0 8px;
  font-family: var(--font-sans-book);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.gen__grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 768px) {
  .gen__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.q__summary {
  width: 100%;
  min-height: 320px;
  padding: 16px;
  border: 2px solid var(--wt-black);
  background-color: var(--wt-grey-100);
  color: var(--wt-black);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 22px;
}

/* The radios are native, so only the progress bar needs rebuilding here. */
@media (forced-colors: active) {
  .q__bar {
    border: 1px solid CanvasText;
  }
  .q__bar-fill {
    background-color: Highlight;
  }
}

/* Printing the result is the only offline copy a user gets, so make it the
   page. The two !important rules are the file's only additions of that kind. */
@media print {
  .header,
  .footer,
  .q__progress,
  .q__nav,
  .q__why,
  .q__optional,
  .skip-link {
    display: none !important;
  }
  [data-enhanced] .q__step:not(.is-current) {
    display: none;
  }
  #step-result {
    display: block !important;
  }
  body {
    padding-top: 0;
    font-size: 12pt;
    line-height: 1.5;
  }
  .q__result,
  .q__note,
  .point {
    break-inside: avoid;
  }
  .print-only {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   13. Content pages

   The six case pages, the two process pages and the two reference pages are
   built from these. Nothing here is a new visual language: the type, the
   colour and the rhythm are section 2's tokens, and the components below are
   the smallest set that lets a long statutory argument stay readable.
   -------------------------------------------------------------------------- */

.breadcrumbs {
  font-family: var(--font-sans-book);
  font-size: 15px;
  line-height: 24px;
  padding-top: 20px;
  /* The trail is a line of its own, not the first line of the title. Without
     this the two line boxes touch and only the h1's half-leading separates
     them — most obvious on mobile, where the h1 is 34px. Matches the gap
     .page-head__eyebrow already leaves below itself. */
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .breadcrumbs {
    margin-bottom: 24px;
  }
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The separator is decorative and is drawn rather than typed, so it is never
   read out between the two link texts. */
.breadcrumbs li + li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-top: 1.5px solid var(--wt-grey-600);
  border-right: 1.5px solid var(--wt-grey-600);
  transform: rotate(45deg) translateY(-1px);
}

.breadcrumbs a {
  color: var(--wt-grey-600);
  border-bottom: 1px solid transparent;
}

.breadcrumbs a:hover {
  color: var(--wt-black);
  border-bottom-color: var(--wt-red);
}

.breadcrumbs [aria-current="page"] {
  color: var(--wt-black);
}

/* The same two-part title as the homepage stage: the first half in the bold
   weight, the <span> dropped onto its own line in the lighter one. One rule,
   because the two heads should not drift apart. */
.page-head h1 span,
.stage__title span {
  display: block;
  font-weight: 400;
}

/* And the same measure. A 68px line running the full width of the container
   reads as a banner rather than as a title; the stage has always been held to
   a short measure, and the subpage heads were the ones that drifted. Slightly
   wider than the stage's 18ch because the second half of a case headline
   ("as a successor-state citizen, or stateless") is longer than "by
   descent". */
.page-head h1 {
  max-width: 20ch;
}

.page-head__eyebrow {
  display: block;
  font-family: var(--font-sans-book);
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wt-red);
  margin-bottom: 16px;
}

.page-head__lead {
  max-width: 40rem;
  margin-top: 24px;
  margin-bottom: 0;
  font-size: 20px;
  line-height: 32px;
  color: var(--wt-black);
}

@media (min-width: 768px) {
  .page-head__lead {
    font-size: 24px;
    line-height: 36px;
  }
}

/* Mirrors .stage__actions, at the smaller step the page head is set in. */
.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

.page-meta {
  font-family: var(--font-sans-book);
  font-size: 15px;
  line-height: 24px;
  color: var(--wt-grey-600);
  margin-top: 32px;
}

/* Comparison table. Wide content scrolls inside its own box; the page body
   never scrolls sideways. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 32px;
}

/* The gap above a table is set once, for every block component, in section 15
   ("Block rhythm") at the foot of this file. It used to live here as
   `.prose + .table-wrap`, which missed every table that follows a `.measure`
   wrapper rather than the `.prose` inside it — i.e. most of them. */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
  line-height: 26px;
  text-align: left;
}

.table th,
.table td {
  padding: 16px 20px 16px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--wt-rule);
}

.table thead th {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  border-bottom: 2px solid var(--wt-black);
}

.table tbody th {
  font-family: var(--font-sans);
  font-weight: 700;
}

/* Wide tables scroll inside .table-wrap; narrow ones (two or three columns
   of rates and thresholds) must fit a phone without hiding the value
   column. Row headers therefore wrap on small screens and stay on one line
   only where there is room. */
@media (min-width: 768px) {
  /* Only two-column tables (a rate and its threshold) can afford an unwrapped
     row header. On a four-column table the longest label took 80% of the width
     and sliced the last column off at the container edge, so from three
     columns up the header wraps like everything else. */
  .table:not(:has(thead th:nth-child(3))) tbody th {
    white-space: nowrap;
  }
  .table--matrix {
    min-width: 44rem;
  }
}

/* A label column wide enough for the longest route name leaves the six text
   columns fighting over what is left. Cap it so the space goes where the
   words are. */
@media (min-width: 768px) {
  .table:has(thead th:nth-child(6)) th:first-child {
    width: 22%;
  }
}

/* Phones. A table squeezed to 335px does not become readable, it becomes a
   column of single words; the wrap already scrolls, so give the table a floor
   that keeps a sensible measure and let it use the scroll. The floor rises
   with the column count. The wrap itself bleeds into the page gutter so the
   clipped edge reads as "there is more this way" rather than as a crop, and
   so the last visible cell keeps its own air. */
@media (max-width: 767px) {
  .table-wrap {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }

  .table:not(.table--matrix):has(thead th:nth-child(3)) {
    min-width: 34rem;
  }

  .table:not(.table--matrix):has(thead th:nth-child(4)) {
    min-width: 42rem;
  }

  .table:not(.table--matrix):has(thead th:nth-child(5)) {
    min-width: 48rem;
  }

  .table th,
  .table td {
    padding-right: 16px;
  }

  /* Nothing follows the last column, so its padding only ever pushed the
     table wider. */
  .table tr > :last-child {
    padding-right: 0;
  }
}

/* The evidence matrix carries seven columns and still has to fit a phone
   without scrolling sideways, so it drops the shared table's 44rem floor and
   divides the width by rule instead: the label column takes 40%, the six case
   columns 10% each. */
.table--matrix {
  min-width: 0;
  table-layout: fixed;
}

.table--matrix th:first-child {
  width: 40%;
}

/* The shared table keeps its row headers on one line; this one cannot, or the
   longest label pushes the whole matrix past the viewport again. */
.table--matrix tbody th {
  white-space: normal;
}

.table--matrix thead th + th,
.table--matrix td {
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}

@media (max-width: 640px) {
  .table--matrix {
    font-size: 13px;
    line-height: 20px;
  }
  /* Sighted readers get "1"; the column header still reads "Case 1" aloud. */
  .table--matrix .table__case-word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* The statutory text, set apart from the prose around it. A reader must never
   be in doubt about which of the two they are reading, so the verbatim wording
   gets a rule, a label and a different measure from the explanation. */
.statute {
  border-left: 3px solid var(--wt-red);
  padding-left: 28px;
  margin-bottom: 40px;
}

.statute__label {
  display: block;
  font-family: var(--font-sans-book);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wt-grey-600);
  margin-bottom: 16px;
}

.section--green .statute,
.section--blue .statute,
.section--yellow .statute,
.section--orange .statute {
  border-left-color: var(--wt-black);
}

/* Grey-600 is chosen for secondary text against white. It does not clear 4.5:1
   against the tinted surfaces, so secondary text goes black there — the same
   trade the red list markers already make. */
.section--green .statute__label,
.section--blue .statute__label,
.section--yellow .statute__label,
.section--orange .statute__label,
.section--green .deflist__source,
.section--blue .deflist__source,
.section--yellow .deflist__source,
.section--orange .deflist__source {
  color: var(--wt-black);
}

/* One statutory limb, with its plain-English restatement under it. */
.limb {
  padding-top: 32px;
  border-top: 1px solid var(--wt-rule);
  margin-bottom: 32px;
}

.limb:first-child {
  border-top: 0;
  padding-top: 0;
}

.limb__statutory {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 30px;
  margin-bottom: 16px;
}

.limb__plain {
  margin-bottom: 0;
}

.card-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  border: 2px solid var(--wt-black);
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.card__title {
  margin-bottom: 12px;
}

.card__body {
  font-size: 17px;
  line-height: 27px;
  margin-bottom: 20px;
}

.card__body:last-child {
  margin-bottom: 0;
}

.card__link {
  margin-top: auto;
}

/* Numbered process steps. The number is generated, so the markup stays an
   ordered list and the count cannot drift from the content. */
.steps {
  counter-reset: step;
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 64px;
  padding-bottom: 40px;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wt-black);
  color: var(--wt-white);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
}

.steps > li:last-child {
  padding-bottom: 0;
}

.step__title {
  margin-bottom: 12px;
  padding-top: 6px;
}

/* Glossary and document definitions. */
.deflist {
  margin: 0 0 40px;
}

/* The gap above the list is set with every other block component in
   section 15 ("Block rhythm"). */

.deflist__item {
  padding-top: 32px;
  border-top: 1px solid var(--wt-rule);
  margin-bottom: 32px;
}

.deflist__item:first-child {
  border-top: 0;
  padding-top: 0;
}

.deflist__term {
  margin-bottom: 12px;
}

/* The list of sources sets its terms a step down from a full h3. That size
   used to arrive through .cta-link, which no longer carries one. */
.deflist__term--sm {
  font-size: 17px;
  line-height: 26px;
}

.deflist__term .de {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--wt-grey-600);
}

.deflist__def > p:last-child {
  margin-bottom: 0;
}

/* The line under a definition that is part of the argument rather than a note
   about it — "Needed for cases 3 and 4" is a statement the reader acts on, so
   it is set as body text and not as the smaller grey .deflist__source. */
.deflist__needed {
  margin-top: 16px;
  margin-bottom: 0;
}

.deflist__source {
  font-family: var(--font-sans-book);
  font-size: 15px;
  line-height: 24px;
  color: var(--wt-grey-600);
  margin-top: 12px;
}

/* The FAQ page sets its questions as real headings rather than as accordion
   summaries — each one is a linkable anchor, which is the granularity an
   answer engine quotes. */
.qa {
  padding-top: 40px;
  border-top: 1px solid var(--wt-rule);
  margin-bottom: 40px;
}

.qa:first-child {
  border-top: 0;
  padding-top: 0;
}

.qa__question {
  margin-bottom: 20px;
}

.qa__permalink {
  margin-left: 12px;
  color: var(--wt-grey-300);
  font-family: var(--font-sans-book);
  font-weight: 400;
  font-size: 18px;
}

.qa__permalink:hover {
  color: var(--wt-red);
}

/* Footer sitemap. Every URL within one click of every page. */
.footer__sitemap {
  padding-top: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.footer__sitemap-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .footer__sitemap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer__sitemap-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer__sitemap h2 {
  font-family: var(--font-sans-book);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wt-grey-300);
  margin-bottom: 16px;
}

.footer__sitemap ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__sitemap li {
  margin-bottom: 10px;
  /* Set on the li too, so the line box is not held open by the inherited
     strut on the entries that wrap. */
  line-height: 20px;
}

.footer__sitemap a {
  font-family: var(--font-sans-book);
  font-size: 16px;
  /* Single spacing: the six case entries wrap to two lines, and the wider
     leading made each one read as two separate links. */
  line-height: 20px;
  color: var(--wt-white);
  border-bottom: 1px solid transparent;
}

.footer__sitemap a:hover {
  border-bottom-color: var(--wt-red);
}

/* A page-level call through to the contact block. */
/* --------------------------------------------------------------------------
   14. Relocation components — key facts, stat row, callout
   -------------------------------------------------------------------------- */

/* The "In short" box that opens most content pages: the page's answer in a
   handful of lines, inside the same 2px frame the cards use. Usually sits on
   the green band, so the fill stays white to lift it off the tint. */
.keyfacts {
  border: 2px solid var(--wt-black);
  background-color: var(--wt-white);
  padding: 24px 28px;
}

.keyfacts__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.keyfacts ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.keyfacts li {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 28px;
  padding: 10px 0;
  border-bottom: 1px solid var(--wt-rule);
}

.keyfacts li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* A row of headline numbers. Value in the big sans bold, label under it in
   the small book face — the same pairing the stage title and lead make. */
.stats {
  display: grid;
  gap: 20px;
  /* minmax(0, 1fr) rather than 1fr: a 34px "EUR 100,000" sets a min-content
     width the plain 1fr track refuses to go below, and the row then ran past
     the right-hand gutter on a 390px screen. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 32px;
}

@media (min-width: 900px) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Inside the 46rem measure four fixed tracks left a three-tile row on 169px
     columns, where "6 months" broke in two. Fit the row to the tiles it has. */
  .measure .stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.stat {
  border: 2px solid var(--wt-black);
  background-color: var(--wt-white);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.stat__value {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 34px;
  line-height: 40px;
}

/* On a phone two tiles share 335px. The display size does not fit that and
   the figure ended up wrapping onto two lines against both borders, so it
   steps down and the tile gives back a little of its padding. */
@media (max-width: 480px) {
  .stat {
    padding: 20px;
  }

  .stat__value {
    font-size: 28px;
    line-height: 34px;
  }
}

.stat__label {
  font-family: var(--font-sans-book);
  font-size: 15px;
  line-height: 24px;
}

/* A bordered aside for the one sentence a skimming reader must not miss —
   "Austria has no golden visa", "review the trust before you move". */
.callout {
  border: 2px solid var(--wt-black);
  background-color: var(--wt-white);
  padding: 20px 28px;
  margin: 0 0 32px;
}

.callout > p {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 28px;
  margin: 0 0 12px;
}

.callout > p:last-child {
  margin-bottom: 0;
}

/* The one line of the secondary footer bar that is text rather than a link:
   "General information, not legal advice." Set like the sitemap headings. */
.footer__note {
  font-family: var(--font-sans-book);
  font-size: 14px;
  line-height: 22px;
  color: var(--wt-grey-300);
  margin: 0;
}

/* --------------------------------------------------------------------------
   15. Block rhythm

   Every block component below carried a bottom margin and no top one, on the
   assumption that whatever preceded it — a section title with 40px under it —
   would provide the gap. On a content page it usually does not: the block
   follows a paragraph, the paragraph is a `p:last-child` with its margin
   zeroed, and the box's 2px border ended up sitting on the descenders of the
   line above. The pair rules that tried to fix this one at a time
   (`.prose + .table-wrap`, `.prose + .deflist`) also missed the common case,
   because the prose is wrapped in a `.measure` and the block's actual sibling
   is that wrapper.

   So the gap is stated once, on the block itself, and the exceptions are
   subtracted: a block that opens its container needs no gap above, and a block
   that closes a section needs none below because the band padding is already
   there. Adjacent margins collapse, so a block under a section title still
   gets that title's 40px rather than 40 + 32.
   -------------------------------------------------------------------------- */

.keyfacts,
.callout,
.card-grid,
.stats,
.steps,
.deflist,
.table-wrap,
.statute {
  margin-top: 32px;
}

/* The homepage stat row sits inside the section above it rather than opening
   one of its own, so it needs the gap the two section paddings used to provide
   between them, not the 32px a block normally takes. Stated here, after the
   rule above, because that one would otherwise win on source order. */
.stats--spaced {
  margin-top: calc(var(--section-space) * 0.9);
}

.keyfacts:first-child,
.callout:first-child,
.card-grid:first-child,
.stats:first-child,
.steps:first-child,
.deflist:first-child,
.table-wrap:first-child,
.statute:first-child {
  margin-top: 0;
}

/* A second title inside a band, below an earlier block. Without this it sat
   directly on the paragraph above it, with the full band padding above every
   other h2 on the page. Same value as .section__title--stacked, which this
   makes redundant rather than wrong. */
.section__title:not(:first-child) {
  margin-top: 48px;
}

/* Sub-headings inside running copy. The base reset zeroes every heading
   margin, so these read as a bold first line of the paragraph under them. */
.prose h3,
.prose h4 {
  margin-top: 40px;
  margin-bottom: 12px;
}

.prose h3:first-child,
.prose h4:first-child {
  margin-top: 0;
}

/* The band's own padding closes the section. A block's bottom margin on top of
   it made the section bottom-heavy — 152px under the last table against 120px
   above the first heading. */
.section > .container > :last-child,
.section > .container > .measure:last-child > :last-child,
.section > .container > .closing__inner:last-child > :last-child {
  margin-bottom: 0;
}