/* Vilmontech site styles. Load order: bootstrap.min.css → tokens.css → site.css (DEC-045). */

/* ---------- Bootstrap mapping (--bs-* from --vt-*) ---------- */
:root {
  --bs-body-font-family: var(--vt-font-body);
  --bs-body-font-size: var(--vt-text-md);
  --bs-body-line-height: var(--vt-leading-normal);
  --bs-body-color: var(--vt-color-ink);
  --bs-body-bg: var(--vt-color-surface);
  --bs-heading-color: var(--vt-color-ink);
  --bs-secondary-color: var(--vt-color-ink-muted);
  --bs-primary: var(--vt-color-brand);
  --bs-primary-rgb: 42, 68, 212;
  --bs-link-color: var(--vt-color-brand);
  --bs-link-color-rgb: 42, 68, 212;
  --bs-link-hover-color: var(--vt-color-brand-hover);
  --bs-link-hover-color-rgb: 31, 53, 171;
  --bs-border-color: var(--vt-color-border);
  --bs-border-radius: var(--vt-radius-md);
  --bs-border-radius-sm: var(--vt-radius-sm);
  --bs-border-radius-lg: var(--vt-radius-lg);
  --bs-border-radius-pill: var(--vt-radius-pill);
  --bs-box-shadow-sm: var(--vt-shadow-1);
  --bs-box-shadow: var(--vt-shadow-2);
  --bs-box-shadow-lg: var(--vt-shadow-3);
  --bs-form-invalid-color: var(--vt-color-danger);
  --bs-form-invalid-border-color: var(--vt-color-danger);
}

.btn-primary {
  --bs-btn-bg: var(--vt-color-brand);
  --bs-btn-border-color: var(--vt-color-brand);
  --bs-btn-hover-bg: var(--vt-color-brand-hover);
  --bs-btn-hover-border-color: var(--vt-color-brand-hover);
  --bs-btn-active-bg: var(--vt-color-brand-hover);
  --bs-btn-active-border-color: var(--vt-color-brand-hover);
  --bs-btn-disabled-bg: var(--vt-color-brand);
  --bs-btn-disabled-border-color: var(--vt-color-brand);
}

.form-control,
.form-select,
.form-check-input {
  border-color: var(--vt-color-border-strong);
}

/* ---------- Fonts (DEC-048, NFR-007): self-hosted, swap, metric fallbacks ---------- */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../lib/inter/files/inter-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk Variable";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../lib/space-grotesk/files/space-grotesk-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

/* Headings are bold: matched to Arial Bold from the font files (avg. width 0.5107 vs 0.5026 em; ascent .984, descent .292). */
@font-face {
  font-family: "Space Grotesk Fallback";
  font-weight: 300 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  size-adjust: 101.6%;
  ascent-override: 96.85%;
  descent-override: 28.74%;
  line-gap-override: 0%;
}

/* ---------- Base ---------- */
html {
  scroll-padding-top: calc(var(--vt-header-h) + var(--vt-space-4));
  /* Clears the consent banner and the 56 px WhatsApp button (WCAG 2.4.11). */
  scroll-padding-bottom: calc(var(--vt-banner-h) + var(--vt-space-7) + var(--vt-space-2) + var(--vt-space-5));
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-wrap: break-word;
}

main {
  flex: 1 0 auto;
}

/* The skip link's target: focused programmatically, not interactive. */
main:focus {
  outline: none;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--vt-font-heading);
  font-weight: var(--vt-weight-bold);
  line-height: var(--vt-leading-tight);
  letter-spacing: var(--vt-tracking-heading);
}

h1, .h1 { font-size: var(--vt-text-4xl); }
h2, .h2 { font-size: var(--vt-text-3xl); }
h3, .h3 { font-size: var(--vt-text-2xl); line-height: var(--vt-leading-snug); }
h4, .h4 { font-size: var(--vt-text-xl); line-height: var(--vt-leading-snug); }
h5, .h5 { font-size: var(--vt-text-lg); line-height: var(--vt-leading-snug); }
h6, .h6 { font-size: var(--vt-text-md); line-height: var(--vt-leading-snug); }

img {
  max-width: 100%;
  height: auto;
}

a,
.btn {
  transition-duration: var(--vt-duration-fast);
  transition-timing-function: var(--vt-ease);
}

/* ---------- Focus (WCAG 2.4.7, 2.4.13): one outline replaces Bootstrap's focus shadows ---------- */
:focus-visible,
.btn:focus-visible,
.page-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: var(--vt-focus-width) solid var(--vt-focus-color);
  outline-offset: var(--vt-focus-offset);
  box-shadow: none;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--vt-color-brand);
  box-shadow: none;
}

/* ---------- Layout ---------- */
.container {
  --bs-gutter-x: calc(var(--vt-gutter) * 2);
  max-width: var(--vt-container-max);
}

.vt-section {
  padding-block: var(--vt-section-y);
}

.vt-prose {
  max-width: var(--vt-measure);
}

/* ---------- Skip link (first focusable element, → main#content) ---------- */
.vt-skip-link {
  position: absolute;
  inset-block-start: var(--vt-space-2);
  inset-inline-start: var(--vt-space-4);
  z-index: var(--vt-z-dialog);
  padding: var(--vt-space-2) var(--vt-space-4);
  border-radius: var(--vt-radius-sm);
  background: var(--vt-color-brand);
  color: var(--vt-color-surface);
  font-weight: var(--vt-weight-semibold);
  text-decoration: none;
  transform: translateY(-200%);
}

.vt-skip-link:focus {
  transform: none;
}

/* ---------- Draft banner (Development only, FR-232) ---------- */
.vt-draft-banner {
  padding: var(--vt-space-2) var(--vt-gutter);
  background: var(--vt-color-warning-tint);
  color: var(--vt-color-warning);
  font-size: var(--vt-text-sm);
  font-weight: var(--vt-weight-semibold);
  text-align: center;
}

/* components: section */
.vt-section-alt {
  background: var(--vt-color-surface-alt);
}

.vt-section-brand {
  background: var(--vt-color-brand-tint);
}

.vt-section-dark {
  --bs-heading-color: var(--vt-color-on-dark);
  --bs-secondary-color: var(--vt-color-on-dark-muted);
  --vt-focus-color: var(--vt-focus-color-on-dark);
  background: var(--vt-color-surface-dark);
  color: var(--vt-color-on-dark);
}

/* Prose links (no class); components style their own links. */
.vt-section-dark a:not([class]) {
  color: var(--vt-color-link-on-dark);
}

.vt-section-dark a:not([class]):hover {
  color: var(--vt-color-on-dark);
}

.vt-container-narrow {
  max-width: calc(var(--vt-measure) + 2 * var(--vt-gutter));
}

.vt-section-header {
  max-width: var(--vt-measure);
  margin-block-end: var(--vt-space-6);
}

