:root {
  --bg: #06101b;
  --panel: rgba(9, 22, 38, 0.82);
  --panel-strong: rgba(7, 17, 29, 0.94);
  --line: rgba(133, 179, 255, 0.15);
  --line-strong: rgba(133, 179, 255, 0.32);
  --text: #edf4ff;
  --muted: #9fb2ca;
  --accent: #8bf3cb;
  --accent-strong: #b4ffe2;
  --shadow: 0 26px 72px rgba(0, 0, 0, 0.28);
  --header-h: 62px;
  --container: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(32, 88, 184, 0.22), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(18, 215, 162, 0.08), transparent 18%),
    linear-gradient(145deg, #030a14 0%, #081321 42%, #0a1726 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at center, black 38%, transparent 100%);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* Responsive images are wrapped in <picture>; taking the wrapper out of the box
   tree keeps every existing grid/flex rule applying to the <img>. The <source>
   children must be hidden explicitly or they become grid/flex items of the
   picture's parent and add phantom tracks and gaps. */
picture { display: contents; }
picture > source { display: none; }
button { font: inherit; }

.service-page {
  width: var(--container);
  margin: 0 auto;
  position: relative;
  /* No z-index here: a positioned z-index would create a stacking context that
     traps the sticky header (z-index 1001) below the fixed consent banner
     (z-index 1000), hiding the lower language-menu options on mobile. The
     decorative body::before grid is pointer-events:none and paints behind
     content by document order, so it does not need a lift here. */
}

.service-header {
  position: sticky;
  top: 0;
  /* Above the fixed consent banner (z-index 1000). The header is a sticky
     stacking context, so its z-index (not the menu's) governs whether the open
     language/mobile menu can render above the bottom banner. */
  z-index: 1001;
  min-height: var(--header-h);
  background: rgba(4, 11, 19, 0.8);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.service-nav {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  position: relative;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand-mark { width: 44px; height: auto; }
.brand-wordmark { width: 100px; height: auto; }

.service-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.lang {
  position: relative;
}

.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.78rem;
  font-weight: 700;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.lang-trigger img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.95;
  filter: drop-shadow(0 0 9px rgba(69, 188, 255, 0.55));
}

.lang-caret {
  font-size: 0.72rem;
  color: var(--muted);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(5, 14, 24, 0.97);
  box-shadow: var(--shadow);
  display: none;
  z-index: 50;
}

.lang.open .lang-menu {
  display: grid;
  gap: 6px;
  /* Sit above the fixed consent banner (z-index 1000) so every language option
     stays tappable on a short mobile viewport while the banner is visible. */
  z-index: 1001;
}

.lang-menu button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border: 0;
  border-radius: 14px;
  padding: 10px 12px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.lang-menu button:hover,
.lang-menu button.active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.service-links {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.service-links a:last-child {
  color: var(--text);
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(139, 243, 203, 0.12);
  border: 1px solid var(--line);
}

.lang-trigger:hover,
.service-links a:last-child:hover,
.button:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
}

.lang-trigger:focus-visible,
.lang-menu button:focus-visible,
.service-links a:focus-visible,
.button:focus-visible {
  outline: 2px solid rgba(139, 243, 203, 0.9);
  outline-offset: 2px;
}

.service-main {
  padding: 18px 0 52px;
  display: grid;
  /* Cap the single column at the container width; without this the implicit
     `auto` track sizes to a grid item's min-content and can exceed the viewport
     at 320px (horizontal document scroll). */
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

/* Let grid sections shrink below their content's min-content so long tokens wrap
   instead of forcing the track (and the document) wider than the viewport. */
.service-main > *,
.service-hero > *,
.service-section > * { min-width: 0; }

.service-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 24px;
  align-items: center;
}

.service-tag,
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(139, 243, 203, 0.16);
  background: rgba(255, 255, 255, 0.03);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.service-tag::before,
.section-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(139, 243, 203, 0.7);
}

h1,
h2 {
  margin: 14px 0 0;
  font-family: inherit;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--text);
}

h1 { font-size: clamp(3.2rem, 4.6vw, 4.1rem); max-width: 22ch; }
h2 { font-size: clamp(2.15rem, 2.95vw, 2.62rem); max-width: 20ch; }
/* No automatic word hyphenation in any language (owner requirement). Headings
   wrap at spaces; fluid sizing + the mobile rules below keep long compound words
   (German/Dutch/Polish/Russian) from overflowing. overflow-wrap:anywhere is a
   hyphen-free emergency break for the rare single token that still cannot fit at
   320px — it only breaks a token that would otherwise overflow, so normal words
   keep wrapping at spaces. No visible hyphen is ever inserted. */
