/* JANZEN GROUP — site
   Brand system: white, black, signature red #FF0000. Red is used for lines and accents, never for body text. */

/* Nunito (variable 200–1000, latin incl. umlauts), self-hosted: no visitor data goes to a font service.
   SIL Open Font License 1.1. */
@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/nunito-latin-var.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0a0a0a;
  --paper: #fff;
  --mist: #f4f4f2;
  --line: #e2e2de;
  --muted: #5d5d5a;
  --red: #ff0000;
  --sans: "Nunito", "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --wrap: 1360px;
  --gutter: clamp(20px, 4vw, 56px);
  --gap: clamp(24px, 4vw, 64px);
  --section: clamp(96px, 11vw, 168px);
  --header-h: 72px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

button,
select {
  font: inherit;
  color: inherit;
}

::selection {
  color: #fff;
  background: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  color: #fff;
  background: var(--ink);
  transform: translateY(-150%);
}

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

.progress {
  position: fixed;
  z-index: 60;
  inset: 0 0 auto;
  height: 2px;
  pointer-events: none;
}

.progress i {
  display: block;
  height: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------------------------------------------------------------- type */

.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background: var(--red);
  transform-origin: 0 50%;
}

.kicker--light {
  color: rgba(255, 255, 255, 0.6);
}

.display {
  margin: 0;
  font-size: clamp(40px, 5.4vw, 86px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.display--m {
  font-size: clamp(36px, 4.2vw, 64px);
}

.lead {
  margin: 0;
  color: var(--muted);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.55;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}

.text-link b {
  color: var(--red);
  font-weight: 500;
  transition: transform 0.3s var(--ease-out);
}

.text-link:hover b {
  transform: translate(3px, -3px);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.button:hover {
  color: #fff;
  background: var(--ink);
}

.button--solid {
  color: #fff;
  background: var(--ink);
}

.button--solid b {
  color: var(--red);
  font-weight: 500;
  transition: transform 0.3s var(--ease-out);
}

.button--solid:hover b {
  transform: translateX(4px);
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 var(--gutter);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  transition: border-color 0.3s ease, opacity 0.7s ease, transform 0.7s var(--ease-out);
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
}

html.hero-pending .site-header {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition: none;
}

/* Scrolled past the hero while the intro is still running: header available, intro keeps playing. */
html.hero-pending.header-early .site-header {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s ease, transform 0.7s var(--ease-out);
}

.site-header__brand {
  flex: none;
  color: var(--ink);
}

.wordmark {
  width: auto;
  height: 30px;
}

.site-nav {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  margin-left: auto;
}

.site-nav a {
  position: relative;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 500;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.35s var(--ease-out);
}

.site-nav a:hover::after,
.site-nav a.is-current::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.lang {
  display: flex;
  gap: 2px;
  margin-left: 12px;
}

.lang button {
  padding: 6px 7px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.lang button[aria-pressed="true"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  margin-left: 4px;
  padding: 8px 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.menu-toggle i {
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: background-color 0.2s ease;
}

.menu-toggle i::before,
.menu-toggle i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease-out);
}

.menu-toggle i::before {
  transform: translateY(-6px);
}

.menu-toggle i::after {
  transform: translateY(6px);
}

.site-header.is-open .menu-toggle i {
  background: transparent;
}

.site-header.is-open .menu-toggle i::before {
  transform: rotate(45deg);
}

.site-header.is-open .menu-toggle i::after {
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------- hero additions */

.jz-cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(18px, 3.5vh, 36px);
  width: max-content;
  display: grid;
  justify-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translateX(-50%);
  transition: opacity 0.8s ease 0.2s;
}

.jz-cue i {
  width: 2px;
  height: 36px;
  overflow: hidden;
  background: var(--line);
}

.jz-cue i::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--red);
  animation: cue 2.2s var(--ease-out) infinite;
}

@keyframes cue {
  from { transform: translateY(-100%); }
  60%, to { transform: translateY(100%); }
}

.jz-hero:not(.is-ready) .jz-cue {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

/* ---------------------------------------------------------------- intro */

.intro {
  padding: var(--section) 0 calc(var(--section) * 0.8);
}

.intro__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  column-gap: var(--gap);
  align-items: end;
}

.intro .kicker {
  grid-column: 1 / -1;
}

.intro__title {
  font-size: clamp(48px, 7vw, 116px);
}

.intro__lead {
  padding-bottom: 0.4em;
}

.facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  margin: clamp(56px, 7vw, 104px) 0 0;
  border-top: 1px solid var(--ink);
}