.vt-section-title {
  margin-block-end: 0;
}

.vt-eyebrow {
  margin-block-end: var(--vt-space-2);
  color: var(--vt-color-brand);
  font-size: var(--vt-text-sm);
  font-weight: var(--vt-weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.vt-section-dark .vt-eyebrow {
  color: var(--vt-color-link-on-dark);
}

.vt-lead {
  max-width: var(--vt-measure);
  margin-block: var(--vt-space-4) 0;
  color: var(--bs-secondary-color);
  font-size: var(--vt-text-lg);
}

/* components: page-header */
.vt-page-header {
  padding-block: var(--vt-space-7) var(--vt-space-6);
}

.vt-page-title {
  margin-block-end: 0;
}

.vt-page-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vt-space-3);
  margin-block-start: var(--vt-space-5);
}

/* components: icon */
.vt-icon {
  flex-shrink: 0;
  vertical-align: -0.125em;
}

/* components: button */
.btn {
  --bs-btn-font-weight: var(--vt-weight-semibold);
  --bs-btn-border-radius: var(--vt-radius-md);
}

.btn:has(> .vt-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vt-space-2);
}

.btn-secondary {
  --bs-btn-color: var(--vt-color-brand);
  --bs-btn-bg: var(--vt-color-brand-tint);
  --bs-btn-border-color: var(--vt-color-brand-tint);
  --bs-btn-hover-color: var(--vt-color-brand-hover);
  --bs-btn-hover-bg: var(--vt-color-brand-tint);
  --bs-btn-hover-border-color: var(--vt-color-brand);
  --bs-btn-active-color: var(--vt-color-brand-hover);
  --bs-btn-active-bg: var(--vt-color-brand-tint);
  --bs-btn-active-border-color: var(--vt-color-brand-hover);
  --bs-btn-disabled-color: var(--vt-color-brand);
  --bs-btn-disabled-bg: var(--vt-color-brand-tint);
  --bs-btn-disabled-border-color: var(--vt-color-brand-tint);
}

.btn-outline-primary {
  --bs-btn-color: var(--vt-color-brand);
  --bs-btn-border-color: var(--vt-color-brand);
  --bs-btn-hover-color: var(--vt-color-surface);
  --bs-btn-hover-bg: var(--vt-color-brand);
  --bs-btn-hover-border-color: var(--vt-color-brand);
  --bs-btn-active-color: var(--vt-color-surface);
  --bs-btn-active-bg: var(--vt-color-brand-hover);
  --bs-btn-active-border-color: var(--vt-color-brand-hover);
  --bs-btn-disabled-color: var(--vt-color-brand);
  --bs-btn-disabled-border-color: var(--vt-color-brand);
}

.btn-ghost {
  --bs-btn-color: var(--vt-color-ink);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--vt-color-ink);
  --bs-btn-hover-bg: var(--vt-color-surface-alt);
  --bs-btn-hover-border-color: var(--vt-color-border);
  --bs-btn-active-color: var(--vt-color-ink);
  --bs-btn-active-bg: var(--vt-color-surface-alt);
  --bs-btn-active-border-color: var(--vt-color-border-strong);
  /* Bootstrap's .btn has no disabled border default: unset, the border falls back to currentcolor. */
  --bs-btn-disabled-color: var(--vt-color-ink);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
}

.btn-link {
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-active-color: var(--bs-link-hover-color);
}

.vt-section-dark .btn-outline-primary,
.vt-section-dark .btn-ghost,
.vt-section-dark .btn-link {
  --bs-btn-color: var(--vt-color-on-dark);
  --bs-btn-hover-color: var(--vt-color-surface-dark);
  --bs-btn-hover-bg: var(--vt-color-on-dark);
  --bs-btn-hover-border-color: var(--vt-color-on-dark);
  --bs-btn-active-color: var(--vt-color-surface-dark);
  --bs-btn-active-bg: var(--vt-color-on-dark);
}

.vt-section-dark .btn-outline-primary {
  --bs-btn-border-color: var(--vt-color-on-dark);
}

.vt-section-dark .btn-link {
  --bs-btn-color: var(--vt-color-link-on-dark);
  --bs-btn-hover-color: var(--vt-color-on-dark);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
}

/* components: card */
.vt-card {
  --bs-card-color: var(--vt-color-ink);
  --bs-card-bg: var(--vt-color-surface);
  --bs-card-border-color: var(--vt-color-border);
  --bs-card-border-radius: var(--vt-radius-lg);
  --bs-card-inner-border-radius: var(--vt-radius-lg);
  --bs-card-spacer-x: var(--vt-space-5);
  --bs-card-spacer-y: var(--vt-space-5);
  --bs-heading-color: var(--vt-color-ink);
  --bs-secondary-color: var(--vt-color-ink-muted);
  height: 100%;
  overflow: hidden;
  box-shadow: var(--vt-shadow-1);
  transition: box-shadow var(--vt-duration-base) var(--vt-ease);
}

.vt-card:has(.stretched-link):hover {
  box-shadow: var(--vt-shadow-3);
}

/* The focus ring goes on the whole card, not on the title link (patterns: cards). */
.vt-card:has(.stretched-link:focus-visible) {
  outline: var(--vt-focus-width) solid var(--vt-focus-color);
  outline-offset: var(--vt-focus-offset);
}

.vt-card .stretched-link:focus-visible {
  outline: none;
}

.vt-card-image img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.vt-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vt-space-3);
  margin-block-end: var(--vt-space-4);
}

.vt-card-title {
  margin-block-end: var(--vt-space-2);
  font-size: var(--vt-text-xl);
}

.vt-card-title a {
  color: inherit;
  text-decoration: none;
}

.vt-card-title a:hover {
  color: var(--vt-color-brand);
  text-decoration: underline;
}

.vt-card-meta {
  margin-block-end: var(--vt-space-2);
  color: var(--vt-color-ink-muted);
  font-size: var(--vt-text-sm);
}

.vt-card-text {
  margin-block-end: 0;
  color: var(--vt-color-ink-muted);
}

.vt-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--vt-space-7);
  block-size: var(--vt-space-7);
  border-radius: var(--vt-radius-md);
}

.vt-icon-tile-brand {
  background: var(--vt-color-brand-tint);
  color: var(--vt-color-brand);
}

.vt-icon-tile-ai {
  background: var(--vt-color-ai-tint);
  color: var(--vt-color-ai);
}

/* components: card-grid */
.vt-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--vt-space-5);
}

