/* ==========================================================================
   Semiotic — Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* iOS inflates text in landscape unless this is pinned. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Anchor jumps must clear the sticky header (5rem) or they land underneath it. */
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-title);
  background: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Suppress the grey flash Android/iOS paint over tapped elements; every
     interactive element here already has its own :active / :focus state. */
  -webkit-tap-highlight-color: transparent;
}

/* Scroll lock while the mobile nav overlay is open. Without this the page
   behind keeps scrolling, and iOS chains the scroll to the document.
   Deliberately not touch-action: none — that combines down the ancestor
   chain and would also stop the overlay itself from scrolling. */
body.mobile-nav-open {
  overflow: hidden;
}

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

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

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--color-teal-600);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* <main tabindex="-1"> exists purely as the skip link's landing point; it is
   never reached by tabbing. Outlining the whole page region would be noise —
   the scroll jump is the feedback. Higher specificity than :focus-visible. */
main:focus { outline: none; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--section-pad-y); }
.section--tight { padding-block: calc(var(--section-pad-y) * 0.7); }
.section--surface { background: var(--color-bg-secondary); }
.section--dark {
  background: linear-gradient(160deg, var(--color-navy-950) 0%, var(--color-navy-900) 55%, var(--color-navy-800) 100%);
  color: var(--color-text-white);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-lh);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal-700);
}
.eyebrow::before {
  content: "";
  width: 1.25rem;
  height: 2px;
  background: var(--color-teal-600);
  border-radius: 2px;
}
.section--dark .eyebrow { color: var(--color-teal-300); }
.section--dark .eyebrow::before { background: var(--color-teal-300); }

h1, .h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-lh); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
h2, .h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-lh); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
h3, .h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-lh); font-weight: var(--fw-semibold); }
h4, .h4 { font-size: var(--text-h4-size); line-height: var(--text-h4-lh); font-weight: var(--fw-semibold); }
.title { font-size: var(--text-title-size); line-height: var(--text-title-lh); font-weight: var(--fw-medium); }
.body-lg { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-lh); }
.caption { font-size: var(--text-caption-size); line-height: var(--text-caption-lh); }
.micro { font-size: var(--text-micro-size); line-height: var(--text-micro-lh); }

.text-description { color: var(--color-text-description); }

.section-header {
  max-width: 42rem;
  margin-bottom: var(--space-3xl);
}
.section-header.center { margin-inline: auto; text-align: center; }
.section-header p { margin-top: var(--space-md); }

/* ==========================================================================
   Buttons — pill shape per component spec (Primary / Secondary / Tertiary / Link)
   ========================================================================== */

.btn {
  --btn-fg: var(--color-text-white);
  --btn-bg: var(--color-teal-700);
  --btn-bg-hover: var(--color-teal-600);
  --btn-bg-active: var(--color-teal-900);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: 3rem;
  padding-inline: var(--space-xl);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--text-btn-size);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background-color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.btn:hover { background: var(--btn-bg-hover); }
.btn:active { background: var(--btn-bg-active); transform: translateY(1px); }
.btn:focus-visible { outline-color: var(--color-teal-700); outline-offset: 2px; border-radius: var(--radius-pill); }
.btn[disabled] { background: var(--color-gray-100); color: var(--color-text-placeholder); cursor: not-allowed; }
.btn[disabled]:hover, .btn[disabled]:active { background: var(--color-gray-100); transform: none; }

.btn--secondary {
  --btn-fg: var(--color-teal-700);
  --btn-bg: transparent;
  --btn-bg-hover: var(--color-teal-100);
  --btn-bg-active: var(--color-teal-200);
  --btn-border: var(--color-teal-700);
}
.btn--secondary:hover { color: var(--color-teal-800); border-color: var(--color-teal-800); }

.btn--tertiary {
  --btn-fg: var(--color-teal-700);
  --btn-bg: var(--color-teal-100);
  --btn-bg-hover: var(--color-teal-200);
  --btn-bg-active: var(--color-teal-300);
}

