/* ==========================================================================
   JDS Sommer — site styles
   Brand: #4749AF → #393B8D indigo gradient, #CC0000 red (from the logo)
   Type:  Helvetica / Arial (as on the existing site), Georgia italic accents
   ========================================================================== */

:root {
  --brand: #4749af;
  --brand-deep: #393b8d;
  --brand-ink: #24265f;
  --brand-night: #15163d;
  --brand-50: #f3f3fb;
  --brand-100: #e6e7f6;
  --brand-200: #c9cbee;
  --red: #cc0000;
  --red-deep: #8b001f;
  --red-soft: #fdecec;

  --ink: #1b1c3a;
  --text: #3d3f5c;
  --muted: #6b6d88;
  --line: #e5e5ef;
  --bg: #ffffff;
  --bg-soft: #f7f7fb;
  --paper: #f4f1ea;

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-accent: Georgia, "Times New Roman", Times, serif;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 1px 2px rgba(21, 22, 61, .06), 0 2px 8px rgba(21, 22, 61, .05);
  --shadow: 0 10px 30px -10px rgba(36, 38, 95, .25), 0 2px 6px rgba(36, 38, 95, .06);
  --shadow-lg: 0 40px 80px -30px rgba(36, 38, 95, .45), 0 10px 30px -10px rgba(36, 38, 95, .15);
  --gradient: linear-gradient(180deg, #4749af 0%, #393b8d 100%);
  --gradient-diag: linear-gradient(135deg, #5052c0 0%, #393b8d 55%, #24265f 100%);

  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1240px;
  --header-h: 116px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-deep); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; line-height: 1.12; letter-spacing: -.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
em { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.nowrap { white-space: nowrap; }
@media (max-width: 640px) { .hide-sm { display: none; } }

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 200;
  background: var(--brand-deep); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { top: 16px; color: #fff; }

/* JS-only initial states (removed if GSAP fails to load) */
.js [data-reveal], .js [data-reveal-item], .js [data-hero-fade], .js [data-step] { opacity: 0; }
.js .hero__visual { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal-item], .js [data-hero-fade], .js [data-step], .js .hero__visual { opacity: 1; }
}

/* ---------- Type ---------- */
.h2 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 700; }
.h2 em { color: var(--brand); }
.h2--light, .h2--light em { color: #fff; }
.h2--light em { color: var(--brand-200); }
.h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 20px;
}
.eyebrow em { text-transform: none; letter-spacing: 0; font-size: 17px; color: var(--red); }
.eyebrow__line { width: 32px; height: 2px; background: var(--red); border-radius: 2px; }
.eyebrow--light { color: var(--brand-200); }

.link-arrow { display: inline-flex; gap: 8px; font-weight: 700; color: var(--brand-deep); }
.link-arrow span { transition: transform .3s var(--ease); }
.link-arrow:hover span { transform: translateX(4px); }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--gradient);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 0; border-radius: 999px; cursor: pointer;
  font-weight: 700; font-size: 15px; letter-spacing: .01em; white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s, color .3s;
  isolation: isolate; overflow: hidden;
}
/* Icon sits in a round chip; flex: none stops it shrinking in narrow buttons */
.btn svg {
  flex: none; box-sizing: content-box; width: 16px; height: 16px; padding: 7px; margin-right: -14px;
  border-radius: 50%; background: color-mix(in srgb, currentColor 16%, transparent);
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  overflow: visible; transition: background-color .35s var(--ease), stroke .35s var(--ease);
}
.btn svg:has(path[d^="M19 12H5"]) { margin-right: 0; margin-left: -14px; }
.btn svg path { transition: transform .35s var(--ease); }
.btn:hover svg { background: color-mix(in srgb, currentColor 26%, transparent); }
.btn:hover svg path { transform: translateX(2px); }
.btn:hover svg path[d^="M19 12H5"] { transform: translateX(-2px); }
.btn:hover svg path[d^="M7 17L17 7"] { transform: translate(2px, -2px); }
.btn--primary:hover svg, .btn--dark:hover svg { background: #fff; stroke: var(--red); }
.btn--sm svg { width: 14px; height: 14px; padding: 6px; margin-right: -10px; }
.btn--sm svg:has(path[d^="M19 12H5"]) { margin-right: 0; margin-left: -10px; }
.btn--primary { background: var(--gradient); color: #fff; box-shadow: 0 10px 24px -10px rgba(57, 59, 141, .8); }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #d61a1a, #a3001a);
  transform: translateY(101%); transition: transform .45s var(--ease);
}
.btn--primary:hover { color: #fff; box-shadow: 0 16px 30px -12px rgba(204, 0, 0, .7); }
.btn--primary:hover::after { transform: translateY(0); }
.btn--ghost { background: rgba(255, 255, 255, .7); color: var(--brand-deep); box-shadow: inset 0 0 0 1.5px var(--brand-200); backdrop-filter: blur(6px); }
.btn--ghost:hover { color: var(--brand-deep); box-shadow: inset 0 0 0 1.5px var(--brand); background: #fff; }
.btn--dark { background: var(--brand-ink); color: #fff; min-height: 48px; }
.btn--dark:hover { background: var(--red); color: #fff; }
.btn--sm { min-height: 42px; padding: 0 20px; font-size: 14px; }
.btn--block { width: 100%; }

.chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  background: var(--brand-50); color: var(--brand-deep); box-shadow: inset 0 0 0 1px var(--brand-100);
}

.pulse-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
.pulse-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--red); opacity: 0; animation: pulse 2s infinite;
}
@keyframes pulse { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- Preloader & curtain ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 300;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: #fff;
}
.js.show-preloader .preloader { display: flex; }
.preloader__mark { width: 120px; height: auto; overflow: visible; }
.preloader__word { font-weight: 700; letter-spacing: .32em; color: var(--brand-deep); font-size: 14px; padding-left: .32em; }

.curtain {
  position: fixed; inset: 0; z-index: 250; pointer-events: none;
  display: grid; place-items: center;
  background: var(--gradient-diag);
  clip-path: inset(100% 0 0 0);
}
.curtain__mark { width: 110px; height: 70px; opacity: 0; filter: drop-shadow(0 10px 30px rgba(0,0,0,.25)); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: transform .5s var(--ease);
}
.notice-bar {
  background: var(--brand-night); color: #d9daf3; font-size: 13.5px;
  overflow: hidden; max-height: 44px; transition: max-height .4s var(--ease), opacity .3s;
}
.notice-bar__inner { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.notice-bar strong { color: #fff; }
.notice-bar p { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice-bar__link { color: #fff; font-weight: 700; white-space: nowrap; }
.notice-bar__link:hover { color: #ffb3b3; }

.header__inner {
  display: flex; align-items: center; gap: 24px;
  height: 76px;
  transition: height .4s var(--ease);
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 40px; z-index: -1;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 var(--line);
  transition: top .4s var(--ease), box-shadow .3s;
}
.site-header.is-scrolled .notice-bar { max-height: 0; opacity: 0; }
.site-header.is-scrolled::after { top: 0; box-shadow: 0 8px 30px -12px rgba(36, 38, 95, .25); }
.site-header.is-scrolled .header__inner { height: 66px; }
.site-header.is-hidden { transform: translateY(-100%); }

/* Brand lockup: mark + name + tagline (no ISO badge) */
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--brand-deep); flex: none; }
.brand:hover { color: var(--brand-deep); }
.brand__mark { width: 54px; height: 34px; flex: none; transition: transform .5s var(--ease); }
.brand:hover .brand__mark { transform: translateY(-2px) rotate(-2deg); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-weight: 700; font-size: 21px; letter-spacing: .02em; color: var(--brand-deep); }
.brand__tag { margin-top: 5px; font-size: 11.5px; color: var(--muted); letter-spacing: .01em; white-space: nowrap; }
.brand--light .brand__mark { width: 66px; height: 46px; padding: 6px 8px; border-radius: 12px; background: #fff; box-sizing: border-box; }
.brand--light .brand__name { color: #fff; }
.brand--light .brand__tag { color: #a9abd6; }

.nav { margin-left: auto; }
.nav__list { display: flex; gap: 4px; }
.nav__link {
  position: relative; display: block; padding: 10px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 700; color: var(--ink);
  transition: color .25s, background-color .25s;
}
.nav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.nav__link:hover { color: var(--brand); background: var(--brand-50); }
.nav__link.is-active { color: var(--brand); }
.nav__link.is-active::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 14px; }
/* flex: none + margin: the number must never shrink under the quote button (its last digit got covered) */
.header__phone { display: inline-flex; align-items: center; gap: 8px; flex: none; margin-right: 10px; font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; }
.header__actions .btn { flex: none; }
/* flex: none: in a tight header row (the longer German menu) the icon must not be squeezed */
.header__phone svg { flex: none; width: 16px; height: 16px; fill: var(--red); }

.burger {
  display: none; position: relative; width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: var(--brand-50); cursor: pointer; z-index: 120;
}
.burger span { position: absolute; left: 14px; right: 14px; height: 2px; border-radius: 2px; background: var(--brand-deep); transition: transform .4s var(--ease), top .4s var(--ease); }
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 26px; }
.menu-open .burger span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { top: 22px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h) + 24px) var(--gutter) 32px;
  background: #fff;
  /* Circle grows from and shrinks back into the burger; JS sets the centre */
  --menu-x: calc(100% - 40px); --menu-y: 80px;
  clip-path: circle(0% at var(--menu-x) var(--menu-y));
  visibility: hidden;
  transition: clip-path .7s var(--ease), visibility 0s .7s;
}
.menu-open .mobile-menu { clip-path: circle(150% at var(--menu-x) var(--menu-y)); visibility: visible; transition: clip-path .7s var(--ease), visibility 0s; }
.mobile-menu ul { display: grid; gap: 4px; }
.mobile-menu li a {
  display: flex; align-items: baseline; gap: 14px; padding: 12px 0;
  font-size: clamp(28px, 8vw, 40px); font-weight: 700; color: var(--ink); letter-spacing: -.02em;
  border-bottom: 1px solid var(--line);
}
.mobile-menu li a span { font-size: 13px; color: var(--red); letter-spacing: .1em; }
.mobile-menu li a.is-active { color: var(--brand); }
.mobile-menu__foot { display: grid; gap: 6px; font-weight: 700; }

/* Below 1300px the menu, language switch, phone and quote button no longer fit in one row (German labels are longer) */
@media (max-width: 1300px) {
  .header__phone { display: none; }
}
@media (max-width: 920px) {
  .nav { display: none; }
  .burger { display: block; }
  .header__actions { margin-left: auto; }
}
@media (max-width: 520px) {
  :root { --header-h: 104px; }
  .header__actions .btn { display: none; }
  .header__inner { height: 64px; }
  .brand__mark { width: 46px; height: 29px; }
  .brand__name { font-size: 18px; }
  .brand__tag { font-size: 10.5px; }
  .notice-bar { font-size: 12.5px; }
}

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(72px, 10vw, 130px) 0; }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head__lead { margin-top: 20px; font-size: 18px; color: var(--muted); max-width: 640px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: calc(var(--header-h) + clamp(32px, 4.5vw, 64px)) 0 clamp(70px, 8vw, 110px);
  background: linear-gradient(180deg, #fbfbfe 0%, #f3f3fb 100%);
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(71, 73, 175, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 73, 175, .07) 1px, transparent 1px),
    linear-gradient(rgba(71, 73, 175, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 73, 175, .035) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 30%, transparent 80%);
}
.hero__glow {
  position: absolute; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  right: -20vw; top: -25vw;
  background: radial-gradient(circle, rgba(71, 73, 175, .22) 0%, rgba(71, 73, 175, 0) 65%);
  filter: blur(10px);
}
.hero__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.hero__title {
  font-size: clamp(38px, 4.7vw, 64px); font-weight: 700; line-height: 1.04; letter-spacing: -.035em;
  color: var(--ink);
}
.hero__title em { color: var(--brand); letter-spacing: -.02em; }
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .wi { display: inline-block; will-change: transform; }
.hero__lead { margin-top: 26px; font-size: clamp(17px, 1.4vw, 19px); color: var(--text); max-width: 560px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  margin: 48px 0 0; padding-top: 28px; border-top: 1px solid var(--brand-100); max-width: 560px;
}
.hero__stats dt { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; color: var(--brand-deep); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.hero__stats dd { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.35; }

.hero__visual { position: relative; padding: 0 0 60px 0; }
.sheet {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: #fff; box-shadow: var(--shadow-lg);
  transform: perspective(1400px) rotateY(-6deg) rotateX(3deg);
  transform-style: preserve-3d;
}
.sheet__bar {
  display: flex; align-items: center; gap: 14px; padding: 13px 18px;
  border-bottom: 1px solid var(--line); background: #fbfbfe;
}
.sheet__dots { display: flex; gap: 6px; }
.sheet__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-100); }
.sheet__dots i:first-child { background: var(--red); }
.sheet__dots i:nth-child(2) { background: var(--brand); }
.sheet__file { min-width: 0; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet__file b { color: var(--red); }
.plan { width: 100%; height: auto; }
.sheet__tags { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.tag { font-size: 11.5px; font-weight: 700; padding: 6px 11px; border-radius: 999px; letter-spacing: .02em; white-space: nowrap; }
.tag--raster { background: rgba(125, 128, 148, .16); color: #5a5c70; }
.tag--vector { background: var(--brand-deep); color: #fff; }

.model-card {
  position: absolute; right: -18px; bottom: 0; width: 230px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 14px 16px 12px;
  border: 1px solid rgba(255, 255, 255, .8);
}
.model-card__head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.model-card__head b { color: #fff; background: var(--red); padding: 3px 8px; border-radius: 6px; letter-spacing: .04em; }
.model-card svg { width: 100%; height: auto; margin: 6px 0; }
.model-card__foot { font-size: 12px; font-weight: 700; color: var(--brand-deep); letter-spacing: .08em; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; width: 26px; height: 42px; margin-left: -13px;
  border-radius: 20px; box-shadow: inset 0 0 0 2px var(--brand-200);
}
.scroll-cue span { position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--red); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { max-width: 640px; width: 100%; margin: 0 auto; }
  .sheet { transform: none; }
  .scroll-cue { display: none; }
}
@media (max-width: 560px) {
  .hero__stats { gap: 14px; }
  .hero__stats dd { font-size: 12px; }
  .hero__ctas .btn { width: 100%; }
  .model-card { width: 168px; right: -6px; padding: 10px 12px 8px; }
  .model-card__head { font-size: 10px; }
  .sheet__tags { display: none; }
  .hero__visual { padding-bottom: 70px; }
}

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden; color: #fff;
  background: linear-gradient(90deg, #24265f 0%, #4749af 35%, #5052c0 50%, #4749af 65%, #24265f 100%);
  padding: 12px 0; position: relative;
}
.marquee__track { display: flex; width: max-content; }
.marquee ul { display: flex; flex: none; }
.marquee li {
  display: flex; align-items: center; gap: 28px; padding-right: 28px;
  font-weight: 700; font-size: clamp(11px, 1.6vw, 15px); letter-spacing: .02em; white-space: nowrap;
}
.marquee li::after {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid var(--red);
}

/* ---------- Rebuild notice ---------- */
.rebuild { padding-bottom: clamp(40px, 6vw, 70px); }
.rebuild__card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 70px);
  padding: clamp(28px, 5vw, 60px);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #ffffff 0%, #f5f5fc 100%);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
}
.rebuild__card::before {
  content: ""; position: absolute; right: -60px; bottom: -70px; width: 340px; height: 220px;
  background: url("../img/jds-mark.svg") center / contain no-repeat; opacity: .05;
}
.rebuild__intro .chip { margin-bottom: 22px; }
.rebuild__intro .h2 { font-size: clamp(28px, 3.6vw, 44px); }
.rebuild__intro p { margin: 20px 0 24px; font-size: 17px; }
.chip--live { background: var(--red-soft); color: var(--red-deep); box-shadow: inset 0 0 0 1px #f7cfcf; }

.roadmap { position: relative; display: grid; gap: 14px; counter-reset: rm; }
.roadmap__item {
  position: relative; padding: 20px 22px 20px 64px;
  border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.roadmap__item:hover { transform: translateX(4px); box-shadow: inset 0 0 0 1px var(--brand-200), var(--shadow-sm); }
.roadmap__item::before {
  counter-increment: rm; content: counter(rm);
  position: absolute; left: 20px; top: 20px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--brand-50); color: var(--brand-deep); box-shadow: inset 0 0 0 1px var(--brand-100);
}
.roadmap__item.is-done::before { content: "✓"; background: var(--brand-deep); color: #fff; box-shadow: none; }
.roadmap__item.is-current::before { background: var(--red); color: #fff; box-shadow: 0 0 0 6px rgba(204, 0, 0, .12); }
.roadmap__state { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.is-done .roadmap__state { color: var(--brand); }
.is-current .roadmap__state { color: var(--red); }
.roadmap__item h3 { font-size: 18px; }
.roadmap__item p { margin-top: 4px; font-size: 15px; color: var(--muted); }

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

/* ---------- Services ---------- */
.services { padding-top: clamp(40px, 6vw, 70px); }
.services__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.service-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--radius-lg); background: #fff; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
  transition: box-shadow .5s var(--ease), transform .5s var(--ease);
  transform-style: preserve-3d; will-change: transform;
}
.service-card:hover { box-shadow: inset 0 0 0 1px var(--brand-200), var(--shadow-lg); }
.service-card__media { position: relative; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.service-card__media svg { width: 100%; height: auto; }
.service-card__num {
  position: absolute; top: 16px; left: 18px;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--red);
  background: #fff; padding: 5px 10px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.service-card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(24px, 3vw, 36px); }
.service-card__body > p { margin-top: 14px; }
.ticks { display: grid; gap: 10px; margin: 22px 0 28px; }
.ticks li { position: relative; padding-left: 30px; font-size: 15px; color: var(--ink); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23393B8D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: inset 0 0 0 1px var(--brand-100);
}
.service-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; border-top: 1px dashed var(--brand-100); }
.price { font-size: 28px; font-weight: 700; color: var(--brand-deep); letter-spacing: -.02em; line-height: 1.1; }
.price small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.price small:last-child { display: inline; margin-left: 4px; }

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

/* ---------- Process ---------- */
.process { background: var(--bg-soft); }
.process__wrap { position: relative; }
.process__line { position: absolute; left: 12.5%; right: 12.5%; top: 36px; width: 75%; height: 4px; }
.process__line line { stroke: var(--brand); stroke-width: 4; stroke-dasharray: 1000; stroke-dashoffset: 0; }
.js .process__line line { stroke-dashoffset: 1000; }
.process__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.process__steps li { text-align: center; padding: 0 8px; }
.process__icon {
  display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 22px;
  border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
  transition: transform .5s var(--ease), background-color .4s;
}
.process__steps li:hover .process__icon { transform: translateY(-6px) rotate(-4deg); background: var(--brand-deep); }
.process__icon svg { width: 28px; height: 28px; fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.process__steps li.is-reached .process__icon svg { stroke: var(--red); }
.process__steps li:hover .process__icon svg { stroke: #fff; }
.process__steps h3 { font-size: 17px; }
.process__steps p { margin-top: 8px; font-size: 15px; color: var(--muted); }

@media (max-width: 860px) {
  .process__line { display: none; }
  .process__steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
}
@media (max-width: 480px) {
  .process__steps { grid-template-columns: 1fr; }
  .process__steps li { display: grid; grid-template-columns: 64px 1fr; gap: 0 18px; text-align: left; padding: 0; }
  .process__icon { grid-row: span 2; width: 60px; height: 60px; margin: 0; border-radius: 18px; }
}

/* ---------- About / benefits ---------- */
.about { background: var(--brand-night); color: #c8c9e8; overflow: hidden; }
.about::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(71, 73, 175, .55), transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(204, 0, 0, .18), transparent 40%);
}
.about__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.about__copy > p { margin-top: 22px; font-size: 17px; }
.about__counter { display: flex; gap: 48px; margin-top: 36px; }
.about__counter div { display: flex; flex-direction: column; }
.about__counter strong { font-size: clamp(44px, 5vw, 64px); color: #fff; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.about__counter small { margin-top: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--brand-200); }
.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.benefits li {
  padding: 26px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: background-color .4s, transform .5s var(--ease);
}
.benefits li:hover { background: rgba(255, 255, 255, .09); transform: translateY(-4px); }
.benefits__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--gradient); margin-bottom: 18px; box-shadow: 0 10px 20px -8px rgba(0,0,0,.5); }
.benefits__icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.benefits h3 { color: #fff; font-size: 18px; }
.benefits p { margin-top: 8px; font-size: 15px; color: #b3b5dd; }

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

/* ---------- References: logo carousel ---------- */
.refs { padding-bottom: clamp(40px, 6vw, 70px); }
.refs .section-head { margin-bottom: clamp(28px, 4vw, 44px); }
.refs__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.refs__track { display: flex; width: max-content; animation: refs-scroll 36s linear infinite; }
.refs__viewport:hover .refs__track { animation-play-state: paused; }
.refs ul { display: flex; flex: none; align-items: center; }
.refs li {
  flex: none; display: grid; place-items: center;
  width: clamp(170px, 20vw, 240px); height: clamp(84px, 9vw, 110px); margin-right: clamp(14px, 2vw, 24px);
  padding: 18px 26px; border-radius: 18px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .3s, transform .3s;
}
.refs li:hover { box-shadow: inset 0 0 0 1px var(--brand-200), var(--shadow); transform: translateY(-2px); }
.refs img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; opacity: .85; transition: opacity .3s; }
.refs li:hover img { opacity: 1; }
@keyframes refs-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .refs__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .refs__track { animation: none; }
  .refs ul[aria-hidden] { display: none; }
}

/* ---------- Test us ---------- */
.test-us { padding-bottom: 0; }
.test-us__card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 48px); align-items: center;
  padding: clamp(28px, 4.5vw, 56px);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, #fff 0%, #fff6f6 100%);
  box-shadow: inset 0 0 0 1px #f3dada, var(--shadow);
}
.test-us__mark { width: 120px; height: 76px; }
.test-us__card .h2 { font-size: clamp(24px, 2.8vw, 36px); max-width: 640px; }
.test-us__card .h2 em { color: var(--red); }
.test-us__card p:not(.eyebrow) { margin-top: 14px; color: var(--muted); max-width: 600px; }
.test-us__ctas { display: grid; gap: 10px; }
@media (max-width: 980px) {
  .test-us__card { grid-template-columns: 1fr; }
  .test-us__mark { width: 90px; height: 57px; }
  .test-us__ctas { grid-auto-flow: column; justify-content: start; }
}
@media (max-width: 560px) { .test-us__ctas { grid-auto-flow: row; } .test-us__ctas .btn { width: 100%; } }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; }

.form {
  position: relative;
  padding: clamp(22px, 4vw, 44px);
  border-radius: var(--radius-lg); background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
}
.form__group { border: 0; margin: 0 0 22px; padding: 0; }
.form__group legend { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px; padding: 0; }
.form__group--inline { display: flex; flex-wrap: wrap; gap: 10px; }
.form__group--inline legend { width: 100%; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 700; color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--line); background: var(--bg-soft);
  transition: box-shadow .25s, background-color .25s, color .25s;
}
.choice span::before { content: ""; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--brand-200); background: #fff; transition: box-shadow .25s; }
.choice input:checked + span { background: var(--brand-50); color: var(--brand-deep); box-shadow: inset 0 0 0 1.5px var(--brand); }
.choice input:checked + span::before { box-shadow: inset 0 0 0 5px var(--brand); }
.choice input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }

.form__row { display: grid; gap: 12px 16px; margin-bottom: 12px; }
.form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 44px; padding: 10px 14px;
  border: 0; border-radius: 12px; background: var(--bg-soft);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 15.5px; color: var(--ink);
  transition: box-shadow .25s, background-color .25s;
  appearance: none; -webkit-appearance: none;
}
.field textarea { resize: vertical; min-height: 112px; line-height: 1.5; }
.field select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23393B8D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.field input:hover, .field select:hover, .field textarea:hover { box-shadow: inset 0 0 0 1.5px var(--brand-200); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background-color: #fff; box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 4px rgba(71, 73, 175, .12); }
.field.has-error input, .field.has-error select, .field.has-error textarea { box-shadow: inset 0 0 0 2px var(--red); background-color: #fffafa; }
.field__error { font-size: 12.5px; color: var(--red); font-weight: 700; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent { display: flex; gap: 14px; align-items: flex-start; margin: 8px 0 24px; padding: 18px; border-radius: 14px; background: var(--bg-soft); font-size: 13.5px; line-height: 1.55; color: var(--muted); cursor: pointer; }
.consent input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--brand-deep); cursor: pointer; }
.consent.has-error { box-shadow: inset 0 0 0 2px var(--red); background: #fffafa; }

.form__submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.form__note { font-size: 13px; color: var(--muted); }

.form__success {
  display: flex; gap: 16px; align-items: flex-start; margin-top: 24px; padding: 20px;
  border-radius: 14px; background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-100);
}
.form__success[hidden] { display: none; }
.form__success-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-deep); }
.form__success-icon svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.form__success h3 { font-size: 17px; }
.form__success p { margin-top: 6px; font-size: 14.5px; }