@media (min-width: 768px) {
  .vt-cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vt-cols-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .vt-cols-lg-1 { grid-template-columns: minmax(0, 1fr); }
  .vt-cols-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vt-cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .vt-cols-xl-1 { grid-template-columns: minmax(0, 1fr); }
  .vt-cols-xl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-cols-xl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vt-cols-xl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* components: badge (also demo-label) */
.vt-badge {
  --bs-badge-padding-x: var(--vt-space-2);
  --bs-badge-padding-y: var(--vt-space-1);
  --bs-badge-font-size: var(--vt-text-xs);
  --bs-badge-font-weight: var(--vt-weight-semibold);
  --bs-badge-border-radius: var(--vt-radius-pill);
  white-space: normal;
}

.vt-badge-neutral { --bs-badge-color: var(--vt-color-ink-muted); background-color: var(--vt-color-surface-alt); }
.vt-badge-brand { --bs-badge-color: var(--vt-color-brand); background-color: var(--vt-color-brand-tint); }
.vt-badge-ai { --bs-badge-color: var(--vt-color-ai); background-color: var(--vt-color-ai-tint); }
.vt-badge-demo { --bs-badge-color: var(--vt-color-ink); background-color: var(--vt-color-highlight); }
.vt-badge-success { --bs-badge-color: var(--vt-color-success); background-color: var(--vt-color-success-tint); }

/* components: price-on-request */
.vt-price-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--vt-space-1) var(--vt-space-3);
  border: 1px solid var(--vt-color-brand);
  border-radius: var(--vt-radius-pill);
  background: var(--vt-color-surface);
  color: var(--vt-color-brand);
  font-size: var(--vt-text-sm);
  font-weight: var(--vt-weight-semibold);
}

/* components: chips */
.vt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-space-2);
  padding-inline-start: 0;
  list-style: none;
}

.vt-chip {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--vt-space-6);
  padding: var(--vt-space-1) var(--vt-space-3);
  border: 1px solid var(--vt-color-border);
  border-radius: var(--vt-radius-pill);
  background: var(--vt-color-surface);
  color: var(--vt-color-ink);
  font-size: var(--vt-text-sm);
}

a.vt-chip {
  border-color: var(--vt-color-border-strong);
  text-decoration: none;
}

a.vt-chip:hover {
  border-color: var(--vt-color-brand);
  background: var(--vt-color-brand-tint);
  color: var(--vt-color-brand-hover);
}

/* components: check-list (the mark is Lucide "check" as a data: mask, so no request) */
.vt-check-list {
  display: grid;
  gap: var(--vt-space-3);
  padding-inline-start: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .vt-check-list-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--vt-space-6);
  }
}

.vt-check-list > li {
  position: relative;
  padding-inline-start: calc(var(--vt-space-5) + var(--vt-space-2));
}

.vt-check-list > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc((1lh - var(--vt-space-5)) / 2);
  inline-size: var(--vt-space-5);
  block-size: var(--vt-space-5);
  background-color: var(--vt-color-success);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.vt-section-dark .vt-check-list > li::before {
  background-color: var(--vt-color-on-dark);
}

/* components: steps (numbered by CSS counters) */
.vt-steps {
  display: grid;
  gap: var(--vt-space-5);
  padding-inline-start: 0;
  list-style: none;
  counter-reset: vt-step;
}

.vt-step {
  position: relative;
  padding-inline-start: calc(var(--vt-space-6) + var(--vt-space-4));
  counter-increment: vt-step;
}

.vt-step::before {
  content: counter(vt-step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: grid;
  place-items: center;
  inline-size: var(--vt-space-6);
  block-size: var(--vt-space-6);
  border-radius: var(--vt-radius-pill);
  background: var(--vt-color-brand);
  color: var(--vt-color-surface);
  font-family: var(--vt-font-heading);
  font-size: var(--vt-text-sm);
  font-weight: var(--vt-weight-bold);
}

.vt-step-title {
  margin-block: var(--vt-space-1) var(--vt-space-2);
  font-size: var(--vt-text-lg);
}

.vt-step-text {
  color: var(--vt-color-ink-muted);
}

.vt-step-text > :last-child {
  margin-block-end: 0;
}

/* vertical: a line joins the markers */
.vt-steps-vertical > .vt-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--vt-space-6) / 2 - 1px);
  inset-block: calc(var(--vt-space-6) + var(--vt-space-1)) calc(var(--vt-space-1) - var(--vt-space-5));
  inline-size: 2px;
  background: var(--vt-color-border);
}

/* horizontal: one row on ≥ lg, vertical below */
@media (min-width: 992px) {
  .vt-steps-horizontal {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: var(--vt-space-6);
  }

  .vt-steps-horizontal > .vt-step {
    padding-inline-start: 0;
    padding-block-start: calc(var(--vt-space-6) + var(--vt-space-3));
  }
}

.vt-steps-compact {
  gap: var(--vt-space-3);
}

.vt-steps-compact > .vt-step {
  padding-inline-start: calc(var(--vt-space-5) + var(--vt-space-3));
}

.vt-steps-compact > .vt-step::before {
  inline-size: var(--vt-space-5);
  block-size: var(--vt-space-5);
  font-size: var(--vt-text-xs);
}

.vt-steps-compact .vt-step-title {
  margin-block: 0 var(--vt-space-1);
  font-size: var(--vt-text-md);
}

.vt-section-dark .vt-step::before {
  background: var(--vt-color-on-dark);
  color: var(--vt-color-surface-dark);
}

.vt-section-dark .vt-step-text {
  color: var(--vt-color-on-dark-muted);
}

/* components: faq (native details; the marker is Lucide "chevron-down" as a data: mask) */
.vt-faq {
  max-inline-size: var(--vt-measure);
  border-block-start: 1px solid var(--vt-color-border);
}

.vt-faq-item {
  border-block-end: 1px solid var(--vt-color-border);
}

.vt-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vt-space-4);
  padding-block: var(--vt-space-4);
  cursor: pointer;
  list-style: none;
}

.vt-faq-item > summary::-webkit-details-marker {
  display: none;
}

.vt-faq-item > summary::after {
  content: "";
  flex-shrink: 0;
  inline-size: var(--vt-space-5);
  block-size: var(--vt-space-5);
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--vt-duration-base) var(--vt-ease);
}

.vt-faq-item[open] > summary::after {
  transform: rotate(180deg);
}

.vt-faq-item > summary:hover .vt-faq-question {
  color: var(--vt-color-brand);
}

.vt-faq-question {
  margin: 0;
  font-size: var(--vt-text-lg);
}

.vt-faq-answer {
  padding-block-end: var(--vt-space-4);
  color: var(--vt-color-ink-muted);
}

.vt-faq-answer > :last-child {
  margin-block-end: 0;
}

.vt-section-dark .vt-faq,
.vt-section-dark .vt-faq-item {
  border-color: var(--vt-color-on-dark-muted);
}

.vt-section-dark .vt-faq-item > summary:hover .vt-faq-question {
  color: var(--vt-color-link-on-dark);
}