.btn--on-dark {
  --btn-fg: var(--color-navy-950);
  --btn-bg: var(--color-text-white);
  --btn-bg-hover: var(--color-teal-100);
  --btn-bg-active: var(--color-teal-200);
}
.btn--on-dark.btn--secondary {
  --btn-fg: var(--color-text-white);
  --btn-bg: transparent;
  --btn-bg-hover: rgba(255,255,255,0.1);
  --btn-bg-active: rgba(255,255,255,0.18);
  --btn-border: rgba(255,255,255,0.5);
}

/* Inherits --text-btn-size from .btn; only the horizontal padding is tighter. */
.btn--sm { height: 3rem; padding-inline: var(--space-lg); }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-teal-700);
  font-weight: var(--fw-medium);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), gap var(--duration-base) var(--ease-out);
}
.btn-link:hover { color: var(--color-teal-800); border-color: currentColor; gap: var(--space-sm); }
.btn-link i { font-size: 1.1em; }

.cta-group { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }

@media (max-width: 600px) {
  .btn { width: 100%; }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  height: 5rem;
}
.site-header__logo { height: 2rem; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  /* In flow and flexible, so logo / links / actions negotiate the available
     width. The list used to be position:absolute and centred by transform,
     which took it out of the layout entirely — it could not push anything,
     so below ~1200px it silently overlapped the language toggle and CTA
     instead of triggering any responsive behaviour. */
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}
.nav__list {
  display: flex;
  gap: var(--space-xl);
  flex: 1;
  justify-content: center;
  min-width: 0;
}
.nav__list a {
  position: relative;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  color: var(--color-text-description);
  padding-block: var(--space-2xs);
  transition: color var(--duration-base) var(--ease-out);
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--color-teal-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}
.nav__list a:hover, .nav__list a.is-active { color: var(--color-text-title); }
.nav__list a:hover::after, .nav__list a.is-active::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: var(--space-lg); }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  /* 48px outer - 2x1px padding - 2x1px border = 44px inner: the recommended
     touch target, while the pill still matches the 48px .btn--sm beside it. */
  height: 48px;
  gap: 2px;
  padding: 1px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-secondary);
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 2.75rem;   /* 44px */
  border: none;
  background: transparent;
  padding-inline: 0.7rem;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--text-micro-size);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  color: var(--color-text-description);
  transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.lang-btn:hover { background: var(--color-border); color: var(--color-text-title); }
.lang-btn:active { background: var(--color-teal-200); }
.lang-btn:focus-visible { border-radius: var(--radius-pill); }
.lang-btn.is-active { background: var(--color-teal-700); color: var(--color-text-white); }
.lang-btn.is-active:hover { background: var(--color-teal-800); color: var(--color-text-white); }
.lang-btn.is-active:active { background: var(--color-teal-900); }

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  font-size: 1.25rem;
  color: var(--color-text-title);
}

/* Small desktop / large tablet: the full link row still fits, but the CTA
   does not sit beside five Romanian labels. It moves to the sticky bar
   directly under the header rather than collapsing the whole nav. */
@media (max-width: 1199px) {
  .nav { gap: var(--space-lg); }
  .nav__list { gap: var(--space-md); }
  .nav__list a { font-size: var(--text-tag-size); }
  .nav__actions .btn { display: none; }
}

/* Tablet proper. Five Romanian labels plus the language toggle only just
   fit here, so the gaps tighten again — without this the link row wraps to
   two lines inside an 80px header. */
@media (max-width: 899px) {
  .site-header__inner { gap: var(--space-md); }
  .nav { gap: var(--space-md); }
  .nav__list { gap: var(--space-sm); }
  .nav__list a { white-space: nowrap; }
}

/* Below the tablet breakpoint (768px): collapse to the hamburger. The
   language toggle and CTA both exist inside the mobile panel. */
@media (max-width: 767px) {
  .nav__list { display: none; }
  .nav__actions .lang-toggle { display: none; }
  .nav-toggle { display: inline-flex; }
}

.mobile-header-cta { display: none; }