/* Value on top, label below — the same for all three. */
.facts__item {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 28px 28px 0 0;
}

.facts__item + .facts__item {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}

.facts dt {
  font-size: clamp(34px, 3.3vw, 52px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.facts dd {
  display: grid;
  gap: 6px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.facts small {
  max-width: 34ch;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- companies: flight through the network
   The group in the middle, five area islands around it, connected by lines with red signals running out.
   On large screens the section pins and scrolling flies a camera through it: overview → each island, big →
   back out to the overview. Detail follows the zoom: from afar only pictures and names, close up text and buttons.
   Phones and reduced motion: the islands stack, each with its own red line. */

.areas {
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --hair: rgba(255, 255, 255, 0.24);
  position: relative;
  color: #fff;
  background: #000;
}

.areas__intro {
  padding: var(--section) 0 clamp(48px, 5vw, 80px);
}

.areas__intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: var(--gap);
  align-items: end;
}

.areas__intro .display {
  font-size: clamp(38px, 4.6vw, 72px);
}

.areas .lead {
  color: rgba(255, 255, 255, 0.7);
}

.areas :focus-visible {
  outline-color: #fff;
}

/* ---- stacked (default): islands one after another */
.flight {
  position: relative;
  padding-bottom: clamp(64px, 9vw, 128px);
}

.flight__lines,
.flight__core,
.flight__nav {
  display: none;
}

.flight__world {
  display: grid;
  gap: clamp(72px, 10vw, 128px);
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin: 0 auto;
}

.island {
  position: relative;
  scroll-margin-top: calc(var(--header-h) + 20px);
}

.island__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2.5vw, 32px);
}

.island__disc {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(120px, 14vw, 180px);
  height: clamp(100px, 12vw, 120px);
  color: #fff;
}

.island__icon {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.island__num {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.island__num b {
  color: #fff;
  font-weight: 600;
}

.island__title {
  margin: 8px 0 0;
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.island__title:focus {
  outline: none;
}

.island__title:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
}

.island__lead {
  max-width: 32ch;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.45;
}

/* A red line runs from the area down into its companies; a signal travels it. */
.island__cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 32px 40px;
  margin-top: 48px;
}

/* ---- bridge: a company that works for two areas */
.bridge__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.3;
}

.bridge__kicker i {
  flex: none;
  width: 24px;
  height: 2px;
  background: var(--red);
}

/* ---- company card */
.card {
  display: grid;
  gap: 20px;
  align-content: start;
}

/* Lines pass behind a card text only once that text is shown (close up); from afar nothing hides them. */
.card__body {
  position: relative;
}

html.flight-on .card__body::before {
  content: "";
  position: absolute;
  inset: -6px -8px -10px;
  z-index: -1;
  background: #000;
  opacity: clamp(0, calc((var(--zoom, 1) - 0.52) * 6), 1);
}

html.flight-on .card {
  position: relative;
  z-index: 0;
}

.card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}

.card__media::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 4px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 50% 0;
  pointer-events: none;
  transition: transform 0.7s var(--ease-out), opacity 0.9s ease;
  opacity: 0;
}

/* A signal arrives: a red line opens across the top of the picture, then fades. */
.card.is-ping .card__media::after {
  transform: scaleX(1);
  opacity: 1;
  transition-duration: 0.35s, 0.1s;
}

.card__media .vid {
  position: absolute;
  inset: 0;
}

.vid {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}

.card__media--title {
  display: grid;
  place-items: center;
  background: #0d0d0d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.card__bigLogo {
  width: 64%;
  height: auto;
}

.card__plate {
  display: grid;
  place-items: center;
  width: 58%;
  aspect-ratio: 2.3;
  background: #fff;
}

.card__plate img {
  width: 76%;
  height: auto;
}

.card__word {
  font-size: clamp(44px, 5vw, 88px);
  font-weight: 500;
  letter-spacing: -0.05em;
}

.card__logo {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  height: 40px;
  padding: 6px 9px;
  background: #fff;
}

