/* ==========================================================================
   lookINsight — well-founded garden centre concepts
   Brand CSS system · Huisstijl 2026
   Rules: one accent per surface · one hero per section · yellow = highlight
   only · generous white space · Montserrat carries meaning, the marker hand
   labels the moment.
   ========================================================================== */

/* Flux Architect — the brand's own marker hand (local files, tiny: ~16KB each) */
@font-face {
  font-family: "Flux Architect";
  src: url("../assets/fonts/FluxArchitect-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Flux Architect";
  src: url("../assets/fonts/FluxArchitect-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Flux Architect";
  src: url("../assets/fonts/FluxArchitect-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Colour tokens — each colour has one job */
  --lis-blue: #1d71b8;        /* structure · data · primary actions */
  --lis-blue-dark: #155a94;
  --lis-blue-mid: #5ba3d9;
  --lis-blue-pale: #d0e8f7;   /* tints/fills only — fails AA as text on blue */
  --lis-blue-onblue: #e8f4fc; /* body text on Greenhouse Blue: 4.57:1, passes AA */
  --lis-blue-wash: #eef6fc;
  --lis-green: #078036;       /* growth · nature · positive data */
  --lis-green-mid: #6fba47;
  --lis-green-pale: #d4edda;    /* tints/fills only — fails AA as text on green */
  --lis-green-ongreen: #e8f6ec; /* body text on Insight Green: 4.54:1, passes AA */
  --lis-green-wash: #eff8f2;
  --lis-yellow: #e7e345;      /* emphasis only — a few words, never a fill */
  --ink: #14171a;
  --grey-dark: #3d3d3d;
  --grey-mid: #6b7075;
  --grey-light: #e8e8e8;
  --paper: #f7f8f9;
  --white: #ffffff;

  /* Type */
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-marker: "Flux Architect", "Architects Daughter", "Segoe Print", cursive;

  /* Rhythm */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-card: 0 2px 6px rgba(20, 23, 26, 0.06), 0 14px 34px rgba(20, 23, 26, 0.08);
  --shadow-lift: 0 4px 10px rgba(20, 23, 26, 0.08), 0 22px 48px rgba(20, 23, 26, 0.13);
  --measure: 62ch;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Anchored sections land below the sticky header instead of underneath it */
[id] { scroll-margin-top: 96px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lis-blue); text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--lis-blue);
  outline-offset: 3px;
  border-radius: 4px;
}
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 var(--space-2); font-weight: 800; }
p { margin: 0 0 var(--space-2); max-width: var(--measure); }

.container {
  width: min(1180px, 92vw);
  margin-inline: auto;
}

/* ---------- Brand voice atoms ---------- */

/* Marker label — Flux Architect stand-in. ALL CAPS, wide-spaced, sparing. */
.marker-label {
  font-family: var(--font-marker);
  font-size: 1.05rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lis-blue);
  display: inline-block;
  margin-bottom: var(--space-2);
}
.marker-label--green { color: var(--lis-green); }
.marker-label--white { color: var(--white); }

/* Quiet eyebrow — for sub-blocks. The marker hand is reserved for the seven
   turns in the story (hero, crossroad, questions, routes, method, proof,
   close); everything else labels itself in Montserrat so the fingerprint
   keeps its value. */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-mid);
  display: inline-block;
  margin-bottom: var(--space-2);
}
.eyebrow--white { color: var(--lis-blue-onblue); }
.eyebrow--green { color: var(--lis-green); }

/* Highlighter swipe — marks a few words, never a fill */
.hl {
  position: relative;
  white-space: nowrap;
}
.hl::before {
  content: "";
  position: absolute;
  inset: 58% -0.18em -0.02em -0.18em;
  background: var(--lis-yellow);
  z-index: -1;
  transform: skewX(-8deg) rotate(-0.6deg);
  border-radius: 2px;
}

/* Hand-drawn underline accent (inline svg background) */
.section-head { max-width: 46rem; }
.section-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); letter-spacing: -0.015em; }
.section-head p.lede { font-size: 1.13rem; color: var(--grey-dark); }