/* Shown wherever the header CTA is hidden — i.e. from 1199px down. */
@media (max-width: 1199px) {
  /* Header (5rem) plus this sticky CTA bar, so anchors clear both. */
  html { scroll-padding-top: 9.5rem; }
  .mobile-header-cta {
    display: flex;
    justify-content: center;
    position: sticky;
    top: calc(5rem + 1px);
    z-index: 95;
    background: var(--color-bg-primary);
    padding: 8px var(--container-pad);
    border-bottom: 1px solid var(--color-border);
  }
  /* Deliberately no width:100% here. Phones already get a full-width button
     from the global .btn rule under 600px; above that the button keeps its
     natural width and is centred by the flex container, instead of becoming
     a 1150px-wide pill on a small laptop. */
  body.mobile-nav-open .mobile-header-cta { display: none; }
}

.mobile-nav {
  position: fixed;
  inset: 5rem 0 0 0;
  background: var(--color-bg-primary);
  z-index: 90;
  padding: var(--space-xl) var(--container-pad) var(--space-3xl);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  /* visibility, not just opacity: opacity:0 alone leaves every link in the
     tab order and the accessibility tree at all viewports, so keyboard and
     screen-reader users hit a hidden menu. visibility is transitionable, so
     the fade still runs. */
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              visibility var(--duration-base) var(--ease-out);
  overflow-y: auto;
  /* Stop the scroll chaining to the page underneath on iOS/Android. */
  overscroll-behavior: contain;
  padding-bottom: max(var(--space-3xl), env(safe-area-inset-bottom));
}
.mobile-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; }
.mobile-nav__list { display: flex; flex-direction: column; gap: var(--space-lg); }
.mobile-nav__list a { font-size: var(--text-h4-size); font-weight: var(--fw-medium); }
.lang-toggle--mobile { margin-top: var(--space-2xl); }
.mobile-nav__cta { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.mobile-nav__cta .btn { width: 100%; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding-block: var(--space-4xl) var(--space-3xl);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px),
    linear-gradient(0deg, var(--color-border) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 60% at 60% 0%, black 30%, transparent 75%);
  opacity: 0.7;
  z-index: 0;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-3xl);
  align-items: center;
}
/* Grid items default to min-width:auto, so without this the widest child
   (the stats row) sets a floor the column cannot shrink below. */
.hero__copy { min-width: 0; }
.hero__copy h1 { margin-block: var(--space-md) var(--space-lg); max-width: 22ch; }
.hero__copy p { max-width: 46ch; margin-bottom: var(--space-xl); }
.hero__meta {
  display: flex;
  /* Wraps rather than forcing the hero wider than the viewport at 320px,
     which WCAG 1.4.10 (Reflow) requires to work without horizontal scroll. */
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-2xl);
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}
.hero__meta div strong { display: block; font-size: var(--text-h4-size); font-weight: var(--fw-semibold); }
.hero__meta div span { color: var(--color-text-description); font-size: var(--text-caption-size); }

.hero__art { position: relative; }

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__art { order: -1; max-width: 26rem; margin-inline: auto; }
}

/* ==========================================================================
   Technical schematic illustration (shared visual language)
   ========================================================================== */

.schematic { width: 100%; height: auto; }
.schematic .trace { stroke: var(--color-teal-300); stroke-width: 1.5; fill: none; stroke-dasharray: 4 5; }
.schematic .trace-solid { stroke: var(--color-navy-300); stroke-width: 1.5; fill: none; }
.schematic .node { fill: var(--color-teal-600); }
.schematic .node-ring { fill: none; stroke: var(--color-teal-400); stroke-width: 1.5; }
.schematic .chip { fill: var(--color-bg-primary); stroke: var(--color-navy-300); stroke-width: 1.5; }
.schematic .chip-dark { fill: var(--color-navy-800); }
.schematic .label-line { stroke: var(--color-border); stroke-width: 1; }
.schematic .pulse { animation: pulse-dot 2.4s var(--ease-out) infinite; transform-origin: center; }
.schematic .pulse--d2 { animation-delay: 0.6s; }
.schematic .pulse--d3 { animation-delay: 1.2s; }

@keyframes pulse-dot {
  0%, 100% { opacity: 0.4; r: 3; }
  50% { opacity: 1; r: 4.5; }
}
@media (prefers-reduced-motion: reduce) {
  .schematic .pulse { animation: none; opacity: 0.9; }
}

/* ==========================================================================
   Cards
   ========================================================================== */

/* No hover state: these cards are <article> elements, not links. A lift on
   hover promises a click target that does not exist. */
