/*
 * VELYX website: page-specific layout only.
 *
 * Brand tokens and reusable components belong in velyx-brand.css;
 * Bootstrap theming in velyx-bootstrap.css; the approved light theme in
 * velyx-theme.css. Use var(--velyx-*) / var(--color-*) tokens here,
 * never hex values.
 *
 * One block per section partial (Views/Sections/_*.cshtml): homepage
 * sections in page order, then the subpage sections (docs/pages.md §3).
 */

/* ============================================================
   SHARED
   ============================================================ */

.section-intro {
  max-width: 45rem;
}

.section-intro--wide {
  max-width: 51.25rem;
}

.diagram-caption {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-family-monospace);
  font-size: 0.75rem;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ============================================================
   HEADER (Pages/Shared/_Header.cshtml)
   ============================================================ */

/* In-page links (#lifecycle…) and focused elements stop below the sticky header. */
html {
  scroll-padding-top: 6rem;
}

/* Sticky (Bootstrap .sticky-top); site.js adds .is-scrolled once the page moves, for a clearer but still light separation. */
.site-header {
  border-bottom: 1px solid var(--color-border-tint);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  transition:
    box-shadow var(--transition-standard),
    border-color var(--transition-standard);
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-border-control);
  box-shadow: var(--shadow-sm);
}

/* The open mobile menu and its backdrop must sit above the sticky header's stacking context. */
.site-header:has(.offcanvas.show, .offcanvas.showing) {
  z-index: var(--bs-offcanvas-zindex, 1045);
}

.site-header .navbar {
  --bs-navbar-padding-y: 0.875rem;
}

/* Mobile menu: Bootstrap offcanvas below lg; inline navbar from lg up. */
.site-nav-offcanvas {
  --bs-offcanvas-width: min(22rem, 88vw);
  --bs-offcanvas-bg: var(--color-surface);
}

@media (max-width: 991.98px) {
  .site-nav-offcanvas .nav-link {
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--color-border-tint-subtle);
  }
}

/* Current and hovered links: an accent line that grows from the left (lg up, where the links are inline). */
@media (min-width: 992px) {
  .site-header .nav-link {
    position: relative;
  }

  .site-header .nav-link::after {
    position: absolute;
    right: var(--bs-navbar-nav-link-padding-x);
    bottom: 0.375rem;
    left: var(--bs-navbar-nav-link-padding-x);
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    content: "";
    scale: 0 1;
    transform-origin: left;
    transition: scale var(--transition-standard);
  }

  .site-header .nav-link:hover::after,
  .site-header .nav-link.active::after {
    scale: 1 1;
  }
}

/* Logo from docs/design (wwwroot/images/brand/velyx-logo.svg); the link keeps a 44px+ target. */
.site-logo-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding-block: 0;
}

.site-logo {
  display: block;
  width: auto;
  height: 3.25rem;
}

@media (max-width: 575.98px) {
  .site-logo {
    height: 2.75rem;
  }
}

/* The footer logo (_Footer.cshtml) stays the same size on every screen; declared after the media query to win. */
.site-logo--footer {
  height: 3.5rem;
}

.site-header .nav-link {
  font-size: 0.9375rem;
}

/* ============================================================
   HERO (_Hero.cshtml)
   ============================================================ */

.hero {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 7vw, 6.5rem);
  background: var(--color-tint);
}

.hero__lead {
  max-width: 36.25rem;
}

.stack-layer {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border-tint-subtle);
  border-radius: var(--radius-xs);
  background: var(--color-tint-subtle);
}

.stack-layer__index {
  width: 1.75rem;
  flex-shrink: 0;
  color: var(--color-accent);
  font-family: var(--font-family-monospace);
  font-size: 0.75rem;
}