.contact-card { position: sticky; top: calc(var(--header-h) + 10px); border-radius: var(--radius-lg); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.contact-card__body { padding: clamp(22px, 3vw, 32px); }
.contact-card h3 { font-size: 20px; color: var(--brand-deep); letter-spacing: .01em; }
.contact-card address { font-style: normal; margin-top: 8px; color: var(--text); }
.contact-list { display: grid; margin: 22px 0; border-top: 1px solid var(--line); }
/* The label column fits the longest label ("GESCHÄFTSZEITEN"); on a narrow card the label sits above its value.
   A container query, because the card is narrow in some desktop layouts too, not only on phones. */
.contact-card__body { container-type: inline-size; }
.contact-list li { display: grid; grid-template-columns: 9.25rem 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
@container (max-width: 340px) {
  .contact-list li { grid-template-columns: 1fr; gap: 3px; }
  .contact-list__label { padding-top: 0; }
}
.contact-list a { font-weight: 700; color: var(--brand-deep); word-break: break-word; }
.contact-list a:hover { color: var(--red); }
.contact-list__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding-top: 2px; }
.contact-card__visit { font-size: 15px; color: var(--muted); }
.contact-card__sign { margin: 10px 0 22px; color: var(--brand-deep); font-size: 17px; }

@media (max-width: 980px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact-card { position: static; }
}
@media (max-width: 640px) {
  .form__row--2, .form__row--3 { grid-template-columns: 1fr; }
  .form__submit .btn { width: 100%; }
}

/* ---------- Footer ---------- */
.site-footer { margin-top: 0; background: var(--brand-night); color: #a9abd6; font-size: 15px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-top: 64px; padding-bottom: 48px; }
/* Header V2 adds the About us and Resources columns to the footer */
html:not([data-header-design="v1"]) .footer__top { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px; }
html[data-header-design="v1"] .footer__col--v2 { display: none; }
.footer__brand p { margin-top: 18px; max-width: 320px; }
.footer__col h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 16px; }
.footer__col ul { display: grid; gap: 10px; }
.site-footer a { color: #d9daf3; }
.site-footer a:hover { color: #fff; }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-top: 22px; padding-bottom: 26px; font-size: 13.5px; position: relative; }
.footer__bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: rgba(255, 255, 255, .1); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-left: auto; }
.to-top { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff !important; font-weight: 700; }
.to-top:hover { background: var(--red); }

@media (max-width: 1080px) {
  html:not([data-header-design="v1"]) .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:not([data-header-design="v1"]) .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .footer__top,
  html:not([data-header-design="v1"]) .footer__top { grid-template-columns: 1fr; gap: 32px; }
  .footer__legal { margin-left: 0; }
}

/* ---------- Legal pages (privacy policy) ---------- */
.policy { padding: clamp(48px, 7vw, 88px) 0 clamp(64px, 8vw, 110px); }
.policy__layout {
  display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px); align-items: start;
}
.policy__toc {
  position: sticky; top: calc(var(--header-h) + 12px); max-height: calc(100vh - var(--header-h) - 40px);
  overflow: auto; padding: 22px 22px 20px; border-radius: var(--radius);
  background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line);
}
/* Same branded bar for the section index when it scrolls */
.policy__toc::-webkit-scrollbar { width: 4.5px; height: 4.5px; }
.policy__toc::-webkit-scrollbar-track { background: transparent; }
.policy__toc::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--brand), var(--red)); border-radius: 2px; }
.policy__toc.is-scrollbar-hover::-webkit-scrollbar { width: 6.5px; }
.policy__toc.is-scrollbar-hover::-webkit-scrollbar-thumb { border-radius: 3px; }
@supports not selector(::-webkit-scrollbar) {
  .policy__toc { scrollbar-width: thin; scrollbar-color: var(--brand) transparent; }
}
.policy__toc h2 {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand);
  padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--brand-100);
}
.policy__toc ol { display: grid; gap: 4px; counter-reset: toc; }
.policy__toc li { counter-increment: toc; }
.policy__toc a { position: relative; display: block; padding: 6px 0 6px 26px; font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.4; }
.policy__toc a::before {
  content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: 7px;
  font-size: 11px; letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums;
}
.policy__toc a:hover { color: var(--brand); }
.policy__toc-foot { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--brand-100); font-size: 13.5px; }
.policy__toc-foot .link-arrow { font-size: 13.5px; }