.card__logo img {
  width: auto;
  height: 100%;
}

.card__controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
}

.vbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  color: #000;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.vbtn:hover {
  opacity: 0.86;
}

.vbtn--icon {
  width: 40px;
  padding: 0;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}

.vbtn svg {
  width: 15px;
  height: 15px;
}

.vbtn .i-play,
.vbtn.is-paused .i-pause {
  display: none;
}

.vbtn.is-paused .i-play {
  display: block;
}

.card__body {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.card__name {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.card__sector {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card__text {
  max-width: 40ch;
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  line-height: 1.5;
}

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 1.5;
}

.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 16px;
  font-weight: 500;
}

.card__cta b {
  color: var(--red);
  font-weight: 400;
  transition: transform 0.3s var(--ease-out);
}

.card__cta:hover b {
  transform: translateX(5px);
}

/* ================================================================ the flight (large screens, motion allowed) */
html.flight-on .flight {
  height: var(--flight-h, auto);
  padding-bottom: 0;
}

html.flight-on .flight__stage {
  position: sticky;
  top: var(--header-h);
  height: var(--stage-h, calc(100vh - var(--header-h)));
  overflow: clip;
}

html.flight-on .flight__world {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: var(--world-w);
  height: var(--world-h);
  margin: 0;
  transform-origin: 0 0;
}

html.flight-on .flight__world.is-moving {
  will-change: transform;
}

html.flight-on .flight__lines {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.flight__orbit {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: calc(1.2px / var(--zoom, 1));
  stroke-dasharray: 4 14;
}

.flight__base path {
  fill: none;
  stroke: var(--hair);
  stroke-width: calc(1.6px / var(--zoom, 1));
}

.flight__hot path {
  fill: none;
  stroke: var(--red);
  stroke-width: calc(2.6px / var(--zoom, 1));
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.flight__hot path.is-on {
  opacity: 1;
}

.flight__pulses circle {
  fill: var(--red);
  opacity: 0;
}

html.flight-on .flight__core {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  display: grid;
  place-items: center;
  width: 640px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #fff;
  background: #000; /* solid disc: the lines (and signals) come out from behind its edge */
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22);
  transform: translate(-50%, -50%);
}

.core__wordmark {
  width: 62%;
  height: auto;
}

html.flight-on .island {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
}

html.flight-on .island__head {
  align-items: flex-start;
  gap: 16px;
}

html.flight-on .island__disc {
  width: 180px;
  height: 120px;
}

html.flight-on .island__title {
  font-size: 80px;
}

html.flight-on .island__lead {
  max-width: 60ch;
  font-size: 20px;
}

html.flight-on .island__cards {
  display: flex;
  gap: 40px;
  margin-top: 32px;
}

html.flight-on .island__cards .card {
  flex: 0 0 440px;
}

html.flight-on .island__cards::before {
  display: none;
}

/* A bridge: a company between two areas, labelled with both. */
html.flight-on .island--bridge .island__cards {
  margin-top: 24px;
}

html.flight-on .island--bridge .island__cards .card {
  flex-basis: 400px;
}

html.flight-on .bridge__kicker {
  position: relative;
  z-index: 0; /* own layer, so its backing below covers lines like the card text does */
  font-size: 20px;
}

/* Like the card text: lines passing behind the label are hidden once it can be read. */
html.flight-on .bridge__kicker::before {
  content: "";
  position: absolute;
  inset: -6px -8px -8px;
  z-index: -1;
  background: #000;
  opacity: clamp(0, calc((var(--zoom, 1) - 0.52) * 6), 1);
}

/* One company: head on the left, a larger card on the right. */
html.flight-on .island--single {
  display: grid;
  grid-template-columns: 560px 600px;
  column-gap: 64px;
  align-items: center;
}

html.flight-on .island--single .island__head {
  align-items: flex-start;
  flex-direction: column;
}

html.flight-on .island--single .island__cards {
  margin-top: 0;
}

html.flight-on .island--single .island__cards .card {
  flex-basis: 600px;
}

html.flight-on .card__name {
  font-size: 32px;
}

html.flight-on .card__text {
  font-size: 17px;
}

/* Level of detail follows the zoom: from afar pictures and names, close up the rest. */
html.flight-on .island__lead,
html.flight-on .card__sector,
html.flight-on .card__text,
html.flight-on .card__tags,
html.flight-on .card__cta,
html.flight-on .card__controls,
html.flight-on .island__num {
  opacity: clamp(0, calc((var(--zoom, 1) - 0.52) * 6), 1);
  visibility: var(--detail, visible);
}

html.flight-on .card__name {
  opacity: clamp(0, calc((var(--zoom, 1) - 0.36) * 6), 1);
}

/* Island navigation inside the stage */
html.flight-on .flight__nav {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 5;
  display: flex;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  transform: translateX(-50%);
}

.flight__nav button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.flight__navicon {
  width: 26px;
  height: 26px;
  fill: #fff;
}

.flight__nav button:hover {
  background: rgba(255, 255, 255, 0.14);
}

.flight__nav button[aria-pressed="true"] {
  background: #fff;
}

.flight__nav button[aria-pressed="true"] .flight__navicon {
  fill: #000;
}

/* ---- build-up the first time the overview comes into view */
html.flight-on.flight-motion .flight__base path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease-out);
  transition-delay: calc(0.2s + var(--i, 0) * 0.08s);
}