h1, h2, h3,
.eyebrow, .section-tag, .mini-tag, .service-tag {
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
  overflow-wrap: anywhere;
}

.service-copy h1 + p {
  margin-top: clamp(18px, 2.2vw, 28px);
}

.service-copy p + p {
  margin-top: clamp(10px, 1.3vw, 16px);
}

p,
li,
summary {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--muted);
  /* Long compound tokens in body copy (e.g. Dutch "engineeringondersteuning")
     otherwise set the container min-width and force a horizontal document scroll
     at 320px. Break them without a visible hyphen only when they cannot fit. */
  overflow-wrap: anywhere;
}

/* Zero-specificity safety net: any text/link/card element may break an
   otherwise-unbreakable long token (hyphen-free) rather than overflow the
   viewport. Only affects tokens that would not fit; normal text wraps at spaces. */
:where(a, span, strong, em, dt, dd, code, blockquote, figcaption, td, th) {
  overflow-wrap: anywhere;
}

.service-intro { max-width: 62ch; margin: 0; }

.service-section h2 + p,
.cta-panel h2 + p {
  margin-top: clamp(12px, 1.6vw, 18px);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
}


.cta-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.cta-note a {
  color: var(--text);
  font-weight: 700;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  /* Long tokens in CTA labels must not force a horizontal document scroll. */
  overflow-wrap: anywhere;
}

.button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #03241b;
}

.button.secondary {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  border-color: var(--line);
}

.service-hero-visual img,
.info-card img {
  width: 100%;
  /* height:auto keeps the intrinsic width/height attributes from turning into a
     fixed box and defeating the aspect-ratio below. */
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.service-section { display: grid; gap: 16px; }
.section-head { display: grid; gap: 8px; }

.bullet-grid,
.info-card ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}

.dual-grid,
.related-grid,
.footer-grid {
  display: grid;
  gap: 16px;
}

.dual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }

.info-card,
.cta-panel,
.related-card {
  padding: 20px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(8, 21, 36, 0.96), rgba(7, 18, 31, 0.9));
  box-shadow: var(--shadow);
}

.info-card h2,
.cta-panel h2 {
  margin-top: 0;
}

.info-card h2 + p {
  margin-top: clamp(12px, 1.4vw, 18px);
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(9, 22, 38, 0.74);
}

.faq-item summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
}

.faq-item p {
  margin: 12px 0 0;
}

.related-card {
  display: grid;
  gap: 8px;
  min-height: 140px;
}

.related-card strong {
  color: var(--text);
  font-size: 1rem;
}