.card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  /* Same reason as .equipment-card: grid items will not shrink past their
     longest word without these, which forced document-level horizontal
     scroll in the 4-up grid around 981-1067px (worst case English labels). */
  min-width: 0;
  overflow-wrap: break-word;
}

.card__icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-teal-100);
  color: var(--color-teal-700);
  font-size: 1.5rem;
  margin-bottom: var(--space-lg);
}
.card h3, .card h4 { margin-bottom: var(--space-sm); }
.card p { color: var(--color-text-description); }

/* ---- Service overview (two big cards) ---- */
.service-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-lg);
}
.service-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 26rem;
}
.service-card--primary {
  background: linear-gradient(160deg, var(--color-navy-950), var(--color-navy-800));
  color: var(--color-text-white);
}
.service-card--secondary {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-title);
}
.service-card__icon {
  width: 3.5rem; height: 3.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 1.75rem;
  margin-bottom: var(--space-xl);
}
.service-card--primary .service-card__icon { background: rgba(255,255,255,0.1); color: var(--color-teal-300); }
.service-card--secondary .service-card__icon { background: var(--color-teal-100); color: var(--color-teal-700); }
.service-card h3 { margin-bottom: var(--space-md); max-width: 20ch; }
.service-card p { max-width: 34ch; margin-bottom: var(--space-xl); }
.service-card--primary p { color: var(--color-navy-200); }
.service-card--secondary p { color: var(--color-text-description); }
.service-card__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.service-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.tag {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-tag-size);
  line-height: var(--text-tag-lh);
  font-weight: var(--fw-medium);
  background: rgba(255,255,255,0.08);
  color: var(--color-teal-200);
}
/* Icon scales with the label rather than being pinned to a px value — em is
   relative to .tag's own font-size, so changing --text-tag-size moves both. */
.tag i {
  font-size: 1.15em;
  line-height: 1;
  flex-shrink: 0;
}
.service-card--secondary .tag { background: var(--color-teal-100); color: var(--color-teal-700); }

@media (max-width: 900px) {
  .service-grid { grid-template-columns: 1fr; }
}

/* ---- Hardware services / grid cards ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }

@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

.step-number {
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  font-weight: var(--fw-semibold);
  color: var(--color-teal-600);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-sm);
  display: block;
}

/* ==========================================================================
   Equipment strip
   ========================================================================== */

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
/* No hover state — see .card above. These are plain <div> elements. */
.equipment-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: left;
  background: var(--color-bg-primary);
  /* Grid items will not shrink past their longest word without these. */
  min-width: 0;
  overflow-wrap: break-word;
}
.equipment-card i {
  font-size: 1.75rem;
  color: var(--color-teal-700);
  width: 3.25rem; height: 3.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-teal-100);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-md);
}
.equipment-card span { font-size: var(--text-caption-size); font-weight: var(--fw-medium); }

.equipment-note {
  margin-top: var(--space-2xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-md);
  background: var(--color-teal-100);
}
.equipment-note p { font-weight: var(--fw-medium); }

@media (max-width: 900px) {
  .equipment-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .equipment-grid { grid-template-columns: 1fr 1fr; }
}
/* Below ~360px two columns leave less room than the longest words need
   ("electronice", "industriale"), which pushes the grid past the viewport. */
@media (max-width: 359px) {
  .equipment-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Process timeline
   ========================================================================== */

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-md);
  padding-top: var(--space-xl);

  /* Dot geometry. The connector line and the step number both derive from
     these, so the three stay aligned if the dot is ever resized. */
  --dot-size: 2.25rem;
  --dot-gap: var(--space-xs);   /* clearance between dot and step number */
}
.timeline::before {
  content: "";
  position: absolute;
  /* Each dot is centred --space-xl down inside its item, and the items begin
     --space-xl below the grid top, so the line centre sits at twice that. */
  top: calc(var(--space-xl) * 2 - 1px);
  left: 0; right: 0;
  height: 2px;
  background: var(--color-border);
}
.timeline__item {
  position: relative;
  /* Clear the dot's lower half, then the gap, so the number never touches it. */
  padding-top: calc(var(--space-xl) + var(--dot-size) / 2 + var(--dot-gap));
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.timeline__item.is-visible { opacity: 1; transform: translateY(0); }
.timeline__dot {
  position: absolute;
  top: var(--space-xl);
  left: 0;
  width: var(--dot-size); height: var(--dot-size);
  border-radius: 50%;
  background: var(--color-bg-primary);
  border: 2px solid var(--color-teal-600);
  color: var(--color-teal-700);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-caption-size);
  font-weight: var(--fw-semibold);
  transform: translateY(-50%) translateX(-1px);
  z-index: 1;
}
.timeline__item h3 { font-size: var(--text-body-size); font-weight: var(--fw-semibold); margin-bottom: var(--space-xs); }
.timeline__item p { color: var(--color-text-description); font-size: var(--text-caption-size); }