.vt-section-dark .vt-faq-answer {
  color: var(--vt-color-on-dark-muted);
}

/* components: alert */
.vt-alert {
  display: flex;
  gap: var(--vt-space-3);
  margin-block-end: var(--vt-space-4);
  padding: var(--vt-space-4);
  border: 1px solid;
  border-inline-start-width: 4px;
  border-radius: var(--vt-radius-md);
  color: var(--vt-color-ink);
}

/* The icon box is one line tall, so the icon sits centred on the first line. */
.vt-alert > .vt-icon {
  block-size: 1lh;
}

.vt-alert-body > :last-child {
  margin-block-end: 0;
}

.vt-alert-title {
  margin-block-end: var(--vt-space-1);
  font-weight: var(--vt-weight-semibold);
}

.vt-alert-info { border-color: var(--vt-color-brand); background: var(--vt-color-brand-tint); }
.vt-alert-info > .vt-icon { color: var(--vt-color-brand); }
.vt-alert-success { border-color: var(--vt-color-success); background: var(--vt-color-success-tint); }
.vt-alert-success > .vt-icon { color: var(--vt-color-success); }
.vt-alert-warning { border-color: var(--vt-color-warning); background: var(--vt-color-warning-tint); }
.vt-alert-warning > .vt-icon { color: var(--vt-color-warning); }
.vt-alert-danger { border-color: var(--vt-color-danger); background: var(--vt-color-danger-tint); }
.vt-alert-danger > .vt-icon { color: var(--vt-color-danger); }

/* components: empty-state */
.vt-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vt-space-4);
  padding: var(--vt-space-7) var(--vt-space-4);
  border: 1px dashed var(--vt-color-border-strong);
  border-radius: var(--vt-radius-lg);
  text-align: center;
}

.vt-empty-state-title {
  margin-block-end: var(--vt-space-2);
  font-family: var(--vt-font-heading);
  font-size: var(--vt-text-xl);
  font-weight: var(--vt-weight-bold);
}

.vt-empty-state-text {
  max-inline-size: var(--vt-measure);
  margin-inline: auto;
  color: var(--vt-color-ink-muted);
}

.vt-empty-state-body > :last-child {
  margin-block-end: 0;
}

.vt-empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vt-space-3);
}

/* components: pagination (Bootstrap .pagination themed; separate rounded items) */
.vt-pagination .pagination {
  --bs-pagination-color: var(--vt-color-brand);
  --bs-pagination-bg: var(--vt-color-surface);
  --bs-pagination-border-color: var(--vt-color-border-strong);
  --bs-pagination-border-radius: var(--vt-radius-sm);
  --bs-pagination-hover-color: var(--vt-color-brand-hover);
  --bs-pagination-hover-bg: var(--vt-color-brand-tint);
  --bs-pagination-hover-border-color: var(--vt-color-brand);
  --bs-pagination-focus-color: var(--vt-color-brand-hover);
  --bs-pagination-focus-bg: var(--vt-color-brand-tint);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: var(--vt-color-surface);
  --bs-pagination-active-bg: var(--vt-color-brand);
  --bs-pagination-active-border-color: var(--vt-color-brand);
  --bs-pagination-disabled-color: var(--vt-color-ink-subtle);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: transparent;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vt-space-2);
  margin-block: var(--vt-space-6) 0;
}

.vt-pagination .page-item .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vt-space-1);
  min-inline-size: calc(var(--vt-space-6) + var(--vt-space-3));
  margin-inline-start: 0;
  border-radius: var(--bs-pagination-border-radius);
}

/* components: filter-group (links, so filters work without JS) */
.vt-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--vt-space-2) var(--vt-space-3);
  margin-block-end: var(--vt-space-4);
}

.vt-filter-label {
  margin: 0;
  font-size: var(--vt-text-sm);
  font-weight: var(--vt-weight-semibold);
}

.vt-filter-group .vt-chips {
  margin: 0;
}

a.vt-chip[aria-current="true"] {
  border-color: var(--vt-color-brand);
  background: var(--vt-color-brand);
  color: var(--vt-color-surface);
}

a.vt-chip[aria-current="true"]:hover {
  border-color: var(--vt-color-brand-hover);
  background: var(--vt-color-brand-hover);
  color: var(--vt-color-surface);
}

/* List page (P4): filter bar, clear link and result count */
.vt-filters {
  margin-block-end: var(--vt-space-4);
}

.vt-filters-clear {
  margin: 0;
  font-size: var(--vt-text-sm);
}

.vt-result-count {
  margin-block-end: var(--vt-space-4);
  font-size: var(--vt-text-sm);
  color: var(--vt-color-ink-muted);
}

/* ---------- Forms (FR-106): fields, choices, errors, summary, submit, wizard markup ---------- */
.vt-field {
  margin-block-end: var(--vt-space-5);
}

.vt-required {
  margin-inline-start: var(--vt-space-1);
  color: var(--vt-color-danger);
}

.vt-field .form-text {
  margin-block: var(--vt-space-1) 0;
  color: var(--vt-color-ink-muted);
}

.vt-counter {
  text-align: end;
}

/* Error text: hidden while empty or valid; an icon + text, never colour alone (the mark is Lucide "circle-x" as a data: mask) */
.vt-field-error {
  display: none;
  margin-block-start: var(--vt-space-1);
  font-size: var(--vt-text-sm);
  color: var(--vt-color-danger);
}

.vt-field-error.invalid-feedback:not(:empty):not([hidden]) {
  display: flex;
  align-items: baseline;
  gap: var(--vt-space-1);
}