.policy__meta { margin-top: 24px; font-size: 14px; color: var(--muted); }
.policy__meta strong { color: var(--ink); }
.policy__meta a { font-weight: 700; color: var(--brand-deep); }

.policy__toc, .policy__body { min-width: 0; }
.policy__body { max-width: 820px; scroll-margin-top: var(--header-h); overflow-wrap: break-word; }
.policy__body > p { margin-top: 18px; font-size: 16.5px; }
.policy__body h2 {
  font-size: clamp(22px, 2.2vw, 28px); margin-top: clamp(40px, 5vw, 56px);
  padding-top: 22px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 12px);
}
.policy__body h2:first-of-type { margin-top: 40px; }
.policy__body h3 { font-size: 18px; margin-top: 28px; scroll-margin-top: calc(var(--header-h) + 12px); }
.policy__body p, .policy__body li { margin-top: 12px; }
.policy__body ul { list-style: disc; padding-left: 24px; }
.policy__body ul li { padding-left: 4px; }
.policy__body ul li::marker { color: var(--red); }
.policy__body a { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.policy__address { font-style: normal; margin-top: 16px; padding: 18px 22px; border-radius: var(--radius); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-100); color: var(--ink); line-height: 1.7; }
.policy__address a { color: var(--brand-deep); }
.policy__defs { margin: 18px 0 0; }
.policy__defs dt { margin-top: 18px; font-weight: 700; color: var(--ink); }
.policy__defs dd { margin: 6px 0 0; }
.policy__note { margin-top: 16px; padding: 18px 22px; border-radius: var(--radius); background: #fff6f6; box-shadow: inset 0 0 0 1px #f3dada; font-size: 15.5px; }

@media (max-width: 980px) {
  .policy__layout { grid-template-columns: minmax(0, 1fr); }
  .policy__toc { position: static; max-height: none; }
  .policy__toc ol { grid-template-columns: 1fr 1fr; gap: 4px 20px; }
}
@media (max-width: 560px) {
  .policy__toc ol { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .process__line line { stroke-dashoffset: 0; }
  .process__icon svg { stroke: var(--red); }
}

/* ==========================================================================
   Service pages
   ========================================================================== */

/* ---------- Page hero ---------- */
.page-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--header-h) + clamp(28px, 4vw, 56px)) 0 clamp(60px, 7vw, 96px);
  background: linear-gradient(180deg, #fbfbfe 0%, #f3f3fb 100%);
}
.page-hero__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 72px); align-items: center;
}
.page-hero__title { font-size: clamp(38px, 5vw, 66px); }
.page-hero .hero__visual { padding-bottom: 0; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 13.5px; color: var(--muted); }
.crumbs a { color: var(--muted); font-weight: 700; }
.crumbs a:hover { color: var(--brand); }
.crumbs [aria-current] { color: var(--brand-deep); font-weight: 700; }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; max-width: 560px; }
.facts li { padding: 16px 16px 14px; border-radius: 16px; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px var(--brand-100); backdrop-filter: blur(6px); }
.facts strong { display: block; font-size: clamp(22px, 2.2vw, 28px); color: var(--brand-deep); letter-spacing: -.03em; line-height: 1; }
.facts span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.35; }

@media (max-width: 980px) {
  /* minmax(0, 1fr): a long unbreakable line (longer German labels) must not widen the column past the screen */
  .page-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .page-hero .hero__visual { max-width: 640px; width: 100%; margin: 0 auto; }
}
@media (max-width: 560px) {
  .facts { gap: 8px; }
  .facts li { padding: 12px 10px; }
  .facts span { font-size: 11.5px; }
}