.stack-layer__name {
  flex: 1;
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.stack-layer__tag {
  color: var(--color-text-muted);
  font-family: var(--font-family-monospace);
  font-size: 0.6875rem;
  text-transform: uppercase;
}

.stack-layer--control {
  border: 1px dashed var(--color-accent);
  background: var(--color-tint-highlight);
}

.stack-layer--control .stack-layer__tag {
  color: var(--color-accent-hover);
}

.stack-layer--foundation {
  border-color: color-mix(in srgb, var(--velyx-mineral-teal) 30%, var(--velyx-white));
  background: var(--color-tint-teal-highlight);
}

.stack-layer--foundation .stack-layer__index,
.stack-layer--foundation .stack-layer__tag {
  color: var(--color-text-teal);
}

.stack-cell {
  height: 100%;
  padding: 0.875rem 0.75rem;
  border: 1px solid var(--color-border-tint-subtle);
  border-radius: var(--radius-xs);
  background: var(--color-tint-subtle);
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
}

.stack-cell--active {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 575.98px) {
  .hero .velyx-panel {
    padding: var(--space-3);
  }

  .stack-layer {
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .stack-layer__index {
    width: 1.25rem;
  }
}

/* ============================================================
   PROOF BAR (_ProofBar.cshtml)
   ============================================================ */

.proof-bar {
  padding-block: 1.75rem;
  border-block: 1px solid var(--color-border-tint);
  background: var(--color-surface);
}

.proof-item {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.25rem;
}

.proof-item__value {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-family-display);
  font-size: 1.75rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

.proof-item__label {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: var(--font-weight-regular);
}

/* ============================================================
   VALUE PROPOSITION (_ValueProposition.cshtml)
   ============================================================ */

.pillar-card {
  padding: 1.125rem;
  border: 1px solid var(--color-border-tint-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.pillar-card__title {
  margin: 0;
  font-size: 1.125rem;
}

.pillar-card__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* ============================================================
   PRACTICES (_Practices.cshtml)
   ============================================================ */

.practice-card {
  display: flex;
  min-height: 16.25rem;
  flex-direction: column;
  gap: 0.875rem;
  padding: 2rem;
  border: 1px solid var(--practice-border);
  border-top: 4px solid var(--practice-accent);
  border-radius: var(--radius-card);
  background: var(--practice-bg);
  color: var(--color-text);
  text-decoration: none;
  transition:
    box-shadow var(--transition-standard),
    translate var(--transition-standard);
}

.practice-card:hover {
  color: var(--color-text);
  box-shadow: var(--shadow-tint);
  translate: 0 -2px;
}

.practice-card:hover .practice-card__cta {
  text-decoration: underline;
}

.practice-card--technology {
  --practice-accent: var(--color-accent);
  --practice-bg: var(--color-tint-medium);
  --practice-border: color-mix(in srgb, var(--color-accent) 18%, var(--velyx-white));
  --practice-label: var(--color-accent-hover);
}

.practice-card--architecture {
  --practice-accent: var(--velyx-architectural-navy);
  --practice-bg: var(--color-tint-navy);
  --practice-border: color-mix(in srgb, var(--velyx-architectural-navy) 14%, var(--velyx-white));
  --practice-label: var(--color-accent-hover);
}

.practice-card--transformation {
  --practice-accent: var(--velyx-mineral-teal);
  --practice-bg: var(--color-tint-teal);
  --practice-border: color-mix(in srgb, var(--velyx-mineral-teal) 22%, var(--velyx-white));
  --practice-label: var(--color-text-teal);
}

.practice-card__label {
  color: var(--practice-label);
  font-family: var(--font-family-monospace);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.practice-card__title {
  margin: 0;
  font-size: 1.625rem;
  line-height: 1.2;
}

.practice-card__text {
  color: var(--color-text-secondary);
}

.practice-card__cta {
  margin-top: auto;
  color: var(--practice-label);
  font-weight: var(--font-weight-semibold);
}

.practice-tile {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.practice-tile__index {
  color: var(--color-text-muted);
  font-family: var(--font-family-monospace);
  font-size: 0.75rem;
}

.practice-tile__title {
  margin: 0;
  font-size: 1.1875rem;
}

.practice-tile__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

/* Tiles that link to their practice page. */
.practice-tile--link {
  color: var(--color-text);
  text-decoration: none;
  transition:
    border-color var(--transition-standard),
    box-shadow var(--transition-standard);
}

.practice-tile--link:hover {
  border-color: var(--color-border-tint);
  color: var(--color-text);
  box-shadow: var(--shadow-tint);
}

.practice-tile--link:hover .practice-tile__title {
  color: var(--color-accent);
}

/* Cards without a practice accent (CardGrid on subpages). */
.practice-card--neutral {
  --practice-accent: var(--color-border-tint);
  --practice-bg: var(--color-surface);
  --practice-border: var(--color-border-subtle);
  --practice-label: var(--color-accent-hover);
}

.practice-card__title--sm {
  font-size: 1.3125rem;
}

/* ============================================================
   AI & AGENTIC AI (_AiFeature.cshtml)
   ============================================================ */

.journey__step {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border-tint);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.875rem;
}

.journey__index {
  color: var(--color-accent);
  font-family: var(--font-family-monospace);
  font-size: 0.6875rem;
}

.agent-card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.125rem;
  border: 1px solid var(--color-border-tint-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-tint-subtle);
}

.agent-card__kind {
  color: var(--color-accent);
  font-family: var(--font-family-monospace);
  font-size: 0.6875rem;
  text-transform: uppercase;
}

.agent-card__title {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.agent-card__text {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.agent-card--oversight {
  border: 1px dashed var(--color-border-control);
  background: transparent;
}

.agent-card--oversight .agent-card__kind {
  color: var(--color-text-muted);
}

.plane-layer {
  display: flex;
  flex-direction: column;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-xs);
  background: var(--color-tint-highlight);
  color: var(--color-text);
  font-size: 0.875rem;
}

.plane-layer span {
  color: var(--color-text-secondary);
}

.plane-layer--teal {
  background: var(--color-tint-teal-highlight);
}

.plane-layer--teal span {
  color: var(--color-text-teal);
}

/* ============================================================
   ENTERPRISE ARCHITECTURE (_Architecture.cshtml)
   ============================================================ */

.dash-list {
  padding: 0;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  list-style: none;
}

.dash-list li::before {
  content: "— ";
}

/* Layers step right and darken from Business strategy down to Security;
   AI is the teal target state. */
.ea-layers {
  --ea-indent: 0.5rem;
}

.ea-layer {
  --i: 0;

  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: calc(var(--i) * var(--ea-indent));
  padding: 0.8125rem 1.125rem;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--color-accent) calc(5% + var(--i) * 3.5%), var(--velyx-white));
  color: var(--color-text);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-semibold);
}

.ea-layer:nth-child(2) { --i: 1; }
.ea-layer:nth-child(3) { --i: 2; }
.ea-layer:nth-child(4) { --i: 3; }
.ea-layer:nth-child(5) { --i: 4; }
.ea-layer:nth-child(6) { --i: 5; }
.ea-layer:nth-child(7) { --i: 6; }
.ea-layer:nth-child(8) { --i: 7; }

.ea-layer:nth-child(9) {
  --i: 8;

  background: color-mix(in srgb, var(--velyx-mineral-teal) 18%, var(--velyx-white));
}

.ea-layer__index {
  width: 1.375rem;
  flex-shrink: 0;
  font-family: var(--font-family-monospace);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-regular);
}

@media (min-width: 576px) {
  .ea-layers {
    --ea-indent: 0.875rem;
  }
}

/* ============================================================
   SECURITY & GOVERNANCE (_Governance.cshtml)
   ============================================================ */

/* Grid with hairline separators; items overlap the outer border so
   wrapped rows still get dividers. */
.gov-model,
.ms-pillars {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
}

.gov-model > *,
.ms-pillars > * {
  margin: 0 -1px -1px 0;
  border-right: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.gov-model {
  grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
}

.gov-model__step {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.375rem 1.125rem;
  background: var(--color-surface);
}

.gov-model__step--loop {
  background: var(--color-tint);
}

.gov-model__index {
  color: var(--color-text-muted);
  font-family: var(--font-family-monospace);
  font-size: 0.6875rem;
}

.gov-model__name {
  color: var(--color-text);
  font-family: var(--font-family-display);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gov-model__text {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.control-card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.375rem;
  border-radius: var(--radius-sm);
  background: var(--color-tint);
}

.control-card--teal {
  background: var(--color-tint-teal);
}

.control-card__title {
  margin: 0;
  font-size: var(--font-size-base);
}

.control-card__text {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

/* ============================================================
   MICROSOFT CLOUD (_MicrosoftCloud.cshtml)
   ============================================================ */

.ms-pillars {
  grid-template-columns: repeat(auto-fit, minmax(min(16.875rem, 100%), 1fr));
  background: var(--color-surface);
}

.ms-pillar {
  display: flex;
  min-height: 10.625rem;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.625rem;
}

.ms-pillar__title {
  margin: 0;
  font-size: 1.1875rem;
}

.ms-pillar__outcome {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

.ms-pillar__tech {
  margin: auto 0 0;
  color: var(--color-text-muted);
  font-family: var(--font-family-monospace);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* ============================================================
   LIFECYCLE (_Lifecycle.cshtml)
   ============================================================ */

.horizon-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border-tint);
  border-top: 4px solid var(--horizon-accent);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.horizon-card--decide {
  --horizon-accent: var(--velyx-architectural-navy);
}

.horizon-card--build {
  --horizon-accent: var(--color-accent);
}

.horizon-card--run {
  --horizon-accent: var(--velyx-mineral-teal);
}

.horizon-card__title {
  margin: 0;
  font-size: 1.25rem;
}

.horizon-card__range {
  color: var(--color-text-muted);
  font-family: var(--font-family-monospace);
  font-size: 0.6875rem;
  white-space: nowrap;
}

.horizon-step {
  display: flex;
  gap: 0.875rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-xs);
  background: var(--color-tint-subtle);
  color: var(--color-text);
  font-size: 0.9375rem;
}

.horizon-step__index {
  width: 1.25rem;
  flex-shrink: 0;
  color: var(--color-accent);
  font-family: var(--font-family-monospace);
  font-size: 0.75rem;
  line-height: 1.9;
}

/* ============================================================
   SOLUTIONS (_Solutions.cshtml)
   ============================================================ */

.offer-card__title {
  margin: 0;
  font-size: 1.3125rem;
}

.offer-card__text {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

.offer-card__link {
  color: var(--color-text);
  text-decoration: none;
}

/* The title is a .stretched-link: the whole card opens the solution; the contact CTA sits above it (z-1). */
.offer-card:hover .offer-card__link {
  color: var(--color-accent);
}

/* ============================================================
   MANAGED SERVICES (_ManagedServices.cshtml)
   ============================================================ */

.service-pillar {
  padding: 1.375rem;
  border-left: 4px solid var(--service-accent);
  border-radius: var(--radius-sm);
  background: var(--service-bg, var(--color-tint-medium));
  color: var(--color-text);
}

.service-pillar--technology {
  --service-accent: var(--color-accent);
}

.service-pillar--architecture {
  --service-accent: var(--velyx-architectural-navy);
}

.service-pillar--light {
  --service-accent: color-mix(in srgb, var(--color-accent) 80%, var(--velyx-white));
}

.service-pillar--transformation {
  --service-accent: var(--velyx-mineral-teal);
  --service-bg: var(--color-tint-teal);
}

.service-pillar__title {
  margin: 0;
  font-size: 1.25rem;
}

.service-pillar__text {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.progression {
  color: var(--color-text-secondary);
  font-family: var(--font-family-monospace);
  font-size: 0.8125rem;
}

.progression__step {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xs);
}

.progression__step--current {
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
}

/* ============================================================
   INDUSTRIES (_Industries.cshtml)
   ============================================================ */

.industry-list {
  border-top: 1px solid var(--color-border);
}

.industry {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.375rem 1.25rem 1.375rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}

.industry:hover {
  color: var(--color-text);
}

.industry:hover .industry__name {
  color: var(--color-accent);
}

.industry__name {
  font-family: var(--font-family-display);
  font-size: 1.125rem;
  font-weight: var(--font-weight-semibold);
}

.industry__pressure {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* ============================================================
   BELIEFS (_Beliefs.cshtml)
   ============================================================ */

.belief {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1.125rem;
  border-top: 2px solid var(--color-accent);
}

.belief__index {
  color: var(--color-text-muted);
  font-family: var(--font-family-monospace);
  font-size: 0.75rem;
}

.belief__title {
  margin: 0;
  font-size: 1.25rem;
}

.belief__text {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

/* ============================================================
   INSIGHTS (_Insights.cshtml)
   ============================================================ */

.insight-card {
  overflow: hidden;
  color: var(--color-text);
  text-decoration: none;
}

.insight-card:hover {
  color: var(--color-text);
}

.insight-card:hover .insight-card__title {
  text-decoration: underline;
}

.insight-card--technology {
  --insight-bg: var(--color-tint-highlight);
  --insight-fg: var(--color-accent-hover);
}

.insight-card--architecture {
  --insight-bg: color-mix(in srgb, var(--velyx-architectural-navy) 8%, var(--color-tint));
  --insight-fg: var(--velyx-architectural-navy);
}

.insight-card--transformation {
  --insight-bg: var(--color-tint-teal-highlight);
  --insight-fg: var(--color-text-teal);
}

.insight-card__media {
  display: flex;
  height: 9.375rem;
  align-items: flex-end;
  padding: 1.125rem;
  background: var(--insight-bg);
}

.insight-card__tag {
  padding: 0.25rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: var(--color-surface);
  color: var(--insight-fg);
  font-family: var(--font-family-monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.insight-card__title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
}

.insight-card__meta {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* ============================================================
   FINAL CTA (_FinalCta.cshtml)
   ============================================================ */

.final-cta {
  padding-block: clamp(4.5rem, 9vw, 8rem);
  border-top: 1px solid var(--color-border-tint);
  background: var(--color-tint-strong);
}

.final-cta__title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.final-cta__lead {
  max-width: 35rem;
}

.cta-row {
  --bs-btn-font-size: var(--font-size-base);
  --bs-btn-padding-x: 1.5rem;

  min-height: 60px;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
}

.cta-row--primary {
  --bs-btn-font-weight: var(--font-weight-semibold);

  min-height: 64px;
}

/* ============================================================
   BREADCRUMBS (Pages/Shared/_Breadcrumbs.cshtml)
   ============================================================ */

.page-breadcrumbs {
  --bs-breadcrumb-divider-color: var(--color-text-muted);
  --bs-breadcrumb-item-active-color: var(--color-text-muted);

  padding-top: 1.25rem;
  background: var(--color-tint);
  font-size: 0.875rem;
}

/* Flex items, so the divider centres against the padded (44px) links. */
.page-breadcrumbs .breadcrumb-item {
  display: flex;
  align-items: center;
}

.page-breadcrumbs a {
  display: inline-block;
  padding-block: 0.625rem;
  color: var(--color-text-secondary);
}

.page-breadcrumbs a:hover {
  color: var(--color-accent);
}

.page-breadcrumbs .breadcrumb-item.active {
  padding-block: 0.625rem;
}

/* ============================================================
   PAGE HERO (_PageHero.cshtml) and NOT FOUND (_NotFound.cshtml)
   ============================================================ */

.page-hero {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid var(--color-border-tint);
  background: var(--color-tint);
}

.page-hero__intro {
  max-width: 51.25rem;
}

.page-hero__title {
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.page-links .btn {
  min-height: 44px;
}

/* ============================================================
   TEXT BLOCK (_TextBlock.cshtml)
   ============================================================ */

.text-block__title {
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
}

.text-block__body {
  max-width: 45rem;
  color: var(--color-text-secondary);
  font-size: 1.125rem;
  line-height: 1.65;
}

.text-block + .text-block {
  border-top: 0;
}

/* ============================================================
   FACT LIST (_FactList.cshtml)
   ============================================================ */

.fact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border-tint-subtle);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.fact__label {
  color: var(--color-accent-hover);
  font-family: var(--font-family-monospace);
  font-size: 0.75rem;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fact__text {
  margin: 0;
  color: var(--color-text);
  font-size: 1.0625rem;
}

/* ============================================================
   RELATED LINKS (_RelatedLinks.cshtml)
   ============================================================ */

.related-links {
  padding-block: 2.5rem;
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
}

.related-links__title {
  font-size: 0.75rem;
}

/* ============================================================
   CONTACT FORM (_ContactForm.cshtml)
   ============================================================ */

.contact-form {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--color-border-tint);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-tint);
}

/* After a failed send (.was-validated, site.js), Bootstrap marks every field; an optional field is not "valid" just
   because it is empty, so it keeps its normal look and only required fields get the green state. */
.was-validated .form-control:not([required]):valid {
  padding-right: var(--bs-form-control-padding-x, 0.75rem);
  border-color: var(--bs-border-color);
  background-image: none;
}

/* Same focus look as any field (velyx-bootstrap.css .form-control:focus). */
.was-validated .form-control:not([required]):valid:focus {
  border-color: var(--color-interactive);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-interactive) 18%, transparent);
}

/* Honeypot: off-screen for people, still in the form for bots. */
.contact-form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The confirmation is a Bootstrap .alert-success (themed in velyx-bootstrap.css); only its spacing is set here. */
.contact-form__success {
  padding: 1.5rem;
}

.contact-form__success:focus {
  outline: none;
}

/* ============================================================
   MOTION (wwwroot/js/site.js)
   Bootstrap has no scroll-reveal component; site.js adds .reveal only when motion is allowed.
   ============================================================ */

.reveal {
  opacity: 0;
  translate: 0 1.5rem;
  transition:
    opacity var(--transition-reveal),
    translate var(--transition-reveal);
}

.reveal.is-visible {
  opacity: 1;
  translate: none;
}

/* Back to top: a Bootstrap button, fixed bottom-right, shown by site.js after one screen of scrolling. */
.back-to-top {
  display: inline-flex;
  width: 48px;
  height: 48px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  opacity: 0;
  translate: 0 0.75rem;
  visibility: hidden;
  transition:
    opacity var(--transition-standard),
    translate var(--transition-standard),
    visibility var(--transition-standard);
}

.back-to-top.is-visible {
  opacity: 1;
  translate: none;
  visibility: visible;
}

/* ============================================================
   FOOTER (Pages/Shared/_Footer.cshtml)
   ============================================================ */

.site-footer {
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--color-border-tint);
  background: var(--color-surface);
}

.site-footer__about {
  max-width: 20rem;
}

.site-footer__links {
  max-width: 47.5rem;
}

.site-footer__links a,
.site-footer__legal a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.site-footer__legal {
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border-subtle);
}

.site-footer__links a:hover,
.site-footer__legal a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/* Language selector (footer, legal row): a Bootstrap drop-up of links to the same page in each language. */
.language-selector {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.language-selector__toggle {
  display: inline-flex;
  align-items: center;
  min-width: 8.5rem;
  justify-content: space-between;
}

.language-selector__menu {
  min-width: 100%;
}

/* Overrides the footer's grey legal-link style; 44 px touch targets. */
.site-footer__legal .language-selector__menu .dropdown-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.site-footer__legal .language-selector__menu .dropdown-item:not(.active) {
  color: var(--color-text);
}

.site-footer .velyx-caption {
  font-size: 0.6875rem;
}

/* ============================================================
   COOKIE CONSENT (Pages/Shared/_Consent.cshtml, wwwroot/js/consent.js)
   A Bootstrap card fixed to the bottom of the screen and a Bootstrap modal; only placement and the category rows
   are set here. The banner sits above the sticky header and back-to-top button, below offcanvas and modals.
   ============================================================ */

.cookie-consent {
  position: fixed;
  inset-inline: 1rem;
  bottom: 1rem;
  z-index: 1035;
  max-width: 36rem;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  border-color: var(--color-border-tint);
  box-shadow: var(--shadow-lg);
}

/* Small phones: closer to the edges and smaller body text, so the whole banner fits on screen. */
@media (max-width: 575.98px) {
  .cookie-consent {
    inset-inline: 0.5rem;
    bottom: 0.5rem;
    max-height: calc(100dvh - 1rem);
  }

  .cookie-consent .card-body {
    gap: 0.75rem !important;
    font-size: 0.9375rem;
  }
}

.cookie-consent .btn {
  min-height: 44px;
}

.cookie-consent-modal__category {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.cookie-consent-modal__category .form-check {
  flex-shrink: 0;
}

.cookie-consent-modal .modal-footer .btn {
  min-height: 44px;
}

/* "Cookie settings" in the footer's legal row: a button that looks like the legal links beside it. */
.site-footer__legal .site-footer__consent {
  padding: 0;
  border: 0;
  color: var(--color-text-secondary);
  font-size: inherit;
  text-decoration: none;
  vertical-align: baseline;
}

.site-footer__legal .site-footer__consent:hover {
  color: var(--color-text);
  text-decoration: underline;
}