/* Design tokens measured on the live site (measure/design-tokens.md, layout-and-breakpoints.md). */
@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/red-hat-display-latin-ext.bacbe6f55a.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/red-hat-display-latin.39d2ddd137.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* colour */
  --c-text: #6d6d6d;
  --c-text-strong: #3d3d3d;
  --c-ink: #292929;
  --c-black: #000;
  --c-indigo: #4455e6;
  --c-mint: #19c3a8;
  /* WCAG-safe darker variants for mint TEXT and the form field (the brand mint itself is unchanged for fills, gradients and decoration) */
  --c-mint-text: #0e6d5e;
  --c-field-border: #0f9a85;
  --c-placeholder: #0a6454;
  --c-violet: #9400d3;
  --c-bg: #f7f7f7;
  --c-white: #fff;
  --c-border: #ebebeb;
  --c-dark-panel: #101929;
  --c-mint-tint: rgba(25, 195, 168, 0.15);
  --c-mint-field: rgba(25, 195, 168, 0.3);
  --grad-button: linear-gradient(268deg, var(--c-violet), var(--c-mint));
  --grad-button-flipped: linear-gradient(268deg, var(--c-mint), var(--c-violet));
  --c-sky: #87ceeb;
  --grad-contact: linear-gradient(296deg, var(--c-indigo) 56%, var(--c-sky) 56%);
  --c-ok-bg: #e1ffe0;
  --c-ok: #128800;
  --c-err-bg: #ffdede;
  --c-err: #ff3333;
  --c-err-text: #c40000; /* error text on white (AA); --c-err is for borders */

  /* typography */
  --font: "Red Hat Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-body: 1rem;       /* 16px: base paragraph */
  --fs-small: 0.9375rem; /* 15px: cards, testimonials */
  --fs-label: 0.875rem;  /* 14px: tags, roles */
  --fs-btn: 1.125rem;    /* 18px: nav, buttons */
  --fs-h-card: 1.25rem;  /* 20px */
  --fs-h-section: 2.25rem; /* 36px */
  --fs-h-page: 2.0625rem;  /* 33px */
  --fs-h-contact: 3.625rem; /* 58px */
  --fs-h-hero: 4.375rem;    /* 70px */
  --lh-body: 1.5;
  --lh-tight: 1.2;

  /* layout */
  --container: 1300px;
  --gutter: 10px;
  --header-h: 123px;

  /* radius, shadow */
  --r-sm: 5px;
  --r-md: 10px;
  --r-lg: 24px;
  --shadow-btn: 9px 24px 10px rgba(0, 0, 0, 0.02), 5px 13px 9px rgba(0, 0, 0, 0.06), 2px 6px 6px rgba(0, 0, 0, 0.1), 1px 1px 4px rgba(0, 0, 0, 0.12);
  --shadow-card: 5px 3px 10px 1px rgba(0, 0, 0, 0.25);
  --shadow-quote: 0 2px 5px 1px rgba(0, 0, 0, 0.2);

  /* motion */
  --t-fast: 200ms;
  --t-med: 300ms;
  --t-reveal: 500ms;
}

/* Breakpoints (desktop-first, as measured): ≤991 tablet, ≤767 mobile landscape,
   ≤479 mobile portrait; ≥1280 / ≥1440 / ≥1920 only tweak details.
   Custom properties cannot be used in media queries, so the numbers are repeated. */
@media (min-width: 480px) and (max-width: 991px) { :root { --gutter: 20px; } }
@media (max-width: 991px) { :root { --header-h: 123px; } }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font: 400 var(--fs-body)/var(--lh-body) var(--font);
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { font-weight: 400; line-height: var(--lh-tight); }

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

.skip-link { position: absolute; left: 10px; top: -100px; z-index: 2000; background: var(--c-white); color: var(--c-indigo); padding: 10px 16px; border-radius: var(--r-sm); }
.skip-link:focus { top: 10px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }

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

/* Content stays visible without JavaScript; the script adds .js and then reveal state. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Primary gradient button (.btn) and white variant for the contact block. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  overflow: hidden;
  isolation: isolate;
  background: var(--grad-button);
  box-shadow: var(--shadow-btn);
  color: var(--c-white);
  font-size: var(--fs-btn);
  font-weight: 500;
  line-height: 120%;
  white-space: nowrap;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-button);
  transition: transform var(--t-fast);
}
.btn:hover::before { transform: rotateY(180deg); }
.btn__arrow { width: 15px; height: 13px; flex: none; }
.btn--white { background: var(--c-white); color: var(--c-indigo); transition: background-color var(--t-med), color var(--t-med); }
.btn--white::before { display: none; }
.btn--white:hover { background: var(--c-indigo); color: var(--c-white); }
.btn--white .btn__arrow { color: currentColor; }
@media (max-width: 479px) { .btn { padding: 12px 18px; font-size: 1rem; } }

/* Shell and page components. Values from measure/ (desktop 1440 → tablet ≤991 → mobile ≤767 → ≤479). */

/* ---------- shared bits ---------- */
.eyebrow {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 1.12px;
  text-transform: uppercase;
  color: var(--c-text-strong);
  line-height: 24px;
}

/* ---------- header ---------- */
.site-header {
  --header-alpha: 0;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  padding: 20px 0;
  background-color: rgb(255 255 255 / var(--header-alpha));
}
.site-header__bar { position: relative; display: flex; align-items: center; justify-content: space-between; }
.site-header__logo { flex: none; width: 300px; max-width: calc(100% - 59px); }
.site-header__logo img { width: 195px; height: auto; }
.site-nav { display: flex; flex: 0 1 600px; min-width: 0; }
.site-nav a { padding: 16px 15px; font-size: var(--fs-btn); line-height: 16.8px; color: var(--c-text-strong); white-space: nowrap; }
.site-nav a:hover { color: var(--c-indigo); }
.site-header__cta { flex: none; width: 136px; padding: 12px 24px; }
.nav-toggle {
  display: none;
  position: relative;
  width: 49px;
  height: 49px;
  background: linear-gradient(90deg, var(--c-mint), var(--c-violet));
  color: var(--c-bg);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  position: absolute;
  left: 14px;
  width: 21px;
  height: 2px;
  background: currentColor;
  transition: transform var(--t-med), opacity var(--t-med);
}
.nav-toggle__bars { top: 23px; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 991px) {
  .site-header__cta { display: none; }
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--gutter));
    right: calc(-1 * var(--gutter));
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    background: var(--c-white);
  }
  .site-nav a { padding: 16px 15px; }
  .site-header.is-open { background-color: var(--c-white); }
  .site-header.is-open .site-nav { display: flex; }
  /* no JavaScript: the menu cannot be toggled, so it stays open as an in-flow list under the bar */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav { position: static; display: flex; margin-top: 10px; }
}

/* ---------- case page (measured on the live Amio/Starky's pages) ---------- */
.case { padding: 92px 1%; }
.case__hero { padding-top: 60px; text-align: center; }
.case__hero h1 { max-width: 540px; margin: 12px auto 0; font-size: var(--fs-h-page); line-height: 1.2; letter-spacing: -0.66px; color: var(--c-indigo); }
@media (min-width: 480px) { .case__hero .container { padding-inline: 0; } } /* live: the title may use the full hero width */
.case__intro { max-width: 540px; margin: 12px auto 0; font-size: var(--fs-body); line-height: 24px; color: var(--c-text-strong); }
.case__body { max-width: 1300px; margin: 0 auto; padding: 60px 15px 0; }
.case__row, .case__result { margin-bottom: 40px; background: var(--c-white); }
.case__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 60px; }
.case__art { flex: 0 4 500px; min-width: 0; } /* shrink weights fitted to the live widths at 1280–1439 */
.case__art img { max-width: 100%; height: var(--art-h, 641px); }
.case__art img:not([height]) { width: 100%; aspect-ratio: 1; } /* the pictures are 500x500: reserves the space before they load (no layout shift) */
/* live object-fit per breakpoint (the SVGs are 1:1, the boxes are not): challenge fill / cover 992–1279 / contain ≤991; solution cover / fill ≤991 */
.case__art--solution img { object-fit: cover; }
.case__text { display: flex; flex-direction: column; align-items: flex-start; flex: 0 1 auto; max-width: 600px; margin-top: -2px; padding: 0 20px; } /* flex column: margins do not collapse, lead is shrink-to-fit like live */
@media (min-width: 1440px) { .case__text { max-width: 650px; } }
@media (min-width: 992px) and (max-width: 1279px) {
  .case__row { max-width: 1110px; margin-inline: auto; }
  .case__art { align-self: flex-start; } /* live: text column is centred against a taller picture, the picture stays on top */
  .case__art img { object-fit: cover; }
  .case__art { flex: 0 1 440px; } /* live: art 440 (shrinks to 362 at 992), text column fixed at 560 */
  .case__text { max-width: 560px; }
}
.case__text h2, .case__result-text h2 { width: fit-content; margin: 0 0 20px; font-size: 2rem; font-weight: 500; line-height: 36px; color: var(--c-indigo); }
.case__lead { max-width: 385px; margin: 15px 0 10px;
  font-size: var(--fs-body); line-height: 25px; color: var(--c-text-strong); }