/* ---------- Compare slider ---------- */
.compare, .cloud-card { border-radius: var(--radius-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow-lg); }
.compare__bar { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: #fbfbfe; }
.compare__stage { position: relative; aspect-ratio: 600 / 420; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.compare__layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.compare__layer--after { clip-path: inset(0 0 0 var(--pos)); }
.compare__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
  background: var(--red); pointer-events: none; box-shadow: 0 0 0 4px rgba(204, 0, 0, .1);
}
.compare__handle > span {
  position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  display: grid; place-items: center; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2px var(--red), var(--shadow);
  transition: transform .3s var(--ease);
}
.compare__handle svg { width: 20px; height: 20px; fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.compare:hover .compare__handle > span, .compare.is-dragging .compare__handle > span { transform: scale(1.1); }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.compare__range:focus-visible { outline: none; }
.compare:has(.compare__range:focus-visible) .compare__handle > span { box-shadow: 0 0 0 3px var(--red), 0 0 0 7px rgba(204, 0, 0, .2); }
.compare__label { position: absolute; top: 14px; font-size: 11.5px; font-weight: 700; padding: 6px 11px; border-radius: 999px; pointer-events: none; letter-spacing: .02em; }
.compare__label--before { left: 14px; background: rgba(111, 112, 128, .18); color: #4f5062; }
.compare__label--after { right: 14px; background: var(--brand-deep); color: #fff; }

/* ---------- Point cloud card ---------- */
.cloud-card__stage { position: relative; aspect-ratio: 600 / 440; background: radial-gradient(circle at 50% 60%, #ffffff 0%, #f1f1fa 100%); }
.cloud-card__stage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(71,73,175,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(71,73,175,.06) 1px, transparent 1px); background-size: 24px 24px; }
.cloud { position: absolute; inset: 0; width: 100%; height: 100%; }
.cloud-card__hud { position: absolute; left: 14px; right: 14px; top: 14px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.cloud-card__meter { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 4px; border-radius: 4px; background: var(--brand-100); overflow: hidden; }
.cloud-card__meter span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--red)); border-radius: inherit; }

/* ---------- 5 steps ---------- */
.steps5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.steps5 li {
  position: relative; padding: 26px 22px 24px; border-radius: var(--radius);
  background: #fff; box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.steps5 li:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--brand-200), var(--shadow); }
.steps5 li:not(:last-child)::after {
  content: ""; position: absolute; top: 40px; right: -11px; z-index: 1; width: 8px; height: 8px;
  border-top: 2px solid var(--red); border-right: 2px solid var(--red); transform: rotate(45deg);
}
.steps5__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--gradient); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .04em; margin-bottom: 18px; }
.steps5 h3 { font-size: 17px; text-transform: uppercase; letter-spacing: .06em; }
.steps5 p { margin-top: 8px; font-size: 14.5px; color: var(--muted); }
.steps-section { padding-bottom: clamp(40px, 6vw, 70px); }
@media (max-width: 1080px) { .steps5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .steps5 li::after { display: none; } }
@media (max-width: 640px) {
  .steps5 { grid-template-columns: 1fr; }
  .steps5 li { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; padding: 20px; }
  .steps5__n { grid-row: span 2; margin: 0; }
}

/* ---------- Pricing tiers ---------- */
.pricing { background: var(--bg-soft); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.tier {
  display: flex; flex-direction: column; gap: 22px;
  padding: clamp(24px, 3vw, 34px); border-radius: var(--radius-lg);
  background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.tier:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--brand-200), var(--shadow-lg); }
.tier--featured { box-shadow: inset 0 0 0 2px var(--brand), var(--shadow); }
.tier--dark { background: var(--gradient-diag); color: #c8c9e8; box-shadow: var(--shadow); }
.tier__head h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); }
.tier--dark .tier__head h3 { color: var(--brand-200); }
.tier__price { margin-top: 12px; font-size: clamp(44px, 4.4vw, 56px); font-weight: 700; color: var(--ink); letter-spacing: -.04em; line-height: 1; }
.tier__price small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.tier__price small:first-child { margin-bottom: 8px; }
.tier__price small:last-child { margin-top: 8px; }
.tier--dark .tier__price { color: #fff; }
.tier--dark .tier__price small { color: #a9abd6; }
.tier__list { display: grid; align-content: start; gap: 14px; margin: 0; padding-top: 22px; border-top: 1px dashed var(--brand-100); flex: 1; }
.tier--dark .tier__list { border-top-color: rgba(255, 255, 255, .16); }
.tier__list dt { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tier--dark .tier__list dt { color: var(--brand-200); }
.tier__list dd { margin: 4px 0 0; font-size: 15px; color: var(--ink); }
.tier--dark .tier__list dd { color: #fff; }
.btn--light { background: #fff; color: var(--brand-deep); }
.btn--light:hover { background: var(--red); color: #fff; }

.included { margin-top: 20px; padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.included h3 { font-size: 18px; }
.ticks--cols { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 28px; margin: 18px 0 0; }

.delivery {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center;
  margin-top: 20px; padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-lg);
  background: linear-gradient(120deg, #fff 0%, #fff6f6 100%); box-shadow: inset 0 0 0 1px #f3dada;
}
.delivery h3 { font-size: 20px; }
.delivery p { margin-top: 6px; color: var(--muted); font-size: 15px; }
.delivery__opts { display: flex; gap: 10px; }
.delivery__opts li { min-width: 128px; padding: 14px 18px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.delivery__opts span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.delivery__opts strong { display: block; margin-top: 4px; font-size: 22px; color: var(--brand-deep); letter-spacing: -.02em; }
.delivery__opts .is-hot { background: var(--red); box-shadow: 0 12px 24px -12px rgba(204, 0, 0, .8); }
.delivery__opts .is-hot span { color: #ffd3d3; }
.delivery__opts .is-hot strong { color: #fff; }

@media (max-width: 980px) { .tiers { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } .delivery { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .delivery__opts { flex-direction: column; } }

/* ---------- Detail / specs ---------- */
.detail__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.detail__copy > p:not(.eyebrow) { margin-top: 20px; font-size: 17px; }
.spec-card { padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.spec-card h3 { font-size: 22px; }
.spec-card > p { margin-top: 6px; color: var(--muted); }
.spec-card h4 { margin-top: 26px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.spec-list { margin-top: 16px; border-top: 1px solid var(--line); }
.spec-list li { display: flex; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--ink); transition: padding .35s var(--ease), color .3s; }
.spec-list li:hover { padding-left: 6px; color: var(--brand); }
.spec-list span { font-size: 12px; color: var(--red); letter-spacing: .1em; }
.format-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.format-chips li { padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #fff; background: var(--brand-deep); }
.format-chips--soft li { background: var(--brand-50); color: var(--brand-deep); box-shadow: inset 0 0 0 1px var(--brand-100); }
@media (max-width: 900px) { .detail__grid { grid-template-columns: 1fr; } }

/* ---------- Why (dark, reuses .about) ---------- */
.why .about__copy > p + p { margin-top: 14px; }
/* Logo watermark in the empty lower right of the know-how section */
.why__mark {
  position: absolute; z-index: 0; pointer-events: none;
  right: clamp(-120px, -4vw, -40px); bottom: clamp(-60px, -3vw, -20px);
  width: clamp(320px, 42vw, 640px); aspect-ratio: 116 / 73; height: auto;
  opacity: .1; filter: saturate(.8);
  animation: why-mark 14s ease-in-out infinite alternate;
}
.why .about__grid { z-index: 1; }
@keyframes why-mark { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-18px) rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .why__mark { animation: none; } }
@media (max-width: 900px) { .why__mark { width: 300px; opacity: .07; } }
.expertise h3 { color: #fff; font-size: 20px; margin-bottom: 18px; }
.expertise__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.expertise__chips li {
  padding: 10px 16px; border-radius: 999px; font-size: 14.5px; color: #e3e4f7;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: background-color .3s, color .3s, transform .4s var(--ease);
}
.expertise__chips li:hover { background: var(--red); color: #fff; transform: translateY(-3px); }

/* ---------- Quote ---------- */
.quote { position: relative; max-width: 920px; margin: 0 auto; text-align: center; }
.quote__mark { width: 56px; height: 42px; margin: 0 auto 26px; fill: var(--red); }
.quote blockquote { margin: 0; }
.quote blockquote p { font-family: var(--font-accent); font-style: italic; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.4; color: var(--ink); letter-spacing: -.01em; }
.quote figcaption { margin-top: 28px; display: flex; flex-direction: column; gap: 2px; }
.quote figcaption strong { color: var(--brand-deep); }
.quote figcaption span { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }

/* ---------- Cross link ---------- */
.crosslink-section { padding-top: 0; padding-bottom: 0; }
.crosslink {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: clamp(26px, 4vw, 48px); border-radius: var(--radius-lg);
  background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); color: inherit;
  transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}
.crosslink:hover { color: inherit; transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--brand-200), var(--shadow-lg); }
.crosslink .h2 { font-size: clamp(24px, 3vw, 38px); }
.crosslink p:not(.eyebrow) { margin-top: 12px; color: var(--muted); max-width: 640px; }
.crosslink__arrow { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--gradient); transition: background-color .4s, transform .5s var(--ease); }
.crosslink__arrow svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.crosslink:hover .crosslink__arrow { transform: translateX(6px) rotate(-8deg); background: linear-gradient(180deg, #d61a1a, #a3001a); }
@media (max-width: 560px) { .crosslink { flex-direction: column; align-items: flex-start; } .crosslink__arrow { width: 56px; height: 56px; } }

.test-us--end { padding-bottom: clamp(72px, 10vw, 130px); }

/* ---------- 3D: statement ---------- */
.statement { padding-bottom: clamp(30px, 5vw, 60px); }
.statement__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; padding-top: clamp(30px, 4vw, 50px); border-top: 1px solid var(--line); }
.statement__grid p { font-size: 17px; }
.statement__grid p + p { margin-top: 14px; }
@media (max-width: 860px) { .statement__grid { grid-template-columns: 1fr; } }

/* ---------- 3D: applications ---------- */
.applications { padding-top: clamp(40px, 6vw, 70px); }
.apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.app-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); transition: box-shadow .5s var(--ease); transform-style: preserve-3d; }
.app-card:hover { box-shadow: inset 0 0 0 1px var(--brand-200), var(--shadow-lg); }
.app-card__media { position: relative; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.app-card__media svg { width: 100%; height: auto; }
.app-card__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: clamp(24px, 3vw, 36px); }
.app-card__body > p { margin-top: 14px; }
.app-card__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; width: 100%; }
.app-card__cols h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--brand); }
.app-card__cols .ticks { margin: 12px 0 0; }
.app-card__cols .ticks li { font-size: 14.5px; }
.app-card .format-chips { margin: 24px 0 26px; }
.app-card .btn { margin-top: auto; }
@media (max-width: 1000px) { .apps { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .app-card__cols { grid-template-columns: 1fr; } .app-card .btn { width: 100%; white-space: normal; text-align: center; } }

/* ---------- 3D: LOD explorer ---------- */
.lod-section { background: var(--bg-soft); }
.lod__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.lod__copy > p:not(.eyebrow) { margin-top: 20px; font-size: 17px; }
.lod__tabs { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 30px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.lod__tabs button {
  position: relative; z-index: 1; min-height: 46px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-weight: 700; font-size: 15px; color: var(--muted); transition: color .3s;
}
.lod__tabs button[aria-selected="true"] { color: #fff; }
.lod__tabs button:not([aria-selected="true"]):hover { color: var(--brand); }
.lod__ink { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 5); border-radius: 999px; background: var(--gradient); box-shadow: 0 8px 18px -8px rgba(57, 59, 141, .8); transition: transform .5s var(--ease); }
.lod__desc { margin-top: 22px; min-height: 104px; }
.lod__desc h3 { font-size: 20px; color: var(--brand-deep); }
.lod__desc p { margin-top: 6px; color: var(--muted); }
.lod__visual { border-radius: var(--radius-lg); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg); }
.lod-svg { width: 100%; height: auto; }
.lod-svg [data-l] { transition: opacity .5s var(--ease), transform .6s var(--ease); transform-origin: 50% 50%; transform-box: fill-box; }
.lod-svg [data-l].is-off { opacity: 0; transform: scale(.97); }
@media (max-width: 900px) { .lod__grid { grid-template-columns: 1fr; } }

/* ---------- 3D: prices + formats ---------- */
.prices3d__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.price-table .h2 { font-size: clamp(28px, 3.4vw, 42px); }
.price-rows { margin-top: 28px; border-top: 1px solid var(--line); }
.price-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); transition: padding .35s var(--ease); }
.price-rows li:hover { padding-left: 8px; }
.price-rows span { color: var(--ink); }
.price-rows strong { flex: none; color: var(--brand-deep); font-size: 18px; white-space: nowrap; }
.price-rows li:first-child strong { color: var(--red); }
.price-table__note { margin-top: 16px; font-size: 14px; color: var(--muted); }
.formats { padding: clamp(24px, 3vw, 34px); border-radius: var(--radius-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.formats__col + .formats__col { margin-top: 26px; padding-top: 24px; border-top: 1px dashed var(--brand-100); }
.formats h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); }
.formats__note { margin-top: 20px; font-size: 14px; color: var(--muted); }
@media (max-width: 900px) { .prices3d__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .price-rows li { flex-direction: column; gap: 4px; } }

/* ==========================================================================
   Live map, step form, FAQ, floating back-to-top
   ========================================================================== */

/* ---------- Live map in the contact card ---------- */
.contact-card__map {
  position: relative; height: 260px; overflow: hidden;
  /* blueprint grid shows while the map tiles load */
  background: #f1f1f8 linear-gradient(rgba(71,73,175,.08) 1px, transparent 1px) 0 0 / 24px 24px,
              linear-gradient(90deg, rgba(71,73,175,.08) 1px, transparent 1px) 0 0 / 24px 24px;
}
.contact-card__map iframe {
  position: absolute; inset: -40px 0 0 0; width: 100%; height: calc(100% + 40px); border: 0;
  pointer-events: none; /* static map; the pin stays on the address */
  filter: grayscale(1) contrast(1.05) brightness(1.04);
}
.contact-card__tint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(71, 73, 175, .22), rgba(57, 59, 141, .12)); mix-blend-mode: multiply; }
/* iframe is shifted up 40px (hides zoom buttons), so the address sits 20px above centre */
.contact-card__pin { position: absolute; left: 50%; top: calc(50% - 20px); width: 0; height: 0; }
.contact-card__pin-head {
  position: absolute; left: -26px; top: -70px; width: 52px; height: 52px;
  display: grid; place-items: center; border-radius: 50% 50% 50% 0; rotate: -45deg;
  background: #fff; box-shadow: 0 10px 24px -8px rgba(21, 22, 61, .55);
  animation: pinDrop 1s var(--ease) both;
}
.contact-card__pin-head svg { width: 32px; height: 20px; rotate: 45deg; }
.contact-card__pin-dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(204, 0, 0, .2); }
.contact-card__pin-dot::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--red); opacity: 0; animation: pulse 2.2s infinite; }
@keyframes pinDrop { 0% { transform: translateY(-30px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.contact-card__open {
  position: absolute; right: 12px; top: 12px; padding: 8px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: var(--brand-deep); background: rgba(255, 255, 255, .94); box-shadow: var(--shadow-sm);
  transition: background-color .3s, color .3s;
}
.contact-card__open:hover { background: var(--brand-deep); color: #fff; }

/* ---------- Contact form: one step, sent in the background (contact.php) ---------- */
.form__title { padding: 0; margin-bottom: 14px; font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.form .form__group { margin: 2px 0 0; }
.form .consent { margin-bottom: 0; }

.form__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.form__nav .form__note { flex: 1; min-width: 160px; }
.form__send[disabled] { opacity: .7; cursor: progress; }
.form__send[disabled] svg { animation: form-send 1s ease-in-out infinite; }
@keyframes form-send { 50% { transform: translateX(4px); } }

/* Sending failed: say so, with the other ways to reach us */
.form__error {
  margin-top: 18px; padding: 16px 18px; border-radius: 14px;
  background: #fffafa; box-shadow: inset 0 0 0 1.5px var(--red);
  font-size: 14.5px; color: var(--ink);
}
.form__error[hidden] { display: none; }
.form__error a { font-weight: 700; color: var(--brand-deep); white-space: nowrap; }

/* Sent: the confirmation takes the place of the fields */
.form.is-sent .form__body, .form.is-sent .form__nav { display: none; }
.form.is-sent { display: flex; flex-direction: column; justify-content: center; }
.form.is-sent .form__success { margin-top: 0; }

/* Sent animation: letter folds into a paper plane that flies into the JDS box, using up its route as it goes.
   Drawn in its final state (route flown, badge on the box), so it is complete without JS or with reduced motion. */
.form__sent-art { display: none; }
.form.is-sent .form__sent-art { display: block; width: 100%; max-width: 440px; margin: 0 auto 18px; }
.form__sent-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.sa-trail { fill: none; stroke: var(--brand-200); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 9; }
.sa-sheet { fill: #fff; stroke: var(--brand); stroke-width: 2; }
.sa-lines { fill: none; stroke: var(--brand-200); stroke-width: 3; stroke-linecap: round; }
.sa-trail, .sa-letter, .sa-plane { opacity: 0; }
.sa-wing { fill: #fff; stroke: var(--brand-deep); stroke-width: 2; stroke-linejoin: round; }
.sa-wing--low { fill: var(--brand-100); }
.sa-fold { stroke: var(--brand-deep); stroke-width: 1.5; }
.sa-box-bg { fill: #fff; stroke: var(--line); stroke-width: 2; filter: drop-shadow(0 8px 18px rgba(57, 59, 141, .14)); }
.sa-badge circle { fill: var(--brand-deep); }
.sa-badge path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 640px) {
  .form__nav { gap: 10px; }
  .form__nav .form__note { order: -1; flex-basis: 100%; }
  .form__nav .btn { flex: 1; }
  .form__submit .btn { width: auto; }
}

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq__head { position: sticky; top: calc(var(--header-h) + 10px); }
.faq__help { display: flex; gap: 16px; align-items: center; margin-top: 30px; padding: 18px 20px; border-radius: var(--radius); background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.faq__help svg { flex: none; width: 52px; height: 33px; }
.faq__help p { font-size: 14.5px; }
.faq__help strong { display: block; color: var(--ink); }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: clamp(16px, 1.4vw, 18.5px); font-weight: 700; color: var(--ink); letter-spacing: -.01em;
  transition: color .25s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover, .faq__item[open] summary { color: var(--brand); }
.faq__icon { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .35s, transform .5s var(--ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; margin: -1px 0 0 -6.5px; border-radius: 2px; background: var(--brand-deep); transition: transform .45s var(--ease), background-color .35s; }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--red); box-shadow: none; transform: rotate(180deg); }
.faq__item[open] .faq__icon::before, .faq__item[open] .faq__icon::after { background: #fff; }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__a { overflow: hidden; }
.faq__a p { padding: 0 56px 24px 0; color: var(--text); }
@media (max-width: 900px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__head { position: static; }
  .faq__a p { padding-right: 0; }
}

/* ---------- Floating back-to-top: the logo's red triangle ---------- */
.fab-top {
  position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 80;
  width: 64px; height: 42px; display: block;
  filter: drop-shadow(0 10px 14px rgba(139, 0, 31, .35));
  opacity: 0; visibility: hidden; transform: translateY(24px) scale(.8);
  transition: opacity .4s var(--ease), transform .5s var(--ease), visibility 0s .5s, filter .3s;
}
.fab-top svg { width: 100%; height: 100%; overflow: visible; transition: transform .5s var(--ease); }
.fab-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .4s var(--ease), transform .5s var(--ease), visibility 0s, filter .3s; }
.fab-top:hover { filter: drop-shadow(0 16px 20px rgba(204, 0, 0, .45)); }
.fab-top:hover svg { transform: translateY(-5px); }
.fab-top:active svg { transform: translateY(-2px) scale(.96); }
.fab-top:focus-visible { outline: none; }
.fab-top:focus-visible svg { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 6px; }
.menu-open .fab-top { opacity: 0; visibility: hidden; }
@media (max-width: 520px) { .fab-top { width: 54px; height: 36px; } }

/* ==========================================================================
   Homepage hero variants (under review): v1 video, v2 compare, v3 original, v4 bare video
   ========================================================================== */
/* Only the chosen hero shows; JS also removes the others from the DOM */
html[data-hero="v1"] [data-hero-variant]:not([data-hero-variant="v1"]),
html[data-hero="v2"] [data-hero-variant]:not([data-hero-variant="v2"]),
html[data-hero="v3"] [data-hero-variant]:not([data-hero-variant="v3"]),
html[data-hero="v4"] [data-hero-variant]:not([data-hero-variant="v4"]),
html:not([data-hero]) [data-hero-variant]:not([data-hero-variant="v1"]) { display: none; }

/* ---------- V1: full-bleed video ---------- */
.hero--video {
  display: flex; align-items: flex-end;
  min-height: max(660px, 100svh);
  padding: calc(var(--header-h) + 48px) 0 clamp(40px, 6vw, 72px);
  background: var(--brand-night); color: #fff;
}
.hero-video { position: absolute; inset: 0; overflow: hidden; }
.hero-video__media { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.hero-video__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(21, 22, 61, .66) 0%, rgba(21, 22, 61, .4) 48%, rgba(21, 22, 61, .1) 100%),
    linear-gradient(0deg, rgba(21, 22, 61, .58) 0%, rgba(21, 22, 61, 0) 45%),
    linear-gradient(180deg, rgba(21, 22, 61, .48) 0%, rgba(21, 22, 61, 0) 28%);
}
.hero-video__inner {
  position: relative; width: 100%;
  display: grid; grid-template-columns: minmax(0, 660px) minmax(0, 1fr); gap: 32px 48px; align-items: end;
}

.hero-glass {
  padding: clamp(24px, 3.4vw, 42px);
  border-radius: var(--radius-lg);
  background: rgba(21, 22, 61, .32);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
}
.hero-glass .eyebrow em { color: #ff9c9c; }
.hero__title--light { color: #fff; }
.hero__title--light em { color: var(--brand-200); }
.hero-glass .hero__lead { margin-top: 20px; color: rgba(255, 255, 255, .82); }
/* Right column: stat numbers, then the CTAs underneath */
.hero-video__side { display: flex; flex-direction: column; align-items: flex-end; gap: 28px; }
.hero-video__ctas { justify-content: flex-end; margin-top: 0; }
.btn--glass {
  background: rgba(255, 255, 255, .1); color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.btn--glass:hover { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }

.hero-video__stats { display: flex; justify-content: flex-end; gap: clamp(20px, 3vw, 44px); margin: 0; padding-bottom: 6px; }
.hero-video__stats div { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .3); }
.hero-video__stats dt { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; color: #fff; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-video__stats dd { margin: 8px 0 0; max-width: 150px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .75); }

.hero-video__toggle {
  position: absolute; right: var(--gutter); bottom: 20px; z-index: 2;
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(21, 22, 61, .35); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color .3s;
}
.hero-video__toggle:hover { background: rgba(255, 255, 255, .2); }
.hero-video__toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero-video__toggle .i-play { display: none; fill: currentColor; stroke: none; }
.hero-video__toggle.is-paused .i-play { display: block; }
.hero-video__toggle.is-paused .i-pause { display: none; }

/* Header sits transparent over the video until the page scrolls */
.hero-dark:not(.menu-open) .site-header:not(.is-scrolled)::after { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero-dark:not(.menu-open) .site-header:not(.is-scrolled) .nav__link,
.hero-dark:not(.menu-open) .site-header:not(.is-scrolled) .nav__link.is-active,
.hero-dark:not(.menu-open) .site-header:not(.is-scrolled) .header__phone,
.hero-dark:not(.menu-open) .site-header:not(.is-scrolled) .brand__name { color: #fff; }
.hero-dark:not(.menu-open) .site-header:not(.is-scrolled) .nav__link:hover { background: rgba(255, 255, 255, .12); }
.hero-dark:not(.menu-open) .site-header:not(.is-scrolled) .brand__tag { color: rgba(255, 255, 255, .72); }
.hero-dark:not(.menu-open) .site-header:not(.is-scrolled) .brand__mark { background: #fff; border-radius: 9px; padding: 3px 5px; }
.hero-dark:not(.menu-open) .site-header:not(.is-scrolled) .burger { background: rgba(255, 255, 255, .16); }
.hero-dark:not(.menu-open) .site-header:not(.is-scrolled) .burger span { background: #fff; }

@media (max-width: 980px) {
  .hero-video__inner { grid-template-columns: 1fr; }
  .hero-video__side { align-items: flex-start; }
  .hero-video__stats, .hero-video__ctas { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .hero--video { min-height: 0; padding-top: calc(var(--header-h) + 80px); }
  .hero-video__side { align-items: stretch; gap: 24px; }
  .hero-video__stats { gap: 14px; }
  .hero-video__stats div { padding-left: 12px; }
  .hero-video__stats dd { font-size: 12px; }
  .hero-video__ctas .btn { width: 100%; }
}

/* Five nav items: tighten the header between the burger breakpoint and full width */
@media (max-width: 1180px) {
  .nav__link { padding: 10px 10px; }
  .nav__link::after { left: 10px; right: 10px; }
  .brand__tag { display: none; }
}

/* ---------- V2: CAD plan / BIM model comparison ---------- */
.hero--compare {
  padding: calc(var(--header-h) + clamp(40px, 5vw, 72px)) 0 clamp(56px, 7vw, 96px);
  background: linear-gradient(180deg, #f7f7fc 0%, #eceefa 100%);
}
.hero-cmp__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.hero--compare .hero__ctas { align-items: center; gap: 14px 26px; }
.hero-cmp__visual { padding: 0; }
.cad-bim-compare { margin: 0; overflow: hidden; border: 1px solid rgba(57, 59, 141, .16); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-lg); }
.cad-bim-compare__panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cad-bim-compare__panel { position: relative; min-width: 0; overflow: hidden; background: #fff; }
.cad-bim-compare__panel + .cad-bim-compare__panel { border-left: 1px solid rgba(57, 59, 141, .18); }
.cad-bim-compare__label { position: absolute; z-index: 1; top: 12px; left: 12px; margin: 0; padding: 7px 9px; border: 1px solid rgba(57, 59, 141, .14); border-radius: 5px; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(31, 35, 96, .08); color: var(--brand-deep); font-size: 10px; font-weight: 800; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.cad-bim-compare__label span { color: var(--red); }
.cad-bim-compare__crop { position: relative; aspect-ratio: 816 / 964; overflow: hidden; }
.cad-bim-compare__crop img { position: absolute; top: 0; width: 200%; max-width: none; height: 100%; object-fit: cover; }
.cad-bim-compare__panel--cad img { left: 0; }
.cad-bim-compare__panel--bim img { right: 0; }
.cad-bim-compare figcaption { padding: 10px 14px 11px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.35; }

.hero-cmp__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); margin: clamp(48px, 6vw, 72px) 0 0; }
.hero-cmp__stats div { padding: 26px 18px; border-radius: var(--radius); background: #fff; text-align: center; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); }
.hero-cmp__stats dt { font-size: clamp(30px, 3.2vw, 44px); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--brand); font-variant-numeric: tabular-nums; }
.hero-cmp__stats dd { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 980px) {
  .hero-cmp__inner { grid-template-columns: 1fr; }
  .hero-cmp__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cad-bim-compare__label { top: 8px; left: 8px; padding: 6px 7px; font-size: 8px; letter-spacing: .055em; }
  .cad-bim-compare figcaption { padding: 8px 10px 9px; font-size: 10px; }
  .hero-cmp__stats div { padding: 20px 12px; }
  .hero-cmp__stats dd { font-size: 11px; letter-spacing: .06em; }
}

/* ---------- Review switcher (remove with the unused heroes) ---------- */
.hero-switch {
  display: none; position: fixed; left: 16px; bottom: 16px; z-index: 150;
  align-items: center; gap: 2px; padding: 5px; border-radius: 999px;
  background: rgba(21, 22, 61, .94); box-shadow: var(--shadow-lg); font-size: 13px;
}
.has-hero-variants .hero-switch { display: flex; }
.menu-open .hero-switch, .in-frame .hero-switch { display: none; }
.hero-switch__label { padding: 0 8px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a9abd6; }
.hero-switch a { padding: 7px 12px; border-radius: 999px; font-weight: 700; color: #fff; white-space: nowrap; }
.hero-switch a small { margin-left: 3px; font-weight: 400; color: #a9abd6; }
.hero-switch a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.hero-switch a.is-active { background: #fff; color: var(--brand-deep); }
.hero-switch a.is-active small { color: var(--muted); }
@media (max-width: 560px) { .hero-switch a small { display: none; } }

/* ---------- Service cards: project images ---------- */
.service-card__media--photo { overflow: hidden; background: var(--brand-night); }
.service-card__media--photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .9s var(--ease); }
.service-card:hover .service-card__media--photo img { transform: scale(1.04); }

/* ---------- Industries ---------- */
.industries__head { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px 64px; align-items: end; }
.industries__head .section-head__lead { margin-top: 0; }
.industries__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3.4vw, 48px) clamp(20px, 2.4vw, 32px); }
.industry__media { aspect-ratio: 4 / 3; margin-bottom: 18px; border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); }
.industry__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.industry:hover .industry__media img { transform: scale(1.05); }
.industry__num { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--red); }
.industry h3 { margin-top: 6px; font-size: 19px; }
.industry p { margin-top: 8px; font-size: 15px; color: var(--muted); }
.industries__more {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin-top: clamp(40px, 5vw, 60px); padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 17px; color: var(--text);
}
@media (max-width: 900px) {
  .industries__head { grid-template-columns: 1fr; }
  .industries__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .industries__grid { grid-template-columns: 1fr; } }

/* Hero variant sizing: keep each first screen within one viewport */
.nav__link { white-space: nowrap; }
.hero--video .hero__title { font-size: clamp(34px, 3.7vw, 54px); }
/* Bottom padding keeps the copy clear of the video toggle */
.hero--video { padding-top: calc(var(--header-h) + 32px); padding-bottom: max(clamp(40px, 6vw, 72px), 80px); }
.hero-glass .hero__lead { font-size: clamp(16px, 1.25vw, 18px); }
.hero-video__stats dd { max-width: 170px; }
@media (min-width: 981px) { .hero-cmp__inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } }
.hero--compare .hero__title { font-size: clamp(36px, 4.1vw, 58px); }
.hero--compare { padding-top: calc(var(--header-h) + clamp(32px, 4vw, 56px)); }
.hero-cmp__stats { margin-top: clamp(36px, 4.5vw, 56px); }
@media (max-width: 1040px) {
  .header__inner { gap: 16px; }
  .nav__link { padding: 10px 8px; font-size: 14px; }
  .nav__link::after { left: 8px; right: 8px; }
}
@media (max-width: 560px) {
  .hero.hero--video { padding-top: calc(var(--header-h) + 76px); }
  .hero.hero--video { padding-bottom: 70px; }
  .hero-video__toggle { bottom: 16px; width: 38px; height: 38px; }
}

/* ---------- V3: Scan to BIM image in the big card, paper → CAD in the small card ---------- */
.sheet__badge { margin-left: auto; flex: none; padding: 3px 8px; border-radius: 6px; background: var(--red); color: #fff; font-size: 11px; letter-spacing: .04em; }
.sheet__media { position: relative; background: #fff; }
.sheet__media img { width: 100%; height: auto; }
.sheet__tags--top { top: 14px; bottom: auto; }
.model-card--plan { left: -18px; right: auto; width: 290px; }
.model-card__plan { margin: 8px 0 10px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.model-card .model-card__plan svg { margin: 0; }
@media (max-width: 560px) {
  .model-card--plan { left: -6px; width: 200px; }
}
.hero__visual:has(.sheet--bim) { padding-bottom: 130px; }
.model-card--plan { left: -28px; width: 250px; }
.sheet--bim .sheet__file { min-width: 0; }
@media (max-width: 560px) {
  .hero__visual:has(.sheet--bim) { padding-bottom: 110px; }
  .model-card--plan { left: -6px; width: 190px; }
}
@media (max-width: 980px) { .hero__inner { grid-template-columns: minmax(0, 1fr); } }

/* V1: CTAs side by side under the stats; glass panel lifted off the bottom */
.hero-video__ctas { flex-wrap: nowrap; gap: 10px; }
.hero-video__ctas .btn { padding: 0 22px; font-size: 14.5px; }
@media (min-width: 981px) {
  .hero-video__inner { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); }
  .hero-glass { margin-bottom: clamp(56px, 12vh, 120px); }
}
@media (max-width: 980px) {
  .hero-video__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1180px) and (min-width: 981px) {
  .hero-video__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .hero-video__ctas { flex-direction: column; align-items: stretch; }
}
@media (max-width: 560px) {
  .hero-video__ctas { flex-wrap: wrap; }
}

/* ==========================================================================
   Header: Services / About us / Resources dropdowns
   ========================================================================== */
.nav__item { position: relative; }
.nav__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; cursor: pointer; font-family: inherit; line-height: inherit;
}
.nav__chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.nav__item.is-open .nav__chev { transform: rotate(180deg); }
.nav__item.is-open > .nav__trigger { color: var(--brand); background: var(--brand-50); }
.nav__trigger::after { right: 34px; }

.nav-dd {
  position: absolute; top: calc(100% + 10px); left: 50%; z-index: 10;
  min-width: 240px; padding: 10px;
  border-radius: var(--radius); background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s;
}
.nav-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */
.nav__item.is-open .nav-dd { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s, transform .3s var(--ease), visibility 0s; }

.nav-dd--mega { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 580px; padding: 12px; }
.nav-dd__head { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 12px; color: var(--ink); }
.nav-dd__head:hover { background: var(--brand-50); color: var(--ink); }
.nav-dd__head strong { display: block; font-size: 15px; color: var(--ink); line-height: 1.25; }
.nav-dd__head small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.nav-dd__head.is-active strong { color: var(--brand); }
.nav-dd__icon {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: var(--gradient); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.nav-dd--mega .nav-dd__list { margin: 2px 0 4px 29px; padding-left: 12px; border-left: 1px solid var(--line); }

.nav-dd__list { display: grid; gap: 2px; }
.nav-dd__list a, .nav-dd__soon {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 10px;
  font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap;
}
.nav-dd__list a:hover { background: var(--brand-50); color: var(--brand); }
.nav-dd__soon { color: var(--muted); cursor: default; }
.nav-dd__soon small, .m-nav__soon small {
  padding: 3px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--bg-soft); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line);
}

/* Over the v1 video the open trigger keeps its white text */
.hero-dark:not(.menu-open) .site-header:not(.is-scrolled) .nav__item.is-open > .nav__trigger { background: rgba(255, 255, 255, .12); }

/* ---------- Mobile menu groups ---------- */
.mobile-menu { justify-content: flex-start; gap: 32px; overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu__foot { margin-top: auto; }
.m-nav summary {
  display: flex; align-items: baseline; gap: 14px; padding: 12px 0; cursor: pointer; list-style: none;
  font-size: clamp(28px, 8vw, 40px); font-weight: 700; letter-spacing: -.02em; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.m-nav summary::-webkit-details-marker { display: none; }
.m-nav summary span { font-size: 13px; color: var(--red); letter-spacing: .1em; }
.m-nav summary::after {
  content: ""; align-self: center; margin-left: auto; width: 11px; height: 11px;
  border-right: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand);
  transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease);
}
.m-nav[open] summary { color: var(--brand); }
.m-nav[open] summary::after { transform: translateY(3px) rotate(225deg); }
.m-nav__sub { display: grid; padding: 8px 0 16px 34px; border-bottom: 1px solid var(--line); }
.mobile-menu .m-nav__sub a, .m-nav__soon {
  display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 0;
  font-size: 17px; font-weight: 700; letter-spacing: 0; color: var(--text);
}
.mobile-menu .m-nav__sub a.m-nav__head { margin-top: 10px; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.mobile-menu .m-nav__sub a.m-nav__head:first-child { margin-top: 0; }
.mobile-menu .m-nav__sub a.is-active { color: var(--brand); }
.m-nav__soon { color: var(--muted); }

/* ==========================================================================
   Industries carousel (infinite, auto-scrolling) + photo credits
   ========================================================================== */
.ind-carousel { position: relative; margin-top: clamp(8px, 2vw, 20px); }
.ind-carousel__viewport {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 10px;
}
.ind-carousel__viewport::-webkit-scrollbar { display: none; }
.ind-carousel__viewport:focus { outline: none; }
.ind-carousel__track { display: flex; gap: clamp(18px, 2vw, 28px); width: max-content; }
.ind-carousel .industry {
  flex: none; width: clamp(260px, 27vw, 372px); scroll-snap-align: start;
  user-select: none; -webkit-user-select: none;
}
.ind-carousel .industry__media { position: relative; box-shadow: var(--shadow-sm); transition: box-shadow .5s var(--ease), transform .5s var(--ease); }
.ind-carousel .industry:hover .industry__media { transform: translateY(-4px); box-shadow: var(--shadow); }
.ind-carousel .industry__media img { pointer-events: none; -webkit-user-drag: none; }

/* live mode: JS drives the track, the viewport stops being a scroller */
.ind-carousel.is-live .ind-carousel__viewport {
  overflow: hidden; scroll-snap-type: none; cursor: grab; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
}
.ind-carousel.is-live .ind-carousel__track { will-change: transform; }
.ind-carousel.is-dragging .ind-carousel__viewport { cursor: grabbing; }
.ind-carousel.is-dragging .industry:hover .industry__media { transform: none; }

.ind-carousel__ui { display: flex; align-items: center; gap: 20px; margin-top: 26px; }
.ind-carousel__progress { flex: 1; height: 3px; border-radius: 3px; background: var(--brand-100); overflow: hidden; }
.ind-carousel__progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--red)); }
.ind-carousel__btns { display: none; gap: 8px; }
.ind-carousel.is-live .ind-carousel__btns { display: flex; }
.ind-btn {
  display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--brand-100); color: var(--brand-deep);
  transition: background-color .3s, color .3s, box-shadow .3s, transform .4s var(--ease);
}
.ind-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ind-btn:hover { background: var(--brand-deep); color: #fff; box-shadow: none; }
.ind-btn:active { transform: scale(.94); }
.ind-btn--pause .ind-btn__play { display: none; fill: currentColor; stroke: none; }
.ind-btn--pause[aria-pressed="true"] .ind-btn__pause { display: none; }
.ind-btn--pause[aria-pressed="true"] .ind-btn__play { display: block; }
.ind-btn--pause[aria-pressed="true"] { background: var(--red); color: #fff; box-shadow: none; }
.ind-carousel:not(.is-live) .ind-carousel__progress { display: none; }

@media (max-width: 560px) {
  .ind-carousel .industry { width: 78vw; }
  .ind-btn { width: 42px; height: 42px; }
}

/* licence-required photo credit, kept small */
.photo-credit {
  position: absolute; right: 8px; bottom: 8px; z-index: 2; max-width: calc(100% - 16px);
  padding: 3px 8px; border-radius: 999px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 10.5px; line-height: 1.5; font-weight: 400; letter-spacing: .01em;
  color: rgba(255, 255, 255, .92); background: rgba(21, 22, 61, .55); backdrop-filter: blur(4px);
  opacity: .8; transition: opacity .3s, background-color .3s;
}
.photo-credit:hover { opacity: 1; color: #fff; background: rgba(21, 22, 61, .85); }
.service-card__media .photo-credit { pointer-events: auto; }
/* the img height attribute otherwise overrides aspect-ratio: 16 / 9 */
.service-card__media--photo img { height: auto; }
.nav-dd--mega { width: 610px; }
.nav-dd--mega .nav-dd__list a { padding: 7px 12px; line-height: 1.4; }
/* V1: lift both columns together so the CTAs line up with the glass panel's bottom edge */
@media (min-width: 981px) {
  .hero-glass { margin-bottom: 0; }
  .hero-video__inner { padding-bottom: clamp(56px, 12vh, 120px); }
}
/* V3: 2D CAD card sits bottom-right */
.model-card--plan { left: auto; right: -28px; }
@media (max-width: 560px) { .model-card--plan { left: auto; right: -6px; } }

/* ---------- Contact: form card and info card share one height ---------- */
@media (min-width: 981px) {
  .contact__grid { align-items: stretch; }
  .contact-card { position: relative; top: auto; display: flex; flex-direction: column; }
  .contact-card__body { flex: 1; display: flex; flex-direction: column; padding-bottom: clamp(22px, 4vw, 44px); }
  .contact-card__body > .btn:last-child { margin-top: auto; }
  .form { display: flex; flex-direction: column; }
  .form__viewport { flex: 1; }
  .form__nav { margin-top: auto; }
  .form__viewport + .hp + .form__nav { margin-top: 28px; }
}
.nav-dd__icon svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-dd__head:hover .nav-dd__icon { box-shadow: 0 6px 14px -6px rgba(57, 59, 141, .7); }

/* ---------- Closable redevelopment notice ---------- */
.notice-bar__close {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-right: -6px;
  border: 0; border-radius: 50%; background: transparent; color: #d9daf3; cursor: pointer;
  transition: background-color .25s, color .25s;
}
.notice-bar__close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.notice-bar__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.notice-closed { --header-h: 76px; }
.notice-closed .notice-bar { max-height: 0; opacity: 0; visibility: hidden; }
.notice-closed .site-header::after { top: 0; }
@media (max-width: 520px) { .notice-closed { --header-h: 64px; } }

/* ---------- JDS mark watermark (as on the "We're rebuilding" card) ---------- */
#about.about::after {
  content: ""; position: absolute; z-index: 0; right: -90px; bottom: -110px; width: 560px; height: 360px;
  background: url("../img/jds-mark.svg") center / contain no-repeat; opacity: .07; pointer-events: none;
}
#about .about__grid { z-index: 1; }

.form { isolation: isolate; overflow: clip; }
.form::after {
  content: ""; position: absolute; z-index: -1; right: -60px; bottom: -70px; width: 340px; height: 220px;
  background: url("../img/jds-mark.svg") center / contain no-repeat; opacity: .05; pointer-events: none;
}
@media (max-width: 640px) {
  #about.about::after { width: 340px; height: 220px; right: -60px; bottom: -70px; }
  .form::after { width: 240px; height: 155px; right: -40px; bottom: -50px; }
}
/* V2 on phones: readable compare labels, full-width CTAs */
@media (max-width: 560px) {
  .hero--compare .cad-bim-compare__label { font-size: 9.5px; padding: 6px 8px; }
  .hero--compare .cad-bim-compare figcaption { font-size: 12px; }
  .hero--compare .hero__ctas .btn { width: 100%; }
  .hero--compare .hero-cmp__link { margin: 4px auto 0; }
}

/* ---------- Social icons (mobile menu + footer) ---------- */
.social { display: flex; flex-wrap: wrap; gap: 10px; }
.social__link {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  transition: background-color .25s, color .25s, transform .3s var(--ease);
}
.social__link svg { width: 18px; height: 18px; }
.social__link:hover { transform: translateY(-2px); }
.social--menu { margin-top: 14px; }
.social--menu .social__link { background: var(--brand-50); color: var(--brand-deep); box-shadow: inset 0 0 0 1px var(--brand-100); }
.social--menu .social__link:hover { background: var(--brand-deep); color: #fff; }
.social--footer { margin-top: 22px; }
.site-footer .social--footer .social__link { background: rgba(255, 255, 255, .08); color: #d9daf3; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.site-footer .social--footer .social__link:hover { background: var(--red); color: #fff; box-shadow: none; }
.mobile-menu .social { display: flex; gap: 10px; }
.mobile-menu .social__link { display: grid; place-items: center; align-items: center; padding: 0; border-bottom: 0; font-size: inherit; letter-spacing: 0; }

/* ---------- Hero V2: CAD plan ⟷ BIM model slider (same style as the 2D page compare) ---------- */
.compare--hero .compare__stage { aspect-ratio: 810 / 760; background: #fff; }
.compare--hero .compare__layer { object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.compare--hero .compare__layer--before { filter: none; }
.hero-slider { margin: 0; }
.hero-slider figcaption { margin-top: 14px; font-size: 13.5px; color: var(--muted); text-align: center; }
/* let the single mobile column shrink below the file-name bar's one-line width */
.hero-cmp__inner > * { min-width: 0; }

/* ---------- Services menu: third column (specialist services) ---------- */
/* The wide panel centres on the header, not on the Services button, so it never runs off-screen */
.nav__item:has(> .nav-dd--mega) { position: static; }
.nav-dd--mega { top: calc(100% - 4px); grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(960px, calc(100vw - 32px)); }
.nav-dd--mega .nav-dd__list a { white-space: normal; }
@media (max-width: 1100px) { .nav-dd--mega { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nav-dd--mega::before { top: -26px; height: 26px; }
.nav-dd__head--static, .nav-dd__head--static:hover { background: none; cursor: default; }
.nav-dd--mega .nav-dd__soon { padding: 7px 12px; line-height: 1.4; white-space: normal; }

/* Mega menu footer: divider, then CTA · contact · social */
.nav-dd__foot {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap;
  margin: 8px -12px -12px; padding: 14px 22px;
  border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); background: var(--brand-50);
}
.nav-dd__cta { flex: 1 1 260px; color: var(--ink); }
.nav-dd__cta strong { display: block; font-size: 14.5px; line-height: 1.3; }
.nav-dd__cta small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.nav-dd__cta span { display: inline-block; color: var(--red); transition: transform .3s var(--ease); }
.nav-dd__cta:hover strong { color: var(--brand); }
.nav-dd__cta:hover span { transform: translateX(4px); }
.nav-dd__contact { display: grid; gap: 4px; }
.nav-dd__contact a { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--brand-deep); white-space: nowrap; }
.nav-dd__contact a:hover { color: var(--brand); }
.nav-dd__contact svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-dd__contact a[href^="tel"] svg { fill: var(--red); stroke: none; }
.nav-dd__follow { display: flex; align-items: center; gap: 12px; padding-left: 28px; border-left: 1px solid var(--brand-100); }
.nav-dd__follow > span { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.social--dd { gap: 6px; }
.social--dd .social__link { width: 34px; height: 34px; background: #fff; color: var(--brand-deep); box-shadow: inset 0 0 0 1px var(--brand-100); }
.social--dd .social__link svg { width: 16px; height: 16px; }
.social--dd .social__link:hover { background: var(--brand-deep); color: #fff; box-shadow: none; }
.mobile-menu .m-nav__sub span.m-nav__head { display: block; margin-top: 10px; padding: 8px 0; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }

/* ---------- 3D page hero: as-built animation (GIF) in the cloud card ---------- */
.cloud-card__stage--media { aspect-ratio: 1200 / 622; background: #fff; }
.cloud-card__stage--media::before { display: none; }
.cloud-card__stage--media img { width: 100%; height: 100%; object-fit: contain; }
.cloud-card__stage--media .cloud-card__hud { top: 12px; }

/* ---------- 3D page hero: as-built animation (GIF) in the cloud card ---------- */
/* ~9% taller than the GIF itself; "cover" trims only the empty white side margins, so the model isn't distorted */
.cloud-card__stage--media { aspect-ratio: 1200 / 680; background: #fff; }
.cloud-card__stage--media::before { display: none; }
.cloud-card__stage--media picture, .cloud-card__stage--media img { display: block; width: 100%; height: 100%; }
.cloud-card__stage--media img { object-fit: cover; object-position: center; }
.cloud-card__stage--media .cloud-card__hud { top: 12px; }

/* ==========================================================================
   Services slider: duplicate of the rebuild card with every service
   ========================================================================== */
.rebuild--services { padding-top: clamp(48px, 7vw, 90px); }
.rebuild__card--services { align-items: center; }
.rebuild__card--services > * { min-width: 0; }
.chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(71, 73, 175, .15); }

.svc-ctrl { display: flex; align-items: center; gap: 16px; margin: 6px 0 26px; }
.svc-ctrl__count { font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc-ctrl__count b { font-size: 22px; color: var(--brand-deep); letter-spacing: -.02em; }
.svc-ctrl__bar { flex: 1; height: 3px; border-radius: 3px; background: var(--brand-100); overflow: hidden; min-width: 40px; }
.svc-ctrl__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--red)); }
.svc-ctrl__btns { display: flex; gap: 8px; }
.svc-ctrl:not(.is-live) .svc-ctrl__bar, .svc-ctrl:not(.is-live) [data-svc-pause] { display: none; }

.svc-slider { position: relative; }
.svc-slider__viewport {
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: var(--radius); touch-action: pan-y;
}
.svc-slider__viewport::-webkit-scrollbar { display: none; }
.svc-slider.is-live .svc-slider__viewport { overflow: hidden; scroll-snap-type: none; cursor: grab; }
.svc-slider.is-dragging .svc-slider__viewport { cursor: grabbing; }
.svc-slider__track { display: flex; }
.svc-slider.is-live .svc-slider__track { will-change: transform; }

.svc-slide {
  flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column;
  border-radius: var(--radius); overflow: hidden; background: #fff;
  box-shadow: inset 0 0 0 1px var(--line); user-select: none; -webkit-user-select: none;
}
.svc-slide__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft); }
.svc-slide__media img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; transform: scale(1.06); transition: transform 1.6s var(--ease); }
.svc-slide.is-active .svc-slide__media img { transform: scale(1); }
.svc-slide__area {
  position: absolute; top: 14px; left: 14px; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--brand-deep);
}
.svc-slide__state {
  position: absolute; top: 14px; right: 14px; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--brand-deep); background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px);
}
.svc-slide__state.is-live { color: #fff; background: var(--red); }
.svc-slide__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 22px; }
.svc-slide__num { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--red); }
.svc-slide__num i { font-style: normal; color: var(--muted); }
.svc-slide h3 { margin-top: 6px; font-size: clamp(19px, 1.8vw, 23px); }
.svc-slide p { margin-top: 8px; font-size: 15px; color: var(--muted); }
.svc-slide__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: auto; padding-top: 16px; }
.svc-slide__price { font-size: 15px; font-weight: 700; color: var(--brand-deep); }
.svc-slide__price small { font-weight: 400; color: var(--muted); }
.svc-slide__price--quote { font-weight: 400; color: var(--muted); font-size: 14px; }

/* the text of off-screen slides fades so only the active one reads */
.svc-slider.is-live .svc-slide__body > * { transition: opacity .5s var(--ease), transform .6s var(--ease); }
.svc-slider.is-live .svc-slide:not(.is-active) .svc-slide__body > * { opacity: 0; transform: translateY(10px); }

@media (max-width: 880px) {
  .svc-ctrl { margin-bottom: 18px; }
}
@media (max-width: 480px) {
  .svc-slide__body { padding: 18px; }
  .svc-ctrl__count b { font-size: 18px; }
}
.svc-slider.no-anim *, .svc-slider.no-anim .svc-slide__body > * { transition: none !important; }

/* ---------- 3D page: application cards with project images ---------- */
.app-card__media--photo { overflow: hidden; background: var(--brand-night); }
.app-card__media--photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .9s var(--ease); }
.app-card:hover .app-card__media--photo img { transform: scale(1.04); }

/* ---------- V4: V1 video without the glass panel, copy sits on the video like the stats ---------- */
.hero--bare .hero-video__shade {
  background:
    linear-gradient(90deg, rgba(21, 22, 61, .78) 0%, rgba(21, 22, 61, .52) 45%, rgba(21, 22, 61, .12) 100%),
    linear-gradient(0deg, rgba(21, 22, 61, .62) 0%, rgba(21, 22, 61, 0) 50%),
    linear-gradient(180deg, rgba(21, 22, 61, .48) 0%, rgba(21, 22, 61, 0) 28%);
}
.hero-bare { max-width: 640px; text-shadow: 0 2px 24px rgba(10, 11, 40, .45); }
.hero-bare .eyebrow em { color: #ff9c9c; }
.hero-bare .hero__lead { margin-top: 22px; max-width: 560px; font-size: clamp(16px, 1.25vw, 18px); color: rgba(255, 255, 255, .86); }
.hero--bare .hero__title { font-size: clamp(36px, 4.2vw, 62px); line-height: 1.16; }
@media (min-width: 981px) {
  .hero--bare .hero-video__inner { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); padding-bottom: clamp(96px, 20vh, 200px); }
}
@media (max-width: 1180px) and (min-width: 981px) {
  .hero--bare .hero-video__inner { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------- Page scrollbar: 4.5px, brand violet to red ---------- */
html::-webkit-scrollbar { width: 4.5px; height: 4.5px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--brand), var(--red)); border-radius: 2px; }
html::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(90deg, var(--brand), var(--red)); }
/* Grow by 2px when the pointer is over the bar, so it is easier to grab */
html.is-scrollbar-hover::-webkit-scrollbar { width: 6.5px; }
html.is-scrollbar-hover::-webkit-scrollbar-thumb { border-radius: 3px; }
/* Firefox has no width or gradient control: thinnest bar, solid brand colour */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--brand) transparent; }
}

/* ---------- Pages in review: links only show on local/dev hosts ---------- */
html:not(.is-local) [data-local-only],
html.is-local [data-public-only] { display: none !important; }

/* ---------- About us ---------- */
.about-glance { position: relative; overflow: hidden; }
.about-glance__mark { position: absolute; right: -18px; bottom: -14px; width: 190px; height: 120px; opacity: .07; pointer-events: none; }
.about-glance > p strong { color: var(--brand-deep); }
.about-glance .spec-list li { align-items: baseline; font-weight: 400; color: var(--text); }
.about-glance .spec-list span { flex: none; min-width: 52px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--red); }
.spec-card .format-chips + h4 { margin-top: 28px; }
.steps5--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps5--4 li::after { display: none; }
@media (max-width: 1080px) { .steps5--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .steps5--4 { grid-template-columns: 1fr; } }
/* counters inside .facts: keep the number inline with its prefix and suffix */
.facts strong span { display: inline; margin: 0; font-size: inherit; color: inherit; line-height: inherit; }

/* ---------- Header variants (under review): v1 simple links, v2 current dropdowns ---------- */
html[data-header-design="v1"] [data-header-variant="v2"],
html:not([data-header-design="v1"]) [data-header-variant="v1"] { display: none; }
/* Switcher now carries hero + header groups and shows on every page */
.hero-switch { display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100vw - 32px); border-radius: 22px; }
.hero-switch__group { display: flex; align-items: center; gap: 2px; }
.hero-switch__group + .hero-switch__group { padding-left: 6px; border-left: 1px solid rgba(255, 255, 255, .16); }
html:not(.has-hero-variants) .hero-switch__group--hero { display: none; }
html:not(.has-hero-variants) .hero-switch__group + .hero-switch__group { padding-left: 0; border-left: 0; }
html[data-header-design="v1"] .hero-switch [data-header-link="v1"],
html:not([data-header-design="v1"]) .hero-switch [data-header-link="v2"] { background: #fff; color: var(--brand-deep); }
html[data-header-design="v1"] .hero-switch [data-header-link="v1"] small,
html:not([data-header-design="v1"]) .hero-switch [data-header-link="v2"] small { color: var(--muted); }
@media (max-width: 560px) { .hero-switch__group + .hero-switch__group { padding-left: 0; border-left: 0; } }

/* Buttons: static, with a small zoom on hover instead of the magnetic pull */
.btn:hover { transform: scale(1.03); }
.btn:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } }

/* Switcher: header row stacked on top of the hero row */
.hero-switch { flex-direction: column; align-items: flex-start; gap: 4px; border-radius: 22px; }
.hero-switch__group:not(.hero-switch__group--hero) { order: -1; }
.hero-switch__group + .hero-switch__group { padding-left: 0; border-left: 0; }
.has-hero-variants .hero-switch__group--hero { padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, .16); }
.hero-switch__label { min-width: 72px; }

/* ---------- Language switcher (header + mobile menu) ---------- */
.lang { position: relative; flex: none; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 9px; cursor: pointer;
  border: 1px solid var(--brand-200); border-radius: 10px; background: transparent; color: var(--brand-deep);
  font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  transition: background-color .2s, border-color .2s, color .2s;
}
.lang__btn:hover, .lang.is-open .lang__btn { background: var(--brand-50); border-color: var(--brand); }
.lang__globe { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; min-width: 172px; padding: 6px;
  border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .25s var(--ease), visibility 0s; }
.lang__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--ink);
}
.lang__menu a:hover { background: var(--brand-50); color: var(--brand); }
.lang__menu a[aria-current] { color: var(--brand); }
.lang__check { width: 15px; height: 15px; fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero-dark:not(.menu-open) .site-header:not(.is-scrolled) .lang__btn { color: #fff; border-color: rgba(255, 255, 255, .35); }
.hero-dark:not(.menu-open) .site-header:not(.is-scrolled) .lang__btn:hover,
.hero-dark:not(.menu-open) .site-header:not(.is-scrolled) .lang.is-open .lang__btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); }