/* Buttons — blue owns primary actions */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.95em 1.7em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
  min-height: 48px;
}
.btn svg { flex: none; }
.btn--primary { background: var(--lis-blue); color: var(--white); }
.btn--primary:hover { background: var(--lis-blue-dark); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(29, 113, 184, 0.35); }
.btn--ghost { background: transparent; color: var(--lis-blue); border-color: var(--lis-blue); }
.btn--ghost:hover { background: var(--lis-blue-wash); transform: translateY(-2px); }
.btn--white { background: var(--white); color: var(--lis-blue); }
.btn--white:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.25); }

/* Blueprint grid + honeycomb surfaces */
.surface-grid {
  background: linear-gradient(180deg, var(--white) 0%, var(--paper) 100%);
}
.surface-honeycomb-blue {
  background-color: var(--lis-blue);
  background-image: url("../assets/backgrounds/blue-pattern.png");
  background-size: 420px;
}
.surface-honeycomb-green {
  background-color: var(--lis-green);
  background-image: url("../assets/backgrounds/green-pattern.png");
  background-size: 420px;
}

/* ---------- Header ----------
   The header needs more room than the 1180px content container: eight nav
   items plus logo, language select and CTA overflow it (worse in Dutch and
   German, where labels run longer). */
.site-header .container { width: min(1420px, 95vw); }
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.site-header.is-stuck {
  border-color: var(--grey-light);
  box-shadow: 0 6px 22px rgba(20, 23, 26, 0.07);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.8rem 0;
}
/* The logo must never be squeezed: it is a flex item, so without flex:none a
   long nav (German labels) shrinks it and max-width:100% distorts the ratio. */
.nav__logo { flex: none; }
.nav__logo img { height: 54px; width: auto; max-width: none; }
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1.8vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  padding: 0.4em 0.2em;
  border-bottom: 3px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
  white-space: nowrap; /* never wrap menu items to two lines */
}
.nav__links a:hover { color: var(--lis-blue); border-color: var(--lis-yellow); }
.nav__cta { white-space: nowrap; }
.nav__toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.6rem;
  cursor: pointer;
  color: var(--ink);
}
.lang-select {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  border: 2px solid var(--grey-light);
  border-radius: 999px;
  padding: 0.5em 0.9em;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms ease;
}
.lang-select:hover, .lang-select:focus-visible { border-color: var(--lis-blue); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5.5rem);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
  /* Every question is stacked in one grid cell, so the heading always reserves
     the height of the longest one. The rotation used to swing the H1 between
     176px and 294px in German and shove the page down every 4.6s (CLS 0.37).
     No fixed pixel value: it re-solves per language and per viewport. */
  display: grid;
}
.hero h1 > span { grid-area: 1 / 1; }
.hero__reserve {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}
.hero__question {
  display: block;
  color: var(--lis-blue);
  transition: opacity 350ms ease, transform 350ms ease;
}
.hero__question.is-swapping { opacity: 0; transform: translateY(10px); }
.hero__sub {
  font-size: 1.16rem;
  color: var(--grey-dark);
  max-width: 34rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.hero__note {
  margin-top: var(--space-2);
  font-size: 0.88rem;
  color: var(--grey-mid);
}
.hero__visual { position: relative; }
.hero__visual > img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
.hero__badge {
  position: absolute;
  bottom: -1.4rem;
  left: -1.2rem;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.hero__badge strong { font-size: 1.7rem; color: var(--lis-green); letter-spacing: -0.02em; }
.hero__badge span { font-size: 0.82rem; color: var(--grey-mid); max-width: 12rem; line-height: 1.35; }

/* ---------- Client marquee ---------- */
.clients {
  padding: var(--space-4) 0 var(--space-4);
  border-top: 1px solid var(--grey-light);
  background: var(--white);
}
.clients__label {
  text-align: center;
  display: block;
  margin: 0 auto var(--space-3);
}
.clients__viewport {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.clients__track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  width: max-content;
  animation: clients-scroll 42s linear infinite;
}
.clients__set {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  flex: none;
}
.clients__viewport:hover .clients__track { animation-play-state: paused; }
.clients__track img {
  height: 46px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.62);
  transition: filter 200ms ease;
}
.clients__track img:hover { filter: grayscale(0) opacity(1); }
@keyframes clients-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .clients__track { animation: none; width: auto; }
  .clients__set { flex-wrap: wrap; justify-content: center; }
  .clients__set[aria-hidden="true"] { display: none; }
  .clients__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Crossroad strip ---------- */
.crossroad { padding: var(--space-5) 0; background: var(--paper); }
.crossroad__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}
/* No coloured top edge: the icon chip already carries blue / green / ink, so
   the border only repeated it — and a thick accent bar on a rounded card is
   the most generic card pattern there is. */