@media (max-width: 980px) {
  .timeline { grid-template-columns: 1fr; gap: var(--space-2xl); padding-top: 0; }
  .timeline::before { top: 0; bottom: 0; left: 1.1rem; right: auto; width: 2px; height: auto; }
  .timeline__item { padding-top: 0; padding-left: var(--space-3xl); }
  .timeline__dot { top: 0; left: 0; transform: none; }
}

/* ==========================================================================
   Cross-service split
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.split__panel {
  padding: var(--space-3xl) var(--space-2xl);
  position: relative;
}
.split__panel--dark {
  background: linear-gradient(160deg, var(--color-navy-950), var(--color-navy-800));
  color: var(--color-text-white);
}
.split__panel--light { background: var(--color-bg-secondary); }
.split__panel h3 { margin-bottom: var(--space-md); }
.split__panel--dark p { color: var(--color-navy-200); }
.split__panel--light p { color: var(--color-text-description); }
.split__art { margin-top: var(--space-xl); }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Contact / CTA
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}
.contact-panel h2 { margin-bottom: var(--space-md); max-width: 16ch; }
.contact-panel > p { color: var(--color-navy-200); max-width: 40ch; margin-bottom: var(--space-2xl); }
.contact-note {
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}
.contact-note strong { display: block; margin-bottom: var(--space-2xs); }
.contact-note p { color: var(--color-navy-200); font-size: var(--text-caption-size); }

.form-card {
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  color: var(--color-text-title);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-bottom: var(--space-md); }
.form-row .field { margin-bottom: 0; }
.field { margin-bottom: var(--space-md); }
.field label {
  display: block;
  font-size: var(--text-caption-size);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-xs);
}
.field .optional { color: var(--color-text-description); font-weight: var(--fw-regular); }

.input-wrap { position: relative; }
.input-wrap i {
  position: absolute;
  left: var(--space-md);
  top: 50%; transform: translateY(-50%);
  color: var(--color-text-description);
  font-size: 1.1rem;
  pointer-events: none;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  height: 3rem;
  padding-inline: var(--space-lg);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  color: var(--color-text-title);
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-description); }
.input-wrap i + input, .input-wrap i + select { padding-left: 2.75rem; }
.field textarea { height: auto; min-height: 8rem; border-radius: var(--radius-md); padding-block: var(--space-md); resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-teal-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-teal-700);
  box-shadow: 0 0 0 3px var(--color-teal-100);
  outline: none;
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--color-red-600); }
.field.has-success input { border-color: var(--color-green-600); }

.field-message {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
  padding: 0.4rem var(--space-md);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption-size);
  font-weight: var(--fw-medium);
}
.field-message--error { background: var(--color-red-100); color: var(--color-red-600); }
.field-message--success { background: var(--color-green-100); color: var(--color-green-600); }
.field-message[hidden] { display: none; }

.radio-group { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.radio-chip {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 0.6rem var(--space-lg);
  min-height: 2.75rem;   /* 44px touch target */
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  font-size: var(--text-caption-size);
  font-weight: var(--fw-medium);
  color: var(--color-text-description);
  transition: all var(--duration-base) var(--ease-out);
}
.radio-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
/* The real radio is visually hidden, so this is the ONLY indication of which
   option is selected — it must not depend on :has() alone (Firefox < 121,
   Chrome < 105, Safari < 15.4). main.js mirrors the state onto .is-selected,
   so the chip still works if :has() is missing, and still works if JS is. */