html.flight-on.flight-motion .flight.is-built .flight__base path {
  stroke-dashoffset: 0;
}

html.flight-on.flight-motion .island,
html.flight-on.flight-motion .flight__core {
  opacity: 0;
  transition: opacity 0.9s ease;
}

html.flight-on.flight-motion .island {
  transition-delay: calc(0.6s + var(--i, 0) * 0.1s);
}

html.flight-on.flight-motion .flight.is-built .island,
html.flight-on.flight-motion .flight.is-built .flight__core {
  opacity: 1;
}

/* ================================================================ phones */
@media (max-width: 767px) {
  .areas__intro-grid {
    grid-template-columns: 1fr;
  }

  .island__head {
    flex-direction: column;
    gap: 18px;
  }

  .island__cards {
    margin-top: 36px;
    margin-left: 8px;
    padding-left: 24px;
    border-left: 1px solid var(--hair);
  }

  .card__media {
    margin-right: calc(-1 * var(--gutter));
  }

  .card__media--title {
    margin-right: 0;
  }
}

/* Stacked layout: the red signal runs down the line beside the cards (phones). */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .island__cards::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    animation: signal 2.6s var(--ease-io) infinite;
  }

  @keyframes signal {
    0% { top: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: calc(100% - 7px); opacity: 0; }
  }
}

/* ---------------------------------------------------------------- group */

.group {
  padding: var(--section) 0;
  color: #fff;
  background: var(--ink);
}

.group__head {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: var(--gap);
  align-items: start;
}

.group__head .kicker {
  padding-top: 0.9em;
}

.group__head .display {
  font-size: clamp(36px, 4.6vw, 72px);
}

.group__text {
  display: grid;
  grid-template-columns: 0.55fr 0.725fr 0.725fr;
  gap: var(--gap);
  margin: clamp(40px, 5vw, 72px) 0 clamp(72px, 9vw, 136px);
}

.group__text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.65;
}

.group__text p:first-child {
  grid-column: 2;
}

.group__sub {
  margin-bottom: 0;
  padding-bottom: 28px;
}

.principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.principles li {
  padding: 36px 36px 0 0;
}

.principles li + li {
  padding-left: 36px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.principles strong {
  display: block;
  font-size: clamp(38px, 4.6vw, 72px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
}

.principles h3 {
  position: relative;
  margin: 40px 0 10px;
  padding-top: 20px;
  font-size: 17px;
  font-weight: 600;
}

.principles h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--red);
}

.principles p {
  max-width: 34ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 15.5px;
}

/* ---------------------------------------------------------------- location */

.location {
  padding: var(--section) 0;
}

.location__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--gap);
  align-items: center;
}

.location .display--m {
  font-size: clamp(32px, 3.2vw, 50px);
}

.location__copy .lead {
  margin: 32px 0 36px;
}

.location__hint {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--ink);
  color: var(--muted);
  font-size: 15px;
}

/* Location map (light): Europe from Natural Earth (public domain), countries with sites a shade darker,
   the sites as red dots with arcs from the headquarters. Pins open their address. */
.sitemap {
  position: relative;
  align-self: start;
  margin: 0;
  aspect-ratio: 1540 / 1620;
  background: var(--mist);
}