.m-lang { display: flex; align-items: center; gap: 4px; margin: 0 0 10px; font-size: 14px; }
.m-lang .lang__globe { margin-right: 4px; color: var(--muted); }
.mobile-menu .m-lang a { padding: 6px 10px; border: 0; border-radius: 8px; font-size: 14px; letter-spacing: 0; color: var(--muted); }
.mobile-menu .m-lang a[aria-current] { background: var(--brand-50); color: var(--brand-deep); }

/* Service cards: title sits on the image over a dark fade, saving a row in the body */
.service-card__media--photo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 58%; pointer-events: none;
  background: linear-gradient(0deg, rgba(21, 22, 61, .9) 0%, rgba(21, 22, 61, .55) 45%, rgba(21, 22, 61, 0) 100%);
}
.service-card__title {
  position: absolute; left: clamp(20px, 3vw, 36px); right: clamp(20px, 3vw, 36px); bottom: clamp(16px, 2.2vw, 26px); z-index: 1;
  color: #fff; text-shadow: 0 2px 14px rgba(10, 11, 40, .5);
}
.service-card__body > p:first-child { margin-top: 0; }

/* 2D page hero: scan data ⟷ CAD plan photos keep their own proportions */
.compare--scan .compare__stage { aspect-ratio: 1000 / 1051; }
.compare--scan .compare__layer { object-fit: contain; }

