/* ─── SITE LAYOUT ───────────────────────────────────────── */
    :root {
      --site-px: clamp(1.6rem, 5.4vw, 8rem);
    }

    @media (min-width: 1280px) {
      :root { --site-px: 8rem; }
    }

    .wrap { padding-inline: var(--site-px); }

    /* ─── PAGE BACKGROUND ───────────────────────────────────── */
    body {
      font-family: var(--font-sans);
      color: var(--color-black);
      background: var(--color-white);
      -webkit-font-smoothing: antialiased;
    }

    body.is-loading { overflow: hidden; }

    /* ─── PAGE LOADER ───────────────────────────────────────── */
    .page-loader {
      position: fixed;
      inset: 0;
      background: #0a0a0a;
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .page-loader.is-hidden {
      opacity: 0;
      pointer-events: none;
    }

    .loader-logo {
      width: clamp(560px, 56vw, 880px);
      height: auto;
      opacity: 0;
      animation: loaderLogoIn 800ms cubic-bezier(0.4, 0, 0.2, 1) 200ms forwards;
    }

    @keyframes loaderLogoIn {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ─── NAV ───────────────────────────────────────────────── */
    .nav {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: var(--z-sticky);
      height: 72px;
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: background 350ms ease, border-color 350ms ease;
    }

    .nav.nav--scrolled {
      background: var(--color-white);
      border-bottom: 1px solid var(--color-gray-200);
    }

    .nav-inner {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      height: 72px;
    }

    .nav-logo { line-height: 1; }

    .nav-logo-img { height: 22px; width: auto; display: block; }
    /* This template's hero has a white sticky title/meta bar behind the nav
       from the start (the video slides in over it later), so the dark logo
       must be the default here, not the scroll-triggered one. */
    .nav-logo-light { display: none; }
    .nav-logo-dark  { display: block; }

    .nav-links {
      display: flex; align-items: center;
      justify-content: center; gap: var(--space-10);
    }

    .nav-link {
      font-size: var(--text-base);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-wide);
      color: rgb(10 10 10 / 0.6);
      transition: color 150ms ease;
    }

    .nav-link:hover { color: var(--color-black); }
    .nav.nav--scrolled .nav-link { color: var(--color-gray-500); }
    .nav.nav--scrolled .nav-link:hover { color: var(--color-black); }

    .nav-cta-wrap { display: flex; justify-content: flex-end; }

    .nav-cta {
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-wider);
      text-transform: uppercase;
      padding: var(--space-2) var(--space-5);
      background: var(--color-black);
      color: var(--color-white);
      border-radius: var(--radius-full);
      transition: background 150ms ease;
    }

    .nav-cta:hover { background: var(--color-gray-800); }
    .nav.nav--scrolled .nav-cta { background: var(--color-black); color: var(--color-white); }

    /* ─── NAV MEGA MENU ─────────────────────────────────────── */
    .nav-item-mega {
      position: relative;
      display: flex;
      align-items: center;
      height: 72px;
    }

    .nav-link-mega {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      background: none;
      border: none;
      padding: 0;
      margin: 0;
      font: inherit;
      cursor: pointer;
    }

    @media (max-width: 1100px) {
    }

    /* ─── HERO ──────────────────────────────────────────────── */
    .cs-hero {
      position: relative;
      text-align: center;
    }

    .cs-hero-sticky {
      position: sticky;
      top: 72px;
      z-index: 1;
      background: var(--color-white);
      padding-top: calc(72px + var(--space-16));
      padding-bottom: var(--space-2);
    }

    .cs-hero-eyebrow {
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--color-gray-500);
      margin-bottom: var(--space-6);
      display: block;
    }

    .cs-hero-title {
      /* Az alsó határ 48px volt. A 375px-es sávban (324px tartalom) az ~7
         karaktert enged soronként, a reset.css `overflow-wrap: break-word`-je
         pedig a szó KÖZEPÉN töri el — elválasztójel nélkül, olvashatatlanul.

         A hyphens: auto önmagában nem elég: elválasztó-szótár nélküli
         böngészőben (és a headless Chrome ilyen) némán nem csinál semmit.
         Ezért a betűméretnek kell akkorának lennie, hogy a leghosszabb
         reális szó KIFÉRJEN: 30px-en ~20 karakter fér a sorba, ami a hosszú
         magyar összetett szavakat is elviszi. */
      font-size: clamp(var(--text-3xl), 8vw, var(--text-9xl));
      font-weight: var(--weight-black);
      letter-spacing: var(--tracking-tighter);
      line-height: 0.95;
      color: var(--color-black);

      /* Ami mégis hosszabb (összetett magyar szavak), az szótaghatáron
         törjön, látható elválasztójellel — nem a szó közepén. A böngésző
         ehhez a <html lang> értékét használja, ami mindkét nyelven be van
         állítva. */
      hyphens: auto;
      text-wrap: balance;
    }

    .cs-hero-img-wrap {
      position: relative;
      z-index: 2;
      padding-inline: var(--site-px);
      margin-top: var(--space-12);
    }

    .cs-hero-img {
      width: 100%;
      aspect-ratio: 16 / 7;
      object-fit: cover;
      display: block;
    }

    /* ─── INTRO BLOCK ───────────────────────────────────────── */
    .cs-intro {
      padding-top: var(--space-20);
      padding-bottom: var(--space-40);
      border-bottom: 1px solid var(--color-gray-300);
    }

    .cs-intro-grid {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 2rem;
      align-items: start;
    }

    .cs-intro-lead {
      font-size: clamp(var(--text-xl), 2.2vw, var(--text-3xl));
      font-weight: var(--weight-black);
      line-height: var(--leading-snug);
      letter-spacing: var(--tracking-tight);
    }

    .cs-live-link {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      margin-top: var(--space-8);
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-wide);
      color: var(--color-black);
      border: 1px solid var(--color-gray-400);
      border-radius: var(--radius-full);
      padding: var(--space-2) var(--space-5);
      transition: border-color 150ms ease, background 150ms ease;
    }

    .cs-live-link:hover {
      background: var(--color-black);
      color: var(--color-white);
      border-color: var(--color-black);
    }

    .cs-challenge-label {
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--color-gray-500);
      margin-bottom: var(--space-4);
      display: block;
    }

    .cs-challenge-text {
      font-size: var(--text-base);
      line-height: var(--leading-relaxed);
      color: var(--color-gray-700);
    }

    /* ─── WIDE IMAGE ────────────────────────────────────────── */
    .cs-wide-img-wrap {
      padding-inline: var(--site-px);
    }

    .cs-wide-img {
      width: 100%;
      aspect-ratio: 16 / 8;
      object-fit: cover;
      display: block;
    }

    .cs-wide-img--tall {
      aspect-ratio: 16 / 8;
    }

    /* ─── SZEKCIÓ-VIDEÓ ─────────────────────────────────────── */
    /* A képek `cover`-rel töltik ki a fix arányú dobozukat — videónál ez nem
       jó: egy 16:9 felvétel 16:7-es dobozban elveszítené a tetejét és az
       alját. A videó ezért a SAJÁT arányát kapja (inline `aspect-ratio` a
       fájlból) és `contain`-nel tölt, tehát garantáltan nincs vágás. Az arány
       előre le van foglalva, így a metaadat betöltése nem ugraszt elrendezést. */
    .cs-media-video {
      width: 100%;
      height: auto;
      object-fit: contain;
      display: block;
      background: var(--color-black);
    }

    /* ─── 3-IMAGE GRID ──────────────────────────────────────── */
    .cs-trio {
      padding-block: var(--space-16) 0;
    }

    .cs-trio-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
    }

    .cs-trio-img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      display: block;
    }

    /* ─── KIINDULÁSI HELYZET (előtte / utána) ───────────────── */
    .cs-before {
      padding-block: var(--space-20);
      border-bottom: 1px solid var(--color-gray-300);
    }

    .cs-before-head {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 4rem;
      align-items: start;
      margin-bottom: var(--space-16);
    }

    .cs-before-head-left {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      position: sticky;
      top: calc(72px + var(--space-8));
      align-self: start;
    }

    .cs-before-label {
      display: block;
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--color-gray-500);
    }

    .cs-before-heading {
      font-size: clamp(var(--text-2xl), 3.2vw, var(--text-5xl));
      font-weight: var(--weight-black);
      line-height: var(--leading-snug);
      letter-spacing: var(--tracking-tight);
    }

    .cs-before-body {
      font-size: clamp(var(--text-base), 1.3vw, var(--text-lg));
      line-height: var(--leading-relaxed);
      color: var(--color-gray-700);
    }

    .cs-before-body + .cs-before-body { margin-top: var(--space-5); }

    /* Előtte/utána pár. A régi felvétel szándékosan halványabb, a különbség
       a lényeg — nem a régi oldal kritikája. */
    .cs-ba { margin-bottom: var(--space-12); }

    .cs-ba-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
    }

    .cs-ba-item { position: relative; }

    .cs-ba-tag {
      position: absolute;
      top: var(--space-3);
      left: var(--space-3);
      z-index: 1;
      font-size: var(--text-2xs);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-full);
      background: var(--color-white);
      color: var(--color-black);
    }

    .cs-ba-item--after .cs-ba-tag {
      background: var(--color-black);
      color: var(--color-white);
    }

    .cs-ba-img {
      width: 100%;
      aspect-ratio: 8 / 5;
      object-fit: cover;
      object-position: center top;
      display: block;
      background: var(--color-gray-100);
    }

    .cs-ba-item--before .cs-ba-img {
      filter: saturate(0.75);
      opacity: 0.85;
    }

    .cs-ba-caption {
      margin-top: var(--space-4);
      font-size: var(--text-sm);
      line-height: var(--leading-relaxed);
      color: var(--color-gray-600);
      max-width: 72ch;
    }

    /* auto-fit: 1440px-en két oszlop, ultraszéles képernyőn több — a `.wrap`-nak
       nincs max-widthje, két 1500px-es oszlop olvashatatlanul szétesne. */
    .cs-facts {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
      gap: var(--space-8) 4rem;
      margin-top: var(--space-14);
      padding-top: var(--space-10);
      border-top: 1px solid var(--color-gray-300);
    }

    .cs-fact-label {
      font-size: var(--text-2xs);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--color-gray-500);
      margin-bottom: var(--space-2);
    }

    .cs-fact-values {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--space-3);
      font-size: var(--text-base);
      line-height: var(--leading-snug);
    }

    .cs-fact-old {
      color: var(--color-gray-500);
      text-decoration: line-through;
      text-decoration-thickness: 1px;
    }

    .cs-fact-arrow { color: var(--color-gray-400); }

    .cs-fact-new {
      font-weight: var(--weight-medium);
      color: var(--color-black);
    }

    /* ─── DESIGN ────────────────────────────────────────────── */
    .cs-design {
      padding-block: var(--space-20);
      border-top: 1px solid var(--color-gray-300);
      display: grid;
      grid-template-columns: 6fr 6fr;
      gap: 4rem;
      align-items: start;
    }

    /* A bal oszlop hosszabb (szöveg + idézet), ezért a jobb oldali paletta-blokk
       sticky: végigkíséri az olvasót, ahelyett hogy a szekció tetején maradna. */
    .cs-design-right {
      position: sticky;
      top: calc(72px + var(--space-8));
      align-self: start;
    }

    .cs-design-label {
      display: block;
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--color-gray-500);
      margin-bottom: var(--space-4);
    }

    .cs-design-heading {
      font-size: clamp(var(--text-2xl), 2.8vw, var(--text-4xl));
      font-weight: var(--weight-black);
      line-height: var(--leading-snug);
      letter-spacing: var(--tracking-tight);
      margin-bottom: var(--space-6);
    }

    .cs-design-body {
      font-size: var(--text-base);
      line-height: var(--leading-relaxed);
      color: var(--color-gray-700);
    }

    .cs-design-body + .cs-design-body { margin-top: var(--space-4); }

    .cs-design-quote {
      margin-top: var(--space-10);
      padding-left: var(--space-6);
      border-left: 2px solid var(--color-black);
    }

    .cs-design-quote p {
      font-size: var(--text-lg);
      font-weight: var(--weight-medium);
      line-height: var(--leading-snug);
      letter-spacing: var(--tracking-tight);
    }

    .cs-design-quote cite {
      display: flex;
      flex-direction: column;
      gap: var(--space-0-5);
      margin-top: var(--space-4);
      font-style: normal;
    }

    .cs-design-quote-name {
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-wide);
    }

    .cs-design-quote-subtitle {
      font-size: var(--text-sm);
      color: var(--color-gray-500);
    }

    .cs-swatches {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.25rem;
      list-style: none;
    }

    .cs-swatch {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto auto;
      column-gap: var(--space-4);
      align-items: center;
    }

    .cs-swatch-chip {
      grid-row: 1 / 4;
      width: 3.5rem;
      height: 3.5rem;
      border-radius: var(--radius-full);
      border: 1px solid var(--color-gray-300);
    }

    .cs-swatch-name {
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
    }

    .cs-swatch-hex {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      color: var(--color-gray-600);
      text-transform: uppercase;
    }

    .cs-swatch-role {
      font-size: var(--text-xs);
      color: var(--color-gray-500);
    }

    .cs-typespecs {
      list-style: none;
      margin-top: var(--space-10);
      padding-top: var(--space-8);
      border-top: 1px solid var(--color-gray-300);
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
    }

    .cs-typespec {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--space-2) var(--space-4);
    }

    .cs-typespec-family {
      font-family: var(--font-mono);
      font-size: var(--text-base);
      color: var(--color-black);
    }

    .cs-typespec-role {
      font-size: var(--text-sm);
      color: var(--color-gray-500);
    }

    .cs-design-figure {
      margin-top: var(--space-10);
      padding-top: var(--space-8);
      border-top: 1px solid var(--color-gray-300);
    }

    .cs-design-img {
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      display: block;
      background: var(--color-gray-100);
    }

    .cs-design-figcaption {
      margin-top: var(--space-3);
      font-size: var(--text-sm);
      line-height: var(--leading-relaxed);
      color: var(--color-gray-600);
    }

    /* ─── KÉPGALÉRIA ────────────────────────────────────────── */
    /* Ugyanaz a görgetési mechanika, mint a „Hogyan készült” körhintánál, de
       szöveg nélkül és egyszerre EGY teljes képpel: a `flex-basis` a teljes
       tartalomszélesség, a `scroll-snap` pedig kockára állítja a görgetést. */
    .cs-gallery {
      padding-block: var(--space-20);
      border-top: 1px solid var(--color-gray-300);
    }

    .cs-gallery-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-6);
      margin-bottom: var(--space-8);
    }

    .cs-gallery-label {
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--color-gray-500);
    }

    .cs-gallery-track {
      display: flex;
      gap: 1.25rem;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline-start: var(--site-px);
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      cursor: grab;
    }

    .cs-gallery-track::before {
      content: '';
      flex-shrink: 0;
      width: var(--site-px);
    }

    .cs-gallery-track::-webkit-scrollbar { display: none; }
    .cs-gallery-track.is-grabbing { cursor: grabbing; user-select: none; }

    .cs-gallery-item {
      flex: 0 0 calc(100vw - 2 * var(--site-px));
      scroll-snap-align: start;
    }

    .cs-gallery-img {
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      display: block;
      background: var(--color-gray-100);
    }

    /* ─── FEJLESZTŐI GONDOLAT ───────────────────────────────── */
    .cs-thinking {
      padding-block: var(--space-20);
      border-top: 1px solid var(--color-gray-300);
    }

    .cs-thinking-head { max-width: 60ch; margin-bottom: var(--space-16); }

    .cs-thinking-label {
      display: block;
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--color-gray-500);
      margin-bottom: var(--space-4);
    }

    .cs-thinking-heading {
      font-size: clamp(var(--text-2xl), 2.8vw, var(--text-4xl));
      font-weight: var(--weight-black);
      line-height: var(--leading-snug);
      letter-spacing: var(--tracking-tight);
    }

    .cs-thinking-intro {
      margin-top: var(--space-5);
      font-size: var(--text-base);
      line-height: var(--leading-relaxed);
      color: var(--color-gray-700);
    }

    .cs-thinking-list { list-style: none; }

    .cs-thinking-row {
      display: grid;
      grid-template-columns: auto 5fr 6fr;
      gap: 3rem;
      padding-block: var(--space-10);
      border-top: 1px solid var(--color-gray-300);
      align-items: start;
    }

    .cs-thinking-row:last-child { border-bottom: 1px solid var(--color-gray-300); }

    .cs-thinking-num {
      font-size: clamp(var(--text-2xl), 2.4vw, var(--text-4xl));
      font-weight: var(--weight-black);
      letter-spacing: var(--tracking-tighter);
      color: var(--color-num-muted);
      line-height: 1;
    }

    .cs-thinking-claim {
      font-size: clamp(var(--text-lg), 1.8vw, var(--text-3xl));
      font-weight: var(--weight-black);
      line-height: var(--leading-snug);
      letter-spacing: var(--tracking-tight);
    }

    .cs-thinking-body {
      font-size: clamp(var(--text-base), 1.3vw, var(--text-lg));
      line-height: var(--leading-relaxed);
      color: var(--color-gray-700);
    }

    /* Kép a sorban — csak ott, ahol van mit mutatni. Negyedik hasáb, a
       szövegtől jobbra; a képarányt a fájl adja, nincs vágás. */
    .cs-thinking-row--media { grid-template-columns: auto 4fr 5fr 4fr; }

    .cs-thinking-img {
      width: 100%;
      height: auto;
      display: block;
      background: var(--color-gray-100);
    }

    /* 1100px alatt négy hasáb már nem fér el. A kép a szöveg alá kerül, de csak
       az állítás és a kifejtés szélességében — a számoszlop alá nem csúszik be.
       Ennek a szabálynak az alapszabály UTÁN kell állnia: a fájl elején lévő
       töréspont-blokk azonos specificitással veszítene ellene. */
    @media (max-width: 1100px) {
      .cs-thinking-row--media { grid-template-columns: auto 5fr 6fr; }

      .cs-thinking-row--media .cs-thinking-img {
        grid-column: 2 / -1;
        margin-top: var(--space-2);
        max-width: 620px;
      }
    }

    /* „Mi alapján" — a döntés forrása, ezért halványabb és monospace. */
    .cs-thinking-basis {
      margin-top: var(--space-4);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      line-height: var(--leading-relaxed);
      color: var(--color-gray-500);
    }

    /* ─── CRAFTING SECTION ──────────────────────────────────── */
    .cs-crafting {
      padding-block: var(--space-20);
      border-top: 1px solid var(--color-gray-300);
      display: grid;
      grid-template-columns: 4fr 8fr;
      gap: 4rem;
      align-items: start;
    }

    .cs-crafting-left {
      display: flex;
      flex-direction: column;
      gap: var(--space-6);
      position: sticky;
      top: calc(72px + var(--space-8));
      align-self: start;
    }

    .cs-crafting-title {
      font-size: clamp(var(--text-2xl), 2.8vw, var(--text-4xl));
      font-weight: var(--weight-black);
      line-height: var(--leading-snug);
      letter-spacing: var(--tracking-tight);
    }

    .cs-crafting-body {
      font-size: var(--text-base);
      line-height: var(--leading-relaxed);
      color: var(--color-gray-700);
    }

    /* ─── 2x2 MOCKUP GRID ───────────────────────────────────── */
    .cs-mockup-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
      margin-bottom: 1.25rem;
    }

    .cs-mockup-img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      display: block;
    }

    /* ─── META BAR ──────────────────────────────────────────── */
    .cs-meta {
      padding-block: var(--space-16);
      border-bottom: 1px solid var(--color-gray-300);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
    }

    .cs-meta-item {}

    .cs-meta-label {
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--color-gray-500);
      margin-bottom: var(--space-2);
      display: block;
    }

    .cs-meta-value {
      font-size: var(--text-base);
      font-weight: var(--weight-semibold);
      color: var(--color-black);
    }

    /* ─── SERVICES CAROUSEL ────────────────────────────────── */
    .services {
      padding-block: var(--space-40);
      border-bottom: 1px solid var(--color-gray-200);
      overflow-x: clip;
    }

    .services-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--space-8);
      margin-bottom: var(--space-10);
    }

    .services-head-text {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    .services-title {
      font-size: clamp(var(--text-3xl), 3.5vw, var(--text-5xl));
      font-weight: var(--weight-black);
      letter-spacing: -0.03em;
      line-height: 1.05;
    }

    .services-subtitle {
      font-size: var(--text-sm);
      color: var(--color-gray-500);
      line-height: 1.6;
      max-width: 54ch;
    }

    .services-arrows {
      display: flex;
      gap: var(--space-3);
      flex-shrink: 0;
      align-self: flex-end;
    }

    .arrow-btn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1px solid var(--color-gray-300);
      background: var(--color-white);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--color-black);
      transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
      flex-shrink: 0;
    }

    .arrow-btn:hover {
      background: var(--color-black);
      border-color: var(--color-black);
      color: var(--color-white);
    }

    .arrow-btn svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .services-track {
      display: flex;
      gap: 2rem;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline-start: var(--site-px);
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      cursor: grab;
    }

    .services-track::before {
      content: '';
      flex-shrink: 0;
      width: var(--site-px);
    }

    .services-track::-webkit-scrollbar { display: none; }
    .services-track.is-grabbing { cursor: grabbing; user-select: none; }

    .svc-card {
      flex: 0 0 calc(5 * (100vw - 2 * var(--site-px) + 2rem) / 12 - 2rem);
      scroll-snap-align: start;
      display: flex;
      flex-direction: column;
      gap: 0;
      cursor: pointer;
    }

    .svc-card-img {
      width: 100%;
      aspect-ratio: 3 / 2;
      overflow: hidden;
      background: var(--color-gray-100);
    }

    .svc-card-img img,
    .svc-card-img > div {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 600ms ease;
    }

    .svc-card:hover .svc-card-img img,
    .svc-card:hover .svc-card-img > div { transform: scale(1.03); }

    .svc-card-body {
      padding-top: var(--space-5);
      border-top: 1px solid var(--color-gray-200);
      margin-top: var(--space-5);
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .svc-card-title {
      font-size: var(--text-xl);
      font-weight: var(--weight-bold);
      letter-spacing: -0.02em;
      line-height: 1.2;
    }

    .svc-card-desc {
      font-size: var(--text-sm);
      color: var(--color-gray-500);
      line-height: 1.6;
      max-width: 38ch;
    }

    /* ─── INTERVIEW ROWS ────────────────────────────────────── */
    .cs-interview {
      border-top: 1px solid var(--color-gray-300);
      margin-bottom: var(--space-40);
    }

    .cs-interview-row {
      display: grid;
      grid-template-columns: 5fr 7fr;
      min-height: 580px;
      border-bottom: 1px solid var(--color-gray-300);
    }

    /* Client row: giant typography left, image right */
    .cs-interview-row--client {
      grid-template-columns: 7fr 5fr;
      border-top: none;
    }

    /* A kép NEM nyúlik a szöveggel. A lenyíló interjú megnöveli a grid-sort;
       ha a vizuális cella vele nőne, a kép újravágódna görgetés közben. Saját
       képaránnyal + sticky pozícióval a helyén marad, és végigkíséri a
       kinyitott választ. */
    .cs-interview-visual {
      position: sticky;
      top: calc(72px + var(--space-8));
      align-self: start;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      background: var(--color-gray-100);
    }

    .cs-interview-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .cs-interview-row:hover .cs-interview-img {
      transform: scale(1.03);
    }

    .cs-interview-play {
      position: absolute;
      bottom: var(--space-8);
      left: var(--space-8);
      z-index: 2;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(10, 10, 10, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 200ms ease;
    }

    .cs-interview-row:nth-child(2) .cs-interview-play {
      left: auto;
      right: var(--space-8);
    }

    .cs-interview-row:hover .cs-interview-play {
      background: rgba(10, 10, 10, 0.8);
    }

    .cs-interview-play svg {
      width: 14px;
      height: 14px;
      fill: white;
      margin-left: 2px;
    }

    .cs-interview-text {
      padding: var(--space-14) var(--space-12);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: var(--space-6);
      background: var(--color-white);
    }

    .cs-interview-row--client .cs-interview-text {
      padding: var(--space-14) var(--space-12);
      gap: var(--space-10);
      background: var(--color-white);
      justify-content: center;
    }

    .cs-interview-tag {
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--color-gray-500);
      display: block;
    }

    .cs-interview-row--client .cs-interview-tag {
      color: var(--color-gray-500);
    }

    .cs-interview-quote {
      font-size: clamp(var(--text-xl), 2vw, var(--text-3xl));
      font-weight: var(--weight-black);
      line-height: var(--leading-snug);
      letter-spacing: var(--tracking-tight);
      color: var(--color-black);
    }

    .cs-interview-row--client .cs-interview-quote {
      font-size: clamp(var(--text-xl), 2vw, var(--text-3xl));
      color: var(--color-black);
      line-height: var(--leading-snug);
      letter-spacing: var(--tracking-tight);
    }

    .cs-interview-quote::before {
      content: '"';
      display: block;
      font-size: clamp(var(--text-5xl), 6vw, var(--text-7xl));
      line-height: 0.7;
      color: var(--color-gray-200);
      font-weight: var(--weight-black);
      margin-bottom: var(--space-5);
      letter-spacing: 0;
    }

    .cs-interview-row--client .cs-interview-quote::before {
      display: none;
    }

    .cs-interview-name {
      font-size: var(--text-sm);
      font-weight: var(--weight-semibold);
      color: var(--color-black);
      line-height: 1.3;
    }

    .cs-interview-row--client .cs-interview-name {
      color: var(--color-black);
    }

    .cs-interview-subtitle {
      font-size: var(--text-xs);
      color: var(--color-gray-500);
      margin-top: var(--space-1);
      letter-spacing: var(--tracking-wide);
    }

    .cs-interview-row--client .cs-interview-subtitle {
      color: var(--color-gray-500);
    }

    /* ─── INTERVIEW EXPAND ──────────────────────────────────── */
    .cs-interview-expand {
      overflow: hidden;
      max-height: 0;
      transition: max-height 600ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .cs-interview-expand.is-open {
      max-height: 1000px;
    }

    .cs-interview-expand-inner {
      padding-top: var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
      border-top: 1px solid var(--color-gray-200);
      margin-top: var(--space-2);
    }

    .cs-interview-expand-inner p {
      font-size: var(--text-base);
      line-height: var(--leading-relaxed);
      color: var(--color-gray-700);
    }

    .cs-interview-expand-inner strong {
      font-weight: var(--weight-semibold);
      color: var(--color-black);
    }

    .cs-interview-toggle {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      margin-top: var(--space-2);
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-black);
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      transition: opacity 150ms ease;
    }

    .cs-interview-toggle:hover { opacity: 0.6; }

    .cs-interview-toggle-icon {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1px solid var(--color-gray-300);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 300ms ease, background 150ms ease, border-color 150ms ease;
      flex-shrink: 0;
    }

    .cs-interview-toggle:hover .cs-interview-toggle-icon {
      background: var(--color-black);
      border-color: var(--color-black);
      color: var(--color-white);
    }

    .cs-interview-toggle-icon svg {
      width: 8px;
      height: 8px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      transition: transform 300ms ease;
    }

    .cs-interview-toggle.is-open .cs-interview-toggle-icon svg {
      transform: rotate(180deg);
    }

    /* ─── UP NEXT — Netflix style ──────────────────────────── */
    .cs-upnext {
      position: relative;
      height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
    }

    .cs-upnext-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .cs-upnext-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.80) 0%,
        rgba(0, 0, 0, 0.35) 60%,
        rgba(0, 0, 0, 0.20) 100%
      );
    }

    /* A `max-width` a border-box miatt a két oldali --site-px hézagot IS
       magában foglalja: 8rem-es hézagnál a korábbi 560px-ből alig 300px
       maradt a szövegnek, ezért tört ketté a következő projekt neve
       („AluConn / ect”). A háromszoros érték egy sorban tartja a címet. */
    .cs-upnext-content {
      position: relative;
      z-index: 2;
      padding: var(--space-16) var(--site-px);
      padding-bottom: var(--space-20);
      max-width: 1680px;
    }

    .cs-upnext-label {
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
      margin-bottom: var(--space-3);
    }

    .cs-upnext-title {
      font-size: clamp(var(--text-4xl), 5.5vw, var(--text-7xl));
      font-weight: var(--weight-black);
      letter-spacing: var(--tracking-tighter);
      line-height: 0.95;
      color: var(--color-white);
      margin-bottom: var(--space-4);
    }

    .cs-upnext-sub {
      font-size: var(--text-sm);
      color: rgba(255, 255, 255, 0.5);
      letter-spacing: var(--tracking-wide);
      margin-bottom: var(--space-8);
    }

    .cs-upnext-bar {
      width: 240px;
      height: 3px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 2px;
      margin-bottom: var(--space-8);
      overflow: hidden;
    }

    .cs-upnext-progress {
      height: 100%;
      width: 0%;
      background: var(--color-white);
      border-radius: 2px;
      transition: width linear;
    }

    .cs-upnext-actions {
      display: flex;
      align-items: center;
      gap: var(--space-4);
    }

    .cs-upnext-btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-3) var(--space-6);
      font-size: var(--text-sm);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-wide);
      border-radius: var(--radius-full);
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: background 150ms ease, color 150ms ease;
    }

    .cs-upnext-btn--primary {
      background: var(--color-white);
      color: var(--color-black);
    }

    .cs-upnext-btn--primary:hover {
      background: var(--color-gray-100);
    }

    .cs-upnext-btn--ghost {
      background: rgba(255, 255, 255, 0.12);
      color: var(--color-white);
      border: 1px solid rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(8px);
    }

    .cs-upnext-btn--ghost:hover {
      background: rgba(255, 255, 255, 0.22);
    }

    /* ─── NEXT PROJECT ──────────────────────────────────────── */
    .cs-next {
      padding-block: var(--space-20);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-8);
      border-bottom: 1px solid var(--color-gray-300);
    }

    .cs-next-label {
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--color-gray-500);
      display: block;
      margin-bottom: var(--space-3);
    }

    .cs-next-title {
      font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
      font-weight: var(--weight-black);
      letter-spacing: var(--tracking-tight);
      line-height: 1;
    }

    .cs-next-arrow {
      font-size: var(--text-4xl);
      color: var(--color-black);
      flex-shrink: 0;
      transition: transform 200ms ease;
    }

    .cs-next:hover .cs-next-arrow { transform: translateX(8px); }

    .cs-next-thumb {
      width: clamp(120px, 15vw, 220px);
      aspect-ratio: 4/3;
      object-fit: cover;
      flex-shrink: 0;
    }

    /* ─── FOOTER ─────────────────────────────────────────────── */
    .footer {
      background: var(--color-black);
      color: var(--color-white);
    }

    .footer-hero {
      padding-block: var(--space-20);
      border-bottom: 1px solid var(--color-gray-800);
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--space-8);
    }

    .footer-logo-img {
      height: clamp(56px, 6vw, 96px);
      width: auto;
      display: block;
    }

    .footer-tagline {
      font-size: var(--text-sm);
      color: var(--color-text-on-dark);
      letter-spacing: var(--tracking-wide);
      max-width: 38ch;
      line-height: 1.6;
      text-align: right;
    }

    .footer-cols {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-8);
      padding-block: var(--space-16);
      border-bottom: 1px solid var(--color-gray-800);
    }

    .footer-col-label {
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--color-text-on-dark);
      margin-bottom: var(--space-6);
      display: block;
    }

    .footer-col-links { display: flex; flex-direction: column; gap: var(--space-3); }

    .footer-nav-link {
      font-size: var(--text-base);
      color: var(--color-text-on-dark);
      transition: color 150ms ease;
    }

    .footer-nav-link:hover { color: var(--color-white); }

    .footer-contact-item { font-size: var(--text-base); color: var(--color-text-on-dark); line-height: 1.6; }
    .footer-contact-item a { color: inherit; transition: color 150ms ease; }
    .footer-contact-item a:hover { color: var(--color-white); }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-block: var(--space-8);
      flex-wrap: wrap;
      gap: var(--space-4);
    }

    .footer-legal { font-size: var(--text-xs); color: var(--color-text-on-dark); letter-spacing: var(--tracking-wide); }

    .footer-social { display: flex; gap: var(--space-6); }

    .footer-social a {
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-wider);
      text-transform: uppercase;
      color: var(--color-text-on-dark);
      transition: color 150ms ease;
    }

    .footer-social a:hover { color: var(--color-white); }

    .cs-intro-lead { font-size: clamp(var(--text-3xl), 3.5vw, var(--text-5xl)); }

  
    /* ─── MOBILE FIXES (responsive pass) ─── */
    @media (max-width: 768px) {
      .cs-meta { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) 1.5rem; }
      .cs-intro-grid { grid-template-columns: 1fr; gap: var(--space-10); }
      .cs-crafting { grid-template-columns: 1fr; gap: var(--space-10); }
      .cs-crafting-left { position: static; }
      .cs-interview-row { grid-template-columns: 1fr; min-height: 0; gap: var(--space-8); }
      /* relative, nem static: a benne lévő kép abszolút pozicionált — static
         szülővel az oldal tetejére csúszna, a fejléc mögé (#94). */
      .cs-interview-visual { position: relative; aspect-ratio: 4 / 3; }
      .cs-before-head { grid-template-columns: 1fr; gap: var(--space-6); }
      .cs-before-head-left { position: static; }
      .cs-ba-grid { grid-template-columns: 1fr; gap: var(--space-6); }
      .cs-facts { grid-template-columns: 1fr; gap: var(--space-6); }
      .cs-design { grid-template-columns: 1fr; gap: var(--space-12); }
      .cs-swatches { grid-template-columns: 1fr; }
      .cs-thinking-row,
      .cs-thinking-row--media { grid-template-columns: 1fr; gap: var(--space-3); }
      .cs-thinking-row--media .cs-thinking-img { grid-column: auto; }
    }