.sitemap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.geo {
  fill: #e3e3df;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linejoin: round;
}

.geo--on {
  fill: #cfcfca;
}

.sitemap__arc {
  fill: none;
  stroke: rgba(0, 0, 0, 0.42);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke 0.3s ease;
}

.sitemap__arc.is-hot {
  stroke: var(--red);
}

html.reveal-ready .sitemap .sitemap__arc {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--ease-out) calc(0.4s + var(--i) * 0.15s), stroke 0.3s ease;
}

html.reveal-ready .sitemap.is-in .sitemap__arc {
  stroke-dashoffset: 0;
}

.sitemap__halo {
  fill: rgba(255, 0, 0, 0.16);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.35s var(--ease-out), fill 0.35s ease;
}

.sitemap__dot {
  fill: var(--red);
  stroke: var(--mist);
  stroke-width: 4;
}

.sitemap__pin--hq .sitemap__halo {
  fill: rgba(255, 0, 0, 0.24);
}

.sitemap__pin.is-hot .sitemap__halo {
  fill: rgba(255, 0, 0, 0.3);
  transform: scale(1.6);
}

.sitemap__city {
  fill: var(--ink);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.01em;
  paint-order: stroke;
  stroke: var(--mist);
  stroke-width: 8px;
  stroke-linejoin: round;
}

.sitemap__kind {
  fill: #6a6a66;
  font-size: 28px;
  paint-order: stroke;
  stroke: var(--mist);
  stroke-width: 6px;
  stroke-linejoin: round;
}

/* Pins: a round hit area on each dot; the address card opens beside it. */
.sitemap__pins-ui {
  position: absolute;
  inset: 0;
}

.pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
}

.pin__dot {
  position: absolute;
  left: -22px;
  top: -22px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.pin__dot:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.pin__card {
  position: absolute;
  z-index: 5;
  width: max-content;
  max-width: min(300px, 80vw);
  padding: 16px 18px 12px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.35s var(--ease-out), visibility 0s linear 0.35s;
}

.pin.is-open .pin__card {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s ease, transform 0.35s var(--ease-out);
}

.pin.is-open {
  z-index: 6;
}

.pin--below .pin__card { top: 26px; }
.pin--above .pin__card { bottom: 26px; }
.pin--start .pin__card { left: -18px; }
.pin--end .pin__card { right: -18px; }
.pin--center .pin__card { left: 50%; translate: -50% 0; }

.pin__kind {
  margin: 0 0 8px;
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
}

.pin__address {
  font-size: 15px;
  font-style: normal;
  line-height: 1.5;
  text-transform: none;
}

.pin__address span {
  display: block;
}

.pin__address span:nth-last-child(2),
.pin__address span:last-child {
  display: inline;
}

.pin__address span:nth-last-child(2)::after {
  content: ", ";
}

.pin__address strong {
  font-weight: 700;
}

.pin__map {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
}

.pin__map b {
  color: var(--red);
  font-weight: 500;
  transition: transform 0.3s var(--ease-out);
}

.pin__map:hover b,
.pin__map:focus-visible b {
  transform: translate(3px, -3px);
}

/* ---------------------------------------------------------------- contact */

.contact {
  padding: var(--section) 0;
  background: var(--mist);
}

.contact__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--gap);
  align-items: start; /* the form is taller than the heading now */
}

.contact .display {
  font-size: clamp(42px, 6vw, 96px);
}

.contact__accent {
  color: var(--red);
}

.enquiry {
  position: relative;
  display: grid;
  gap: 14px;
  padding: clamp(24px, 2.6vw, 36px);
  background: var(--paper);
}

.enquiry label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.select {
  position: relative;
}

.select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.select select {
  width: 100%;
  min-height: 52px;
  padding: 0 44px 0 16px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  font-size: 16px;
  appearance: none;
  cursor: pointer;
}

.enquiry__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field {
  display: grid;
  gap: 8px;
}

.enquiry label.is-required::after {
  content: " *";
  color: var(--red);
}

.field input,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.field textarea {
  min-height: 140px;
  padding: 14px 16px;
  resize: vertical;
}

/* Left empty by people, filled by bots. */
.enquiry__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enquiry .enquiry__consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

.enquiry__consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--ink);
}