.radio-chip:has(input:checked),
.radio-chip.is-selected {
  border-color: var(--color-teal-700);
  background: var(--color-teal-100);
  color: var(--color-teal-800);
}
.radio-chip:has(input:focus-visible) { outline: 2px solid var(--color-teal-600); outline-offset: 2px; }
/* Focus ring fallback, scoped so modern browsers keep the :focus-visible
   behaviour and do not show a ring on mouse click. */
@supports not selector(:has(*)) {
  .radio-chip:focus-within { outline: 2px solid var(--color-teal-600); outline-offset: 2px; }
}

.field--conditional {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-bottom: 0;
  transition: max-height var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out), margin var(--duration-base) var(--ease-out);
}
.field--conditional.is-visible { max-height: 6rem; opacity: 1; margin-bottom: var(--space-lg); }

/* Honeypot — visually and semantically hidden, but still fillable by bots.
   Deliberately not display:none, which some bots skip. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-card .btn { width: 100%; margin-top: var(--space-sm); }
.form-card #formError { width: 100%; margin-top: var(--space-md); justify-content: center; }
.form-success {
  display: none;
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
}
.form-success.is-visible { display: block; }
.form-success i { font-size: 3rem; color: var(--color-green-600); margin-bottom: var(--space-md); }
.form-card.is-submitted form { display: none; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-navy-950);
  color: var(--color-navy-200);
  padding-block: var(--space-3xl) var(--space-xl);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand img { height: 2rem; margin-bottom: var(--space-md); }
.footer-brand p { max-width: 30ch; font-size: var(--text-caption-size); }
.footer-col h3, .footer-col h4 { color: var(--color-text-white); font-size: var(--text-caption-size); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-md); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-col a { font-size: 1rem; transition: color var(--duration-base) var(--ease-out); }
.footer-col a:hover { color: var(--color-text-white); }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  font-size: var(--text-micro-size);
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-col a, .footer-col .footer-link-btn {
  font-size: 1rem;
  transition: color var(--duration-base) var(--ease-out);
}
.footer-col .footer-link-btn {
  all: unset;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  transition: color var(--duration-base) var(--ease-out);
}
.footer-col a:hover, .footer-col .footer-link-btn:hover { color: var(--color-text-white); }
/* `all: unset` above wipes the outline, and it outweighs the global
   :focus-visible rule, so the cookie-settings button had no visible focus
   state on any page. Re-declare it at matching specificity. */
.footer-col .footer-link-btn:focus-visible {
  outline: 2px solid var(--color-teal-300);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Cookie consent — banner + preferences modal
   ========================================================================== */

.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  background: var(--color-bg-primary);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  padding: var(--space-lg) var(--container-pad);
  /* Clear the iPhone home indicator. Resolves to the normal padding on every
     device without a bottom inset. Requires viewport-fit=cover in the meta. */
  padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
  padding-left: max(var(--container-pad), env(safe-area-inset-left));
  padding-right: max(var(--container-pad), env(safe-area-inset-right));
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  /* Without visibility the three dismissed buttons stay tabbable on every
     page, so keyboard users tab into an invisible consent banner. */
  visibility: hidden;
  transition: transform var(--duration-slow) var(--ease-out),
              opacity var(--duration-slow) var(--ease-out),
              visibility var(--duration-slow) var(--ease-out);
}
/* Accept and reject carry identical weight (EDPB Guidelines 03/2022 — a
   refuse option must be no harder to reach than accept). Customize is the
   subordinate third option, so it stays quieter than both rather than louder,
   which is what a filled variant here would do. */
.cookie-banner__customize {
  --btn-fg: var(--color-text-description);
  --btn-bg: transparent;
  --btn-bg-hover: var(--color-bg-secondary);
  --btn-bg-active: var(--color-gray-100);
  --btn-border: transparent;
}
.cookie-banner__customize:hover { color: var(--color-text-title); }