.crossroad__card {
  background: var(--white);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
}
.crossroad__card--cross { border-top-color: var(--lis-yellow); }
.crossroad__card h3 { font-size: 1.12rem; margin-bottom: 0.4rem; }
.crossroad__card p { font-size: 0.95rem; color: var(--grey-dark); margin: 0; }
.crossroad__card .icon {
  width: 52px; height: 52px;
  margin-bottom: var(--space-2);
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.icon--blue { background: var(--lis-blue-wash); color: var(--lis-blue); }
.icon--green { background: var(--lis-green-wash); color: var(--lis-green); }
.icon--ink { background: #fbfad9; color: var(--ink); }

/* ---------- Questions section ---------- */
.questions { padding: var(--space-6) 0; }
.questions__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.questions__sticky { position: sticky; top: 7rem; }
.question-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
/* The q-tag already labels each question in the marker hand; a 5px side rule
   on top of that is the classic AI card tell. The border reacts on hover
   instead, which is quieter and actually tells you the row is interactive. */
.question-item {
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius-sm);
  padding: 1.15rem 1.4rem;
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--grey-dark);
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.question-item:hover {
  border-color: var(--lis-blue);
  transform: translateX(4px);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}
.question-item span.q-tag {
  display: block;
  font-family: var(--font-marker);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lis-blue);
  margin-bottom: 0.25rem;
}
.questions__bridge {
  margin-top: var(--space-4);
  font-size: 1.16rem;
  font-weight: 700;
}

/* ---------- Routes (three ways in) ---------- */
.routes { padding: var(--space-6) 0; background: var(--paper); }
.routes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.route-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.route-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.route-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.route-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.route-card__flag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--white);
  border-radius: 999px;
  font-family: var(--font-marker);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.45em 1em;
  color: var(--lis-blue);
  box-shadow: 0 4px 14px rgba(20,23,26,0.18);
}
.route-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.route-card__quote {
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}
.route-card__desc { font-size: 0.95rem; color: var(--grey-dark); margin: 0; flex: 1; }
.route-card__offer {
  border-top: 1px dashed var(--grey-light);
  padding-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--grey-dark);
}
.route-card__offer strong { color: var(--lis-green); display: block; font-size: 0.98rem; }
.route-card__link {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.4rem;
}
.route-card__link:hover { text-decoration: underline; text-decoration-color: var(--lis-yellow); text-decoration-thickness: 3px; }

/* ---------- Method (ABCD) ---------- */
.method { padding: var(--space-6) 0; }
.method__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.method-step { text-align: left; position: relative; padding-top: var(--space-2); }
.method-step__letter {
  font-family: var(--font-marker);
  font-size: 3.2rem;
  color: var(--lis-blue-onblue);
  position: absolute;
  top: -0.8rem;
  right: 0.4rem;
  line-height: 1;
}
.method-step img { width: 88px; height: 88px; object-fit: contain; margin-bottom: var(--space-2); }
.method-step h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.method-step .method-step__tag {
  font-family: var(--font-marker);
  color: var(--lis-green);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.45rem;
}
.method-step p { font-size: 0.92rem; color: var(--grey-dark); margin: 0; }