.enquiry button[disabled] {
  opacity: 0.55;
  cursor: progress;
}

.enquiry__status {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.enquiry__status:empty {
  display: none;
}

.enquiry__status.is-ok,
.enquiry__status.is-error {
  padding-left: 14px;
  border-left: 3px solid var(--red);
  font-weight: 600;
}

.enquiry__direct {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.enquiry__direct a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  padding: 64px 0 36px;
  color: #fff;
  background: var(--ink);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px 48px;
  align-items: end;
}

.site-footer__brand {
  color: #fff;
}

.site-footer .wordmark {
  height: 44px;
}

.site-footer__fields {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 14px;
}

.site-footer__nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.site-footer__legal {
  grid-column: 1 / -1;
  margin: 12px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.5);
  font-size: 12.5px;
}

/* ---------------------------------------------------------------- lowercase typography
   Everything outside the hero artwork is set in lowercase (the source text keeps its spelling, so screen readers
   and search engines read it normally). Legal name, address and e-mail stay exact. */
.site-header,
main > section:not(.jz-hero),
.site-footer {
  text-transform: lowercase;
}

/* Browsers exempt form controls from inherited text-transform; bring them in line. */
.site-header button,
main > section:not(.jz-hero) button,
main > section:not(.jz-hero) select,
.site-footer button {
  text-transform: inherit;
}

.kicker,
.card__sector,
.enquiry label {
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.kicker {
  font-size: 14px;
}

.card__sector {
  font-size: 14px;
}

.site-footer__legal,
.location address,
.enquiry__direct a {
  text-transform: none;
}

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

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

  .sitemap__city {
    font-size: 60px;
  }

  .sitemap__kind {
    display: none;
  }
}


/* ---------------------------------------------------------------- reveal motion */

html.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease var(--d, 0ms), transform 1.1s var(--ease-out) var(--d, 0ms);
}

html.reveal-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

html.reveal-ready .kicker[data-reveal]::before {
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-out) calc(var(--d, 0ms) + 0.25s);
}

html.reveal-ready .kicker[data-reveal].is-in::before {
  transform: scaleX(1);
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .intro__grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .group__head,
  .group__text {
    grid-template-columns: 1fr 1fr;
  }

  .group__head .kicker {
    grid-column: 1 / -1;
  }

  .group__head .display {
    grid-column: 1 / -1;
  }

  .group__text p:first-child {
    grid-column: auto;
  }
}

@media (max-width: 860px) {
  :root {
    --header-h: 64px;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 6px var(--gutter) 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
  }

  .site-header.is-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.25s ease, transform 0.3s var(--ease-out);
  }

  .site-nav a {
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    font-size: 17px;
  }

  .site-nav a::after {
    display: none;
  }

  .lang {
    margin-left: auto;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .contact__grid {
    grid-template-columns: 1fr;
  }


  .principles {
    grid-template-columns: 1fr;
  }

  .principles li,
  .principles li + li {
    padding: 32px 0;
    border-left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .principles h3 {
    margin-top: 24px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 680px) {
  .wordmark {
    height: 26px;
  }

  .group__head .kicker {
    padding-top: 0;
  }

  .facts {
    grid-template-columns: 1fr;
  }

  .facts__item,
  .facts__item + .facts__item {
    padding: 20px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .group__head,
  .group__text {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }

  .jz-cue i::after {
    transform: none;
  }
}

#card-commerce-autento .card__name {
  text-transform: none;
}

.island__titles {
  position: relative;
  z-index: 0;
}

html.flight-on .island__titles::before {
  content: "";
  position: absolute;
  inset: -6px -8px;
  z-index: -1;
  background: #000;
  opacity: clamp(0, calc((var(--zoom, 1) - 0.52) * 6), 1);
}

/* Original transparent brand artwork, without video frames or logo plates. */
.card__media--brand {
  display: grid;
  place-items: center;
  height: clamp(160px, 22vw, 220px);
  aspect-ratio: auto;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.card__brand {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}

.card__media--brand::after { display: none; }
html.flight-on .card__media--brand { height: 200px; }
html.flight-on .island--bridge .card__media--brand { height: 220px; }
html.flight-on .island--single .card__media--brand { height: 200px; }
@media (max-width: 767px) { .card__media--brand { margin-right: 0; } }