.vt-field-error.invalid-feedback::before {
  content: "";
  flex: none;
  inline-size: 1em;
  block-size: 1em;
  align-self: center;
  background-color: currentcolor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* choices: fieldset + legend + .form-check items in 1–3 columns */
.vt-choices > legend,
.vt-choices-group > legend {
  float: none;
  margin-block-end: var(--vt-space-2);
  font-size: var(--vt-text-md);
  font-weight: var(--vt-weight-medium);
}

.vt-choices-group {
  margin-block-start: var(--vt-space-4);
}

.vt-choices-group > legend {
  font-size: var(--vt-text-sm);
  font-weight: var(--vt-weight-semibold);
  color: var(--vt-color-ink-muted);
}

.vt-choices-list {
  display: grid;
  gap: var(--vt-space-2) var(--vt-space-5);
}

.vt-choices-list .form-check {
  margin: 0;
}

@media (min-width: 768px) {
  .vt-choices-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vt-choices-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* error summary: first in the form, focused after a failed submit */
.vt-error-summary {
  margin-block-end: var(--vt-space-5);
  padding: var(--vt-space-4) var(--vt-space-5);
  border: var(--vt-focus-width) solid var(--vt-color-danger);
  border-radius: var(--vt-radius-md);
  background: var(--vt-color-danger-tint);
}

.vt-error-summary-title {
  margin-block-end: var(--vt-space-2);
  font-size: var(--vt-text-lg);
}

.vt-error-summary-list {
  margin: 0;
  padding-inline-start: var(--vt-space-5);
}

.vt-error-summary-list a {
  color: var(--vt-color-danger);
  font-weight: var(--vt-weight-semibold);
}

/* honeypot: off-screen, not display:none (BR-009) */
.vt-hp {
  position: absolute;
  inset-inline-start: -100vw;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

.vt-turnstile {
  margin-block-end: var(--vt-space-4);
}

/* submit: spinner and busy text only while aria-busy */
.vt-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-2);
}

.vt-submit-spinner {
  display: none;
}

.vt-submit[aria-busy="true"] .vt-submit-spinner {
  display: inline-block;
}

/* collapsible groups (vt-choices collapsible): one disclosure per module category */
details.vt-choices-group {
  margin-block-start: 0;
  border-block-end: 1px solid var(--vt-color-border);
}

.vt-choices-group-summary {
  display: flex;
  align-items: center;
  min-block-size: calc(var(--vt-space-6) + var(--vt-space-3));
  font-weight: var(--vt-weight-semibold);
  cursor: pointer;
}

.vt-choices-group-set {
  padding-block-end: var(--vt-space-4);
}

/* wizard (FR-110; behaviour in wizard.js): without JS every step shows and the progress list stays hidden */
.vt-wizard-progress {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-space-2) var(--vt-space-4);
  margin-block-end: var(--vt-space-5);
  padding-inline-start: 0;
  list-style: none;
  counter-reset: vt-wizard;
  font-size: var(--vt-text-sm);
  color: var(--vt-color-ink-muted);
}

.vt-wizard-progress-item {
  counter-increment: vt-wizard;
}

.vt-wizard-progress-item::before {
  content: counter(vt-wizard) ". ";
}

.vt-wizard-progress-item[aria-current="step"] {
  color: var(--vt-color-brand);
  font-weight: var(--vt-weight-semibold);
}

.vt-wizard-progress-item.is-done {
  color: var(--vt-color-ink);
}

/* completed steps: buttons back, styled as links (target ≥ 24 px, WCAG 2.5.8) */
.vt-wizard-progress-button {
  min-block-size: var(--vt-space-5);
  padding: 0;
  border: 0;
  background: none;
  color: var(--vt-color-brand);
  font: inherit;
  text-decoration: underline;
}

.vt-wizard-progress-button:hover {
  color: var(--vt-color-brand-hover);
}

.vt-wizard-step-intro {
  margin-block-end: var(--vt-space-5);
  color: var(--vt-color-ink-muted);
}

.vt-wizard-step-intro > :last-child {
  margin-block-end: 0;
}

.vt-wizard-help {
  margin-block-start: var(--vt-space-6);
  padding: var(--vt-space-5);
  border-radius: var(--vt-radius-lg);
  background: var(--vt-color-surface-alt);
}

.vt-wizard-step + .vt-wizard-step {
  margin-block-start: var(--vt-space-6);
}

.vt-wizard-step > legend {
  float: none;
  margin-block-end: var(--vt-space-4);
  font-family: var(--vt-font-heading);
  font-size: var(--vt-text-xl);
}

.vt-wizard-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-space-3);
  margin-block-start: var(--vt-space-5);
}

/* ---------- Site chrome (T-013): header, menus, breadcrumbs, footer, WhatsApp, closing CTA ---------- */
/* Targets: 44 px = space-6 + space-3; the WhatsApp button 56 px = space-7 + space-2 (patterns: responsive rules). */
.vt-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--vt-z-header);
  background: var(--vt-color-surface);
  border-block-end: 1px solid var(--vt-color-border);
}

.vt-header-bar {
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
  min-height: var(--vt-header-h);
}

.vt-header-logo {
  display: inline-flex;
  flex-shrink: 0;
  margin-inline-end: auto;
  border-radius: var(--vt-radius-sm);
}

.vt-header-logo img {
  display: block;
  width: auto;
  height: calc(var(--vt-space-6) + var(--vt-space-2));
}

.vt-header-actions {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
}

.vt-header-desktop,
.vt-nav {
  display: none;
}

.vt-menu-toggle {
  min-height: calc(var(--vt-space-6) + var(--vt-space-3));
  padding-inline: var(--vt-space-3);
}

.vt-header-cta-compact {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--vt-space-6) + var(--vt-space-3));
}

/* Desktop disclosure menus */
.vt-nav-groups {
  display: flex;
  gap: var(--vt-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vt-nav-group {
  position: relative;
}

.vt-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-1);
  min-height: calc(var(--vt-space-6) + var(--vt-space-3));
  padding-inline: var(--vt-space-3);
  border: 0;
  border-radius: var(--vt-radius-sm);
  background: transparent;
  color: var(--vt-color-ink);
  font-weight: var(--vt-weight-medium);
}

.vt-nav-toggle:hover,
.vt-nav-toggle[aria-expanded="true"] {
  background: var(--vt-color-brand-tint);
  color: var(--vt-color-brand);
}

.vt-nav-toggle[aria-expanded="true"] .vt-icon {
  transform: rotate(180deg);
}

.vt-nav-toggle .vt-icon {
  transition: transform var(--vt-duration-fast) var(--vt-ease);
}

.vt-nav-list {
  position: absolute;
  inset-block-start: calc(100% + var(--vt-space-2));
  inset-inline-start: 0;
  min-width: calc(var(--vt-space-9) * 2.5);
  margin: 0;
  padding: var(--vt-space-2);
  list-style: none;
  background: var(--vt-color-surface);
  border: 1px solid var(--vt-color-border);
  border-radius: var(--vt-radius-md);
  box-shadow: var(--vt-shadow-3);
}

.vt-nav-link {
  display: flex;
  align-items: center;
  min-height: calc(var(--vt-space-6) + var(--vt-space-3));
  padding-inline: var(--vt-space-3);
  border-radius: var(--vt-radius-sm);
  color: var(--vt-color-ink);
  text-decoration: none;
}

.vt-nav-list .vt-nav-link {
  white-space: nowrap;
}

.vt-nav-link:hover {
  background: var(--vt-color-brand-tint);
  color: var(--vt-color-brand);
}

.vt-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--vt-space-6) + var(--vt-space-3));
  min-height: calc(var(--vt-space-6) + var(--vt-space-3));
  border-radius: var(--vt-radius-sm);
  color: inherit;
}

.vt-icon-link:hover {
  color: var(--vt-color-brand);
}