@media (min-width: 1280px) { .case__lead { max-width: 426px; } } /* live lead widths: 385 / 426 / 500 */
@media (min-width: 1440px) { .case__lead { max-width: 500px; } }
.icon-list { display: block; width: 100%; }
.icon-box { position: relative; display: flex; align-items: center; min-height: 148px; margin-bottom: 10px; }
.case__row--solution .icon-box:first-child { padding-top: 14px; } /* live: the first solution step carries a 14px top padding */
.icon-box--two { max-width: 565px; margin: 0 0 6px; } /* live: capped at 565 (no side margin) */
.icon-box__rail { display: flex; flex: none; width: 109px; height: 148px; }
@media (min-width: 768px) and (max-width: 1279px) { .icon-box__icons { margin-right: 35px; } }
@media (min-width: 992px) and (max-width: 1279px) { .icon-box__rail { width: 104px; } } /* live: 104 below 1280 */
.icon-box__rail::after { content: ""; align-self: center; width: 1px; height: 90px; background: #c3c3c3; }
.icon-box__icons { flex: none; position: relative; width: 68px; height: 68px; margin: 40px 40px 0 0; overflow: hidden; }
.icon-box__icons img { position: absolute; inset: 0; width: 68px; height: 68px; transition: transform var(--t-med); }
.icon-box__icons img + img { transform: translateY(68px); }
.icon-box--one:hover .icon-box__icons img:first-child { transform: translateY(-68px); }
.icon-box--one:hover .icon-box__icons img + img { transform: none; }
.icon-box__content { flex: 1 1 0; min-width: 0; max-width: 540px; padding: 16px 0 18px 40px; } /* live: text 500 + 40 gap; this cap makes the column fit-content */
.icon-box__title { font-size: 15px; font-weight: 500; line-height: 29px; color: var(--c-black); }
.icon-box__body p { margin: 0; font-size: var(--fs-body); line-height: 25px; color: var(--c-text-strong); }
.icon-box__body > :first-child { margin-top: 15px; }
.icon-box__body > :is(p, ul) + :is(p, ul) { margin-top: 25px; }
.icon-box__body > :last-child { margin-bottom: 10px; }
.icon-box__body ul { display: flow-root; margin: 0; padding: 0 0 10px 40px; list-style: disc; }
.icon-box__body > p + ul { margin-top: 10px; } /* live: paragraph margin-bottom 10, items spaced 15 apart */
.icon-box__body li::marker { color: var(--c-indigo); font-size: 17px; } /* live: indigo bullets, li is 17px */
.icon-box__body li { margin-top: 15px; padding-top: 2px; font-size: var(--fs-body); line-height: 25px; color: var(--c-text-strong); }
.case__result { padding: 80px 15px; }
@media (min-width: 992px) and (max-width: 1279px) {
  .case__result { max-width: 1110px; margin-inline: auto; }
}
.case__result-inner { display: flex; align-items: center; }
.case__result-art { flex: 0 0.6 630px; min-width: 0; height: 445px; } /* live: 445 box, the 446px picture overflows by 1px */
.case__result-art img { width: 527px; max-width: 100%; height: 446px; }
.case__result-text { display: flex; flex: 0 1 580px; min-width: 0; flex-direction: column; align-items: flex-start; }
.case__result-text p { max-width: 540px; margin: 15px 0 30px; font-size: 17px; line-height: 29px; color: var(--c-text-strong); }
.case__result-text p + p { margin-top: 0; } /* live: the second paragraph is a <br> line inside the same <p> (no gap) */
.case__result-text p:not(:last-child) { margin-bottom: 0; }
@media (min-width: 992px) and (max-width: 1279px) {
  /* live: picture box = half + 50px (80px left padding), text takes the rest (max 535) */
  .case__result-art { flex: 0 0 calc(50% + 50px); max-width: 630px; }
  .case__result-text { flex: 1 1 0; max-width: 535px; }
}
@media (min-width: 1440px) { .case__result-inner { gap: 30px; } .case__result-text p { max-width: 520px; } }
@media (max-width: 991px) {
  .case__row { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 70px; padding-top: 60px; }
  .case__art { flex: none; width: 100%; }
  .case__art img { width: 100%; height: 340px; }
  .case__art img { object-fit: contain; }
  .case__art--solution img { height: 430px; object-fit: fill; }
  .case__text { flex: none; width: 100%; min-width: 0; max-width: none; margin: 20px 0 0; padding: 0 20px; }
  .case__text h2, .case__result-text h2 { margin-bottom: 28px; }
  .icon-box__rail { width: 104px; }
  .icon-box--two { max-width: none; }
  .icon-box__content, .case__lead { max-width: none; } /* the 500px text cap is desktop-only */
  .case__result { padding: 40px 15px 80px; }
  .case__result-inner { flex-direction: column; align-items: stretch; gap: 10px; }
  .case__result-art { display: grid; place-items: center; flex: none; height: 350px; }
  .case__result-art img { width: 100%; height: 300px; object-fit: contain; }
  .case__result-text { flex: none; min-width: 0; }
  .case__result-text p { max-width: none; margin: 5px 0 20px; }
}
@media (max-width: 767px) {
  .case { padding-top: 72px; padding-bottom: 72px; }
  .case__row { margin-top: 62px; }
  .icon-box__rail { width: 108px; }
  .icon-box__rail::after { display: none; }
  .icon-box__content { padding-left: 0; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .case__hero h1 { max-width: 540px; font-size: 40px; line-height: 48px; letter-spacing: -0.8px; }
}
@media (max-width: 1439px) { .icon-box__body p, .icon-box__body li, .case__lead { font-size: 15px; } }
@media (max-width: 479px) {
  .case { padding-top: 72px; padding-bottom: 72px; }
  .case__hero h1 { font-size: 27px; line-height: 32.4px; letter-spacing: -0.54px; }
  .case__intro { font-size: 14px; line-height: 21px; }
  .case__body { margin-inline: 10px; padding: 20px 0 0; }
  .case__row { margin-top: 62px; }
  .case__text { padding: 0 15px; }
  .case__lead { text-align: center; }
  .icon-box { flex-direction: column; }
  .icon-box__rail { width: 68px; }
  .icon-box__rail::after { display: none; }
  .icon-box__icons { margin: 40px 0; } /* live: vertical margin only, icon centred */
  .icon-box--one .icon-box__icons img:first-child { transform: translateY(-68px); } /* live (no hover on phones): all icons show the coloured state */
  .icon-box--one .icon-box__icons img + img { transform: none; }
  .icon-box__content { padding-left: 0; text-align: center; }
  .case__result { padding: 20px 15px 80px; }
  .case__result-art img { height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
  .case__result-text { padding-top: 41px; }
}

/* ---------- case card (listing; the home slider reuses it) ---------- */
.case-card { height: 100%; min-height: 380px; padding: 42px 28px; background: var(--c-mint-tint); box-shadow: var(--shadow-card); }
.case-card--white { padding: 42px 42px 42px 28px; background: var(--c-white); box-shadow: 4px 4px 12px 3px rgba(0, 0, 0, 0.25); } /* live: white variant keeps its 42px right padding on every width */
.case-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 20px; }
.case-card__tags li { padding: 5px 10px; border-radius: var(--r-md); background: var(--c-mint); color: var(--c-white); font-size: var(--fs-label); line-height: 16.8px; text-align: center; }
.case-card__text { margin: 14px 0; }
.case-card__title { min-height: 55px; margin-bottom: 15px; font-size: 18px; font-weight: 500; line-height: 21.6px; color: var(--c-indigo); }
.case-card__summary { min-height: 125px; font-size: var(--fs-small); line-height: 22.5px; color: var(--c-text-strong); }
.case-card--plain .case-card__summary { min-height: 0; font-size: var(--fs-body); line-height: 24px; } /* live: two cards (Amio, Voniak) have the plain paragraph style: 16/24, no 125px minimum; data flag listing.summaryStyle="plain" */
.case-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-top: 25px; }
.case-card__rule { height: 1px; background: var(--c-mint); } /* an element, not a border: sub-pixel snapping then matches the original */
.case-card__label, .case-card__name { display: block; font-weight: 500; }
.case-card__label { font-size: 16px; line-height: 28px; letter-spacing: 0.16px; color: var(--c-black); }
.case-card__name { font-size: 20px; line-height: 32px; letter-spacing: -0.2px; color: var(--c-indigo); }
@media (max-width: 991px) { .case-card:not(.case-card--white) { padding-inline: 14px; } }
@media (min-width: 480px) and (max-width: 767px) { .case-card__title { letter-spacing: -1px; } }
@media (min-width: 768px) and (max-width: 991px) { .case-card__title { letter-spacing: -2px; } }
@media (max-width: 479px) {
  .case-card__tags { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .case-card--plain .case-card__summary { font-size: 14px; line-height: 21px; }
}

/* Below 992px the original hides the button, so a card cannot be opened. Here the same link stays, drawn as an invisible
   layer over the whole card (one semantic <a>, no nested interactive element); the layout is exactly the original's. */
@media (max-width: 991px) {
  .case-card--stretch { position: relative; }
  .case-card--stretch .case-card__link { position: absolute; inset: 0; z-index: 1; padding: 0; overflow: visible; background: none; box-shadow: none; }
  .case-card--stretch .case-card__link::before, .case-card--stretch .case-card__link .btn__arrow { display: none; }
  .case-card--stretch .case-card__cta { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .case-card--stretch .case-card__link:focus-visible { outline-offset: -4px; }
}

/* ---------- case-study listing ---------- */
.eyebrow--lg { margin-bottom: 24px; font-size: var(--fs-btn); font-weight: 500; letter-spacing: 1px; line-height: 16.8px; }
.listing { padding: 190px 0 120px; background: var(--c-white); }
.listing__title { position: relative; }
.listing h1 { position: relative; z-index: 1; max-width: 575px; font-size: 60px; line-height: 60px; letter-spacing: -2px; color: var(--c-text-strong); }
.listing__accent { color: var(--c-indigo); }
.listing__line { position: absolute; left: -1%; top: 51.5%; width: 385px; max-width: 100%; height: auto; transform: translateY(-50%); } /* live: settled state of its entrance animation */
.listing__line--en { top: 36%; width: 406px; }
.listing__intro { max-width: 72%; margin: 24px 0 40px; font-size: var(--fs-body); line-height: 24px; color: var(--c-text-strong); }
.listing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 80px; }
@media (max-width: 991px) {
  .listing { padding-bottom: 100px; }
  .listing__line { display: none; }
  .listing h1 { font-size: 52px; line-height: 52px; }
  .eyebrow--lg { margin-bottom: 20px; }
  .listing__intro { margin: 20px 0; }
  .listing__grid { margin-top: 60px; }
}
@media (min-width: 768px) and (max-width: 991px) { .listing__grid { grid-template-rows: repeat(6, auto); } } /* live: the grid template has more rows than the 9 cards need; the empty rows add one row gap at the end */
@media (max-width: 767px) {
  .listing { padding-bottom: 70px; }
  .listing__grid { grid-template-rows: repeat(12, auto); } /* live: 12 rows for 9 cards (3 empty rows, 3 x 20px gap) */
  .eyebrow--lg { margin-bottom: 15px; }
  .listing__intro { margin: 15px 0 20px; }
  .listing__grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
}
@media (max-width: 479px) {
  .listing { padding-bottom: 50px; }
  .listing h1 { font-size: 34px; line-height: 34px; letter-spacing: 0; }
  .eyebrow--lg { margin-bottom: 10px; }
  .listing__intro { max-width: none; margin: 10px 0 15px; font-size: 14px; line-height: 21px; }
  .listing__grid { margin-top: 30px; }
}

/* ---------- testimonials ---------- */
.testimonials { padding: 60px 10px 40px; background: var(--c-white); overflow: hidden; }
.testimonials .eyebrow { margin-bottom: 24px; font-size: var(--fs-btn); font-weight: 500; letter-spacing: 1px; line-height: 16.8px; }
.testimonials h2 { max-width: 570px; margin-bottom: 15px; font-size: var(--fs-h-section); line-height: 1.2; color: var(--c-indigo); }
.marquee { position: relative; padding: 63px 15px 80px; overflow: hidden; display: flex; flex-direction: column; gap: 30px; }
.marquee__row { overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marquee-left 30s linear infinite; }
.marquee__row--right .marquee__track { animation-name: marquee-right; }
.marquee__set { display: flex; flex: none; }
.marquee[data-paused] .marquee__track { animation-play-state: paused; }
.marquee__row:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
/* from 1920 px the original fades the rows out at both edges (two overlays, each 20 % wide, white -> transparent); not on smaller screens */
@media (min-width: 1920px) {
  .marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: 20%; pointer-events: none; }
  .marquee::before { left: 0; background-image: linear-gradient(90deg, var(--c-white), #1670f800); }
  .marquee::after { right: 0; background-image: linear-gradient(270deg, var(--c-white), #1670f800); }
}
@keyframes marquee-left { to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.quote {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: 302px;
  margin: 0 15px;
  padding: 32px 40px;
  background: var(--c-mint-tint);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-quote);
}
.quote__body { flex: 0 0 417px; display: flex; flex-direction: column; align-items: flex-start; }
.quote blockquote { max-width: 360px; margin: 20px 0 10px; font-size: var(--fs-small); line-height: 29px; }
.quote figcaption { display: flex; flex-direction: column; }
.quote figcaption strong { font-size: 18px; font-weight: 600; line-height: 32px; letter-spacing: -0.2px; text-transform: capitalize; color: var(--c-indigo); }
.quote figcaption span { font-size: var(--fs-label); font-weight: 600; line-height: 29px; color: var(--c-ink); }
.quote__photo { flex: none; width: 150px; height: 190px; overflow: hidden; border-radius: var(--r-lg); }
.quote__photo--wide { width: 197px; }
.quote__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; }
/* pause button (WCAG 2.2.2): visually hidden like the client-logo one, shown while it has keyboard focus */
.marquee__pause:focus-visible { position: absolute; z-index: 6; right: 15px; bottom: 20px; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; padding: 6px 12px; font-size: var(--fs-label); color: var(--c-text-strong); background: var(--c-white); border: 1px solid var(--c-border); }
.marquee__pause:not([hidden]) { display: block; }
html:not(.js) .marquee__pause { display: none; }
@media (max-width: 991px) { .testimonials .eyebrow { margin-bottom: 20px; } }
@media (min-width: 480px) and (max-width: 767px) { .testimonials h2 { letter-spacing: -1px; } .testimonials .eyebrow { margin-bottom: 15px; } }
@media (min-width: 768px) and (max-width: 991px) { .testimonials h2 { letter-spacing: -2px; } }
@media (max-width: 767px) { .quote { padding: 32px 20px; } }
@media (max-width: 479px) {
  .marquee { padding: 63px 15px 80px 0; }
  .testimonials .eyebrow { margin-bottom: 10px; }
  .testimonials h2 { margin-bottom: 0; }
  .marquee { gap: 0; }
  .quote { flex-direction: column; align-items: flex-start; gap: 18px; width: 392px; min-height: 0; margin: 0 10px 40px; padding: 20px 15px; height: 435px; }
  .quote__body { flex: none; }
  .quote blockquote { font-size: 14px; line-height: 25px; }
  .quote__photo { flex: 0 1 auto; width: 150px; height: 190px; }
  .quote__photo--wide { width: 254px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none !important; transform: none; }
  .marquee { overflow-x: auto; }
  .marquee__set[aria-hidden="true"], .marquee__pause { display: none !important; }
}

/* ---------- FAQ ---------- */
.faq { padding: 40px 0 120px; background: var(--c-white); }
.faq__head { text-align: center; }
.faq__head h2 { max-width: 345px; margin: 0 auto 24px; font-size: 22px; line-height: 1.2; color: var(--c-indigo); }
.faq__head p { font-size: var(--fs-body); line-height: 24px; color: var(--c-text-strong); }
.faq__list { max-width: 770px; margin: 80px auto 0; }
.faq__item { position: relative; margin-bottom: 18.8px; /* live: inline-block items sit on a line box */ background: var(--c-white); overflow: hidden; }
.faq__item::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; background: var(--c-mint); opacity: 0; transition: opacity var(--t-reveal); }
.faq__item:has([aria-expanded="true"])::before { opacity: 1; }
.faq__item h3 { font-size: inherit; line-height: inherit; }
.faq__toggle { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 60px; padding: 20px 40px 20px 20px; text-align: left; font-size: 20px; font-weight: 500; line-height: 24px; color: var(--c-indigo); }
.faq__plus, .faq__minus { flex: none; width: 18px; height: 19px; }
.faq__minus { display: none; }
.faq__toggle[aria-expanded="true"] .faq__plus { display: none; }
.faq__toggle[aria-expanded="true"] .faq__minus { display: block; }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-reveal); }
.faq__panel-inner { overflow: hidden; min-height: 0; padding: 0 20px; }
.faq__toggle[aria-expanded="true"] + * { }
.faq__item:has([aria-expanded="true"]) .faq__panel { grid-template-rows: 1fr; }
.faq__item:has([aria-expanded="true"]) .faq__panel-inner { padding: 16px 20px; border: 1px solid #dcdcdc; }
.faq__panel-inner p { font-size: var(--fs-body); line-height: 24px; color: var(--c-text-strong); }
.faq__panel-inner p + p { margin-top: 24px; }
html:not(.js) .faq__panel { grid-template-rows: 1fr; }
html:not(.js) .faq__panel-inner { padding: 16px 20px; }
html:not(.js) .faq__plus, html:not(.js) .faq__minus { display: none; }
@media (max-width: 991px) {
  .faq { padding-bottom: 100px; }
  .faq__list { margin-top: 60px; }
  .faq__head h2 { margin-bottom: 20px; font-size: 38px; letter-spacing: -2px; }
  .faq__toggle { padding: 20px 0 20px 20px; font-size: 20px; line-height: 24px; color: var(--c-text-strong); }
}
@media (max-width: 767px) {
  .faq { padding-bottom: 70px; }
  .faq__list { margin-top: 40px; }
  .faq__head h2 { margin-bottom: 15px; font-size: 32px; letter-spacing: -1px; }
  .faq__toggle { padding-left: 10px; font-size: 18px; line-height: 21.6px; }
}
@media (max-width: 479px) {
  .faq { padding-bottom: 50px; }
  .faq__head h2 { font-size: 26px; margin-bottom: 10px; letter-spacing: normal; }
  .faq__head p { font-size: 14px; line-height: 21px; }
  .faq__list { margin-top: 30px; }
  .faq__toggle { padding: 20px 0 20px 10px; font-size: var(--fs-body); line-height: 19.2px; }
  .faq__panel-inner p { font-size: 14px; line-height: 21px; }
}

/* ---------- contact ---------- */
.contact { padding: 80px 10px; background: var(--grad-contact); color: var(--c-bg); }
.contact__grid { display: grid; grid-template-columns: 1fr 0.8fr; align-items: center; gap: 16px; }
.contact__eyebrow { margin-bottom: 24px; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; line-height: 16.8px; }
.contact__title-wrap { position: relative; margin-bottom: 24px; }
.contact h2 { position: relative; z-index: 1; font-size: var(--fs-h-contact); line-height: 1; letter-spacing: -2px; color: var(--c-bg); }
.contact__line { position: absolute; left: -35px; top: 0; width: 100%; max-width: 702px; height: auto; }
.contact__text { margin-bottom: 100px; font-size: var(--fs-body); line-height: 24px; }
.contact__card { padding: 65px 40px 80px; background: var(--c-white); box-shadow: 0 10px 80px rgba(219, 223, 255, 0.8); }
.contact__card h2 { margin-bottom: 40px; font-size: 2rem; font-weight: 500; line-height: 36px; letter-spacing: 0; text-align: center; color: var(--c-indigo); }
.form { display: block; }
.form input, .form textarea {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  height: 56px;
  padding: 27px 12px 27px 25px;
  font-size: var(--fs-body);
  line-height: 26px;
  color: var(--c-black);
  background: var(--c-mint-field);
  border: 1px solid var(--c-field-border);
  border-radius: var(--r-sm);
}
.form textarea { height: 134px; padding-top: 20px; padding-bottom: 60px; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: var(--c-placeholder); opacity: 1; }
.form__error, .form__status { margin: -12px 0 16px; font-size: var(--fs-label); line-height: 1.4; font-weight: 500; color: var(--c-err-text); } /* only visible in the error/notice states */
.form__status { margin: 0 0 16px; }
.form__alert { margin: 0 0 16px; font-size: var(--fs-label); line-height: 1.4; font-weight: 500; color: var(--c-err-text); }
.form__status:not([hidden]) { color: var(--c-ok); } /* api mode: "sending" / "sent" notices (the not-sent notice of the deferred mode stays red below) */
.form[data-backend="deferred"] .form__status { color: var(--c-err-text); }
.form__verify { margin: 0 0 16px; font-size: var(--fs-label); line-height: 1.4; color: var(--c-text); }
.form__turnstile { margin: 0 0 16px; min-height: 65px; }
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* honeypot: off-screen, not display:none (bots fill it) */
.form__privacy { margin: 16px 0 0; font-size: var(--fs-label); line-height: 1.4; color: var(--c-text); }
.form__privacy a { color: var(--c-indigo); text-decoration: underline; }
.form [aria-invalid="true"] { border-color: var(--c-err); }
.form__submit { padding: 9px 15px; font-size: var(--fs-btn); line-height: 16.8px; }
.form__submit:disabled { opacity: 0.55; cursor: not-allowed; } /* api mode: until the Turnstile check has produced a token (and while sending) */
.form[data-backend="deferred"] .form__submit:disabled { opacity: 1; cursor: default; } /* deferred mode: only before the script runs */
@media (max-width: 991px) {
  .contact__grid { grid-template-columns: 1fr; gap: 60px 16px; }
  .contact__eyebrow { margin-bottom: 20px; }
  .contact__title-wrap { max-width: 487px; }
  .contact__text { margin-bottom: 40px; }
  .contact__card { padding: 45px 60px 60px; }
}
@media (max-width: 767px) {
  .contact__card { padding: 30px 30px 45px; }
  .contact__eyebrow { margin-bottom: 15px; }
  .contact__title-wrap { max-width: 412px; }
  .contact__text { margin-bottom: 30px; }
}
@media (max-width: 479px) {
  .contact h2 { font-size: 46px; letter-spacing: 0; }
  .contact__eyebrow { margin-bottom: 10px; }
  .contact__title-wrap { max-width: 282px; }
  .contact__text { margin-bottom: 20px; font-size: 14px; line-height: 21px; }
  .contact__card { padding: 30px 30px 45px; }
  .form input { padding-left: 15px; }
}

/* ---------- footer ---------- */
.site-footer { padding: 40px 0; background: var(--c-mint-field); }
.site-footer__company { padding: 0 0 20px 20px; }
.site-footer__company h2 { margin: 10px 0; font-size: var(--fs-btn); font-weight: 700; line-height: 24px; color: var(--c-mint-text); }
.site-footer__legal { margin-top: 8px; } /* only when the privacy notice is approved and published */
.site-footer__legal a { text-decoration: underline; }
.site-footer__company p { font-size: var(--fs-small); font-weight: 500; line-height: 1.5; color: var(--c-text-strong); }
.site-footer__bar { display: flex; align-items: center; justify-content: center; gap: 24px; }
.site-footer__logo { min-width: 0; } /* live: the logo link shrinks when the 85% wide right part needs the room (162 px at 992) */
.site-footer__logo img { width: 170px; max-width: 100%; height: auto; }
.site-footer__end { display: flex; flex: 0 1 auto; width: 85%; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; }
.site-footer__copy { font-size: var(--fs-small); font-weight: 500; line-height: 1.5; color: var(--c-text-strong); }
.site-footer__brand { color: var(--c-mint-text); }
.site-footer__social img { width: 50px; height: auto; }
@media (max-width: 991px) {
  .site-footer__bar { flex-direction: column; gap: 25px; }
  .site-footer__logo img { width: 200px; }
  .site-footer__end { width: 100%; flex: none; justify-content: center; }
}
@media (max-width: 479px) { .site-footer__logo img { width: 150px; } }
@media (min-width: 992px) { html[lang="en"] .site-footer__end { margin-left: 24px; } } /* live EN: a hidden second logo link is still a flex item, i.e. one more 24px gap */

/* ---------- 404 ---------- */
.notfound { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background-image: radial-gradient(circle at 50% 100%, rgb(25 195 168 / 0.3), #fff); }
.notfound__container { box-sizing: border-box; width: 100%; max-width: 492px; padding: 0 20px; }
@media (min-width: 992px) { .notfound__container { max-width: 472px; padding: 0 10px; } }
.notfound__content { display: flex; flex-direction: column; align-items: center; }
.notfound__logo { display: block; width: 200px; max-width: 100%; height: 56.3px; margin-bottom: 80px; }
.notfound__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.notfound__art { display: block; width: 60%; max-width: 100%; height: auto; box-shadow: rgb(89 70 119 / 0.01) 727px 727px 250px 0 inset, rgb(89 70 119 / 0.04) 466px 466px 250px 0 inset, rgb(89 70 119 / 0.15) 262px 265px 222px 0 inset, rgb(89 70 119 / 0.26) 116px 116px 165px 0 inset, rgb(89 70 119 / 0.29) 29px 29px 51px 0; } /* same stacked shadow as live */
.notfound h1 { margin: 30px 0; font-size: 2.75rem; line-height: 1.2; font-weight: 500; letter-spacing: 0; color: var(--c-text-strong); }
.notfound h1 span { display: block; color: var(--c-indigo); }
.notfound p { margin: 0 0 30px; font-size: var(--fs-body); line-height: 1.5; font-weight: 500; color: var(--c-text-strong); }
@media (max-width: 991px) { .notfound__logo { margin-bottom: 60px; } .notfound h1 { margin: 20px 0; font-size: 2.3125rem; } .notfound p { margin-bottom: 20px; } }
@media (max-width: 767px) { .notfound__logo { margin-bottom: 40px; } .notfound h1 { margin: 15px 0; font-size: 2rem; } .notfound p { margin-bottom: 15px; } }
@media (max-width: 479px) { .notfound__container { max-width: 472px; padding: 0 10px; } .notfound__logo { width: 150px; height: 42.2px; margin-bottom: 30px; } .notfound__art { width: 80%; } .notfound h1 { font-size: 1.75rem; } .notfound p { font-size: 0.875rem; line-height: 1.5; } }

/* Home page (CS: /, EN: /en/home); the section headings and the solutions section/cards are shared with the solutions overview. Values measured on the live page (measure/, per-width probes); breakpoints ≤991 / ≤767 / ≤479 as everywhere.
   The original body text is 14px/1.2 with explicit sizes per element, so every text element here sets its own size and line height. */

/* ---------- section headings shared by the home sections ---------- */
.eyebrow-lg, .eyebrow-sm { margin: 0 0 24px; color: var(--c-text-strong); font-weight: 500; letter-spacing: 1px; text-transform: uppercase; line-height: 16.8px; }
.eyebrow-lg { font-size: 18px; }
.eyebrow-sm { font-size: 12px; font-weight: 600; }
.sec-title { margin: 0 0 15px; color: var(--c-indigo); font-size: 36px; line-height: 120%; letter-spacing: 0; font-weight: 400; }
.sec-title--about { max-width: 500px; margin-bottom: 40px; line-height: 110%; }
.sec-title--solutions { max-width: 500px; font-size: 37px; }
.sec-title--services { max-width: 550px; }
.sec-title--cases { max-width: 430px; margin-inline: auto; font-size: 32px; }
@media (max-width: 991px) {
  .eyebrow-lg, .eyebrow-sm { margin-bottom: 20px; }
  .sec-title { letter-spacing: -2px; }
  .sec-title--cases { max-width: 400px; }
}
@media (max-width: 767px) {
  .eyebrow-lg, .eyebrow-sm { margin-bottom: 15px; }
  .sec-title { letter-spacing: -1px; }
  .sec-title--about { max-width: 290px; }
  .sec-title--cases { max-width: 350px; }
}
@media (max-width: 479px) {
  .eyebrow-lg, .eyebrow-sm { margin-bottom: 10px; }
  .eyebrow-sm { font-size: 10px; }
  .sec-title { letter-spacing: 0; }
  .sec-title--about { max-width: 100%; }
}

/* ---------- hero ---------- */
.hero { padding: 150px 0 80px; background-image: radial-gradient(circle farthest-corner at 50% 100%, rgb(25 195 168 / 0.3), #fff); overflow-x: clip; } /* overflow-x: clip = fix T1 (the rotated hero pictures and chips stuck out of the page) */
.hero__text { max-width: 665px; margin-inline: auto; text-align: center; }
.hero__eyebrow { margin: 0 0 24px; font-size: 12px; font-weight: 600; line-height: 16.8px; letter-spacing: 1px; text-transform: uppercase; background-image: linear-gradient(80deg, var(--c-mint-text), #5d58c0 55%, darkviolet); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero__title { position: relative; margin: 30px 0; }
.hero h1 { position: relative; z-index: 1; color: var(--c-indigo); font-size: 70px; line-height: 100%; letter-spacing: -2px; }
.hero__line { position: absolute; inset: auto 0 -8% 50%; width: 94%; transform: translate(-50%); }
.hero__lead { max-width: 400px; margin: 0 auto; color: var(--c-text-strong); font-size: 16px; line-height: 150%; }
.hero__actions { display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 30px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; color: var(--c-text-strong); font-size: 18px; font-weight: 500; line-height: 120%; }
.text-link img { width: 15px; height: 13px; filter: invert(50%) brightness(50%); }
.hero__grid { display: grid; grid-template-columns: 0.75fr 0.75fr 1fr; gap: 50px; margin-top: 100px; }
.hero__col { position: relative; font-size: 14px; line-height: 1.2; }
.hero__board { display: inline-block; width: 100%; height: 100%; vertical-align: middle; }
.hero__board--1 { transform: rotate(-3deg); box-shadow: 256px 230px 96px #9637a900, 164px 148px 88px #9637a903; }
.hero__board--2 { transform: rotate(5deg); box-shadow: 320px -39px 90px #c588cd00, 225px -25px 83px #c588cd08; }
.hero__board--3 { transform: perspective(100000px) rotate(-5deg); box-shadow: 184px 165px 69px #bc77ca00, 118px 106px 63px #bc77ca05, 66px 59px 53px #bc77ca14, 29px 26px 40px #bc77ca21, 7px 7px 22px #bc77ca26; }
.hero__chips { position: absolute; inset: auto auto -5% 3%; }
.hero__chip-row { display: flex; justify-content: center; align-items: center; gap: 30px; }
.hero__chip-row--bottom { gap: 50px; }
.hero__chip { display: block; height: auto; will-change: transform; }
.hero__chip--1, .hero__chip--2 { transform: rotate(20deg); }
.hero__chip--3 { transform: rotate(-13deg); }
.hero__chip--5 { transform: rotate(-40deg); }
.hero__chip--4 { transform: rotate(30deg); }
.hero__chip--6 { transform: rotate(-20deg); }
/* Desktop only: the chips are scattered around the headline at the top of the page and fly into their row while scrolling
   (live: scroll-linked animation, linear; --hp = progress 0..1 set by 40-hero.js; without script or with reduced motion: settled). */
@media (min-width: 992px) {
  .hero__chip { --k: calc(1 - var(--hp, 1)); transform: translate(calc(var(--x) * var(--k)), calc(var(--y) * var(--k))) rotate(calc(var(--r) * var(--k) + var(--end, 0deg) * (1 - var(--k)))); }
  .hero__chip--1 { --x: -34vw; --y: -65vh; --r: -51deg; --end: 28deg; }
  .hero__chip--5 { --x: -23vw; --y: -75vh; --r: 60deg; }
  .hero__chip--3 { --x: 21vw; --y: -53vh; --r: 42deg; }
  .hero__chip--2 { --x: 53vw; --y: -86vh; --r: -41deg; }
  .hero__chip--4 { --x: -27vw; --y: -62vh; --r: -62deg; }
  .hero__chip--6 { --x: 21vw; --y: -92vh; --r: 50deg; }
}
@media (max-width: 991px) {
  .hero { padding-top: 120px; }
  .hero__eyebrow { margin-bottom: 20px; }
  .hero h1 { font-size: 56px; }
  .hero__title { max-width: 515px; margin: 20px auto; }
  .hero__grid { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 60px; }
  .hero__board--1, .hero__board--2 { transform: none; }
  .hero__board--3 { transform: perspective(100000px); }
  .hero__chips { inset: auto 0 -8%; }
}
@media (max-width: 767px) {
  .hero__eyebrow { margin-bottom: 15px; }
  .hero h1 { font-size: 48px; }
  .hero__title { max-width: 470px; }
  .hero__actions { margin-top: 20px; }
  .hero__grid { margin-top: 45px; }
  .hero__chips { bottom: -14%; }
  .hero__chip-row--top { justify-content: space-between; }
  .hero__chip-row--bottom { gap: 24px; margin-top: 10px; }
  .hero__chip--2, .hero__chip--5, .hero__chip--4, .hero__chip--6 { width: 20%; }
}
@media (max-width: 479px) {
  .hero__eyebrow { margin-bottom: 10px; font-size: 10px; }
  .hero__text { max-width: 100%; }
  .hero h1 { font-size: 30px; letter-spacing: 0; }
  .hero__title { max-width: 315px; }
  .hero__lead { font-size: 14px; }
  .hero__actions { flex-wrap: wrap; gap: 25px; margin-top: 15px; }
  .text-link { font-size: 16px; }
  .hero__grid { grid-template-columns: 0.84fr 1fr; gap: 10px; margin-top: 25px; }
  .hero__col { text-align: center; }
  .hero__col--wide { order: -9999; grid-area: span 1 / span 2; }
  .hero__col:not(.hero__col--wide) .hero__board { display: none; }
  .hero__chips { bottom: -9%; }
  .hero__chip-row--top { max-width: 275px; margin-inline: auto; }
  .hero__chip-row--bottom { gap: 36px; max-width: 277px; margin: 25px auto 0; }
  .hero__chip--5 { width: 22%; }
  .hero__chip--4 { width: 15%; }
  .hero__chip--6 { width: 18%; }
}

/* intro on load: staggered rise + de-blur (text) and fade (pictures); only when JS runs, so nothing stays hidden without it */
@keyframes hero-in { from { opacity: 0; transform: translateY(20px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
.js .hero-in { animation: hero-in 500ms ease-out var(--d, 0ms) backwards; }
.js .hero-fade { animation: hero-fade 800ms ease-out var(--d, 0ms) backwards; }

/* ---------- client logos ---------- */
.clients { padding: 80px 0; }
.clients__viewport { position: relative; overflow: hidden; }
.clients__viewport::before, .clients__viewport::after { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 5; width: 50px; background-image: linear-gradient(80deg, var(--c-bg), transparent); pointer-events: none; }
.clients__viewport::after { inset: 0 0 0 auto; background-image: linear-gradient(80deg, transparent, var(--c-bg)); }
.clients__track { display: flex; width: max-content; animation: clients-scroll var(--clients-duration, 42s) linear infinite; }
.clients__list { display: flex; flex: none; align-items: center; gap: 50px; padding-right: 50px; }
.clients__list img { display: block; max-width: 100%; height: auto; }
@keyframes clients-scroll { to { transform: translateX(-50%); } }
.clients[data-paused] .clients__track, .clients__viewport:hover .clients__track, .clients__viewport:focus-within .clients__track { animation-play-state: paused; }
.clients__pause:focus-visible { position: absolute; z-index: 6; left: 60px; top: 0; width: auto; height: auto; margin: 0; clip: auto; padding: 6px 12px; background: var(--c-white); border: 1px solid var(--c-border); }
@media (max-width: 991px) { .clients { padding: 60px 0; } .clients__list { gap: 40px; padding-right: 40px; } }
@media (max-width: 767px) { .clients { padding: 50px 0; } .clients__list { gap: 30px; padding-right: 30px; } .clients__list img { width: auto; height: 30px; } }
@media (max-width: 479px) { .clients { padding: 40px 0; } .clients__list { gap: 20px; padding-right: 20px; } .clients__list img { width: auto; height: 25px; } }
@media (prefers-reduced-motion: reduce) {
  .clients__track { animation: none; transform: none; }
  .clients__viewport { overflow-x: auto; }
  .clients__list[aria-hidden="true"], .clients__pause { display: none !important; }
}

/* ---------- about ---------- */
.about { padding: 40px 0 120px; background: var(--c-white); }
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.about__text { height: 100%; }
.about__detail { height: 76%; }
.about__body { max-width: 450px; margin: 40px 0; color: var(--c-text-strong); font-size: 16px; line-height: 150%; }
.about__body p + p { margin-top: 1.5em; }
.about__photo { position: relative; align-self: start; font-size: 14px; line-height: 1.2; }
.about__photo::after { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 100%; background-image: linear-gradient(0deg, var(--c-indigo), rgb(45 0 119 / 0.64) 54%, transparent); }
.about__photo img { display: inline-block; width: 100%; height: auto; vertical-align: middle; }
@media (max-width: 991px) {
  .about { padding-bottom: 100px; }
  .about__grid { grid-template-columns: 1fr; gap: 30px; }
  .about__text { display: flex; justify-content: space-between; align-items: flex-end; height: auto; }
  .about__detail { height: auto; }
  .about__body { margin: 20px 0; }
}
@media (max-width: 767px) { .about { padding-bottom: 70px; } .about__text { flex-direction: column; align-items: flex-start; } .about__body { margin: 15px 0; } }
@media (max-width: 479px) { .about { padding-bottom: 50px; } .about__grid { gap: 20px; } .about__body { max-width: 100%; margin: 10px 0; font-size: 14px; } }

/* ---------- solutions ---------- */
.solutions { padding: 130px 10px 80px; }
.solutions__head { display: flex; align-items: center; margin-bottom: 60px; }
.solutions__head::after { content: ""; } /* empty second flex item of the original: it wraps below the text on narrow screens and adds one row gap */
.solutions__titles { flex: 0 1 auto; }
.solutions__intro { max-width: 475px; padding-top: 20px; color: var(--c-text-strong); font-size: 16px; line-height: 150%; }
.solutions__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.solution-card { overflow: hidden; background: var(--c-white); box-shadow: 0 10px 80px 0 rgb(25 195 168 / 0.15); }
.solution-card__photo { overflow: hidden; text-align: center; }
.solution-card__photo img { width: 100%; height: 313px; object-fit: cover; }
.solution-card__photo--left img { object-position: 20% 50%; }
.solution-card__body { padding: 0 26px 38px; color: var(--c-text); font-size: 14px; line-height: 16.8px; }
.solution-card__head { position: relative; display: flex; overflow: hidden; margin-top: -39px; background: #101929; }
.solution-card__icon { display: flex; flex: none; align-self: stretch; align-items: center; justify-content: center; width: 23%; padding: 15px 0; background: var(--c-mint); }
.solution-card__icon img { height: 50px; width: auto; }
.solution-card__title { display: flex; align-items: center; width: 77%; margin: 0; padding: 15px 23px; border: 1px solid var(--c-mint); background: var(--c-white); color: var(--c-text-strong); font-size: 18px; font-weight: 400; line-height: 31px; text-transform: capitalize; }
.solution-card__text { height: 140px; margin: 20px 0 10px; padding: 40px 0 24px; }
.solutions--page .solution-card__text { margin: 0 0 20px; } /* the overview's card text sits directly under the title row; the home page's cards have 10 px more above the text */
.solutions__more { display: flex; justify-content: center; align-items: center; padding-top: 44px; }
@media (max-width: 991px) {
  .solutions__head { flex-wrap: wrap; gap: 20px; margin-bottom: 40px; }
  .solutions__grid { grid-template-columns: 1fr 1fr; }
  .solution-card { margin: 7px 0; }
}
@media (max-width: 767px) { .solutions__head { margin-bottom: 20px; } .solutions__grid { grid-template-columns: 1fr; } }
@media (max-width: 479px) { .solutions__head { margin-bottom: 10px; } .solutions__intro { font-size: 14px; } .solution-card__icon { flex: 1; } .solution-card__title { padding-block: 10px; } }

/* ---------- services (tabs) ---------- */
.services { padding: 120px 10px; background-image: radial-gradient(circle farthest-corner at 50% 50%, rgb(25 195 168 / 0.3), #fff); }
.services__head { display: flex; justify-content: space-between; align-items: flex-end; }
.services .sec-title--services { margin-inline: auto; }
.services__titles { flex: 0 1 auto; }
.services__panel { display: flex; justify-content: center; align-items: stretch; max-width: 1280px; margin: 80px auto 0; padding: 60px 40px; background: #fafafa; box-shadow: 0 0 20px -4px rgb(0 0 0 / 0.25); opacity: 0.9; }
.tabs { display: flex; justify-content: flex-start; align-items: stretch; width: 101%; }
.tabs__list { display: flex; flex-direction: column; flex: 0 auto; width: 33.3%; }
.tabs__tab { display: flex; align-items: center; flex: 0 auto; height: 80px; padding: 12px 30px 9px; border-bottom: 1px solid var(--c-mint); color: var(--c-text-strong); font-size: 20px; font-weight: 500; line-height: 24px; text-align: left; }
.tabs__tab span { margin: 20px 0 10px; }
.tabs__tab:hover { background: #fff; }
.tabs__tab[aria-selected="true"] { background: var(--c-mint); color: var(--c-white); }
.tabs__panels { width: 66.6%; margin-left: 40px; }
.tabs__panel { padding: 20px 15px 15px; }
.tabs__panel[hidden] { display: none; }
.tabs__head { display: flex; justify-content: flex-start; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.tabs__head img { flex: 0 auto; width: 75px; height: auto; opacity: 0.6; filter: contrast(200%); }
.tabs__head h3 { position: relative; margin: 0 0 15px; color: var(--c-mint-text); font-size: 27px; font-weight: 500; line-height: 150%; letter-spacing: 1px; }
.tabs__lead { color: var(--c-text-strong); font-size: 16px; font-weight: 500; line-height: 150%; }
.tabs__body { padding-top: 20px; color: var(--c-text-strong); font-size: 16px; line-height: 150%; }
.tabs__lead p + p, .tabs__body p + p { margin-top: 1.5em; }
.tabs__body p:last-child { margin-bottom: 10px; }
.js .tabs__panel:not([hidden]) { animation: hero-fade 300ms ease-out; }
@media (max-width: 991px) { .services { padding-block: 100px; } .services__head { flex-wrap: wrap; gap: 20px; } }
@media (max-width: 767px) {
  .services { padding-block: 70px; }
  .services__panel { padding-inline: 20px; }
  .tabs { flex-direction: column; align-items: stretch; }
  .tabs__list { width: auto; }
  .tabs__tab { flex-direction: column; align-items: stretch; }
  .tabs__panels { width: 100%; margin-left: 0; }
}
@media (max-width: 479px) {
  .services { padding-block: 50px; }
  .services__panel { padding: 0 0 60px; }
  .tabs__tab { justify-content: center; font-size: 19px; }
  .tabs__tab span { margin-top: 0; }
  .tabs__head { flex-direction: column; align-items: center; }
  .tabs__head h3 { font-size: 23px; line-height: 136%; text-align: center; }
  .tabs__body { font-size: 15px; text-align: left; }
}

/* ---------- case slider ---------- */
.cases-home { padding: 120px 0 60px; background-image: linear-gradient(0deg, var(--c-bg), transparent); overflow: hidden; }
.cases-home__head { text-align: center; }
.cases-home__intro { max-width: 400px; margin: 24px auto 0; color: var(--c-text-strong); font-size: 16px; line-height: 150%; }
.cases-home__cta { padding-top: 40px; }
.checks { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 24px; margin: 40px 0; }
.checks li { display: flex; align-items: center; gap: 10px; color: var(--c-text-strong); font-size: 16px; font-weight: 500; line-height: 150%; }
.checks img { width: 19px; height: 18px; }
.slider {
  --pad: 15px; --pct: 0.65; --gap: 40px;
  --inner: min(100vw - 2 * var(--gutter), 1280px);
  --lead: calc((100vw - var(--inner)) / 2 + var(--pad));
  --slidew: calc(var(--pct) * (var(--inner) - 2 * var(--pad)));
  position: relative; padding: 40px 0 176px; color: var(--c-text); font-size: 17px; line-height: 29px;
}
.slider__track { display: flex; align-items: flex-start; width: 100vw; margin-left: calc(50% - 50vw); padding-left: var(--lead); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--lead); scrollbar-width: none; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__track::after { content: ""; flex: none; width: max(0px, calc(100vw - var(--lead) - var(--slidew))); }
.slider__slide { flex: none; width: var(--slidew); padding-right: var(--gap); scroll-snap-align: start; }
.slider__slide .case-card { height: auto; }
.slider__nav { position: absolute; left: var(--pad); right: var(--pad); bottom: 80px; height: 1.7rem; pointer-events: none; }
.slider__nav > * { pointer-events: auto; }
.slider__arrow { position: absolute; z-index: 3; right: var(--pad); bottom: 80px; display: none; width: 48px; height: 48px; padding: 5.84px 0 0; align-items: flex-start; justify-content: center; }
.slider__arrow--prev { right: calc(var(--pad) + 64px); }
.slider__arrow img { width: 32px; height: auto; }
.slider__arrow--prev img { transform: rotateY(180deg); }
.js .slider__arrow:not([hidden]) { display: flex; }
.slider__arrow:focus-visible { outline: 2px solid var(--c-mint); outline-offset: -2px; }
.slider__dots { display: flex; width: max-content; gap: 0.75em; height: 1.7rem; padding-top: 10px; filter: brightness(75%); font-size: 0.75rem; line-height: 1.3; }
.slider__dot { width: 1em; height: 1em; margin: 0 3px 0.5em; border-radius: 100%; background-color: rgb(255 255 255 / 0.4); transition: background-color 100ms; }
.slider__dot[aria-current="true"] { background-color: #fff; }
@media (min-width: 1440px) { .slider { --pct: 0.64; } }
@media (max-width: 991px) {
  .cases-home { padding-top: 100px; }
  .cases-home__intro { margin-top: 20px; }
  .cases-home__cta .btn { display: none; }
  .checks { flex-wrap: wrap; margin: 30px 0; }
}
@media (max-width: 767px) { .cases-home { padding-top: 70px; } .cases-home__intro { margin-top: 15px; } .checks { row-gap: 15px; margin: 20px 0; } .slider { --pct: 1; --gap: 16px; } }
@media (max-width: 479px) { .cases-home { padding-top: 50px; } .cases-home__intro { margin-top: 10px; font-size: 14px; } .checks { margin: 15px 0; } .checks li { font-size: 14px; } .slider { --pad: 0px; } }
@media (prefers-reduced-motion: reduce) { .js .hero-in, .js .hero-fade, .js .tabs__panel { animation: none; } }

/* ---------- scroll reveal (30-reveal.js) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(20px); filter: blur(2px); transition: opacity 500ms ease-out, transform 500ms ease-out, filter 500ms ease-out; }
.js [data-reveal="fade"] { transform: none; filter: none; transition-duration: 1000ms; }
.js [data-reveal].is-revealed { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; } }

/* the same card component as on the listing, in the slider's own context (font-size 17px / line-height 29px inherited from the slider) */
.case-card.case-card--home { padding: 51px 34px; }
.case-card.case-card--home.case-card--white { padding: 51px; }
.case-card--home { font-weight: 400; }
.case-card--home .case-card__tags li { line-height: 29px; }
@media (max-width: 479px) { .case-card--home .case-card__tags .is-wide { grid-column: span 2; } }
.case-card--home .case-card__text { margin: 17px 0; }
.case-card--home .case-card__title { min-height: 60px; letter-spacing: 0; }
@media (max-width: 991px) { .case-card.case-card--home, .case-card.case-card--home.case-card--white { padding-inline: 17px; } }

/* Audience pages (measured on the live /sales-tymy, /strategicti-partneri, /zakladatele, /naborari, /lead-pipeline and their EN pairs).
   The title block and the grey body band are the case pages' shell (.case, .case__hero, .case__body in components.css).
   Rows are white cards: "wide" (picture left), "tall" (text first, square picture right), "plain" (picture + short text). Desktop 1440 → ≤1279 → ≤991 → ≤767 → ≤479.
   The pictures are static: on the original they also drift ±100px with a scroll-linked animation (open decision, see DECISIONS.md). */

.aud-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 40px; padding: 60px 0; background: var(--c-white); }
.aud-row--tall { padding-bottom: 0; }
.audience .case__body { display: flow-root; } /* live: the band includes the last row's bottom margin */
.aud-row__art { flex: 0 1 500px; min-width: 0; overflow: hidden; border-radius: var(--r-md); }
.aud-row--wide .aud-row__art { height: 300px; }
.aud-row--tall .aud-row__art { aspect-ratio: 1; }
.aud-row__art img { width: 100%; height: 100%; object-fit: fill; }
.aud-row--tall .aud-row__art img { object-fit: cover; }

.aud-row__text, .aud-plain__text { display: flex; flex-direction: column; align-items: flex-start; flex: 0 0 auto; min-width: 0; max-width: 600px; margin-top: -2px; padding: 0 20px; }
.aud-row--inset-left .aud-row__text { padding-left: 40px; }
.aud-row--inset-right .aud-row__text { padding: 0 40px 0 10px; }
.aud-row__text h2, .aud-plain__text h2 { max-width: 490px; margin: 0 0 20px; font-size: 2rem; font-weight: 500; line-height: 36px; color: var(--c-indigo); }
.aud-row--tall .aud-row__text h2, .aud-plain__text h2 { max-width: 450px; }
.aud-row__body { width: fit-content; max-width: 100%; margin: 16px 0 44px; font-size: 15px; font-weight: 500; line-height: 29px; color: var(--c-black); }

.aud-row--tall .aud-row__body { margin-top: 30px; } /* live: the text box of the "tall" rows starts 14px lower */

.aud-plain { margin-bottom: 40px; padding: 80px 15px; background: var(--c-white); }
.aud-plain__inner { display: flex; align-items: center; justify-content: space-between; }
.aud-plain__art { position: relative; flex: 1 1 0; min-width: 0; max-width: 630px; height: 445px; padding: 0 20px 0 80px; overflow: hidden; border-radius: var(--r-md); }
.aud-plain__art img { position: absolute; left: 0; top: 0; width: 477px; max-width: 100%; height: 446px; object-fit: contain; }
.aud-plain__text { flex: 1 1 0; max-width: 600px; padding: 0; margin-top: 0; }
.aud-plain--inset-right .aud-plain__text { padding-right: 30px; }
.aud-plain__text p { width: fit-content; max-width: 540px; margin: 15px 0 30px; font-size: 17px; line-height: 29px; color: var(--c-text-strong); }

@media (min-width: 1440px) {
  .aud-row__text { max-width: 650px; }
  .aud-row__body { max-width: 500px; }
  .aud-plain__inner { gap: 30px; }
  .aud-plain__text p { max-width: 520px; }
}

@media (min-width: 992px) and (max-width: 1279px) { .aud-row__art { align-self: flex-start; } } /* live: a text column taller than the picture is centred against it, the picture stays on top (as on the case pages) */
@media (max-width: 1279px) {
  .audience .case__body { max-width: 1140px; } /* live: the container is 1140 below 1280 */
  .aud-row__art { flex-basis: 440px; }
  .aud-row__text { max-width: 560px; }
  .aud-row--wide .aud-row__art img { object-fit: cover; }
}
@media (max-width: 991px) {
  .aud-row { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 70px; }
  .aud-row__art { flex: none; width: 100%; aspect-ratio: auto; }
  .aud-row--wide .aud-row__art { height: 340px; }
  .aud-row--tall .aud-row__art { height: 430px; }
  .aud-row--wide .aud-row__art img { object-fit: contain; }
  .aud-row--tall .aud-row__art img { object-fit: fill; }
  .aud-row__text { flex: none; max-width: none; margin-top: 20px; }
  .aud-row__text h2 { margin-bottom: 28px; }
  .aud-row--tall .aud-row__text h2, .aud-plain__text h2 { max-width: none; }
  .aud-plain { padding: 40px 15px 80px; }
  .aud-plain__inner { flex-direction: column; gap: 10px; }
  .aud-plain__art { flex: none; width: 100%; max-width: none; height: 350px; padding: 100px 50px 90px; }
  .aud-plain__art img { top: max(0px, calc((100% - 300px) / 2)); width: 100%; height: 300px; }
  .aud-plain__inner { align-items: center; }
  .aud-plain__text { flex: none; max-width: 100%; }
  .aud-plain__text h2 { margin-bottom: 28px; }
  .aud-plain__text p { max-width: none; margin: 5px 0 20px; }
}
@media (max-width: 767px) {
  .aud-row { margin-top: 62px; }
}
@media (max-width: 479px) {
  .aud-row__text, .aud-plain__text { text-align: center; } /* live: headings and texts are centred on phones */
  .aud-plain__text p { text-align: left; }
  .aud-row__text { padding-right: 15px; padding-left: 15px; }
  .aud-row--inset-left .aud-row__text { padding-left: 40px; }
  .aud-row--inset-right .aud-row__text { padding: 0 40px 0 10px; }
  .aud-plain { padding-top: 20px; }
  .aud-plain__art { display: flex; align-items: safe center; padding: 0; }
  .aud-plain__art img { position: static; flex: none; width: 100%; height: auto; object-fit: cover; } /* height follows the picture's own proportions (3:2 to 1:1 by page) */
  .aud-row__body { align-self: center; } /* live: the text box is a centred column on phones */
  .aud-plain__text { width: 100%; padding-top: 41px; }
}

/* Legal text pages (privacy notice). A new page: the live site has none, so no live measurements; built on the case shell and the existing tokens. */
.legal__intro, .legal__updated { max-width: 640px; margin: 12px auto 0; padding-inline: 15px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text-strong); }
.legal__updated { font-size: var(--fs-label); }
.legal__body { max-width: 760px; padding: 40px 15px 0; text-align: left; }
.legal__section { margin-bottom: 36px; }
.legal__section h2 { margin: 0 0 12px; font-size: var(--fs-h-card); line-height: var(--lh-tight); font-weight: 700; color: var(--c-indigo); }
.legal__section p, .legal__section li { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text-strong); }
.legal__section p { margin: 0 0 12px; }
.legal__section ul { margin: 0 0 12px; padding-left: 24px; list-style: disc; }
.legal__section li { margin-bottom: 6px; }
.legal__section a { color: var(--c-indigo); text-decoration: underline; }