/* Tech band inside method */
.tech-band {
  margin-top: var(--space-5);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--white);
  position: relative;
}
.tech-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
}
.tech-band h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--white); }
.tech-band p { color: var(--lis-blue-onblue); font-size: 1.04rem; }
.tech-band img { border-radius: var(--radius-sm); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35); }
.tech-band__stats { display: flex; gap: var(--space-4); margin-top: var(--space-3); flex-wrap: wrap; }
.tech-band__stat strong {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--white);
}
.tech-band__stat span { font-size: 0.85rem; color: var(--lis-blue-onblue); }

/* BuildPack strip */
.buildpack {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  background: var(--lis-green-wash);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 3.2rem);
}
.buildpack img { border-radius: var(--radius-sm); box-shadow: var(--shadow-card); }
.buildpack h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.buildpack p { color: var(--grey-dark); }
.buildpack ul { margin: 0 0 var(--space-2); padding-left: 1.2rem; color: var(--grey-dark); font-size: 0.97rem; }
.buildpack li { margin-bottom: 0.35rem; }

/* ---------- Proof ---------- */
.proof { padding: var(--space-6) 0; background: var(--paper); }
.proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.case-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.case-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.case-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.case-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.case-card:hover .case-card__media img { transform: scale(1.04); }
.case-card__body { padding: var(--space-3); }
.case-card__body h3 { font-size: 1.08rem; margin-bottom: 0.35rem; }
.case-card__meta {
  font-family: var(--font-marker);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lis-green);
  display: block;
  margin-bottom: 0.5rem;
}
.case-card__body p { font-size: 0.93rem; color: var(--grey-dark); margin: 0; }

/* ---------- Proof flythrough video ---------- */
.proof__video {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  background: var(--paper);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.8rem);
}
.proof__video video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  background: var(--ink);
  cursor: pointer;
}
.proof__video p { color: var(--grey-dark); font-size: 0.98rem; }
.proof__video-stack { display: grid; gap: var(--space-3); }
.proof__video-stack figure { margin: 0; }
.proof__video-stack figcaption {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--grey-mid);
  margin-top: 0.6rem;
}
@media (max-width: 980px) { .proof__video { grid-template-columns: 1fr; } }

/* ---------- YouTube facade ---------- */
.yt-facade {
  position: relative;
  cursor: pointer;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  aspect-ratio: 16 / 9;
  background: var(--ink);
}
.yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-facade__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--lis-blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  transition: transform 180ms ease;
}
.yt-facade:hover .yt-facade__play,
.yt-facade:focus-visible .yt-facade__play { transform: scale(1.08); }
.yt-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  display: block;
}

/* ---------- Project rail: full-bleed horizontal scroll ---------- */
.rail { padding: var(--space-5) 0 var(--space-6); }
.rail__scroller {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  /* break out of the container so the rail runs wider than the page */
  padding: 0 max(4vw, calc((100vw - 1180px) / 2)) var(--space-2);
  margin-inline: calc(50% - 50vw);
  scrollbar-width: thin;
}
.rail__scroller::-webkit-scrollbar { height: 8px; }
.rail__scroller::-webkit-scrollbar-thumb { background: var(--grey-light); border-radius: 999px; }
.rail__scroller::-webkit-scrollbar-thumb:hover { background: var(--lis-blue-mid); }
.rail__project {
  flex: none;
  width: min(90vw, 46rem);
  scroll-snap-align: center;
}
.rail__title { font-size: 1.15rem; margin-bottom: 0.15rem; }
.rail__meta {
  font-family: var(--font-marker);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lis-green);
  display: block;
  margin-bottom: var(--space-2);
}
.rail__shots {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.6rem;
  aspect-ratio: 16 / 10;
}
.rail__shots button {
  padding: 0;
  border: 0;
  background: var(--paper);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
}
.rail__shots button:first-child { grid-row: span 2; }
/* Projects with fewer than three photos still fill the tile cleanly */
.rail__shots--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.rail__shots--2 button:first-child { grid-row: auto; }
.rail__shots--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.rail__shots--1 button:first-child { grid-row: auto; }
.rail__shots img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
.rail__shots button:hover img { transform: scale(1.05); }
.rail__hint { font-size: 0.85rem; color: var(--grey-mid); margin-top: 0.6rem; }
@media (max-width: 560px) {
  .rail__shots { grid-template-columns: 1fr 1fr; aspect-ratio: 4 / 3; }
  .rail__shots button:first-child { grid-row: span 2; grid-column: span 2; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10, 14, 18, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.lightbox__caption {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2.2rem);
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.92rem;
  padding: 0 1rem;
}
.lightbox__btn {
  position: absolute;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease;
}
.lightbox__btn:hover { background: var(--lis-blue); }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__prev { left: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }

/* ---------- Testimonials ---------- */
.voices { background: var(--paper); padding: var(--space-6) 0; }
.voices__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.voice {
  background: var(--white);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.voice blockquote {
  margin: 0 0 var(--space-3);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--grey-dark);
  font-style: italic;
}
.voice figcaption { margin-top: auto; }
.voice__name {
  font-family: var(--font-marker);
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lis-blue);
  display: block;
}
.voice__where { font-size: 0.85rem; color: var(--grey-mid); }
.voice__mark { color: var(--lis-yellow); margin-bottom: var(--space-2); }