.vt-contact-icons {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Mobile panel (below lg): full height under the sticky header */
.vt-menu-panel {
  position: fixed;
  inset: var(--vt-header-h) 0 0;
  z-index: var(--vt-z-header);
  overflow-y: auto;
  padding: var(--vt-space-5) var(--vt-gutter) var(--vt-space-7);
  background: var(--vt-color-surface);
  border-block-start: 1px solid var(--vt-color-border);
}

.vt-menu-group + .vt-menu-group {
  margin-block-start: var(--vt-space-5);
}

.vt-menu-heading {
  margin-block-end: var(--vt-space-2);
  color: var(--vt-color-ink-muted);
  font-family: var(--vt-font-body);
  font-size: var(--vt-text-sm);
  font-weight: var(--vt-weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.vt-menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vt-menu-panel .vt-contact-list,
.vt-menu-panel .vt-lang {
  margin-block-start: var(--vt-space-5);
}

.vt-scroll-lock {
  overflow: hidden;
}

@media (min-width: 992px) {
  .vt-nav,
  .vt-header-desktop {
    display: flex;
    align-items: center;
    gap: var(--vt-space-3);
  }

  .vt-header-logo {
    margin-inline-end: var(--vt-space-4);
  }

  .vt-header-actions {
    margin-inline-start: auto;
  }

  .vt-header-cta-compact,
  .vt-menu-toggle,
  .vt-menu-panel {
    display: none !important;
  }
}

/* Language switcher "PT | EN" */
.vt-lang {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  font-size: var(--vt-text-sm);
  font-weight: var(--vt-weight-semibold);
}

.vt-lang-current {
  color: var(--vt-color-ink);
}

.vt-lang-sep {
  color: var(--vt-color-ink-subtle);
}

.vt-lang-link {
  display: inline-flex;
  align-items: center;
  min-width: calc(var(--vt-space-6) + var(--vt-space-3));
  min-height: calc(var(--vt-space-6) + var(--vt-space-3));
  justify-content: center;
  border-radius: var(--vt-radius-sm);
  color: var(--vt-color-brand);
}

/* Contact list (page and footer variants) */
.vt-contact-list {
  display: grid;
  gap: var(--vt-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vt-contact-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-2);
  min-height: calc(var(--vt-space-6) + var(--vt-space-3));
  max-width: 100%;
  color: inherit;
}

/* A long e-mail address wraps instead of widening the page at 320 px (NFR-013). */
.vt-contact-list a > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Breadcrumbs (FR-023): under the header, above the H1 */
.vt-breadcrumbs .breadcrumb {
  --bs-breadcrumb-divider-color: var(--vt-color-ink-subtle);
  --bs-breadcrumb-item-active-color: var(--vt-color-ink-muted);
  margin: 0;
  padding-block: var(--vt-space-4) 0;
  font-size: var(--vt-text-sm);
}

/* Footer (dark band) */
.vt-footer {
  --vt-focus-color: var(--vt-focus-color-on-dark);
  margin-block-start: auto;
  /* The bottom padding keeps the last line clear of the WhatsApp button. */
  padding-block: var(--vt-space-8) calc(var(--vt-space-8) + var(--vt-space-6));
  background: var(--vt-color-surface-dark);
  color: var(--vt-color-on-dark);
  font-size: var(--vt-text-sm);
}

.vt-footer a {
  color: var(--vt-color-on-dark);
}

.vt-footer a:hover {
  color: var(--vt-color-link-on-dark);
}

.vt-footer-main {
  display: grid;
  gap: var(--vt-space-6);
}

.vt-footer-logo {
  display: inline-flex;
  border-radius: var(--vt-radius-sm);
}

.vt-footer-tagline {
  margin-block: var(--vt-space-4);
  color: var(--vt-color-on-dark-muted);
}

.vt-footer-heading {
  margin-block-end: var(--vt-space-3);
  color: var(--vt-color-on-dark);
  font-family: var(--vt-font-body);
  font-size: var(--vt-text-sm);
  font-weight: var(--vt-weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.vt-footer-list {
  display: grid;
  gap: var(--vt-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vt-footer-list a,
.vt-footer-legal a,
.vt-footer-button {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--vt-space-5) + var(--vt-space-1));
}

.vt-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vt-space-1) var(--vt-space-3);
  margin: var(--vt-space-4) 0 0;
  padding: 0;
  list-style: none;
}

/* Icons line up with the column edge; the target stays 44 px wide. */
.vt-social .vt-icon-link {
  justify-content: flex-start;
}

.vt-footer-bottom {
  display: grid;
  gap: var(--vt-space-4);
  margin-block-start: var(--vt-space-7);
  padding-block-start: var(--vt-space-5);
  border-block-start: 1px solid var(--vt-color-border-strong);
  color: var(--vt-color-on-dark-muted);
}

.vt-footer-bottom p {
  margin: 0;
}

.vt-footer-legal,
.vt-legal-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vt-space-1) var(--vt-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vt-legal-identity li + li::before {
  content: "·" / "";
  margin-inline-end: var(--vt-space-4);
}

.vt-footer-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--vt-color-on-dark);
  text-decoration: underline;
}

.vt-footer-button:hover {
  color: var(--vt-color-link-on-dark);
}

.vt-complaints-book {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vt-space-3);
}

.vt-footer .vt-lang-current {
  color: var(--vt-color-on-dark);
}

.vt-footer .vt-lang-sep {
  color: var(--vt-color-on-dark-muted);
}

.vt-footer .vt-lang-link {
  color: var(--vt-color-link-on-dark);
}

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

  .vt-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 992px) {
  .vt-footer-main {
    grid-template-columns: 2fr repeat(3, 1fr);
  }

  .vt-footer-brand {
    grid-column: auto;
  }
}

/* Floating WhatsApp button (FR-140): clears the consent banner through --vt-banner-h (T-019) */
.vt-whatsapp-fab {
  position: fixed;
  inset-inline-end: var(--vt-space-4);
  inset-block-end: calc(var(--vt-space-4) + var(--vt-banner-h));
  z-index: var(--vt-z-fab);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--vt-space-7) + var(--vt-space-2));
  height: calc(var(--vt-space-7) + var(--vt-space-2));
  border-radius: var(--vt-radius-pill);
  background: var(--vt-color-whatsapp);
  color: var(--vt-color-surface);
  box-shadow: var(--vt-shadow-3);
}

.vt-whatsapp-fab:hover {
  color: var(--vt-color-surface);
}

/* Consent banner and settings dialog (FR-200, patterns: consent; behaviour in consent.js). The banner is non-modal:
   no overlay, the page stays usable, and the page end gains --vt-banner-h so nothing stays hidden under it. */
body {
  padding-block-end: var(--vt-banner-h);
}

.vt-consent-banner {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--vt-z-banner);
  max-block-size: 100%;
  overflow-y: auto;
  padding-block: var(--vt-space-4);
  border-block-start: 1px solid var(--vt-color-border);
  background: var(--vt-color-surface);
  box-shadow: var(--vt-shadow-3);
}