/* 3D page hero: same card height as the 2D hero, animation centred with white space above and below */
.cloud-card__stage--media { aspect-ratio: 1000 / 1051; }
.cloud-card__stage--media img { object-fit: contain; }

/* ---------- 3D page: services grid (2×2) + modelling by discipline ---------- */
.steps5--plain li::after { display: none; }
.disciplines .steps5 li { scroll-margin-top: 140px; }
.applications .app-card { scroll-margin-top: 120px; }
.disciplines__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 28px; padding: 22px 26px; border-radius: var(--radius); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-100); }
.disciplines__cta p { margin: 0; font-weight: 700; color: var(--ink); }
/* a linked anchor highlights its card briefly */
.app-card:target, .disciplines .steps5 li:target { box-shadow: inset 0 0 0 2px var(--brand), var(--shadow); }

/* ---------- 3D services: cards stack on scroll, each new card slides over the last ---------- */
.apps--stack { display: block; }
.apps--stack .app-card {
  position: sticky; top: calc(var(--header-h) + 24px + var(--i) * 20px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  margin-bottom: 32px; transform-origin: 50% 0;
  box-shadow: inset 0 0 0 1px var(--line), 0 -18px 50px -30px rgba(21, 22, 61, .35), var(--shadow);
}
.apps--stack .app-card:last-child { margin-bottom: 0; }
.apps--stack .app-card__media { border-bottom: 0; border-right: 1px solid var(--line); }
.apps--stack .app-card__media--photo img { height: 100%; aspect-ratio: auto; }
.apps--stack .app-card__body { padding: clamp(24px, 2.6vw, 34px); }
.apps--stack .app-card .format-chips { margin: 20px 0 22px; }
/* tall cards on small screens: a plain list instead of a stack */
@media (max-width: 1000px), (max-height: 700px) {
  .apps--stack .app-card { position: relative; top: auto; grid-template-columns: minmax(0, 1fr); margin-bottom: 24px; }
  .apps--stack .app-card__media { border-right: 0; border-bottom: 1px solid var(--line); }
  .apps--stack .app-card__media--photo img { height: auto; aspect-ratio: 16 / 10; }
}

/* ---------- Metallic cards: white card in a grainy, diagonal metal frame ----------
   Two themes in the brand colours: violet and red. The frame is the border box,
   the white card is the padding box, so the inner markup stays unchanged. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --metal-violet: linear-gradient(125deg, #f3f3f8 0%, #d6d7ea 24%, #6c6ec9 50%, #2a2c78 72%, #0f1030 100%);
  --metal-red: linear-gradient(125deg, #f8f3f3 0%, #ead2d2 24%, #d23a3a 50%, #8a0d14 72%, #2a070b 100%);
  --metal-duo: linear-gradient(125deg, #f3f3f8 0%, #c9cbee 18%, #4749af 45%, #8a1e3c 70%, #cc0000 100%);
}

.benefits { counter-reset: benefit; gap: 18px; }
.benefits li,
.benefits li:hover {
  --metal: var(--metal-violet);
  counter-increment: benefit;
  display: flex; flex-direction: column; min-height: 230px;
  padding: 22px 22px 18px;
  border: 12px solid transparent; border-radius: 26px;
  background: linear-gradient(#fff, #fff) padding-box, var(--grain) border-box, var(--metal) border-box;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .7);
}
.benefits li:nth-child(4n+2), .benefits li:nth-child(4n+3) { --metal: var(--metal-red); }
.benefits li:hover { transform: translateY(-4px); }
.benefits h3 { order: 1; color: var(--ink); font-size: 19px; letter-spacing: -.01em; }
.benefits p { order: 2; color: var(--muted); }
.benefits__icon { order: 3; margin: auto 0 0; width: 42px; height: 42px; border-radius: 11px; background: var(--brand-ink); box-shadow: none; }
.benefits li:nth-child(4n+2) .benefits__icon, .benefits li:nth-child(4n+3) .benefits__icon { background: #3a0a10; }
.benefits li::after {
  content: counter(benefit, decimal-leading-zero) " / 04"; order: 4;
  align-self: flex-end; margin-top: -30px;
  font-size: 14px; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--ink);
}

.test-us__card {
  border: 14px solid transparent; border-radius: calc(var(--radius-lg) + 10px);
  background: linear-gradient(120deg, #fff 0%, #fff6f6 100%) padding-box, var(--grain) border-box, var(--metal-duo) border-box;
  box-shadow: 0 30px 60px -30px rgba(21, 22, 61, .55);
}
@media (max-width: 560px) {
  .benefits li, .benefits li:hover { min-height: 0; border-width: 9px; }
  .test-us__card { border-width: 10px; }
}

/* ---------- Home core services: pinned horizontal scroll of split cards ---------- */
.hscroll { --hcard-w: min(1080px, calc(100vw - 2 * var(--gutter) - 96px)); --hcard-gap: 40px; overflow: hidden; }
.hscroll .section-head { margin-bottom: clamp(28px, 4vw, 44px); }
.hscroll__viewport { position: relative; }
.hscroll__track { display: flex; gap: var(--hcard-gap); padding-inline: calc((100vw - var(--hcard-w)) / 2); will-change: transform; }
.hcard {
  position: relative;
  flex: none; width: var(--hcard-w); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: var(--radius-lg); overflow: hidden; background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow); transform-origin: 50% 50%;
}
.hcard__media { position: relative; min-height: 100%; background: var(--brand-night); overflow: hidden; }
.hcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.hcard:hover .hcard__media img { transform: scale(1.04); }
.hcard__body { display: flex; flex-direction: column; padding: clamp(26px, 3vw, 40px); }
.hcard__kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.hcard__body .h3 { margin-top: 8px; font-size: clamp(22px, 2.2vw, 30px); }
.hcard__body > p:not(.hcard__kicker) { margin-top: 14px; color: var(--text); }
.hcard__body .ticks { margin: 18px 0 24px; }
.hcard .service-card__foot { margin-top: auto; }
.hscroll__dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.hscroll__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--brand-200); cursor: pointer; transition: width .4s var(--ease), background-color .3s; }
.hscroll__dots button.is-active { width: 28px; background: var(--red); }
/* Without JS / reduced motion: a native swipe row. Active mobile scroll sequences
   clip the track instead, with the dot controls still mapping to each card. */