/* ---------- Product promo (Location Profile) ---------- */
.promo { padding: var(--space-5) 0; }
.promo__card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: var(--white);
}
.promo__body { padding: clamp(1.8rem, 4vw, 3rem); }
.promo__body h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.promo__body p { color: var(--grey-dark); }
.promo__price {
  padding: clamp(1.8rem, 4vw, 3rem);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
}
.promo__price .amount { font-size: 2.8rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.promo__price .sub { font-size: 0.88rem; color: var(--lis-blue-onblue); }
.promo__price .btn { margin-top: 1rem; justify-content: center; }
@media (max-width: 980px) { .promo__card { grid-template-columns: 1fr; } }

/* ---------- Contact reassurance chips ---------- */
.contact__chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: var(--space-3);
}
.contact__chips span {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  /* 14% white lifted the blue enough to drop white text to 3.95:1 — 6% keeps
     the chip visible and the label at 4.58:1 */
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.45em 1.1em;
}

/* ---------- About ---------- */
.about { padding: var(--space-6) 0; }
.about__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about__visual img { border-radius: var(--radius); box-shadow: var(--shadow-lift); }
.about__visual video {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  display: block;
  background: var(--ink);
  cursor: pointer;
}
.about__boothphoto {
  margin-top: var(--space-3);
  max-height: 300px;
  object-fit: cover;
  object-position: center 30%;
  width: 100%;
}
.about ul.about__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 0.9rem; }
.about ul.about__list li { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.98rem; color: var(--grey-dark); }
.about ul.about__list svg { flex: none; margin-top: 0.2em; color: var(--lis-green); }

/* ---------- Team line-up ---------- */
.team {
  margin-top: var(--space-5);
  text-align: center;
}
.team__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
}
.team__member { width: 10.5rem; }
.team__member img,
.team__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}
.team__avatar {
  background: var(--lis-blue);
  color: var(--white);
  font-family: var(--font-marker);
  font-size: 2rem;
}
.team__avatar--green { background: var(--lis-green); }
.team__member strong { display: block; margin-top: 0.7rem; font-size: 0.95rem; }
.team__member span { font-size: 0.82rem; color: var(--grey-mid); }

/* ---------- Contact ---------- */
.contact { padding: var(--space-6) 0; color: var(--white); position: relative; }
.contact__inner { text-align: center; max-width: 44rem; margin-inline: auto; }
.contact h2 { color: var(--white); font-size: clamp(1.9rem, 3.8vw, 2.8rem); }
.contact p { color: var(--lis-blue-onblue); font-size: 1.12rem; margin-inline: auto; }
.contact__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.contact__meta { margin-top: var(--space-3); font-size: 0.9rem; color: var(--lis-blue-onblue); }
.contact__meta a { color: var(--white); font-weight: 700; }