.vt-consent-banner-inner {
  display: flex;
  flex-direction: column;
  gap: var(--vt-space-4);
}

.vt-consent-banner-text {
  max-inline-size: var(--vt-measure);
  font-size: var(--vt-text-sm);
}

.vt-consent-banner-text p {
  margin: 0;
}

.vt-consent-title {
  margin-block-end: var(--vt-space-1);
  font-family: var(--vt-font-heading);
  font-size: var(--vt-text-lg);
  font-weight: var(--vt-weight-bold);
  line-height: var(--vt-leading-snug);
}

/* Equal columns, so the three choices always share one size (FR-200). */
.vt-consent-actions {
  display: grid;
  gap: var(--vt-space-2);
}

@media (min-width: 576px) {
  .vt-consent-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .vt-consent-banner-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .vt-consent-banner .vt-consent-actions {
    flex: none;
  }
}

.vt-consent-dialog {
  inline-size: min(100% - 2 * var(--vt-gutter), 34rem);
  max-block-size: calc(100% - 2 * var(--vt-space-4));
  padding: var(--vt-space-5);
  border: 0;
  border-radius: var(--vt-radius-lg);
  background: var(--vt-color-surface);
  color: var(--vt-color-ink);
  box-shadow: var(--vt-shadow-3);
}

.vt-consent-dialog::backdrop {
  background: color-mix(in srgb, var(--vt-color-ink) 50%, transparent);
}

.vt-consent-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vt-space-4);
  margin-block-end: var(--vt-space-2);
}

.vt-consent-dialog .vt-consent-title {
  margin-block: var(--vt-space-2) 0;
  font-size: var(--vt-text-xl);
}

/* 44 px target (space-6 + space-3), pulled into the padding so the title keeps its line. */
.vt-consent-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: calc(var(--vt-space-6) + var(--vt-space-3));
  block-size: calc(var(--vt-space-6) + var(--vt-space-3));
  margin: calc(-1 * var(--vt-space-2));
  padding: 0;
  border: 0;
  border-radius: var(--vt-radius-sm);
  background: transparent;
  color: var(--vt-color-ink);
}

.vt-consent-close:hover {
  background: var(--vt-color-surface-alt);
}

.vt-consent-category {
  padding-block: var(--vt-space-3);
  border-block-start: 1px solid var(--vt-color-border);
}

.vt-consent-category .form-check {
  margin: 0;
}

.vt-consent-category .form-check-label {
  font-weight: var(--vt-weight-semibold);
}

/* "Necessary" is always on: the switch looks disabled, its label stays fully legible. */
.vt-consent-category .form-check-input:disabled ~ .form-check-label {
  opacity: 1;
}

.vt-consent-category .form-text {
  margin: var(--vt-space-1) 0 0;
  color: var(--vt-color-ink-muted);
}

.vt-consent-dialog .vt-consent-actions {
  margin-block-start: var(--vt-space-4);
}

/* Closing CTA band (FR-024) */
.vt-closing-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-space-3);
}

/* Detail page (P3): main column + sticky aside on >= lg */
.vt-detail {
  padding-block: var(--vt-section-y);
}

.vt-detail-main > * + * {
  margin-block-start: var(--vt-space-7);
}

.vt-detail-main .vt-section-title {
  margin-block-end: var(--vt-space-4);
}

.vt-detail-main h3 {
  margin-block: var(--vt-space-4) var(--vt-space-2);
}

.vt-detail-aside {
  position: sticky;
  inset-block-start: calc(var(--vt-header-h) + var(--vt-space-4));
  padding: var(--vt-space-5);
  border: 1px solid var(--vt-color-border);
  border-radius: var(--vt-radius-lg);
  background: var(--vt-color-surface);
  box-shadow: var(--vt-shadow-1);
}

/* Case study (P5): client logo and screenshots gallery */
.vt-case-client img {
  max-block-size: calc(var(--vt-space-7) + var(--vt-space-4));
  inline-size: auto;
}

.vt-screenshots {
  display: grid;
  gap: var(--vt-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vt-screenshots img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--vt-color-border);
  border-radius: var(--vt-radius-lg);
}

.vt-detail-aside-actions {
  display: grid;
  gap: var(--vt-space-3);
  margin-block-start: var(--vt-space-5);
}

/* Related items (FR-180): the optional link under the cards */
.vt-related-more {
  margin-block: var(--vt-space-4) 0;
}

/* Integration page (P3): the brand's logo (BR-019: only when allowed) and partner badge */
.vt-integration-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vt-space-4);
}

.vt-integration-logo {
  block-size: var(--vt-space-7);
  inline-size: auto;
}

/* Form page (P6): explanation column + form card */
.vt-form-page {
  padding-block-end: var(--vt-space-8);
}

.vt-form-card {
  padding: var(--vt-space-5);
  border: 1px solid var(--vt-color-border);
  border-radius: var(--vt-radius-lg);
  background: var(--vt-color-surface);
  box-shadow: var(--vt-shadow-1);
}

.vt-contact-facts {
  display: grid;
  gap: var(--vt-space-2);
  margin: var(--vt-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.vt-contact-facts li {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
}

.vt-contact-facts .vt-icon,
.vt-contact-list-page .vt-icon {
  color: var(--vt-color-brand);
}

.vt-contact-promise {
  margin-block-start: var(--vt-space-4);
  font-weight: 600;
}

.vt-form-page-actions,
.vt-message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-space-3);
  margin-block-start: var(--vt-space-5);
}

/* Message page (P8): centred narrow card */
.vt-message {
  max-width: var(--vt-measure);
  margin: var(--vt-space-7) auto var(--vt-space-8);
  padding: var(--vt-space-6) var(--vt-space-5);
  border: 1px solid var(--vt-color-border);
  border-radius: var(--vt-radius-lg);
  background: var(--vt-color-surface);
  box-shadow: var(--vt-shadow-1);
}

.vt-message > .vt-icon {
  display: block;
  width: var(--vt-space-6);
  height: var(--vt-space-6);
  margin-block-end: var(--vt-space-4);
  color: var(--vt-color-success);
}

.vt-message-info > .vt-icon {
  color: var(--vt-color-brand);
}

.vt-message-warning > .vt-icon {
  color: var(--vt-color-warning);
}

.vt-message .vt-lead {
  margin-block: var(--vt-space-3) var(--vt-space-5);
}

/* How we work (FR-048): section intros, engagement-model terms, maintenance plans */
.vt-section-intro {
  margin-block: calc(-1 * var(--vt-space-3)) var(--vt-space-6);
}

.vt-section-intro > :last-child {
  margin-block-end: 0;
}

.vt-terms {
  margin-block-end: 0;
}

.vt-terms dt {
  margin-block-start: var(--vt-space-3);
  font-size: var(--vt-text-sm);
  font-weight: var(--vt-weight-semibold);
}

