/* Minimal reset — replaces Tailwind preflight (the Tailwind CDN was unused and removed). */
h1, h2, h3, h4, h5, h6, p, figure, blockquote, address, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video, canvas { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ===== Fonts ===== */
@font-face {
      font-family: 'PP Mori';
      src: url('../fonts/PP-Mori-Regular.woff2') format('woff2');
      font-weight: 400; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'PP Mori';
      src: url('../fonts/PP-Mori-SemiBold.woff2') format('woff2');
      font-weight: 600; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'PP Mori';
      src: url('../fonts/PP-Mori-Bold.woff2') format('woff2');
      font-weight: 700; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'PP Mori';
      src: url('../fonts/PP-Mori-ExtraBold.woff2') format('woff2');
      font-weight: 800; font-style: normal; font-display: swap;
    }

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

    body {
      font-family: 'PP Mori', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      background: #050505;
      color: #ffffff;
      margin: 0;
      padding: 0;
      font-size: 14px;
      overflow-x: hidden;   /* lets the process orb bleed past the section edges */
      -webkit-font-smoothing: antialiased;
    }

    /* ── Sections ────────────────────────────────────────────────────── */
    .section {
      position: relative;
      height: 100svh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    /* hero stays pinned; the next section scrolls up and covers it */
    .hero {
      position: sticky;
      top: 0;
      z-index: 1;
      --accent-rgb: 49, 43, 232;   /* blue */
    }

    .hero .hero-bottom {
      will-change: opacity, transform;
    }

    /* websites: inverted light theme, slides over the hero */
    .websites {
      position: relative;
      z-index: 2;
      height: auto;
      min-height: 100svh;
      overflow: visible;
      justify-content: flex-start;
      padding: 100px 0;
      background: #f5f5f3;        /* very subtle grey */
      color: #0a0a0a;
    }

    /* ── Beyond Shopify block ────────────────────────────────────────── */
    .beyond-block {
      position: relative;
      width: 100%;               /* full layout width */
      min-height: calc(100svh - 110px);   /* fit within the viewport (section pad 50+60) */
      display: flex;             /* no own background — section grey shows through */
      align-items: stretch;
      padding: 30px;   /* 30px all around */
    }

    /* full-width bottom rule, inset 30px each side */
    .beyond-block::after {
      content: '';
      position: absolute;
      left: 30px;
      right: 30px;
      bottom: 0;
      height: 1px;
      background: rgba(0, 0, 0, 0.18);
    }

    /* LEFT: headline (top), text, CTA (bottom) */
    .beyond-left {
      flex: 1 1 0;               /* exact half */
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 48px;
      padding: 30px 30px 0 0;   /* 30 top so the divider shows above the headline */
    }
    .beyond-left .web-para {
      margin: 22px 0 0;
      max-width: 380px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      color: #0a0a0a;
    }

    /* vertical divider, ~inset from top/bottom via block padding */
    .beyond-divider-v {
      width: 1px;
      background: rgba(0, 0, 0, 0.18);
      flex: none;
    }

    /* RIGHT: rotating client showcase */
    .beyond-right {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    .beyond-right-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 30px 0 26px 30px;   /* 30 top so the divider shows above; 30 gap from divider */
    }
    .beyond-label, .beyond-client {
      font-size: 14px;
      font-weight: 600;
    }
    .beyond-label  { color: #0a0a0a; }
    .beyond-client { color: #0a0a0a; }

    .beyond-logo {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 220px;
      padding: 48px 0 48px 30px;
    }
    .beyond-logo img {
      max-height: 56px;
      max-width: 72%;
      width: auto;
      height: auto;
    }

    .beyond-divider-h {
      height: 1px;
      background: rgba(0, 0, 0, 0.18);
      margin-left: 30px;          /* gap from the vertical divider */
    }
    /* bottom rule: full width of the showcase, flush with the block's bottom */
    .beyond-divider-h.is-bottom {
      margin-left: 0;
      margin-right: -30px;
      margin-bottom: -20px;
    }

    /* bottom row of the showcase: description (left) + carousel toggle (right) */
    .beyond-foot {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 100px;
      padding: 24px 0 0 30px;   /* gap from divider; bottom sits 30px above the rule */
    }

    .beyond-foot-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }

    .beyond-desc {
      margin: 0;
      max-width: 460px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      color: #0a0a0a;
    }

    .beyond-link {
      display: inline-flex;
      align-items: center;
      gap: 0;
      font-size: 14px;
      font-weight: 600;
      color: #0a0a0a;
      text-decoration: none;
    }
    .beyond-link-text {
      position: relative;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }
    .beyond-link:hover .beyond-link-text { text-decoration: none; }
    @keyframes linkGlitch {
      0%   { transform: translate(0, 0);    text-shadow: none; }
      5%   { transform: translate(-2px, 0); text-shadow: 2px 0 #ff0048, -2px 0 #00e5ff; }
      10%  { transform: translate(2px, 0);  text-shadow: -2px 0 #ff0048, 2px 0 #00e5ff; }
      15%  { transform: translate(-1px, 0); text-shadow: 1px 0 #ff0048, -1px 0 #00e5ff; }
      20%  { transform: translate(0, 0);    text-shadow: none; }
      100% { transform: translate(0, 0);    text-shadow: none; }
    }
    /* icon pops in on hover (no slide intro), then flickers in place */
    .beyond-link-ico {
      width: 0;
      height: 13px;
      flex: none;
      opacity: 0;
      overflow: hidden;
      position: relative;
      top: -1px;     /* nudge up + left to sit centred against the text */
      left: -2px;
    }
    .beyond-link:hover .beyond-link-ico {
      width: 13px;
      margin-left: 7px;
      opacity: 1;
      animation: iconBlink 0.55s steps(1) infinite;
    }
    /* icon flickers continuously while hovered, between 100% and ~50% */
    @keyframes iconBlink {
      0%   { opacity: 1; }
      8%   { opacity: 0.5; }
      16%  { opacity: 1; }
      24%  { opacity: 0.55; }
      32%  { opacity: 1; }
      40%  { opacity: 0.5; }
      48%  { opacity: 1; }
      56%  { opacity: 0.6; }
      64%  { opacity: 1; }
      72%  { opacity: 0.5; }
      82%  { opacity: 1; }
      90%  { opacity: 0.52; }
      100% { opacity: 1; }
    }


    /* carousel play / pause toggle */
    .carousel-toggle {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      flex: none;
      padding: 0;
      border: none;
      background: none;
      cursor: pointer;
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      color: #0a0a0a;
      white-space: nowrap;
    }
    .carousel-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex: none;
      position: relative;
      top: -1px;            /* nudge up to sit level with the text */
      background: #22c55e;
      box-shadow: 0 0 8px 1px rgba(34, 197, 94, 0.7);
      animation: dotPulse 1.8s ease-in-out infinite;
      transition: box-shadow 240ms ease, transform 240ms ease;
    }
    /* hover lights it up, same calm level as the hero dot */
    .carousel-toggle:not(.is-paused):hover .carousel-dot {
      animation: none;
      transform: scale(1.1);
      box-shadow:
        0 0 6px 1px rgba(34, 197, 94, 0.7),
        0 0 14px 4px rgba(34, 197, 94, 0.4),
        0 0 24px 8px rgba(34, 197, 94, 0.22);
    }

    /* text dims slightly on hover to signal it is clickable */
    .carousel-label { transition: opacity 200ms ease; }
    .carousel-toggle:hover .carousel-label { opacity: 0.7; }
    .carousel-toggle.is-paused .carousel-dot {
      background: #bdbdb8;
      box-shadow: none;
      animation: none;
    }

    /* beyond CTA — icon swaps right → left, button darkens on hover */
    .btn-link {
      display: inline-flex;
      align-items: center;
      background: #e3e3e0;
      color: #1a1a1a;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1;
      text-decoration: none;
      padding: 14px 20px;
      white-space: nowrap;
      transition: background 250ms ease, transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .btn-link:hover { background: #cdcdc9; }
    .btn-link:active { transform: scale(0.96); }   /* tactile press feedback */

    /* glass variant — frosted translucent button (modern glassmorphism) */
    .btn-glass {
      background: rgba(255, 255, 255, 0.12);
      color: #ffffff;
      border: none;
      -webkit-backdrop-filter: blur(14px) saturate(140%);
              backdrop-filter: blur(14px) saturate(140%);
      transition: background 250ms ease, color 250ms ease,
                  transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .btn-glass:hover { background: rgba(255, 255, 255, 0.22); }
    /* on light sections (header passes over both) the glass flips to a dark tint */
    .btn-glass.on-light {
      background: rgba(10, 10, 10, 0.06);
      color: #0a0a0a;
    }
    .btn-glass.on-light:hover { background: rgba(10, 10, 10, 0.12); }

    .btn-ico {
      display: flex;
      align-items: center;
      overflow: hidden;
      width: 0;
      opacity: 0;
      transition: width 360ms cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 220ms ease,
                  margin 360ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .btn-ico svg { width: 18px; height: 10px; flex: none; display: block; }

    /* right icon shown at rest */
    .btn-ico--right { width: 18px; opacity: 1; margin-left: 10px; }
    .btn-link:hover .btn-ico--right { width: 0; opacity: 0; margin-left: 0; }
    /* left icon slides in on hover */
    .btn-link:hover .btn-ico--left { width: 18px; opacity: 1; margin-right: 10px; }

    /* glitch swap on the showcase (logo / name / description) */
    .beyond-right.glitching .beyond-client,
    .beyond-right.glitching .beyond-desc,
    .beyond-right.glitching .beyond-link,
    .beyond-right.glitching .beyond-logo img {
      animation: glitchSwap 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    @keyframes glitchSwap {
      0%   { transform: translate(0,0) skewX(0deg);     opacity: 1;   text-shadow: none; }
      12%  { transform: translate(-4px,0) skewX(9deg);  opacity: .7;  text-shadow: 3px 0 #ff0048, -3px 0 #00e5ff; }
      28%  { transform: translate(5px,-1px) skewX(-6deg); opacity: .9; text-shadow: -4px 0 #ff0048, 4px 0 #00e5ff; }
      45%  { transform: translate(-3px,1px) skewX(4deg); opacity: .6; text-shadow: 2px 0 #ff0048, -2px 0 #00e5ff; }
      62%  { transform: translate(3px,0) skewX(-3deg);  opacity: .92; text-shadow: -2px 0 #ff0048, 2px 0 #00e5ff; }
      82%  { transform: translate(-1px,0) skewX(1deg);  opacity: 1;   text-shadow: 1px 0 #ff0048, -1px 0 #00e5ff; }
      100% { transform: translate(0,0) skewX(0deg);     opacity: 1;   text-shadow: none; }
    }

    /* ── Hero image layer ────────────────────────────────────────────── */
    .hero-image {
      position: absolute;
      inset: 0;
      background-color: #050505;
      background-image: none;
      background-size: cover;
      background-position: center;
      will-change: transform;
      animation: kenBurns 20s ease-in-out infinite alternate;
    }

    @keyframes kenBurns {
      from { transform: scale(1.0); }
      to   { transform: scale(1.08); }
    }

    .hero-gradient {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.70) 100%);
      pointer-events: none;
    }


    /* ── Hero liquid gradient field (same WebGL shader as the footer) ─── */
    .hero-field {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      pointer-events: none;
    }
    /* no grain in the hero — the contrast-boosted field (uContrast in main.js)
       stays sharp; the footer keeps its grain */

    /* ── Text reveal ─────────────────────────────────────────────────── */
    .word {
      display: inline-block;
      opacity: 0;
      filter: blur(6px);
      transform: translateY(8px);
    }
    .claim .line-inner {
      display: block;
      transform: translateY(120%);
    }
    .reveal { opacity: 0; }
    .split-words { opacity: 0; }

    .reveal-scope.revealed .split-words.is-split { opacity: 1; }
    .reveal-scope.revealed .word {
      animation: wordIn 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .reveal-scope.revealed .claim .line-inner {
      animation: lineReveal 1000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .reveal-scope.revealed .reveal {
      animation: fadeIn 850ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .reveal-scope.revealed .claim .line-1 .line-inner { animation-delay: 350ms; }
    .reveal-scope.revealed .claim .line-2 .line-inner { animation-delay: 470ms; }
    .reveal-scope.revealed .claim .line-3 .line-inner { animation-delay: 590ms; }
    .reveal-scope.revealed .delay-cta { animation-delay: 1000ms; }
    /* progressive stagger for section elements */
    .reveal-scope.revealed .rd-1 { animation-delay: 650ms; }
    .reveal-scope.revealed .rd-2 { animation-delay: 770ms; }
    .reveal-scope.revealed .rd-3 { animation-delay: 890ms; }
    .reveal-scope.revealed .rd-4 { animation-delay: 1010ms; }
    .reveal-scope.revealed .rd-5 { animation-delay: 1130ms; }

    @keyframes wordIn  { to { opacity: 1; filter: blur(0); transform: translateY(0); } }
    @keyframes lineReveal { to { transform: translateY(0); } }
    @keyframes fadeIn  { to { opacity: 1; } }

    /* ── Claim type ──────────────────────────────────────────────────── */
    .claim {
      font-size: clamp(48px, 8vw, 100px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.02em;
      color: #ffffff;
      margin: 0;
    }
    .claim .line {
      display: block;
      overflow: hidden;
      padding-bottom: 0.15em;
      margin-bottom: -0.15em;
    }
    .claim .line-1 { margin-bottom: -0.05em; }

    /* websites headline: smaller, bold, dark + glitch flash */
    .websites .claim {
      color: #0a0a0a;
      font-size: clamp(40px, 3.6vw, 50px);
      font-weight: 800;
    }

    @keyframes glitch {
      0%, 94%, 100% { transform: translate(0, 0) skewX(0deg); text-shadow: none; }
      94.5% { transform: translate(-3px, 0) skewX(9deg);   text-shadow: 3px 0 #ff0048, -3px 0 #00e5ff; }
      95.1% { transform: translate(4px, -1px) skewX(-7deg); text-shadow: -4px 0 #ff0048, 4px 0 #00e5ff; }
      95.6% { transform: translate(-2px, 1px) skewX(4deg);  text-shadow: 2px 0 #ff0048, -2px 0 #00e5ff; }
      96.2% { transform: translate(3px, 0) skewX(-3deg);    text-shadow: -3px 0 #ff0048, 3px 0 #00e5ff; }
      96.8% { transform: translate(-1px, 0) skewX(2deg);    text-shadow: 1px 0 #ff0048, -1px 0 #00e5ff; }
      97.4% { transform: translate(0, 0) skewX(0deg);       text-shadow: none; }
    }

    /* hero headline word that glitch-swaps between Shopify and Websites */
    .hero-swap { display: inline-block; }
    .hero-swap.hero-glitch { animation: glitchSwap 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }

    /* ── Eyebrow ─────────────────────────────────────────────────────── */
    .eyebrow {
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0;
      text-transform: uppercase;
      color: #ffffff;
      margin: 0 0 24px;
    }

    /* ── Hero right paragraph ────────────────────────────────────────── */
    .hero-para {
      margin: 0 0 44px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      color: #ffffff;
    }

    /* ── CTA ─────────────────────────────────────────────────────────── */
    .cta-block { display: flex; flex-direction: column; align-items: flex-start; }

    /* availability status line (hero) */
    .status-line {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 10px;
      font-size: 14px;
      color: #ffffff;
      transition: color 240ms ease;
    }
    .cta-block:hover .status-line { color: #ffffff; }

    .status-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background-color: rgb(var(--accent-rgb));
      flex: none;
      box-shadow: 0 0 8px 1px rgba(var(--accent-rgb), 0.6);
      animation: dotPulse 1.8s ease-in-out infinite;
      transition: box-shadow 240ms ease, transform 240ms ease;
    }
    .cta-block:hover .status-dot {
      animation: none;
      transform: scale(1.15);
      box-shadow:
        0 0 6px 2px rgba(var(--accent-rgb), 1),
        0 0 16px 5px rgba(var(--accent-rgb), 0.9),
        0 0 30px 10px rgba(var(--accent-rgb), 0.55);
    }

    @keyframes dotPulse {
      0%, 100% { opacity: 1;   transform: scale(1); }
      50%      { opacity: 0.35; transform: scale(0.7); }
    }

    /* ── Header ──────────────────────────────────────────────────────── */
    .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: 24px 30px; }
    .header-right { display: flex; align-items: center; gap: 14px; }

    /* Human / Machine view toggle — fixed bottom centre, identical on both views.
       Dark frosted track so it reads on any background (no per-section adaptation). */
    .mode-toggle {
      position: fixed;
      bottom: 48px;             /* aligned with the hero content's bottom padding */
      left: 50%;
      transform: translateX(-50%);
      z-index: 60;
      display: inline-flex;
      align-items: center;
      gap: 0;
      padding: 3px;
      border-radius: 14px;
      background: rgba(10, 10, 10, 0.5);   /* dark enough to read on white sections */
      -webkit-backdrop-filter: blur(14px) saturate(140%);
              backdrop-filter: blur(14px) saturate(140%);
    }
    .mode-opt {
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0;
      line-height: 1;
      padding: 8px 10px 6px;   /* text nudged 1px down — optically centred */
      border-radius: 12px;
      color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      transition: background 200ms ease, color 200ms ease, transform 140ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .mode-opt:hover { color: #ffffff; }
    /* active: a lighter pane of the same glass, quieter than a solid pill */
    .mode-opt.is-active { background: rgba(255, 255, 255, 0.16); color: #ffffff; }
    .mode-opt.is-active:hover { color: #ffffff; }
    .mode-opt:active { transform: scale(0.95); }

    /* ── Hero bottom row ─────────────────────────────────────────────── */
    .hero-bottom {
      position: relative;
      z-index: 10;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 50px;
      padding: 48px 30px;   /* the fixed toggle sits on this same bottom line */
    }
    .hero-right { max-width: 320px; }

    /* ── Maskal case study (pinned scale on scroll) ──────────────────── */
    .case {
      position: relative;
      z-index: 2;                     /* cover the sticky hero (same as the websites section) */
      background: #f5f5f3;            /* JS lerps grey → black on scroll */
    }
    .case-track { height: 240vh; }     /* scroll room for the pin + scale */
    .case-pin {
      position: sticky;
      top: 0;
      height: 100svh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;   /* a full-width window can exceed viewport height → clip it cleanly */
    }
    .case-window {
      --full-w: 1000px;
      --case-scale: 0.6;
      position: relative;
      container-type: inline-size;
      width: var(--full-w);
      aspect-ratio: 2400 / 1600;     /* 3:2, matches the hero images */
      transform: scale(var(--case-scale));
      transform-origin: center;
      overflow: hidden;
      background: transparent;
      will-change: transform;
    }
    /* slideshow: scroll-tied hard cut between shots, no per-image animation */
    .case-slide {
      position: absolute;
      inset: 0;
      overflow: hidden;
      opacity: 0;
    }
    .case-slide.is-active { opacity: 1; }
    /* slides cross-fade into one another so each shot flows into the next,
       smooth both scrolling down and back up (no empty black between cards) */
    .case-slide { transition: opacity 520ms ease; }
    /* first screenshot only: rises from the bottom of the window with the same
       blur-in as the intro reveal; it leaves on the standard hard cut */
    .case-slide.is-first-shot img {
      transform: translateY(105%);
      filter: blur(6px);
      transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms ease;
    }
    .case-slide.is-first-shot.is-active img { transform: translateY(0); filter: blur(0); }
    .case-slide.is-mobile-only { display: none; }   /* extra portrait shot, mobile only */
    .case-slide.is-phone img { object-fit: contain; }   /* show the whole phone shot */
    /* fade the bottom of the hand-holding-phone shot into the dark backdrop */
    .case-slide.is-phone::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 42%;
      background: linear-gradient(to bottom, rgba(5, 5, 5, 0) 0%, rgba(5, 5, 5, 0.85) 65%, #050505 100%);
      pointer-events: none;
      z-index: 2;
    }

    /* intro — two phases inside the first slide, transparent (blends with the
       section). Phase A: a larger Shopify mark + "Case study". Phase B: the
       project headline. JS toggles .is-shown / .is-out from the scroll position,
       so the same line slide-up reveal plays forwards and in reverse. */
    .case-slide.is-intro { display: block; }
    .case-intro {
      position: relative;
      width: 100%;
      height: 100%;
    }
    /* fixed per-phase colours: A lives on the light backdrop, B on the black one
       (the backdrop fades between them while no text is on screen) */
    #case-intro-a { color: #0a0a0a; }
    #case-intro-b { color: #ffffff; }
    .case-intro-phase {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(16px, 1.9vw, 26px);
      padding: 0 6%;
    }
    .case-intro-phase.is-stack { flex-direction: column; gap: 0; text-align: center; }
    /* phase B has two lines: drop the single-line overshoot padding/margin (it
       made the gap between the lines uneven) and use clean, even native leading */
    .case-intro-phase.is-stack .case-intro-title { line-height: 1.1; }
    .case-intro-phase.is-stack .case-intro-title .line {
      padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0;
    }
    .case-intro-title {
      font-size: clamp(40px, 3.6vw, 50px);   /* same as "Singular online presence" */
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1;
    }
    /* same line slide-up reveal as the hero/section headlines, transition-driven
       so the two phases can hand over in either scroll direction */
    .case-intro-title .line { display: block; overflow: hidden; padding: 0.2em 0.3em; margin: -0.2em -0.3em; }
    .case-intro-title .line-inner {
      display: block;
      transform: translateY(150%);   /* 150%: glyph overshoot (y tails, carons) stays clear of the clip */
      filter: blur(6px);             /* same blur-in as the hero reveal */
      opacity: 0;                    /* hidden states are also transparent — the blur halo
                                        otherwise bleeds past the clip as a faint smudge */
      transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms ease, opacity 600ms ease;
    }
    .case-intro-title .line + .line .line-inner { transition-delay: 90ms; }
    .case-intro-phase.is-shown .line-inner { transform: translateY(0); filter: blur(0); opacity: 1; }
    .case-intro-phase.is-out .line-inner { transform: translateY(-150%); filter: blur(16px); opacity: 0; }   /* stronger, so the blur-out actually reads */
    /* the mark rises with its neighbouring text */
    .case-intro-logo {
      height: clamp(56px, 5.4vw, 76px);
      width: auto;
      flex: none;
      opacity: 0;
      transform: translateY(24px);
      filter: blur(6px);
      transition: opacity 700ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms ease;
    }
    .case-intro-phase.is-shown .case-intro-logo { opacity: 1; transform: translateY(0); filter: blur(0); }
    .case-intro-phase.is-out .case-intro-logo { opacity: 0; transform: translateY(-24px); filter: blur(16px); }
    /* scrolling back up (.is-reversing on the window, JS): the reversed slide
       motion reads oddly, so the phases just fade through the blur with no
       vertical move, and the first screenshot cuts in like the others */
    .case-window.is-reversing .case-intro-title .line-inner,
    .case-window.is-reversing .case-intro-logo {
      transform: translateY(0);
      transition: opacity 600ms ease, filter 600ms ease;
    }
    .case-window.is-reversing .case-intro-phase:not(.is-shown) .line-inner { opacity: 0; filter: blur(16px); }
    .case-window.is-reversing .case-intro-phase.is-shown .line-inner { opacity: 1; filter: blur(0); }
    .case-window.is-reversing .case-slide.is-first-shot img { transform: none; filter: none; transition: none; }
    /* one-frame snap while the direction flips, so no state ever animates over */
    .case-window.is-snap .case-intro-title .line-inner,
    .case-window.is-snap .case-intro-logo,
    .case-window.is-snap .case-slide.is-first-shot img { transition: none; }
    /* third slide: three mobile screens side by side */
    .case-slide.is-trio {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2.5%;
      padding: 0 4%;
    }
    .case-slide.is-trio img {
      width: auto;
      height: 86%;
      max-width: 31%;
      object-fit: contain;
    }
    .case-slide picture { display: block; width: 100%; height: 100%; }
    .case-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    /* no per-image zoom — the whole window already scales with scroll, so the
       motion stays tied to the scroll position instead of a disconnected timer */
    /* dark gradient overlay (madeinevolve style) */
    .case-overlay {
      position: absolute;
      inset: 0;
      z-index: 3;                    /* above the sliding images */
      pointer-events: none;
      background: rgba(0, 0, 0, 0.2);     /* uniform 20% black */
    }
    /* bold caption, bottom-left, scales with the window (cqw → stays sharp) */
    /* caption sits outside the scaling window → fixed size, anchored to the viewport bottom */
    .case-caption {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 1600px;
      z-index: 5;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 40px;
      padding: 0 40px;
    }
    .case-desc {
      margin: 0;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      color: #ffffff;
    }
    .case-caption .beyond-link { color: #ffffff; }

    /* case study content, below the window; inverts in sync with Made to measure */
    .case-body {
      --pbg: 5, 5, 5;           /* starts black, JS lerps it to light on the way out */
      --ptext: 255, 255, 255;
      position: relative;
      background-color: rgb(var(--pbg));
      color: rgb(var(--ptext));
      padding: 100px 0;
    }
    .case-body .beyond-block { min-height: calc(100svh - 200px); }   /* full screen height like singular, stops the height jump on rotation */
    .case-body .beyond-block::after,
    .case-body .beyond-divider-v,
    .case-body .beyond-divider-h { background: rgba(var(--ptext), 0.18); }
    .case-body .claim {
      color: rgb(var(--ptext));
      font-size: clamp(40px, 3.6vw, 50px);
      font-weight: 800;
    }
    /* Shopify case-study eyebrow with the (recolourable) Shopify mark */
    .case-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 24px;
      font-size: 14px;
      font-weight: 600;
      color: rgb(var(--ptext));
    }
    .case-eyebrow-logo {
      width: 18px; height: 18px;
      flex: none;
      color: rgb(var(--ptext));   /* inline SVG uses fill: currentColor → follows the section invert */
    }
    .case-body .web-para { color: rgb(var(--ptext)); }
    .case-body .beyond-label,
    .case-body .beyond-client { color: rgb(var(--ptext)); }
    .case-body .beyond-desc { color: rgb(var(--ptext)); }
    .case-body .beyond-link { color: rgb(var(--ptext)); }
    .case-body .carousel-toggle { color: rgb(var(--ptext)); }
    .case-body .beyond-logo img { filter: invert(1); }
    /* Visit-the-store button inverts too (contrast block) */
    .case-body .btn-link { background: rgb(var(--ptext)); color: rgb(var(--pbg)); }
    .case-body .btn-link:hover { background: rgba(var(--ptext), 0.82); }

    /* rotating project highlights in the right column */
    .case-hl {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 220px;
      padding: 48px 30px;
      text-align: center;
    }
    .case-hl-value {
      font-size: clamp(40px, 5vw, 80px);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.02em;
      color: rgb(var(--ptext));
    }
    .case-hl-desc {
      margin: 0;
      max-width: 360px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      color: rgb(var(--ptext));
    }
    .beyond-right.glitching .case-hl-value,
    .beyond-right.glitching .case-hl-desc {
      animation: glitchSwap 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    /* the header "Klenotníctvo Maskaľ" never changes here — no glitch on it,
       only the rotating value and description flash */
    .case-body .beyond-right.glitching .beyond-client { animation: none; }

    /* keep a bigger gap between description and toggle on smaller screens */
    /* ── Services + Process share one scroll-driven colour scheme ──────── */
    /* JS lerps these on scroll: light #f5f5f3 / dark text → black / cream text */
    .services, .process {
      --pbg: 245, 245, 243;     /* section background  */
      --ptext: 10, 10, 10;      /* section text        */
    }
    /* shared label-column width so both sections align to the same offset */
    .services, .process { --col1: 84px; }

    /* section eyebrow — same 14/600 as the SHOPIFY tag, beside the heading in col 1 */
    .sec-eyebrow {
      grid-column: 1;
      grid-row: 1;
      align-self: center;   /* sit level with the heading's text, not its box top */
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0;
      text-transform: uppercase;
      color: rgb(var(--ptext));
      margin: 0 0 26px;
    }

    /* ── Services: Shopify (2/3) + Websites (1/3) ─────────────────────── */
    .services {
      position: relative;
      z-index: 2;
      height: auto;
      overflow: visible;          /* no min-height: on tall screens it padded the bottom
                                     far beyond the unified 100px section spacing */
      justify-content: flex-start;
      padding: 100px 0;
      background-color: rgb(var(--pbg));
      color: rgb(var(--ptext));
    }
    .services-inner { padding: 0 30px; }

    /* heading + intro: same fonts as the Singular section, no eyebrow */
    /* head mirrors the row grid: eyebrow | heading+intro, on the same level */
    .services-head, .process-head {
      display: grid;
      grid-template-columns: var(--col1) 1fr;
      column-gap: 48px;
      align-items: start;
      max-width: 900px;
    }
    .services-head { margin: 0 0 72px; }
    .services .claim {
      grid-column: 2;
      grid-row: 1;
      color: rgb(var(--ptext));
      font-size: clamp(40px, 3.6vw, 50px);   /* don't shrink below 40px on narrower screens */
      font-weight: 800;
      margin: 0;
    }
    .services-head .web-para {
      grid-column: 2;
      grid-row: 2;
      margin: 22px 0 0;
      max-width: 500px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      color: rgb(var(--ptext));
    }

    /* two columns: Shopify list 2/3, Websites black block 1/3 */
    .svc-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 45px; align-items: stretch; }
    .svc-col, .svc-web { min-width: 0; }   /* contain the max-content marquee, no horizontal overflow */
    /* left column fills the row height; rows share it equally so the stack lines up
       with the bottom of the black Websites block on desktop */
    .svc-col { display: flex; flex-direction: column; }

    .svc-row {
      display: grid;
      grid-template-columns: var(--col1) minmax(0, 1fr) minmax(0, 400px);   /* tag | name | desc hugging the right edge — same shape as Process */
      column-gap: 48px;
      row-gap: 8px;
      align-items: baseline;
      align-content: start;    /* top-aligned like the Process ledger */
      flex: 1 1 0;             /* grow to divide the column height evenly */
      min-height: 120px;
      padding: 20px 0;
      border-top: 1px solid rgba(var(--ptext), 0.07);   /* barely-there at rest, like the Process ledger */
    }
    .svc-col .svc-row:last-child { border-bottom: 1px solid rgba(var(--ptext), 0.07); }
    .svc-tag {
      grid-column: 1;
      grid-row: 1;
      font-size: 14px;
      font-weight: 600;
      color: rgb(var(--ptext));
      white-space: nowrap;
    }
    .svc-name {
      grid-column: 2;
      grid-row: 1;
      font-size: clamp(19px, 1.7vw, 22px);
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.1;
      color: rgb(var(--ptext));
    }
    .svc-desc {
      grid-column: 3;
      grid-row: 1;
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      color: rgb(var(--ptext));
    }
    .svc-price {
      grid-column: 3;
      grid-row: 2;
      justify-self: start;   /* sits under the description, keeping the ledger structure */
      margin-top: 10px;      /* extra air between the description and the price/status */
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
      color: rgb(var(--ptext));
    }
    /* hover — same treatment as the Process ledger: the hovered row stays lit,
       the others recede, its top rule lights up and the name glitches */
    .svc-row { transition: border-color 300ms ease; }
    .svc-row:hover { border-top-color: rgba(var(--ptext), 0.9); }
    .svc-row > * { transition: opacity 300ms ease; }
    .svc-col:hover .svc-row:not(:hover) > * { opacity: 0.3; }
    .svc-row:hover .svc-name { animation: linkGlitch 2s linear infinite; }

    /* availability indicator, right-aligned under the top price */
    .svc-status {
      grid-column: 3;
      grid-row: 3;
      justify-self: start;
      display: flex;
      align-items: center;
      gap: 7px;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 600;
      color: rgb(var(--ptext));
    }
    .svc-status { text-decoration: none; transition: color 240ms ease, opacity 300ms ease; }
    .svc-status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex: none;
      position: relative;
      top: -1px;            /* nudge up to sit level with the text */
      background: #2563eb;
      box-shadow: 0 0 8px 1px rgba(37, 99, 235, 0.7);
      animation: dotPulse 1.8s ease-in-out infinite;
      transition: box-shadow 240ms ease, transform 240ms ease;
    }
    /* hover: dot lights up like the hero status */
    .svc-status:hover { color: #2563eb; }
    .svc-status:hover .svc-status-dot {
      animation: none;
      transform: scale(1.15);
      box-shadow:
        0 0 6px 2px rgba(37, 99, 235, 1),
        0 0 16px 5px rgba(37, 99, 235, 0.9),
        0 0 30px 10px rgba(37, 99, 235, 0.55);
    }

    /* websites: stays a black block through the whole scroll, never inverts */
    .svc-web {
      display: flex;
      flex-direction: column;
      background: #050505;
      color: #ffffff;
      padding: 48px 30px;
    }
    .svc-web-label { font-size: 14px; font-weight: 600; color: #ffffff; margin-bottom: 22px; }
    .svc-web-lead {
      margin: 0;
      font-size: clamp(19px, 1.7vw, 22px);   /* same as the svc-name headings */
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.01em;
      color: #ffffff;
    }
    .svc-web-desc {
      margin: 14px 0 0;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      color: #ffffff;
    }
    .svc-web-price { padding-top: 22px; font-size: 14px; font-weight: 600; color: #ffffff; }
    /* availability indicator on the black block, same blue dot as the hero/Shopify rows */
    .svc-web-status {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-top: 8px;   /* same price → status gap as the Shopify rows (their row-gap) */
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
    }

    /* trusted-by marquee inside the black block, logos fading out at the edges;
       the deep top pad keeps generous air above it, which also stretches the
       height-matched Shopify rows on the left */
    .svc-web-trust { margin-top: auto; padding-top: 100px; }
    .svc-trust-label { font-size: 14px; font-weight: 600; color: #ffffff; margin-bottom: 16px; }
    .marquee {
      position: relative;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
              mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
    }
    .marquee-track {
      display: flex;
      align-items: center;
      width: max-content;
      animation: marquee 24s linear infinite;
    }
    .marquee-track img {
      height: 48px;
      width: auto;
      flex: none;
      margin-right: 56px;
      filter: invert(1);
      opacity: 0.8;
    }
    /* RGB-split flicker, applied (via JS) only while a logo crosses the centre */
    .marquee-track img.is-glitch { animation: logoGlitch 0.28s linear 2; }
    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    @keyframes logoGlitch {
      0%   { transform: translate(0, 0);    filter: invert(1); opacity: 0.85; }
      25%  { transform: translate(-2px, 0); filter: invert(1) drop-shadow(2px 0 #ff0048) drop-shadow(-2px 0 #00e5ff); opacity: 0.6; }
      50%  { transform: translate(2px, 0);  filter: invert(1) drop-shadow(-2px 0 #ff0048) drop-shadow(2px 0 #00e5ff); opacity: 0.95; }
      75%  { transform: translate(-1px, 0); filter: invert(1) drop-shadow(1px 0 #ff0048) drop-shadow(-1px 0 #00e5ff); opacity: 0.65; }
      100% { transform: translate(0, 0);    filter: invert(1); opacity: 0.85; }
    }

    /* ── Process teaser ──────────────────────────────────────────────── */
    /* starts light (continues Services), JS inverts bg + text to black on scroll */
    .process {
      position: relative;
      z-index: 3;
      height: auto;
      min-height: 100svh;
      overflow: visible;
      justify-content: flex-start;
      padding: 100px 0;
      background-color: rgb(var(--pbg));
      color: rgb(var(--ptext));
    }
    .process-inner { position: relative; z-index: 1; padding: 0 30px; }

    .process-head { margin: 0 0 72px; }   /* symmetric air around the divider (matches .proc-list padding-top) */
    .process .claim {
      grid-column: 2;
      grid-row: 1;
      color: rgb(var(--ptext));
      font-size: clamp(40px, 3.6vw, 50px);
      font-weight: 800;
      margin: 0;
    }
    .process-head .web-para {
      grid-column: 2;
      grid-row: 2;
      margin: 22px 0 0;
      max-width: 540px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      color: rgb(var(--ptext));
    }

    /* the five phases as a ledger: number | phase | description, hairlines
       between the rows; hovering one phase lifts it above the dimmed rest */
    .proc-list { border-bottom: none; }   /* the ledger ends open, no rule under Aftercare */
    .proc-item {
      display: grid;
      grid-template-columns: var(--col1) minmax(0, 1fr) minmax(0, 400px);   /* description hugs the right edge, capped at 400px */
      column-gap: 48px;
      align-items: baseline;
      padding: 20px 0;
      border-top: 1px solid rgba(var(--ptext), 0.07);   /* barely-there at rest, lights up on hover */
      transition: border-color 300ms ease;
    }
    .proc-item:hover { border-top-color: rgba(var(--ptext), 0.9); }   /* its top rule lights up */
    /* the other phases recede hard while one is hovered (children carry the dim,
       so it never fights the row's reveal animation) */
    .proc-item > * { transition: opacity 300ms ease; }
    .proc-list:hover .proc-item:not(:hover) > * { opacity: 0.3; }
    .proc-num {
      font-size: 14px;
      font-weight: 600;
      color: rgb(var(--ptext));
      font-variant-numeric: tabular-nums;
    }
    .proc-name {
      font-size: clamp(19px, 1.7vw, 22px);
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.1;
      color: rgb(var(--ptext));
    }
    /* hovering anywhere on the row glitches its phase name */
    .proc-item:hover .proc-name { animation: linkGlitch 2s linear infinite; }
    .proc-tail {
      display: block;
      margin-top: 5px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0;
      color: rgb(var(--ptext));
    }
    .proc-desc {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      color: rgb(var(--ptext));
    }

    /* rows reveal one after another (01, 02, 03…) */
    .proc-item { opacity: 0; transform: translateY(16px); }
    .reveal-scope.revealed .proc-item { animation: procReveal 720ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    @keyframes procReveal { to { opacity: 1; transform: translateY(0); } }
    .reveal-scope.revealed .ps-1 { animation-delay: 100ms; }
    .reveal-scope.revealed .ps-2 { animation-delay: 240ms; }
    .reveal-scope.revealed .ps-3 { animation-delay: 380ms; }
    .reveal-scope.revealed .ps-4 { animation-delay: 520ms; }
    .reveal-scope.revealed .ps-5 { animation-delay: 660ms; }

    @media (max-width: 1100px) {
      .beyond-foot { gap: 90px; }
    }

    /* ── Services mid-width (≤1300px): labels hop above their headings ──── */
    @media (max-width: 1300px) {
      /* give the featured black block a larger share as the layout narrows */
      .svc-cols { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }

      /* head: eyebrow above the heading */
      .services-head { display: block; }
      .services-head .sec-eyebrow { align-self: auto; margin-bottom: 18px; }

      /* rows: tag above the name; price + status stay right-aligned */
      .svc-row {
        grid-template-columns: 1fr auto;
        column-gap: 40px;
        row-gap: 6px;
        align-content: start;
        min-height: 0;
        padding: 24px 0;
      }
      .svc-tag { grid-column: 1 / -1; grid-row: 1; align-self: auto; margin-bottom: 6px; }
      .svc-name { grid-column: 1; grid-row: 2; white-space: normal; }
      .svc-price { grid-column: 2; grid-row: 2; }
      .svc-desc { grid-column: 1; grid-row: 3; }
      .svc-status { grid-column: 2; grid-row: 3; }
    }

    /* ── Mobile (≤800px) ─────────────────────────────────────────────── */
    @media (max-width: 800px) {
      .hero-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 48px;
        padding-left: 20px;
        padding-right: 20px;
      }
      .hero-bottom > div { width: 100%; }
      .hero-right { max-width: none; }
      .claim { font-size: 64px; }
      .site-header { padding-left: 20px; padding-right: 20px; }

      .websites { padding: 50px 0 60px; }
      .beyond-block {
        flex-direction: column;
        min-height: 0;
        padding: 150px 20px 30px;    /* big top whitespace above headline (+50 section = 200) */
      }
      .beyond-block::after { left: 20px; right: 20px; }
      .beyond-divider-v { display: none; }

      /* left column: headline, text, button stacked */
      .beyond-left {
        padding: 0;
        gap: 30px;
        justify-content: flex-start;
      }

      /* divider line between the two stacks, 30px above and below */
      .beyond-right {
        padding-left: 0;
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid rgba(0, 0, 0, 0.18);
      }
      .beyond-right-head { padding: 0; }
      .beyond-logo { padding: 100px 0; min-height: 56px; }   /* reserve the logo row so client-logo swaps don't shift layout (CLS) */
      .beyond-divider-h { margin-left: 0; }
      /* keep the foot as two columns (desc left, toggle right) */
      .beyond-foot { padding: 30px 0 0 0; gap: 20px; }
      /* reserve height for the tallest rotating highlight so the page below
         doesn't jump as 2-line and 3/4-line descriptions swap */
      .case-hl-desc { min-height: 7em; }
      /* more breathing room above/below the big number (~+30%) */
      .case-hl { padding-top: 62px; padding-bottom: 62px; }

      .websites .claim { font-size: 40px; }

      /* case banner: portrait on mobile */
      .case-window { aspect-ratio: 3 / 4; }
      .case-slide.is-desktop-only { display: none; }
      .case-slide.is-mobile-only { display: block; }
      .case-body .beyond-block { min-height: 0; }   /* stack naturally on mobile */

      .services { padding: 80px 0; }
      .services-inner { padding: 0 20px; }

      /* heads stack on mobile: eyebrow above the heading, full width */
      .services-head, .process-head { display: block; }
      .services-head { margin-bottom: 56px; }
      .sec-eyebrow { margin-bottom: 24px; }   /* stacked: restore gap above the heading */
      .services .claim { font-size: 40px; }   /* keep the heading large on mobile */
      .services-head .web-para { max-width: none; }

      .svc-cols { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
      .svc-col { display: block; }            /* no height-matching when stacked */
      .svc-row {
        grid-template-columns: 1fr;   /* single column: eyebrow → name → desc → price → status */
        column-gap: 0;
        row-gap: 0;
        align-items: start;
        align-content: start;
        flex: none;
        min-height: 0;
        padding: 40px 0;   /* unified row padding with the Process table */
      }
      /* no closing line on the last row — the black block follows anyway */
      .svc-col .svc-row:last-child { border-bottom: none; padding-bottom: 8px; }
      .svc-tag  { grid-column: 1; grid-row: 1; align-self: start; margin: 0 0 8px; }   /* eyebrow above the name */
      .svc-name { grid-column: 1; grid-row: 2; white-space: normal; }
      .svc-desc { grid-column: 1; grid-row: 3; margin-top: 8px; max-width: none; }
      /* price then status, each on its own line below the description */
      .svc-price  { grid-column: 1; grid-row: 4; justify-self: start; margin-top: 28px; }
      .svc-status { grid-column: 1; grid-row: 5; justify-self: start; margin-top: 8px; }
      /* touch devices: no row-dim on tap (sticky :hover dimmed the rest) — keep all rows lit */
      .svc-col:hover .svc-row:not(:hover) > *,
      .proc-list:hover .proc-item:not(:hover) > * { opacity: 1; }
      .svc-web { padding: 40px 28px 44px; min-height: 420px; }
      .svc-web-trust { padding-top: 60px; }   /* less air when stacked, no height-matching */

      /* process: each ledger row stacks its three cells */
      .process { padding: 80px 0; }
      .process-inner { padding: 0 20px; }
      .process-head { margin-bottom: 40px; }
      .proc-item { grid-template-columns: 1fr; row-gap: 8px; padding: 40px 0; }   /* unified row padding with Made to measure */
      .proc-desc { max-width: none; }
    }

    /* ── Reduced motion ──────────────────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      .split-words, .reveal { opacity: 1; }
      .word { opacity: 1; filter: none; transform: none; animation: none; }
      .claim .line-inner { transform: none; animation: none; }
      .case-intro-title .line-inner { transform: none; filter: none; opacity: 1; transition: none; }
      .case-intro-logo { opacity: 1; transform: none; filter: none; transition: none; }
      .case-slide.is-first-shot img { transform: none; filter: none; transition: none; }
      .case-intro-phase:not(.is-shown) { opacity: 0; }   /* phases swap as a hard cut */
      .hero-image, .status-dot, .marquee-track, .marquee-track img { animation: none; }
      .beyond-right.glitching .beyond-client,
      .beyond-right.glitching .beyond-desc,
      .beyond-right.glitching .beyond-link,
      .beyond-right.glitching .beyond-logo img { animation: none; }
      .beyond-link:hover .beyond-link-text { animation: none; }
      .beyond-link-ico { width: 13px; margin-left: 7px; opacity: 1; }
      .beyond-link:hover .beyond-link-ico { animation: none; }
      .footer-cta-claim, .footer-mail { animation: none; }
      .proc-item { opacity: 1; transform: none; animation: none; }
    }

    /* ── Footer reveal ───────────────────────────────────────────────── */
    /* the page scrolls up and uncovers the footer pinned behind it (inverse hero) */
    .page { position: relative; z-index: 1; background: #050505; }
    .site-header img { height: 46px; width: auto; display: block; transition: opacity 240ms ease, transform 140ms cubic-bezier(0.16, 1, 0.3, 1); }
    /* glitch on the S mark while hovered; transform-only, so it never fights
       the scroll-driven invert filter */
    .site-header a:hover img { animation: linkGlitch 2s linear infinite; }
    .site-header a:active img { transform: scale(0.92); }   /* logo press feedback */
    .carousel-toggle { transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1); }
    .carousel-toggle:active { transform: scale(0.95); }
    .contact-close:active { transform: scale(0.88); }

    .site-footer {
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 0;               /* behind .page, revealed as content scrolls up */
      background: #050505;      /* true black base under the gradient field */
      color: #ffffff;
      padding: 80px 30px 36px;
      overflow: hidden;
    }
    /* fullscreen liquid gradient behind the footer content (monopo-style):
       blue / black / white gradients swirl very slowly across the whole footer,
       drawn on a small canvas and upscaled, so the soft blur comes free */
    .footer-orb {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .footer-orb canvas { display: block; width: 100%; height: 100%; }
    /* no grain — the field runs clean, same as the hero */
    .footer-inner { position: relative; z-index: 1; }

    /* CTA: its own centred section */
    .footer-cta-block {
      text-align: center;
      padding-top: 80px;        /* extra air above the headline */
      margin-bottom: 96px;      /* gap before the columns */
    }
    .footer-cta-claim {
      margin: 0;
      font-size: clamp(28px, 3vw, 48px);   /* same scale as "Singular online presence" */
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.02em;
      color: #ffffff;
    }
    .cta-swap { display: inline-block; }
    .cta-swap.is-glitching { animation: glitchSwap 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
    .footer-mail {
      display: inline-block;
      margin: 0;
      font-size: clamp(28px, 3vw, 48px);   /* same size as the claim, right beneath it */
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.02em;
      color: #ffffff;
      text-decoration: none;
      position: relative;
    }
    .footer-mail::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: -10px;
      height: 3px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .footer-mail:hover::after { transform: scaleX(1); }   /* underline only, no colour change */
    /* headline and email glitch together, on the same tick (see main.js) */
    .footer-mail.is-glitching { animation: glitchSwap 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }

    /* columns: about on the left, legal + contact grouped on the right */
    .footer-cols {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 56px;
      flex-wrap: wrap;
      margin-bottom: 128px;
    }
    .footer-about { flex: 0 1 360px; }
    .footer-right { display: flex; gap: 80px; flex-wrap: wrap; }

    .footer-about-text {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      color: #ffffff;
    }
    .footer-socials { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 34px; }
    .footer-social {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
      text-decoration: none;
      transition: opacity 200ms ease;
    }
    .footer-social:hover { opacity: 0.6; }
    .footer-social svg { width: 18px; height: 18px; flex: none; }

    /* column heading: same treatment as the section eyebrows (Services / Shopify) */
    .footer-col-label {
      margin: 0 0 26px;         /* gap to the content, larger than the text line-height below */
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0;
      text-transform: uppercase;
      color: #ffffff;
    }
    .footer-col p,
    .footer-col a,
    .footer-col address {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;         /* tighter than the label gap, so the heading stays separated */
      font-style: normal;
      color: #ffffff;
    }
    .footer-col a { display: block; text-decoration: none; transition: opacity 200ms ease; }
    .footer-col a:hover { opacity: 0.6; }
    /* country line with little SK + EU flags */
    .addr-country { display: inline-flex; align-items: center; gap: 6px; }
    .addr-country .flag {
      width: 18px; height: 12px;
      flex: none;
      border-radius: 2px;
      overflow: hidden;
      display: inline-block;
    }

    /* bottom bar: all-caps, 11px, white, no rule */
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px 28px;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #ffffff;
    }
    .footer-bottom-links { display: flex; gap: 24px; flex-wrap: wrap; }
    .footer-bottom a,
    .footer-bottom button {
      color: inherit;
      text-decoration: none;
      background: none;
      border: none;
      font: inherit;
      text-transform: inherit;
      letter-spacing: inherit;
      cursor: pointer;
      padding: 0;
      transition: opacity 200ms ease;
    }
    .footer-bottom a:hover,
    .footer-bottom button:hover { opacity: 0.6; }

    @media (max-width: 800px) {
      /* mobile footer is taller than the viewport, so the JS reveal falls back to
         normal flow anyway — declare it relative up front so the first paint matches
         and there is no fixed→relative layout shift (CLS) after the script runs */
      .site-footer { position: relative; padding: 80px 20px 36px; }
      .footer-cta-block { margin-bottom: 60px; }
      /* more breathing room between the stacked footer blocks on mobile */
      .footer-cols { gap: 64px; margin-bottom: 100px; }   /* socials → Legal */
      .footer-about { flex: 1 1 100%; }
      .footer-socials { margin-top: 48px; }               /* "Smash builds…" text → social links */
      .footer-right { gap: 64px; }                        /* Legal → Contact */
      .footer-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
    }

    /* ── Contact modal — blurs the whole page ────────────────────────── */
    .contact-modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 48px 30px;
      background: rgba(8, 8, 8, 0.72);
      -webkit-backdrop-filter: blur(18px) saturate(120%);
              backdrop-filter: blur(18px) saturate(120%);
    }
    .contact-modal.is-open { display: flex; }
    .contact-inner { width: min(720px, 100%); color: #ffffff; }
    .contact-top {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 32px;
    }
    .contact-headline {
      margin: 0;
      font-size: clamp(28px, 4vw, 52px);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: #ffffff;
    }
    .contact-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; }
    .contact-actions .btn-link { padding: 14px 15px; }
    .btn-sub { margin-left: 9px; font-weight: 500; opacity: 0.62; }
    .contact-bio {
      margin-top: 72px;
      max-width: 720px;
      display: flex;
      align-items: flex-start;
      gap: 28px;
    }
    .contact-bio-photo {
      width: 96px; height: 96px; flex: none;
      border-radius: 14px;
      object-fit: cover;
    }
    .contact-bio-body { display: flex; flex-direction: column; gap: 14px; }
    .contact-bio-text { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; color: #ffffff; }
    .contact-bio-socials { display: flex; gap: 28px; flex-wrap: wrap; }
    .contact-social {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 14px; font-weight: 600; color: #ffffff; text-decoration: none;
      transition: opacity 200ms ease;
    }
    .contact-social svg { width: 18px; height: 18px; flex: none; }
    .contact-social:hover { opacity: 0.6; }
    .contact-close {
      position: fixed;
      top: 24px; right: 30px;
      width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      background: none; border: none; color: #ffffff; cursor: pointer;
      transition: opacity 200ms ease, transform 200ms ease;
    }
    .contact-close svg { width: 24px; height: 24px; }
    .contact-close:hover { opacity: 0.6; transform: rotate(90deg); }

    @media (max-width: 800px) {
      /* match the site's 20px mobile gutter: content padding + close button */
      .contact-modal { padding: 48px 20px; }
      .contact-close { top: 20px; right: 20px; }
      /* two buttons side by side, each stacking its label over the number/email */
      .contact-actions { flex-direction: row; align-items: stretch; gap: 10px; width: 100%; }
      .contact-actions .btn-link { flex: 1 1 0; justify-content: center; text-align: center; padding: 14px 12px; }
      .contact-actions .btn-sub { display: block; margin-left: 0; margin-top: 4px; }
      /* a touch more contrast against the dark frosted backdrop */
      .contact-actions .btn-glass { background: rgba(255, 255, 255, 0.24); }
      .contact-actions .btn-glass:hover { background: rgba(255, 255, 255, 0.34); }
      .contact-bio { margin-top: 48px; }
      .contact-bio-photo { width: 72px; height: 72px; }
      /* socials: tighter vertical stack, pushed further from the bio text */
      .contact-bio-socials { flex-direction: column; gap: 10px; margin-top: 12px; }
    }

    /* ── Cookie consent — centred modal, dark frosted glass ──────────── */
    #cookie-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      -webkit-backdrop-filter: blur(4px);
              backdrop-filter: blur(4px);
      z-index: 69;
    }
    #cookie-banner {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: max-content;
      max-width: min(620px, calc(100vw - 40px));
      background: rgba(12, 12, 12, 0.72);   /* dark frosted glass so white text reads on any background */
      -webkit-backdrop-filter: blur(16px) saturate(140%);
              backdrop-filter: blur(16px) saturate(140%);
      color: #ffffff;
      border-radius: 16px;
      z-index: 70;
      padding: 32px 40px;
      display: none;
      text-align: center;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    }
    .cookie-text { margin: 0 0 24px; font-size: 14px; font-weight: 600; line-height: 1.6; color: #ffffff; }
    .cookie-learn-more {
      display: inline-block;
      margin-top: 6px;
      color: #ffffff;
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 3px;
      transition: text-decoration-color 0.15s ease;
    }
    .cookie-learn-more:hover { text-decoration: none; }
    .cookie-btns { display: flex; justify-content: center; gap: 10px; }
    /* both buttons are the site's standard .btn-link, identical (with arrow) */
    .cookie-btns .btn-link { justify-content: center; padding: 14px 22px; }

    @media (max-width: 800px) {
      #cookie-banner { padding: 28px 24px; }
      .cookie-btns { flex-direction: column; }
    }