.hscroll:not(.is-pinned) .hscroll__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hscroll:not(.is-pinned) .hscroll__viewport::-webkit-scrollbar { display: none; }
.hscroll:not(.is-pinned) .hcard { scroll-snap-align: center; }
.hscroll.is-scroll-driven .hscroll__viewport { overflow: hidden; scroll-snap-type: none; overscroll-behavior-x: auto; }
.hscroll.is-pinned .hscroll__viewport { overflow: hidden; scroll-snap-type: none; overscroll-behavior-x: auto; }
.hscroll.is-pinned { padding-top: calc(var(--header-h) + 8px); padding-bottom: 40px; }
@media (max-width: 1000px) {
  .hscroll { --hcard-w: min(90vw, 680px); --hcard-gap: 16px; overflow: hidden; }
  .hcard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hcard__media { min-height: 100%; aspect-ratio: auto; }
  /* The number sits on the title row instead of on the image, so the image band can be shorter
     and the whole card fits a phone screen. */
  .hcard__body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; }
  .hcard__body > * { grid-column: 1 / -1; }
  .hcard__body > .service-card__num {
    grid-column: 1; grid-row: 1; position: static; padding: 3px 9px; font-size: 11px;
    background: var(--brand-50); box-shadow: none;
  }
  .hcard__body > .h3 { grid-column: 2; grid-row: 1; margin-top: 0; }
}
/* pinned: heading and intro side by side so heading + card + dots fit one screen */
.hscroll.is-pinned .section-head { max-width: none; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; gap: 10px 56px; margin-bottom: 28px; }
.hscroll.is-pinned .section-head .eyebrow { grid-column: 1 / -1; }
.hscroll.is-pinned .section-head .h2 { font-size: clamp(30px, 2.9vw, 42px); }
.hscroll.is-pinned .section-head .h2 br { display: none; }
.hscroll.is-pinned .section-head__lead { margin: 0; font-size: 16.5px; }
.hscroll.is-pinned .hcard__body { padding: clamp(24px, 2.4vw, 34px); }
.hscroll.is-pinned .hscroll__dots { margin-top: 22px; }

/* Phones: the cards slide with the scroll (not pinned), so they stack and keep the full text */
@media (max-width: 640px) {
  .hscroll.is-scroll-driven .hcard { grid-template-columns: minmax(0, 1fr); }
  .hscroll.is-scroll-driven .hcard__media { min-height: 0; aspect-ratio: 21 / 9; }
  .hscroll.is-scroll-driven .hcard__body { padding: clamp(20px, 5vw, 28px); }
}

/* Phones and small tablets, pinned: heading, card and dots have to share one screen, so the
   card is compacted here (slim image strip, tighter copy). JS only pins when the measured
   result actually fits the viewport; otherwise the section stays in the page flow. */