.vt-terms dd {
  margin-block-end: 0;
  color: var(--vt-color-ink-muted);
}

.vt-plan .card-body {
  display: flex;
  flex-direction: column;
}

.vt-plan-price {
  margin-block: auto 0;
  padding-block-start: var(--vt-space-5);
}

/* About (FR-049, FR-053): discipline cards, technologies, founder, proof metrics, reviews, locations */
.vt-card-text > :last-child {
  margin-block-end: 0;
}

.vt-technologies ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-space-2);
  padding-inline-start: 0;
  list-style: none;
}

.vt-technologies li {
  margin: 0;
  padding: var(--vt-space-1) var(--vt-space-3);
  border: 1px solid var(--vt-color-border);
  border-radius: var(--vt-radius-pill);
  background: var(--vt-color-surface);
  font-size: var(--vt-text-sm);
}

.vt-founder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-space-6);
  align-items: flex-start;
}

.vt-founder-photo img {
  inline-size: 10rem;
  block-size: auto;
  border-radius: var(--vt-radius-lg);
}

.vt-founder-body {
  flex: 1 1 20rem;
  max-inline-size: var(--vt-measure);
}

.vt-founder-name {
  margin-block-end: var(--vt-space-1);
}

.vt-founder-role {
  margin-block-end: var(--vt-space-4);
  color: var(--vt-color-ink-muted);
}

.vt-founder-link {
  display: inline-flex;
  gap: var(--vt-space-2);
  align-items: center;
}

.vt-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vt-space-4);
  margin-block-end: var(--vt-space-4);
}

.vt-metric {
  display: flex;
  flex-direction: column;
  padding: var(--vt-space-5);
  border: 1px solid var(--vt-color-border);
  border-radius: var(--vt-radius-lg);
  background: var(--vt-color-surface);
  text-align: center;
}

.vt-metric-label {
  font-size: var(--vt-text-sm);
  font-weight: var(--vt-weight-medium);
  color: var(--vt-color-ink-muted);
}

.vt-metric-value {
  margin-block: var(--vt-space-1) 0;
  font-family: var(--vt-font-heading);
  font-size: var(--vt-text-3xl);
  font-weight: var(--vt-weight-bold);
  line-height: var(--vt-leading-tight);
  color: var(--vt-color-success);
}

.vt-metrics-note,
.vt-review-note {
  margin-block: var(--vt-space-4) 0;
  font-size: var(--vt-text-sm);
  color: var(--vt-color-ink-muted);
}

.vt-review {
  margin: 0;
}

.vt-review-text {
  margin-block-end: 0;
}

.vt-review-text > :last-child {
  margin-block-end: 0;
}

.vt-review-meta {
  display: flex;
  flex-direction: column;
  gap: var(--vt-space-1);
  padding: 0 var(--vt-space-5) var(--vt-space-5);
  font-size: var(--vt-text-sm);
}

.vt-review-name {
  font-weight: var(--vt-weight-semibold);
}

.vt-review-company,
.vt-review-source {
  color: var(--vt-color-ink-muted);
}

.vt-locations {
  display: flex;
  gap: var(--vt-space-3);
  align-items: flex-start;
}

.vt-locations > .vt-icon {
  flex: none;
  margin-block-start: var(--vt-space-1);
  color: var(--vt-color-brand);
}

.vt-locations .vt-prose > :last-child {
  margin-block-end: 0;
}

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

  .vt-founder-photo img {
    inline-size: 15rem;
  }
}

/* Home (FR-040): hero with the decorative vt-visual on >= lg (hub headers use it too); the long headline uses the h2 size */
.vt-hero {
  padding-block: var(--vt-space-7) var(--vt-space-8);
}

.vt-hero-title {
  margin-block-end: 0;
  font-size: var(--vt-text-3xl);
}

.vt-visual,
.vt-visual img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* Blog post (P5, FR-051): category badge, meta line, cover, author box, related services */
.vt-article-header {
  padding-block: var(--vt-space-7) var(--vt-space-5);
}

.vt-article-category {
  margin-block-end: var(--vt-space-3);
}

.vt-article-category a {
  text-decoration: none;
}

.vt-article-category a:hover .vt-badge {
  text-decoration: underline;
}

.vt-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-space-1) var(--vt-space-4);
  margin-block: var(--vt-space-4) 0;
  color: var(--vt-color-ink-muted);
  font-size: var(--vt-text-sm);
}

.vt-article-cover img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--vt-radius-lg);
}

.vt-article-body {
  margin-block: var(--vt-space-6);
}

.vt-author-box {
  margin-block: var(--vt-space-6);
  padding: var(--vt-space-5);
  border: 1px solid var(--vt-color-border);
  border-radius: var(--vt-radius-lg);
  background: var(--vt-color-surface-alt);
}

.vt-author-label {
  margin-block-end: var(--vt-space-1);
  color: var(--vt-color-ink-muted);
  font-size: var(--vt-text-sm);
}

.vt-author-name {
  margin-block-end: var(--vt-space-2);
  font-size: var(--vt-text-lg);
  font-weight: var(--vt-weight-semibold);
}

.vt-author-line {
  margin: 0;
  color: var(--vt-color-ink-muted);
}

.vt-article-services {
  margin-block: var(--vt-space-6) var(--vt-space-7);
}

.vt-article-services .vt-section-title {
  margin-block-end: var(--vt-space-4);
}

/* Legal pages (P9, FR-055): last-updated line, identity block, contents list, prose tables */
.vt-legal-updated {
  margin: 0;
  color: var(--vt-color-ink-muted);
  font-size: var(--vt-text-sm);
}

.vt-legal .vt-legal-identity {
  margin-block-end: var(--vt-space-6);
  color: var(--vt-color-ink-muted);
  font-size: var(--vt-text-sm);
}

.vt-legal-contents {
  max-width: var(--vt-measure);
  margin-block-end: var(--vt-space-6);
  padding: var(--vt-space-4) var(--vt-space-5);
  border: 1px solid var(--vt-color-border);
  border-radius: var(--vt-radius-md);
  background: var(--vt-color-surface-alt);
}

.vt-legal-contents-title {
  margin-block-end: var(--vt-space-2);
  font-weight: var(--vt-weight-semibold);
}

.vt-legal-contents ol {
  margin: 0;
  padding-inline-start: var(--vt-space-5);
}

.vt-legal-contents li + li {
  margin-block-start: var(--vt-space-1);
}

.vt-legal .vt-prose h2 {
  margin-block-start: var(--vt-space-7);
}

.vt-legal .vt-prose > :first-child {
  margin-block-start: 0;
}

.vt-legal .table-responsive {
  margin-block-end: var(--vt-space-5);
}

/* ---------- Reduced motion (NFR-013) ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}