.cookie-banner.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; visibility: visible; }
.cookie-banner__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.cookie-banner__inner p { max-width: 56ch; color: var(--color-text-description); margin: 0; }
.cookie-banner__actions { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

@media (max-width: 700px) {
  .cookie-banner__inner { flex-direction: column; align-items: stretch; text-align: left; }
  .cookie-banner__actions { flex-direction: column; align-items: stretch; }
}

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.cookie-modal.is-visible { display: flex; }
.cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 16, 22, 0.5);
}
.cookie-modal__panel {
  position: relative;
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  max-width: 32rem;
  width: 100%;
  /* vh on iOS Safari measures the viewport with the URL bar hidden, so 85vh
     can exceed what is actually on screen and push the buttons out of reach.
     dvh tracks the real visible height; the vh line is the fallback. */
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cookie-modal__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  /* 44px — the minimum comfortable touch target on iOS and Android. */
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-primary);
  color: var(--color-text-description);
  font-size: 1.1rem;
  transition: color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.cookie-modal__close:hover { color: var(--color-text-title); border-color: var(--color-teal-300); }
.cookie-modal__panel h3 { padding-right: 2.5rem; margin-bottom: var(--space-sm); }
.cookie-modal__panel > p { color: var(--color-text-description); margin-bottom: var(--space-lg); }

.cookie-option { padding-block: var(--space-lg); border-top: 1px solid var(--color-border); }
.cookie-option:first-of-type { border-top: none; padding-top: 0; }
.cookie-option__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xs); }
.cookie-option__header strong { font-weight: var(--fw-semibold); }
.cookie-option p { color: var(--color-text-description); font-size: var(--text-caption-size); margin: 0; }

.cookie-badge {
  font-size: var(--text-micro-size);
  font-weight: var(--fw-medium);
  color: var(--color-teal-700);
  background: var(--color-teal-100);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.cookie-toggle {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--color-border);
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out);
}
.cookie-toggle__dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out);
}
.cookie-toggle.is-on { background: var(--color-teal-700); }
.cookie-toggle.is-on .cookie-toggle__dot { transform: translateX(1.25rem); }
.cookie-toggle--locked { background: var(--color-teal-700); opacity: 0.6; cursor: not-allowed; }
.cookie-toggle--locked .cookie-toggle__dot { transform: translateX(1.25rem); }

.cookie-modal__footer { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.cookie-modal__footer .btn { flex: 1; }

/* ==========================================================================
   Mobile refinements
   ========================================================================== */

@media (max-width: 600px) {
  .card, .service-card, .equipment-card, .split__panel {
    padding: var(--space-md);
  }

  .form-card {
    padding: var(--space-lg);
  }

  .btn {
    height: auto;
    min-height: 3rem;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    padding-block: 0.65rem;
  }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .timeline__item { opacity: 1; transform: none; }
}

/* ==========================================================================
   Legal pages (privacy / cookies)
   ========================================================================== */

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
  color: var(--color-text-description);
  font-size: var(--text-caption-size);
  font-weight: var(--fw-medium);
  transition: color var(--duration-base) var(--ease-out);
}
.legal-back:hover { color: var(--color-teal-700); }

.legal-header { width: 100%; margin-bottom: var(--space-2xl); }
.legal-header h1 { margin-block: var(--space-md) var(--space-sm); }
.legal-header .legal-updated { color: var(--color-text-description); }
.legal-header .legal-intro { margin-top: var(--space-lg); color: var(--color-text-description); }

.legal-content { width: 100%; }
.legal-content section { margin-bottom: var(--space-2xl); }
.legal-content h2 {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-sm);
}
.legal-content p { color: var(--color-text-description); }
.legal-content a { color: var(--color-teal-700); border-bottom: 1px solid var(--color-teal-200); }
.legal-content a:hover { color: var(--color-teal-800); border-color: var(--color-teal-700); }
.legal-manage-cta { margin-top: var(--space-lg); }

.legal-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  max-width: none;
}
.legal-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  background: var(--color-bg-secondary);
}
.legal-card h3 { font-size: var(--text-body-size); font-weight: var(--fw-semibold); margin-bottom: var(--space-xs); }
.legal-card p { color: var(--color-text-description); font-size: var(--text-caption-size); }
.legal-card .tag { margin-bottom: var(--space-sm); background: var(--color-teal-100); color: var(--color-teal-700); }

@media (max-width: 900px) {
  .legal-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .legal-cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -3rem;
  background: var(--color-teal-700);
  color: #fff;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top var(--duration-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-md); }