/* ---------- Insights: overview ---------- */
.ins-head { padding: var(--space-6) 0 var(--space-4); }
.ins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-3);
  padding-bottom: var(--space-6);
}
.ins-card {
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.ins-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.ins-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper); }
.ins-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ins-card__body { padding: var(--space-3); display: flex; flex-direction: column; flex: 1; }
.ins-card__meta {
  font-family: var(--font-marker);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lis-green);
  margin-bottom: 0.5rem;
}
.ins-card h3 { font-size: 1.12rem; margin-bottom: 0.5rem; }
.ins-card h3 a { color: var(--ink); }
.ins-card h3 a:hover { color: var(--lis-blue); }
.ins-card p { font-size: 0.93rem; color: var(--grey-dark); margin-bottom: var(--space-2); }
.ins-card__more { margin-top: auto; font-weight: 700; font-size: 0.9rem; }
.ins-card--featured { grid-column: 1 / -1; }
@media (min-width: 860px) {
  .ins-card--featured { display: grid; grid-template-columns: 1.15fr 1fr; }
  .ins-card--featured .ins-card__media { aspect-ratio: auto; height: 100%; min-height: 18rem; }
  .ins-card--featured .ins-card__body { padding: var(--space-4); justify-content: center; }
  .ins-card--featured h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
  .ins-card--featured p { font-size: 1rem; }
}

/* ---------- Insights: article ---------- */
.article { padding: var(--space-5) 0 var(--space-6); }
.article__wrap { max-width: 44rem; margin-inline: auto; }
.article__meta { color: var(--grey-mid); font-size: 0.9rem; margin-bottom: var(--space-3); }
.article h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -0.02em; margin-bottom: var(--space-3); }
.article__lead { font-size: 1.2rem; color: var(--grey-dark); font-weight: 600; }
.article__hero { border-radius: var(--radius); box-shadow: var(--shadow-card); margin: var(--space-4) 0; }
.article__wrap h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin-top: var(--space-4); }
.article__wrap p, .article__wrap li { font-size: 1.05rem; color: var(--grey-dark); max-width: none; }
.article__wrap ul, .article__wrap ol { padding-left: 1.3rem; line-height: 1.8; margin-bottom: var(--space-2); }
.article__wrap blockquote {
  margin: var(--space-4) 0;
  padding: 0 0 0 var(--space-3);
  border-left: 4px solid var(--lis-yellow);
  font-family: var(--font-marker);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--lis-blue);
}
.article__cta {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--lis-blue-wash);
  border: 1px solid var(--lis-blue-pale);
}
.article__cta h3 { margin-bottom: 0.5rem; }
.article__back { display: block; margin-bottom: var(--space-3); font-weight: 600; }
.article .marker-label { display: block; }

/* ---------- Newsletter ---------- */
.newsletter { padding: var(--space-4) 0; background: var(--paper); border-top: 1px solid var(--grey-light); }
.newsletter__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}
.newsletter__title { font-size: 1.4rem; margin-bottom: 0.3rem; }
.newsletter__p { color: var(--grey-dark); font-size: 0.97rem; margin: 0; }
.newsletter__form { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; justify-content: flex-end; }
.newsletter__form input[type="email"] {
  flex: 1 1 240px;
  min-height: 48px;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7em 1.1em;
  border: 2px solid var(--grey-light);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
}
.newsletter__form input[type="email"]:focus-visible { outline: 3px solid var(--lis-blue); outline-offset: 2px; border-color: var(--lis-blue); }
.newsletter__note { flex-basis: 100%; font-size: 0.78rem; color: var(--grey-mid); margin: 0.2rem 0 0; text-align: right; }
.newsletter__hp { position: absolute; left: -5000px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  bottom: 1.2rem;
  left: 1.2rem;
  right: 1.2rem;
  max-width: 30rem;
  margin-inline: auto;
  z-index: 200;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: var(--space-3);
}
.cookie-banner p { font-size: 0.95rem; margin-bottom: var(--space-2); max-width: none; }
.cookie-banner__actions { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.cookie-banner__actions .btn { padding: 0.6em 1.3em; min-height: 44px; font-size: 0.92rem; }

/* Secondary links in the footer (Proof / About moved out of the primary nav) */
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.site-footer__links a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  font-weight: 600;
}
.site-footer__links a:hover { color: var(--white); }