@media (max-width: 1000px) {
  .hscroll.is-pinned { padding-top: 74px; padding-bottom: 16px; }
  .hscroll.is-pinned .section-head { grid-template-columns: 1fr; gap: 6px; margin-bottom: 14px; }
  .hscroll.is-pinned .section-head .eyebrow { font-size: 11px; }
  .hscroll.is-pinned .section-head .h2 { font-size: clamp(20px, 3.4vw, 27px); line-height: 1.15; }
  .hscroll.is-pinned .section-head__lead { margin-top: 2px; font-size: 12.5px; line-height: 1.4; }
  .hscroll.is-pinned .hcard { grid-template-columns: minmax(0, 1fr); }
  .hscroll.is-pinned .hcard__media { min-height: 0; aspect-ratio: auto; height: clamp(48px, 8vh, 84px); }
  .hscroll.is-pinned .hcard__body { padding: 14px 16px 16px; }
  .hscroll.is-pinned .hcard__body .h3 { margin-top: 0; font-size: 19px; line-height: 1.2; }
  .hscroll.is-pinned .hcard__body > p:not(.hcard__kicker) { margin-top: 7px; font-size: 13.5px; line-height: 1.5; }
  .hscroll.is-pinned .hcard__body .ticks { gap: 5px; margin: 9px 0 11px; }
  .hscroll.is-pinned .hcard__body .ticks li { font-size: 12.5px; padding-left: 22px; }
  .hscroll.is-pinned .hcard__body .ticks li::before { width: 14px; height: 14px; top: 3px; background-size: 9px; }
  .hscroll.is-pinned .hcard .service-card__foot { padding-top: 10px; gap: 8px 12px; }
  .hscroll.is-pinned .price { font-size: 20px; }
  .hscroll.is-pinned .price small { font-size: 11px; }
  .hscroll.is-pinned .hcard .btn { padding: 11px 16px; font-size: 13px; }
  .hscroll.is-pinned .hscroll__dots { margin-top: 10px; }
}

/* Short screens (landscape phones, 360x640, 375x667): the same pinned layout with the
   spacing pulled in, so the card still clears the fold and the pin can engage. */
@media (max-width: 1000px) and (max-height: 720px) {
  .hscroll.is-pinned { padding-top: 70px; padding-bottom: 12px; }
  .hscroll.is-pinned .section-head { gap: 4px; margin-bottom: 8px; }
  .hscroll.is-pinned .section-head .h2 { font-size: clamp(18px, 5vw, 23px); }
  .hscroll.is-pinned .section-head__lead { font-size: 12px; line-height: 1.35; }
  .hscroll.is-pinned .hcard__media { height: clamp(38px, 6vh, 64px); }
  .hscroll.is-pinned .hcard__body { padding: 10px 13px 12px; }
  .hscroll.is-pinned .hcard__body > p:not(.hcard__kicker) { margin-top: 5px; }
  .hscroll.is-pinned .hcard__body .ticks { gap: 3px; margin: 6px 0 8px; }
  .hscroll.is-pinned .hcard .service-card__foot { padding-top: 7px; }
  .hscroll.is-pinned .hscroll__dots { margin-top: 6px; }
}

/* ---------- Cookie consent (assets/js/consent.js, only when GA4 is set up) ---------- */
.cookie-consent {
  position: fixed; left: 16px; bottom: 16px; z-index: 300;
  width: min(420px, calc(100vw - 32px)); padding: 22px 22px 18px;
  background: #fff; color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  font-size: 14px; line-height: 1.5;
  opacity: 0; transform: translateY(12px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.cookie-consent.is-on { opacity: 1; transform: none; }
.cookie-consent[hidden] { display: none; }
.cookie-consent__title { font-weight: 700; font-size: 16px; margin: 0 0 6px; }
.cookie-consent__text { margin: 0; color: var(--muted); }
.cookie-consent__text a { color: var(--brand); text-decoration: underline; }
.cookie-consent__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { .cookie-consent { transition: none; } }
.footer__cookie { padding: 0; border: 0; background: none; font: inherit; color: #d9daf3; cursor: pointer; }
.footer__cookie:hover { color: #fff; }
html:not(.has-consent) .footer__cookie-item { display: none; }
.cookie-consent:focus { outline: none; }

/* ---------- Service subtitles (one line under the card title) ---------- */
.svc-slide .svc-slide__sub { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--brand-deep); }
.app-card__body > .app-card__sub { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--brand); }
/* A card without format chips still keeps air between its lists and the button */
.app-card__cols:has(+ .btn) { margin-bottom: 26px; }
/* Stacked cards share one height: format chips and button sit together at the bottom of each card */
.apps--stack .app-card .format-chips { margin: auto 0 22px; padding-top: 20px; }
.apps--stack .app-card .format-chips + .btn { margin-top: 0; }
/* Service images on a white background (drawings, renders): shown whole instead of cropped to the panel */
.app-card__media--contain { background: #fff; }
.app-card__media--contain img { object-fit: contain; padding: clamp(14px, 2vw, 28px); }
.app-card__media--contain .service-card__num { box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- Client feedback: quote carousel (scroll-snap track; JS adds buttons, dots and autoplay) ---------- */
.quotes { padding-bottom: clamp(40px, 6vw, 70px); }
.quotes__slider { position: relative; }
.quotes__track {
  display: flex; gap: clamp(16px, 2vw, 24px); margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain;
  scrollbar-width: none; outline: none;
}
.quotes__track::-webkit-scrollbar { display: none; }
.quotes__track:focus-visible { box-shadow: inset 0 0 0 2px var(--brand); border-radius: var(--radius-lg); }
.fb-card { flex: none; width: min(760px, 86%); scroll-snap-align: start; }
.fb-card figure {
  position: relative; display: flex; flex-direction: column; height: 100%; margin: 0;
  padding: clamp(26px, 3.4vw, 44px); border-radius: var(--radius-lg); background: var(--bg-soft);
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .5s var(--ease), background-color .5s var(--ease);
}
.fb-card.is-active figure { background: #fff; box-shadow: inset 0 0 0 1px var(--brand-100), var(--shadow); }
.fb-card figure::before {
  content: "“"; position: absolute; top: clamp(4px, 1vw, 12px); right: clamp(20px, 3vw, 36px);
  font: 700 clamp(96px, 11vw, 150px)/1 var(--font-accent); color: var(--brand-100); pointer-events: none;
}
.fb-card__tag {
  align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--brand-50);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-deep);
}
.fb-card blockquote { position: relative; flex: 1; margin: 20px 0 0; }
.fb-card blockquote p { font-size: clamp(16px, 1.45vw, 19px); line-height: 1.65; color: var(--ink); }
.fb-card blockquote strong { color: var(--brand-deep); }
.fb-card__by { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.fb-card__by strong { display: block; color: var(--ink); font-size: 15.5px; }
.fb-card__by small { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.fb-card__avatar {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--gradient); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .04em;
}
.fb-card__logo { display: grid; place-items: center; flex: none; width: 96px; height: 48px; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.fb-card__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.quotes__ctrl { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.quotes__dots { display: flex; gap: 8px; }
.quotes__dots button {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--brand-100); transition: width .4s var(--ease), background-color .3s;
}
.quotes__dots button[aria-current="true"] { width: 30px; background: var(--brand-deep); }
html:not(.js) .quotes__ctrl { display: none; }
@media (max-width: 760px) { .fb-card { width: 88%; } .fb-card figure::before { font-size: 90px; } }
@media (prefers-reduced-motion: reduce) { .quotes__track { scroll-behavior: auto; } }

/* ---------- Hero eyebrow: "Digital" stands out (bolder, larger, stronger red) ---------- */
.hero .eyebrow em { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--red); }
/* Solid, saturated red on the dark video heroes (a glow made it look washed out) */
.hero-glass .eyebrow em, .hero-bare .eyebrow em { color: #ff2f35; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }

/* ---------- Core service cards: the whole drawing or model, with white space around it ---------- */
.hcard__media { background: #fff; }
.hcard__media img { object-fit: contain; padding: clamp(18px, 2.6vw, 40px); }

/* ---------- Modelling by discipline: one line icon per discipline, top right of the card ---------- */
.steps5__icon {
  position: absolute; top: 22px; right: 20px; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 14px; background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-100);
  transition: background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.steps5__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--brand-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s var(--ease); }
.steps5 li:hover .steps5__icon { background: var(--gradient); box-shadow: 0 8px 18px -8px rgba(57, 59, 141, .7); transform: rotate(-6deg); }
.steps5 li:hover .steps5__icon svg { stroke: #fff; }
/* Phones: the cards are one column, so the text keeps clear of the icon on the right */
@media (max-width: 640px) { .steps5 li:has(.steps5__icon) { padding-right: 70px; } .steps5__icon { top: 18px; right: 18px; width: 40px; height: 40px; } .steps5__icon svg { width: 22px; height: 22px; } }
@media (prefers-reduced-motion: reduce) { .steps5 li:hover .steps5__icon { transform: none; } }

/* ---------- Hero V4: keep clear space under the header in every language ----------
   The content sits at the bottom of the screen; the longer German copy is taller and used to push up
   against the header. A guaranteed top gap (the hero grows if needed) and a slightly smaller German
   headline keep the spacing the same as in English. */
.hero--bare { padding-top: calc(var(--header-h) + clamp(64px, 9vh, 110px)); }
/* Both languages: the headline is a full sentence about both services, so it uses the smaller size */
.hero--bare .hero__title { font-size: clamp(32px, 3.5vw, 52px); }
/* Shorter screens (laptops at 768px high): less space above and below so the hero still fits one screen */
@media (min-width: 981px) and (max-height: 860px) {
  .hero--bare { padding-top: calc(var(--header-h) + clamp(44px, 6.5vh, 110px)); }
  .hero--bare .hero-video__inner { padding-bottom: clamp(36px, 6vh, 96px); }
}

/* ---------- 3D page statement: in-text links to the sub-service cards ---------- */
.statement__grid p a { color: var(--brand-deep); font-weight: 700; text-decoration: underline; text-decoration-color: var(--brand-200); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .3s, text-decoration-color .3s; }
.statement__grid p a:hover { color: var(--red); text-decoration-color: currentColor; }

/* Legal pages: only the list entries are numbered, not the contact link under the list */
.policy__toc-foot a { padding-left: 0; }
.policy__toc-foot a::before { content: none; }

/* ---------- 404 page ---------- */
.not-found { min-height: min(760px, 100svh); display: flex; align-items: center; }
.not-found__de { margin-top: 14px; max-width: 560px; color: var(--muted); }
.not-found__links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; font-weight: 700; }
.not-found__links a { color: var(--brand-deep); }
.not-found__links a:hover { color: var(--red); }

/* ---------- Core service cards on phones/tablets: a bigger image strip and less white space ----------
   (initHScroll still checks that the pinned card fits the screen and falls back to the scroll-driven
   layout when it does not, so the taller image never pushes the call to action off screen) */
@media (max-width: 1000px) {
  .hcard__media img { padding: 8px 10px; }
  .hscroll.is-pinned .hcard__media { height: clamp(120px, 20vh, 190px); }
}
@media (max-width: 1000px) and (max-height: 720px) {
  .hscroll.is-pinned .hcard__media { height: clamp(90px, 15vh, 130px); }
}

/* ---------- Step / discipline cards on narrow phones (320–400px) ----------
   Long uppercase headings ("DIGITALISIERUNG", "ARCHITECTURAL") must wrap instead of pushing the card
   past the screen: the grid tracks may shrink, headings hyphenate, and badge/icon get a little smaller. */
.steps5 h3 { hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 640px) {
  .steps5 { grid-template-columns: minmax(0, 1fr); }
  .steps5 li { grid-template-columns: 52px minmax(0, 1fr); min-width: 0; }
}
@media (max-width: 400px) {
  .steps5 li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding: 18px 16px; }
  .steps5 li:has(.steps5__icon) { padding-right: 58px; }
  .steps5__n { width: 36px; height: 36px; font-size: 13px; }
  .steps5 h3 { font-size: 15px; letter-spacing: .04em; }
  .steps5__icon { top: 16px; right: 14px; width: 34px; height: 34px; border-radius: 11px; }
  .steps5__icon svg { width: 19px; height: 19px; }
}

/* ---------- Very small phones (≤ 380px): header and notice bar stay within the screen ----------
   (the German notice text is longer and pushed the close button past the edge) */
@media (max-width: 380px) {
  .brand__tag { display: none; }
  .notice-bar__inner { gap: 8px; }
  .notice-bar__inner > * { min-width: 0; }
  .notice-bar__link { font-size: 12px; }
  .notice-bar__close { flex: none; }
}

/* ---------- Long German compounds ("CAD-Digitalisierungsservice") must not overflow narrow screens ---------- */
h1, h2, h3, .h2 { overflow-wrap: break-word; }
html[lang="de"] h1, html[lang="de"] h2, html[lang="de"] h3, html[lang="de"] .h2 { hyphens: auto; }

/* ---------- Core services on phones/tablets: no scroll effect, the cards simply stack ---------- */
@media (max-width: 1000px) {
  .hscroll { overflow: visible; }
  .hscroll .hscroll__viewport { overflow: visible; scroll-snap-type: none; }
  .hscroll .hscroll__track { display: grid; gap: 20px; padding-inline: var(--gutter); transform: none !important; }
  .hscroll .hcard { width: auto; scroll-snap-align: none; transform: none !important; opacity: 1 !important; }
  .hscroll .hcard__media { min-height: 260px; }
  .hscroll__dots { display: none; }
}
@media (max-width: 760px) {
  .hscroll .hcard { grid-template-columns: minmax(0, 1fr); }
  .hscroll .hcard__media { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ---------- All-services carousel: swipe on touch screens ----------
   The page still scrolls vertically over the carousel; horizontal finger moves go to the slider's drag code
   (without this the browser takes the horizontal pan and cancels the drag). */
.svc-slider__viewport { touch-action: pan-y; }
.svc-slider__viewport img { -webkit-user-drag: none; user-select: none; }

/* Contact form: ALTCHA bot check ("Ich bin kein Roboter"), in the form's colours */
.form__altcha { margin: 10px 0 4px; }
altcha-widget {
  --altcha-border-radius: 12px;
  --altcha-border-color: var(--line);
  --altcha-color-base: var(--bg-soft);
  --altcha-color-base-content: var(--ink);
  --altcha-color-primary: var(--brand);
  --altcha-color-primary-content: #fff;
  --altcha-color-success: var(--brand-deep);
  --altcha-color-error: var(--red);
  --altcha-checkbox-border-radius: 6px;
  --altcha-max-width: 320px;
  --altcha-shadow: none;
  display: block;
}

/* Reply choice and bot check side by side: the two options stacked on the left, the ALTCHA box on the right */
.form__duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 20px; align-items: end; margin: 2px 0 14px; }
.form__duo .form__group--inline { flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; }
.form__duo .choice span { padding: 9px 16px 9px 12px; }
.form__duo .form__altcha { margin: 0; }
.form__duo altcha-widget { --altcha-max-width: 100%; }
@media (max-width: 640px) {
  /* Phones: the bot check goes under the choice; the two short options share one line */
  .form__duo { grid-template-columns: 1fr; }
  .form__duo .form__group--inline { flex-direction: row; flex-wrap: wrap; align-items: center; }
}