.service-footer {
  padding: 0 0 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-grid {
  padding-top: 18px;
  align-items: start;
}

.footer-grid strong {
  display: block;
  margin-bottom: 10px;
}

.footer-links {
  display: grid;
  gap: 8px;
  color: var(--muted);
}

.footer-meta {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 0.92rem;
}

/* Legal links row (Privacy / Terms / Cookies) shown in every page footer. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
}

.footer-legal a {
  color: var(--muted);
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: var(--text);
}

/* Legal-page body: readable measure, table of contents, English-only notice. */
.legal-main {
  padding: 18px 0 52px;
  display: grid;
  gap: 24px;
}

.legal-body {
  max-width: 72ch;
  display: grid;
  gap: 18px;
}

.legal-lang-notice {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.9rem;
}

.legal-dates {
  color: var(--muted);
  font-size: 0.92rem;
}

.legal-toc {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}

.legal-toc ol {
  margin: 8px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  color: var(--muted);
}

.legal-body h2 {
  font-size: clamp(1.4rem, 3.2vw, 1.7rem);
  margin-top: 8px;
}

.legal-body h3 {
  font-size: 1.05rem;
  margin-top: 4px;
}

.legal-body ul {
  padding-left: 20px;
  display: grid;
  gap: 6px;
  color: var(--muted);
}

.legal-review-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.86rem;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.legal-table th,
.legal-table td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

html[dir="rtl"] .legal-body,
html[dir="rtl"] .legal-toc ol,
html[dir="rtl"] .legal-body ul {
  text-align: right;
}

html[dir="rtl"] .legal-toc ol,
html[dir="rtl"] .legal-body ul {
  padding-left: 0;
  padding-right: 20px;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  padding: 0;
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.menu-toggle span::before { transform: translate(-50%, -8px); }
.menu-toggle span::after { transform: translate(-50%, 6px); }

@media (max-width: 960px) {
  .service-main { gap: 34px; }
  /* minmax(0, 1fr) rather than 1fr (= minmax(auto, 1fr)) so a long token in a
     card cannot floor the track at its min-content and overflow the viewport. */
  .service-hero,
  .dual-grid,
  .related-grid,
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .dual-grid > *,
  .related-grid > *,
  .footer-grid > * { min-width: 0; }
}

@media (max-width: 768px) {
  :root {
    --header-h: 56px;
    --container: min(100%, calc(100% - 24px));
  }

  .brand-mark { width: 34px; }
  .brand-wordmark { width: 82px; }
  .menu-toggle { display: inline-flex; position: relative; }
  .service-actions { margin-left: 0; }
  .service-links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: none;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: rgba(7, 18, 31, 0.96);
    box-shadow: var(--shadow);
    grid-auto-flow: row;
    z-index: 1001; /* above the fixed consent banner (z-index 1000) */
  }

  .service-links.open { display: grid; }
  .service-links a:last-child { width: 100%; }
  /* On these templates the language trigger sits in the sticky header, so the
     menu must open downward. The previous `bottom: calc(100% + 10px)` opened it
     upward, off the top of the viewport, where the options could not be tapped.
     Cap the height to the space below the header and let it scroll internally. */
  .lang-menu {
    top: calc(100% + 10px);
    bottom: auto;
    left: 0;
    right: 0;
    max-height: min(60vh, calc(100vh - var(--header-h) - 32px));
  }
  .service-main { padding: 14px 0 38px; gap: 28px; }
  .service-hero { gap: 18px; }
  h1 { font-size: clamp(1.9rem, 0.7rem + 3.6vw, 2.9rem); max-width: none; }
  .service-copy h1 + p { margin-top: clamp(16px, 4vw, 22px); }
  h2 { font-size: clamp(1.55rem, 0.8rem + 2.6vw, 2.1rem); max-width: none; }
  .cta-row { margin-top: 18px; }
  .cta-note { margin-top: 10px; }
  .service-section { gap: 14px; }
  .info-card,
  .cta-panel,
  .related-card { padding: 18px; }
}

/* Smallest phones: cap heading sizes so the longest compound tokens
   (German/Dutch/Polish/Russian) fit the ~300px content box without an emergency
   mid-word break wherever possible (reduce-size-before-break preference). */
@media (max-width: 390px) {
  h1 { font-size: clamp(1.45rem, 5vw, 1.9rem); }
  h2 { font-size: clamp(1.25rem, 4.2vw, 1.55rem); }
  .legal-body h2 { font-size: clamp(1.2rem, 4vw, 1.45rem); }
  .legal-body h3 { font-size: 1rem; }
}

html[dir="rtl"] body {
  text-align: right;
}

html[dir="rtl"] .service-copy,
html[dir="rtl"] .section-head,
html[dir="rtl"] .info-card,
html[dir="rtl"] .cta-panel,
html[dir="rtl"] .footer-grid,
html[dir="rtl"] .knowledge-copy,
html[dir="rtl"] .knowledge-panel,
html[dir="rtl"] .topic-card,
html[dir="rtl"] .category-card,
html[dir="rtl"] .empty-card,
html[dir="rtl"] .service-link-card {
  text-align: right;
}

html[dir="rtl"] .lang-menu {
  left: 0;
  right: auto;
}

html[dir="rtl"] .lang-menu button,
html[dir="rtl"] .service-links,
html[dir="rtl"] .footer-links,
html[dir="rtl"] .cta-row,
html[dir="rtl"] .topic-meta,
html[dir="rtl"] .service-link-card .card-footer {
  text-align: right;
}

html[dir="rtl"] .cta-row,
html[dir="rtl"] .topic-meta,
html[dir="rtl"] .service-link-card .card-footer {
  justify-content: flex-end;
}

html[dir="rtl"] .knowledge-panel ul,
html[dir="rtl"] .bullet-grid,
html[dir="rtl"] .info-card ul,
html[dir="rtl"] .faq-list p {
  padding-right: 18px;
  padding-left: 0;
}

html[dir="rtl"] .cta-note a,
html[dir="rtl"] .footer-links a,
html[dir="rtl"] .category-link,
html[dir="rtl"] .card-link {
  unicode-bidi: plaintext;
}