/* ---------- Social ---------- */
.social {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}
.social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--white);
  transition: background 180ms ease, transform 180ms ease;
}
.social a:hover { background: var(--lis-blue); transform: translateY(-2px); }

/* ---------- LinkedIn feed ---------- */
.feed { padding: var(--space-6) 0 var(--space-5); background: var(--paper); }
.feed__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.feed__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.feed__post {
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 20rem;
  display: flex;
  flex-direction: column;
}
.feed__post iframe { width: 100%; flex: 1; border: 0; display: block; }
.feed__empty {
  grid-column: 1 / -1;
  background: var(--white);
  border: 2px dashed var(--grey-light);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-align: center;
  color: var(--grey-mid);
}

/* ---------- Footer ---------- */
.site-footer { padding: var(--space-4) 0; background: var(--ink); color: #b8bdc2; font-size: 0.88rem; }
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}
.site-footer img { height: 44px; width: auto; }
.site-footer a { color: #e3e6e9; }
.site-footer a:hover { color: var(--lis-yellow); }
.site-footer__tagline { font-family: var(--font-marker); letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.8rem; }

/* ---------- Reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 500ms ease, transform 500ms ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 450ms ease, transform 450ms ease; }
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  .hero__question { transition: none; }
  * { animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero__inner, .questions__layout, .about__layout, .tech-band__inner, .buildpack, .newsletter__inner { grid-template-columns: 1fr; }
  .newsletter__form { justify-content: flex-start; }
  .newsletter__note { text-align: left; }
  .questions__sticky { position: static; }
  .crossroad__grid, .routes__grid, .proof__grid { grid-template-columns: 1fr 1fr; }
  .method__grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-4); }
  .hero__visual { order: -1; }
  .hero__badge { left: auto; right: 0.6rem; bottom: -1rem; }
}
/* Nav collapses before the logo, links, switcher and CTA can crowd each other.
   Set above the 1180px container width because translated labels run longer. */
@media (max-width: 1460px) {
  /* With the links hidden, the empty <nav> still sat in the flex flow and
     space-between spread four items across the bar with identical 186px gaps —
     the language select and CTA floated mid-header. Pin the logo left and let
     the rest cluster right. */
  .nav { justify-content: flex-start; }
  .nav__logo { margin-right: auto; }
  /* The collapsed <nav> is zero-width but still claimed a gap on either side —
     6px that the 375px header cannot spare. display:contents takes it out of
     the flex flow; the dropdown inside is absolutely positioned anyway. */
  .nav > nav { display: contents; }

  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-2) 5vw var(--space-3);
    border-bottom: 1px solid var(--grey-light);
    box-shadow: 0 18px 30px rgba(20,23,26,0.12);
    gap: 0.3rem;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 0.85em 0.4em; min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid var(--paper); }
  .nav__toggle { display: block; }
}
@media (max-width: 660px) {
  .crossroad__grid, .routes__grid, .proof__grid, .method__grid { grid-template-columns: 1fr; }
  /* Keep the primary action on screen: a phone visitor standing on a shop
     floor should never have to open the menu to find it. Everything else in
     the bar gives up room so logo + language + CTA + toggle all fit at 375px. */
  .site-header .container { width: 97vw; }
  .nav { gap: 0.4rem; padding: 0.6rem 0; }
  .nav__logo img { height: 36px; }
  .nav__cta {
    font-size: 0.78rem;
    padding: 0.6em 0.85em;
    min-height: 44px;
  }
  /* 44px in both directions: the shrink that keeps the header on one line at
     375px had taken the language picker down to 33px tall and the hamburger to
     32px wide, which is under the minimum for a reliable thumb tap. */
  .lang-select {
    padding: 0.5em 0.4em; font-size: 0.75rem; letter-spacing: 0;
    min-height: 44px;
  }
  .nav__toggle { padding: 0.5rem; min-width: 44px; min-height: 44px; }
}