/* ==========================================================================
   ECL DESIGN SYSTEM — Style C: Brutalist Editorial
   Locked 2026-04-22.

   This file is the SOURCE OF TRUTH for ECL styles.
   All prototypes and the final Next.js build must match these tokens.
   See brand/08_design_system.md for documentation + usage rules.
   ========================================================================== */


/* ── 1. TOKENS ────────────────────────────────────────────────────────────── */

:root {
  /* Color */
  --ecl-magenta:       #FE498A;  /* Primary accent. Links, highlights, emphasis. */
  --ecl-magenta-ink:   #D12E6E;  /* Hover / pressed state. */
  --ecl-magenta-deep:  #A01D54;  /* Deepest pink stop. */
  --ecl-gradient:      linear-gradient(135deg, #FE498A 0%, #D12E6E 60%, #A01D54 100%);  /* Pink → deeper pink. Used everywhere magenta appears. */
  --ecl-ink:           #111111;  /* Primary text. All headings, dark surfaces. */
  --ecl-muted:         #6B6B68;  /* Secondary text, labels, metadata. */
  --ecl-rule:          #D4D1CC;  /* Soft divider lines inside sections. */
  --ecl-bg:            #FAF8F5;  /* Page background. Warm off-white. */
  --ecl-cream:         #F2EFE8;  /* Inset surfaces: cards, quote section. */
  --ecl-white:         #FFFFFF;

  /* Type families */
  --ecl-serif:  'Instrument Serif', Georgia, serif;
  --ecl-sans:   'Geist', system-ui, -apple-system, sans-serif;
  --ecl-mono:   'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* Type scale (fluid — scales UP on big screens, but calmly).
     Read: clamp(mobile-min, fluid-middle, desktop-max). Max values tuned so
     the page looks premium-scaled at 1920+ without screaming at 4K. */
  --ecl-fs-xxl:  clamp(44px, 5vw, 104px);    /* Hero H1 */
  --ecl-fs-xl:   clamp(32px, 4vw, 80px);     /* H2 section heads */
  --ecl-fs-lg:   clamp(26px, 3vw, 52px);     /* Large quote */
  --ecl-fs-md:   clamp(22px, 1.8vw, 32px);   /* H3 */
  --ecl-fs-lead: clamp(18px, 1.5vw, 24px);   /* Lead paragraph */
  --ecl-fs-body: clamp(16px, 1vw, 18px);     /* Default body */
  --ecl-fs-sm:   clamp(14px, 0.9vw, 16px);   /* Supporting text */
  --ecl-fs-xs:   13px;                       /* Small metadata — stays fixed */
  --ecl-fs-mono: 11px;                       /* § labels, captions — stays fixed */

  /* Spacing (base 8) — fluid from small screens up. */
  --ecl-sp-1:  8px;
  --ecl-sp-2:  16px;
  --ecl-sp-3:  24px;
  --ecl-sp-4:  clamp(24px, 2vw, 40px);
  --ecl-sp-5:  clamp(40px, 3.5vw, 64px);
  --ecl-sp-6:  clamp(56px, 5vw, 96px);
  --ecl-sp-7:  clamp(72px, 7vw, 160px);    /* Standard section vertical padding */
  --ecl-sp-8:  clamp(96px, 9vw, 200px);

  /* Layout */
  --ecl-container:        1920px;    /* Outer frame — wide, confident. */
  --ecl-container-narrow: 1280px;    /* For text-heavy sections. */
  --ecl-gutter:           clamp(20px, 3vw, 64px);

  /* Radius — BRUTALIST: nothing is rounded */
  --ecl-radius: 0;

  /* Borders */
  --ecl-border:       1px solid var(--ecl-ink);
  --ecl-border-thick: 2px solid var(--ecl-ink);
  --ecl-border-soft:  1px solid var(--ecl-rule);

  /* Shadows — none. Brutalist editorial has no shadows. */

  /* Ink-surface text (ticker, nav CTA, CTA banner, reviews, footer): rgb triple so rgba() variants work */
  --ecl-on-ink-rgb: 255, 255, 255;
  color-scheme: light;

  /* Transitions */
  --ecl-transition: 0.15s ease;                             /* micro UI */
  --ecl-transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* buttons + larger motion */
}

/* ── DARK THEME ────────────────────────────────────────────────────────────
   Default theme (theme.js sets data-theme before first paint; "light" is the
   stored opt-out). Only the surface/ink tokens change — every rule that says
   `background: var(--ecl-ink); color: var(--ecl-bg)` inverts on its own.
   Client-site frames keep a white viewport: that is the client's page, not ours.
   ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --ecl-ink:    #F2EFE8;   /* text, borders, inverted panels */
  --ecl-muted:  #9E9B95;
  --ecl-rule:   #33312D;
  --ecl-bg:     #0F0F0E;   /* page */
  --ecl-cream:  #171614;   /* inset surfaces */
  --ecl-white:  #1C1B19;   /* "white" surfaces become the deepest dark */
  --ecl-on-ink-rgb: 15, 15, 14;
  color-scheme: dark;
}
:root[data-theme="dark"] .shot,
:root[data-theme="dark"] .cs-next-preview img { filter: brightness(.92); }   /* light screenshots glow less on dark */

/* theme toggle in the nav */
.nav-actions { display: inline-flex; align-items: center; gap: 12px; }
.theme-toggle {
  width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ecl-ink); background: transparent; color: var(--ecl-ink); cursor: pointer;
  font-family: var(--ecl-mono); font-size: 15px; line-height: 1; transition: var(--ecl-transition);
}
.theme-toggle:hover { background: var(--ecl-magenta); border-color: var(--ecl-magenta); color: #fff; }
.theme-toggle::before { content: "\263E"; }                      /* ☾ — click for dark */
:root[data-theme="dark"] .theme-toggle::before { content: "\2600"; }   /* ☀ — click for light */



/* ── 1B. BRAND DUST (scroll-linked gradient blur) ────────────────────────
   Fixed-position blurred gradient orb that drifts across the viewport as you
   scroll. Uses native scroll-driven animations (supported in all modern
   browsers as of 2025). Subtle by design — low opacity, heavy blur, multiply
   blend mode tints content without obscuring it.
   ──────────────────────────────────────────────────────────────────────── */

.brand-dust {
  position: fixed;
  pointer-events: none;
  z-index: 0;                    /* BEHIND content — just a background tint */
  top: 0;
  left: 0;
  width: clamp(360px, 55vw, 1100px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ecl-gradient);
  filter: blur(140px);
  opacity: 0.4;                  /* subtle — doesn't grab attention */
  will-change: transform;
  animation: ecl-drift linear both;
  animation-timeline: scroll(root);
}

@keyframes ecl-drift {
  0%   { transform: translate(-10vw,  10vh) scale(1);   }
  20%  { transform: translate( 55vw,  15vh) scale(1.1); }
  40%  { transform: translate( 65vw,  55vh) scale(0.85);}
  60%  { transform: translate(  5vw,  70vh) scale(1.2); }
  80%  { transform: translate( 45vw,  35vh) scale(0.95);}
  100% { transform: translate( 15vw,  85vh) scale(0.8); }
}

@keyframes ecl-drift-2 {
  0%   { transform: translate( 70vw,  5vh) scale(1);    }
  25%  { transform: translate( 15vw, 40vh) scale(1.15); }
  50%  { transform: translate( 50vw, 70vh) scale(0.9);  }
  75%  { transform: translate( 80vw, 40vh) scale(1.1);  }
  100% { transform: translate( 20vw, 10vh) scale(0.85); }
}

/* Fallback for browsers without scroll-driven animations. */
@supports not (animation-timeline: scroll()) {
  .brand-dust {
    animation: ecl-breathe 20s ease-in-out infinite alternate;
  }
  @keyframes ecl-breathe {
    from { transform: translate(10vw, 20vh) scale(1);   }
    to   { transform: translate(55vw, 55vh) scale(1.15);}
  }
}

/* Respect reduced motion — no animation, just static placement. */
@media (prefers-reduced-motion: reduce) {
  .brand-dust { animation: none; transform: translate(25vw, 30vh); }
}

/* Make sure all page content stacks ABOVE the dust. */
.ticker, .nav, section, footer, main { position: relative; z-index: 1; }
.nav, .ticker { z-index: 10; }   /* nav stays above sections on scroll */


/* ── 1C. MOUSE-TRACKING BUTTON SPOTLIGHT ─────────────────────────────────
   Buttons get a subtle gradient spotlight that follows the cursor. Uses
   CSS custom properties updated by a tiny JS listener (see c.html).
   ──────────────────────────────────────────────────────────────────────── */

.btn {
  --btn-mx: 50%;
  --btn-my: 50%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    240px circle at var(--btn-mx) var(--btn-my),
    rgba(254, 73, 138, 0.45),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.2s;
  z-index: -1;
  pointer-events: none;
}
.btn:hover::before { opacity: 1; }


/* ── 2. RESET ─────────────────────────────────────────────────────────────── */

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

html {
  background: var(--ecl-bg);
  color: var(--ecl-ink);
  font-family: var(--ecl-sans);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;           /* stops hover-previews from making the page scroll sideways */
}
body {
  background: transparent;   /* let brand-dust show through */
  color: inherit;
  font: inherit;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }


/* ── 3. TYPOGRAPHY ─────────────────────────────────────────────────────────
   RULE: serif for all headings (h1, h2, h3). Sans for body + UI. Mono for
   micro-labels (§ 01, timestamps, clients, captions).
   ──────────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ecl-serif);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ecl-ink);
}

h1 { font-size: var(--ecl-fs-xxl); line-height: 0.95; letter-spacing: -0.035em; margin-bottom: var(--ecl-sp-4); }
h2 { font-size: var(--ecl-fs-xl);  line-height: 1;    letter-spacing: -0.025em; }
h3 { font-size: var(--ecl-fs-md);  line-height: 1.1;  letter-spacing: -0.01em;  margin-bottom: var(--ecl-sp-2); }

h1 em, h2 em, h3 em {
  background: var(--ecl-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
  padding: 0 .12em 0 .04em; margin: 0 -.12em 0 -.04em;   /* background-clip: text clips to the inline box — italic glyphs (a trailing "?" or "y") overhang it and were cut; the padding widens the box, the margin keeps the centring */
}

/* Gradient-text group — any element that previously used solid magenta for text
   now gets the gradient via background-clip. Thin 2px borders keep solid magenta
   (gradient not perceptible at that scale). */
.logo em,
.problem-item .num,
.stat-num em,
.service-row .tier-name em,
.quote-mark,
.quote-block blockquote em,
.footer-brand h4 em,
.cta-meta .big em,
.bg-dark .label,
.cta-section .label,
.ecl-gradient-text {
  background: var(--ecl-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Footer link hover snaps to gradient text (nav links now use button hover). */
.footer-col a:hover {
  background: var(--ecl-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

p { font-size: var(--ecl-fs-body); line-height: 1.55; color: var(--ecl-ink); }
p.lead { font-size: var(--ecl-fs-lead); line-height: 1.4; max-width: 760px; margin-bottom: var(--ecl-sp-5); }


/* Labels — monospace micro-type. Used everywhere for editorial signal. */
.label,
.ecl-label {
  font-family: var(--ecl-mono);
  font-size: var(--ecl-fs-mono);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ecl-ink);
}
.label-muted,
.ecl-label--muted { color: var(--ecl-muted); }


/* Highlight — gradient block behind inline text. */
.highlight {
  background: var(--ecl-gradient);
  color: var(--ecl-white);
  padding: 0 8px;
  display: inline-block;
  transform: skew(-3deg);
}

/* Highlight line — gradient underline under inline text. Uses background-image
   instead of border-bottom so the gradient actually renders. */
.highlight-line {
  background-image: var(--ecl-gradient);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 100%;
  padding-bottom: 4px;
}


/* ── 4. BUTTONS ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border: var(--ecl-border-thick);
  background: var(--ecl-ink);
  color: var(--ecl-white);
  font-family: var(--ecl-sans);
  font-size: var(--ecl-fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--ecl-radius);
  transition:
    background var(--ecl-transition-smooth),
    border-color var(--ecl-transition-smooth),
    color var(--ecl-transition-smooth),
    transform var(--ecl-transition-smooth);
  cursor: pointer;
}

.btn:hover {
  background: var(--ecl-gradient);
  border-color: var(--ecl-magenta);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--ecl-ink);
}

/* Animated arrow inside any CTA link / button.
   Wrap trailing "→" in <span class="btn-arrow">→</span> and the arrow
   will translate right on hover of any parent <a> or <button>. */
.btn-arrow {
  display: inline-block;
  transition: transform var(--ecl-transition-smooth);
  will-change: transform;
}
a:hover .btn-arrow,
button:hover .btn-arrow {
  transform: translateX(6px);
}

.btn-ghost:hover {
  background: var(--ecl-ink);
  color: var(--ecl-white);
  border-color: var(--ecl-ink);
  transform: translateY(-1px);
}


/* ── 5. LAYOUT PRIMITIVES ───────────────────────────────────────────────── */

.container {
  max-width: var(--ecl-container);
  margin: 0 auto;
  padding: 0 var(--ecl-gutter);
}

.container-narrow {
  max-width: var(--ecl-container-narrow);
  margin: 0 auto;
  padding: 0 var(--ecl-gutter);
}

section {
  padding: var(--ecl-sp-7) 0;
  border-bottom: var(--ecl-border);
}


/* Section head — flex row with title on left, § number on right. */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--ecl-sp-3);
  border-bottom: var(--ecl-border);
  margin-bottom: var(--ecl-sp-6);
}
.section-head .num {
  font-family: var(--ecl-mono);
  font-size: var(--ecl-fs-xs);
  color: var(--ecl-muted);
  letter-spacing: 0.05em;
}


/* ── 6. NAV + TICKER ─────────────────────────────────────────────────────── */

.ticker {
  border-bottom: var(--ecl-border);
  padding: 10px 0;
  background: var(--ecl-ink);
  color: var(--ecl-bg);
  font-family: var(--ecl-mono);
  font-size: var(--ecl-fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ticker .container { display: flex; justify-content: space-between; }
.ticker span {
  background: var(--ecl-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.nav {
  padding: 16px 0;
  border-bottom: var(--ecl-border);
  background: var(--ecl-bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav .container { display: flex; align-items: center; justify-content: space-between; }

.logo {
  font-family: var(--ecl-serif);
  font-size: clamp(36px, 3.5vw, 52px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--ecl-ink);
}
.logo em { color: var(--ecl-magenta); font-style: italic; }

.nav-links { display: flex; gap: clamp(20px, 2.5vw, 36px); }

/* Nav links — clean text with an animated gradient underline on hover */
.nav-links a {
  display: inline-block;
  position: relative;
  padding: 6px 2px;
  border: none;
  background: transparent;
  color: var(--ecl-ink);
  font-family: var(--ecl-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: color var(--ecl-transition);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 2px;
  background: var(--ecl-gradient);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-links a:hover { color: var(--ecl-ink); }
.nav-links a:hover::after { transform: scaleX(1); }

/* Primary CTA in nav — refined hairline button, gradient fill on hover */
.nav-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border: 1px solid var(--ecl-ink);
  background: var(--ecl-ink);
  color: var(--ecl-bg);
  font-family: var(--ecl-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition:
    background var(--ecl-transition-smooth),
    border-color var(--ecl-transition-smooth),
    transform var(--ecl-transition-smooth);
}
.nav-meta:hover {
  background: var(--ecl-gradient);
  border-color: transparent;
  transform: translateY(-1px);
}


/* ── 7. CARDS / MEDIA PLACEHOLDERS ───────────────────────────────────────── */

.card-work {
  padding-top: var(--ecl-sp-4);
  border-top: var(--ecl-border-thick);
}

.media {
  aspect-ratio: 16 / 10;
  background: var(--ecl-cream);
  border: var(--ecl-border-soft);
  margin-bottom: var(--ecl-sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ecl-serif);
  font-style: italic;
  font-size: 28px;
  color: var(--ecl-muted);
}


/* ── 8. QUOTE ────────────────────────────────────────────────────────────── */

.quote-section { background: var(--ecl-cream); }

.quote-mark {
  font-family: var(--ecl-serif);
  font-size: 160px;
  line-height: 0.6;
  color: var(--ecl-magenta);
  font-style: italic;
  margin-bottom: -20px;
}

.quote-block blockquote {
  font-family: var(--ecl-serif);
  font-size: var(--ecl-fs-lg);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--ecl-sp-5);
}
.quote-block blockquote em { color: var(--ecl-magenta); }

.quote-author {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--ecl-sp-3);
  border-top: var(--ecl-border);
}
.quote-author .name { font-family: var(--ecl-serif); font-size: 22px; }
.quote-author .role {
  font-family: var(--ecl-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ecl-muted);
}


/* ── 9. STATS ────────────────────────────────────────────────────────────── */

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 1200px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
.stat {
  padding: 0 var(--ecl-sp-4);
  border-right: var(--ecl-border);
}
.stat:last-child { border-right: none; padding-right: 0; }
.stat:first-child { padding-left: 0; }

.stat-num {
  font-family: var(--ecl-serif);
  font-size: clamp(72px, 10vw, 160px);
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
  margin-bottom: var(--ecl-sp-1);
  padding-top: 0.15em;
}
.stat-num em { color: var(--ecl-magenta); font-style: italic; }


/* ── 10. SERVICES TABLE ──────────────────────────────────────────────────── */

.services-table { width: 100%; border-top: var(--ecl-border-thick); }
.service-row {
  display: grid;
  grid-template-columns: 80px 1fr 200px 180px 160px;
  align-items: center;
  padding: var(--ecl-sp-4) 0;
  border-bottom: var(--ecl-border-soft);
  transition: background var(--ecl-transition);
}
.service-row:hover { background: var(--ecl-cream); }
.service-row.featured { background: var(--ecl-cream); border-bottom-color: var(--ecl-ink); }
.service-row .tier-num { font-family: var(--ecl-mono); font-size: var(--ecl-fs-xs); color: var(--ecl-muted); }
.service-row .tier-name { font-family: var(--ecl-serif); font-size: 32px; line-height: 1; }
.service-row .tier-name em {
  color: var(--ecl-magenta);
  font-style: italic;
  font-size: 14px;
  font-family: var(--ecl-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 12px;
}
.service-row .tier-desc { font-size: 14px; color: var(--ecl-muted); }
.service-row .tier-price { font-family: var(--ecl-serif); font-size: 36px; text-align: right; }
.service-row .tier-action { text-align: right; }
.service-row .tier-action a {
  font-family: var(--ecl-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ecl-ink);
  border-bottom: 2px solid var(--ecl-magenta);
  padding-bottom: 2px;
}


/* ── 11. FOOTER ──────────────────────────────────────────────────────────── */

/* Scope to the page-level footer only — don't bleed into <footer> elements
   inside cards / figures / articles. */
body > footer {
  padding: var(--ecl-sp-6) 0 var(--ecl-sp-4);
  background: var(--ecl-bg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--ecl-sp-5);
  padding-top: var(--ecl-sp-5);
  border-top: var(--ecl-border);
}
.footer-brand h4 {
  font-family: var(--ecl-serif);
  font-size: 48px;
  margin-bottom: var(--ecl-sp-2);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.footer-brand h4 em { color: var(--ecl-magenta); font-style: italic; }
.footer-brand p { font-size: 14px; color: var(--ecl-muted); }

.footer-col h4 {
  font-family: var(--ecl-mono);
  font-size: var(--ecl-fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ecl-muted);
  margin-bottom: var(--ecl-sp-2);
  font-weight: 500;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col a {
  font-size: var(--ecl-fs-sm);
  color: var(--ecl-ink);
  transition: color var(--ecl-transition);
}
.footer-col a:hover { color: var(--ecl-magenta); }

.footer-bottom {
  margin-top: var(--ecl-sp-5);
  padding-top: var(--ecl-sp-3);
  border-top: var(--ecl-border-soft);
  font-family: var(--ecl-mono);
  font-size: var(--ecl-fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ecl-muted);
  display: flex;
  justify-content: space-between;
}


/* ── 12. GRID + CONTEXT HELPERS ─────────────────────────────────────────── */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ecl-sp-5); }

.cell-divider {
  padding: var(--ecl-sp-4) var(--ecl-sp-4) var(--ecl-sp-4) 0;
  border-right: var(--ecl-border);
}
.cell-divider:last-child { border-right: none; padding-right: 0; }
.cell-divider:not(:first-child) { padding-left: var(--ecl-sp-4); }


/* Dark section — inverts ink colors. Used for CTA. */
.bg-dark {
  background: var(--ecl-ink);
  color: var(--ecl-bg);
  border-bottom: none;
}
.bg-dark h2, .bg-dark h3 { color: var(--ecl-bg); }
.bg-dark .label { color: var(--ecl-magenta); }


/* ── 12A. HERO ───────────────────────────────────────────────────────────── */

.hero { padding: 80px 0 100px; border-bottom: var(--ecl-border); position: relative; }

/* Top row of hero — text + creative slot side by side */
.hero-main {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--ecl-sp-6);
  align-items: stretch;         /* creative fills the text column's height */
  margin-bottom: var(--ecl-sp-6);
}
.hero-text { display: flex; flex-direction: column; justify-content: space-between; gap: var(--ecl-sp-4); }
.hero-text h1 { margin-bottom: var(--ecl-sp-3); }
.hero-text .lead { margin-bottom: var(--ecl-sp-4); }

/* Creative slot fills the left column's height — no aspect ratio forcing. */
.hero-main .hero-visual {
  margin-top: 0;
  aspect-ratio: auto;           /* let the grid determine height */
  min-height: 420px;
  max-height: 720px;
  width: 100%;
  height: 100%;
}

.hero-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--ecl-sp-2);
  border-bottom: var(--ecl-border);
  margin-bottom: var(--ecl-sp-5);
}
.hero-head .date {
  font-family: var(--ecl-mono);
  font-size: var(--ecl-fs-xs);
  color: var(--ecl-muted);
}

.hero-cta {
  display: flex;
  gap: var(--ecl-sp-2);
  flex-wrap: wrap;
  margin-bottom: 80px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--ecl-sp-6);
  /* border-top removed — hero-stats above already provides the divider */
}
.hero-grid .meta-col {
  max-width: 560px;
}
.hero-grid .meta-col .label { display: block; margin-bottom: var(--ecl-sp-1); }
.hero-grid .meta-col p {
  font-size: var(--ecl-fs-sm);
  margin-bottom: var(--ecl-sp-3);
  line-height: 1.5;
}
.hero-grid .logos h4 {
  font-family: var(--ecl-mono);
  font-size: var(--ecl-fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ecl-muted);
  margin-bottom: var(--ecl-sp-3);
  font-weight: 500;
}
.hero-grid .logos ul {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Client link — hover reveals a preview screenshot */
.client-link {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: var(--ecl-border-soft);
  font-family: var(--ecl-serif);
  font-size: clamp(24px, 2vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  transition: padding var(--ecl-transition);
  cursor: pointer;
}
.client-link:last-child { border-bottom: none; }

.client-link .name {
  position: relative;             /* anchor for the hover preview */
  transition: transform 0.25s ease;
}
.client-link .arrow {
  font-family: var(--ecl-mono);
  font-size: var(--ecl-fs-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ecl-muted);
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.25s ease;
}

.client-link:hover {
  padding-left: var(--ecl-sp-3);
}
.client-link:hover .name {
  background: var(--ecl-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.client-link:hover .arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Preview image — floats right next to the client NAME text
   (anchored to .name, not the full-width link row). */
.client-preview {
  position: absolute;
  left: calc(100% + var(--ecl-sp-3));
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  width: clamp(240px, 20vw, 340px);
  aspect-ratio: 16 / 10;
  background: var(--ecl-cream);
  border: var(--ecl-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ecl-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--ecl-muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 20;
  box-shadow: 0 20px 60px rgba(17,17,17,0.08);
  /* Inline children of .name should NOT inherit its gradient-on-hover. */
  background-clip: border-box;
  -webkit-text-fill-color: var(--ecl-muted);
}
.client-link:hover .name .client-preview {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Hide preview on narrower screens where it'd overflow the list column. */
@media (max-width: 1280px) {
  .client-preview { display: none; }
}


/* ── 12B. PROBLEM / STEPS GRIDS ─────────────────────────────────────────── */

.problem-grid,
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.problem-item {
  padding: var(--ecl-sp-4) var(--ecl-sp-4) var(--ecl-sp-4) 0;
  border-right: var(--ecl-border);
}
.problem-item:last-child { border-right: none; padding-right: 0; }
.problem-item:not(:first-child) { padding-left: var(--ecl-sp-4); }
.problem-item .num {
  font-family: var(--ecl-mono);
  font-size: var(--ecl-fs-xs);
  color: var(--ecl-magenta);
  margin-bottom: 40px;
  display: block;
  letter-spacing: 0.05em;
}
.problem-item p {
  color: var(--ecl-muted);
  font-size: var(--ecl-fs-sm);
  margin-top: 12px;
}

.step {
  padding: 40px var(--ecl-sp-4);
  border-right: var(--ecl-border);
}
.step:last-child { border-right: none; padding-right: 0; }
.step:first-child { padding-left: 0; }
.step-num {
  font-family: var(--ecl-mono);
  font-size: var(--ecl-fs-mono);
  color: var(--ecl-muted);
  letter-spacing: 0.05em;
  margin-bottom: var(--ecl-sp-4);
  text-transform: uppercase;
}
.step h3 { font-size: 40px; margin-bottom: var(--ecl-sp-2); }
.step p { color: var(--ecl-muted); font-size: var(--ecl-fs-sm); }


/* ── 12C. WORK — COVERFLOW SLIDER ────────────────────────────────────────
   Focused slider. Center card is big + sharp. Adjacent cards are smaller
   and blurred. Arrow buttons navigate. Click an adjacent card to focus it.
   Wraps around (loop). JS controls current index + CSS does the animation.
   ──────────────────────────────────────────────────────────────────────── */

.work-slider-wrap {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
  padding: var(--ecl-sp-6) 0;
}

/* 2026-09-19 (Rasul, screenshot on a tall monitor: "I don't like how this screen looks"): the card's height used to follow the WINDOW (64vh), so on a tall screen the media box went square and the
   blueprint (1600 × 855, `slice`) was cropped to the middle of the page — cut boxes, empty grid. Now the height follows the CARD: the slides stack in one grid cell (the track is as tall as the card),
   and the media box is locked to the blueprint's own ratio, so the whole page always shows, as on the Work rows. */
.work-slider-viewport {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 12px 0;   /* room for the neighbours' blur */
}

.work-slider-track {
  position: relative;
  display: grid;   /* every slide in the same cell; the tallest sets the height */
}

.work-slide {
  position: relative;
  grid-area: 1 / 1;
  justify-self: center;
  align-self: start;
  width: clamp(360px, 44vw, 720px);
  height: auto;
  padding: var(--ecl-sp-5);
  border: var(--ecl-border-thick);
  background: var(--ecl-bg);
  display: flex;
  flex-direction: column;

  --offset: 0;
  transform: translateX(calc(var(--offset) * 62%));
  scale: 0.76;
  filter: blur(8px);
  opacity: 0.45;
  z-index: 1;
  cursor: pointer;
  transition:
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    scale 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease;
}

.work-slide.is-active {
  scale: 1;
  filter: none;
  opacity: 1;
  z-index: 3;
  cursor: default;
}

.work-slide.is-far {
  opacity: 0;
  scale: 0.5;
  pointer-events: none;
  z-index: 0;
}

.work-slide .work-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--ecl-sp-3);
}
.work-slide .work-num {
  font-family: var(--ecl-mono);
  font-size: var(--ecl-fs-xs);
  color: var(--ecl-muted);
}
.work-slide .work-meta {
  font-family: var(--ecl-mono);
  font-size: var(--ecl-fs-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ecl-muted);
}

.work-slide .slide-media {
  flex: none;
  box-sizing: content-box;
  aspect-ratio: 1600 / 855;   /* the blueprint's own ratio (xray.js W × H) … */
  height: auto;
  padding: 0 0 30px;          /* … plus the 30px caption strip under it */
  background: var(--ecl-cream);
  border: var(--ecl-border-soft);
  margin-bottom: var(--ecl-sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ecl-serif);
  font-style: italic;
  font-size: clamp(22px, 1.8vw, 32px);
  color: var(--ecl-muted);
  min-height: 0;
}

.work-slide h3 {
  font-size: clamp(30px, 2.5vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--ecl-sp-2);
}

.work-slide p {
  color: var(--ecl-muted);
  font-size: var(--ecl-fs-sm);
  margin-bottom: var(--ecl-sp-3);
}

.work-slide .link {
  font-family: var(--ecl-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--ecl-magenta);
  padding-bottom: 2px;
  align-self: flex-start;
  margin-top: auto;
}


/* Arrow buttons */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(52px, 4.5vw, 76px);
  height: clamp(52px, 4.5vw, 76px);
  border: 2px solid var(--ecl-ink);
  background: var(--ecl-bg);
  color: var(--ecl-ink);
  border-radius: 0;
  font-family: var(--ecl-mono);
  font-size: clamp(18px, 1.4vw, 24px);
  cursor: pointer;
  z-index: 10;
  transition:
    background var(--ecl-transition-smooth),
    color var(--ecl-transition-smooth),
    border-color var(--ecl-transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-nav:hover {
  background: var(--ecl-gradient);
  color: var(--ecl-bg);
  border-color: var(--ecl-magenta);
}
.slider-nav:focus-visible {
  outline: 2px solid var(--ecl-magenta);
  outline-offset: 3px;
}
.slider-nav--prev { left: clamp(16px, 3vw, 48px); }
.slider-nav--next { right: clamp(16px, 3vw, 48px); }


/* Pagination dots below slider */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: var(--ecl-sp-2);
  margin-top: var(--ecl-sp-4);
}
.slider-dot {
  width: 32px;
  height: 3px;
  background: var(--ecl-rule);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--ecl-transition), width var(--ecl-transition);
}
.slider-dot.is-active {
  background: var(--ecl-gradient);
  width: 64px;
}


@media (max-width: 768px) {
  .work-slide { width: clamp(260px, 78vw, 480px); }
  .work-slider-viewport { height: auto; }
  .slider-nav { width: 48px; height: 48px; }
}


/* Legacy 2-col grid — kept for /work page or other internal uses. */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ecl-sp-5);
}

.work-card {
  padding-top: var(--ecl-sp-4);
  border-top: var(--ecl-border-thick);
}
.work-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--ecl-sp-3);
}
.work-num {
  font-family: var(--ecl-mono);
  font-size: var(--ecl-fs-xs);
  color: var(--ecl-muted);
}
.work-meta {
  font-family: var(--ecl-mono);
  font-size: var(--ecl-fs-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ecl-muted);
}
.work-media {
  aspect-ratio: 16/10;
  background: var(--ecl-cream);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ecl-serif);
  font-style: italic;
  font-size: 28px;
  color: var(--ecl-muted);
  border: var(--ecl-border-soft);
}
.work-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform var(--ecl-transition-smooth);
}
.work-card:hover { transform: translateY(-4px); }
.work-card:hover h3 {
  background: var(--ecl-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.work-card h3 { font-size: 36px; transition: all var(--ecl-transition-smooth); }
.work-card p { color: var(--ecl-muted); margin: 12px 0 var(--ecl-sp-2); }
.work-card a.link {
  font-family: var(--ecl-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--ecl-magenta);
  padding-bottom: 2px;
}


/* ── 12D. CTA SECTION (DARK) ────────────────────────────────────────────── */

.cta-section {
  background: var(--ecl-ink);
  color: var(--ecl-bg);
  border-bottom: none;
}
.cta-section h2 { color: var(--ecl-bg); }
.cta-section .label { color: var(--ecl-magenta); }

.cta-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--ecl-sp-6);
  align-items: end;
  padding-top: var(--ecl-sp-5);
}
/* Inverted on dark CTA bg — white default → gradient on hover (same motion) */
.cta-section .btn {
  background: var(--ecl-white);
  color: var(--ecl-ink);
  border-color: var(--ecl-white);
}
.cta-section .btn:hover {
  background: var(--ecl-gradient);
  color: var(--ecl-white);
  border-color: var(--ecl-magenta);
  transform: translateY(-1px);
}
.cta-meta p {
  color: rgba(var(--ecl-on-ink-rgb), 0.6);
  font-size: 14px;
  line-height: 1.6;
}
.cta-meta .big {
  font-family: var(--ecl-serif);
  font-size: 48px;
  color: var(--ecl-white);
  line-height: 1;
  margin-bottom: 12px;
}
.cta-meta .big em { color: var(--ecl-magenta); font-style: italic; }


/* ── 12E. STAT LABEL ────────────────────────────────────────────────────── */

.stat-label {
  font-family: var(--ecl-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ecl-muted);
}


/* ── 12G. HERO VISUAL SLOT ───────────────────────────────────────────────
   Big full-width media placeholder that sits below the hero-grid.
   Future fill: looping video montage of past sites, or 3-up screenshot grid.
   ──────────────────────────────────────────────────────────────────────── */

.hero-visual {
  aspect-ratio: 21 / 9;
  background: var(--ecl-cream);
  border: var(--ecl-border-soft);
  margin-top: var(--ecl-sp-6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ecl-serif);
  font-style: italic;
  font-size: clamp(28px, 3vw, 56px);
  color: var(--ecl-muted);
  position: relative;
}
.hero-visual::after {
  content: attr(data-label);
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--ecl-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ecl-muted);
  font-style: normal;
}


/* ── 12H. ABOUT SNIPPET ──────────────────────────────────────────────────
   Text + portrait side-by-side. Homepage summary of About, linking to full page.
   ──────────────────────────────────────────────────────────────────────── */

.about-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--ecl-sp-6);
  align-items: start;
}
.about-text h3 {
  font-size: clamp(36px, 4vw, 64px);
  line-height: 1.05;
  margin-bottom: var(--ecl-sp-3);
}
.about-text p {
  font-size: var(--ecl-fs-lead);
  line-height: 1.4;
  color: var(--ecl-ink);
  margin-bottom: var(--ecl-sp-3);
  max-width: 640px;
}
.about-photo {
  aspect-ratio: 4 / 5;
  background: var(--ecl-cream);
  border: var(--ecl-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ecl-serif);
  font-style: italic;
  font-size: clamp(20px, 1.6vw, 28px);
  color: var(--ecl-muted);
  position: relative;
}
.about-photo.is-line { background: transparent; aspect-ratio: 1 / 1; }   /* the portrait slot holds the hand-drawn line, on the page's own background */
.about-line { width: 58%; aspect-ratio: 140 / 130; } .about-line .mini { width: 100%; height: 100%; overflow: visible; }
.about-photo::after {
  content: attr(data-label);
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--ecl-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ecl-muted);
  font-style: normal;
}


/* ── 12H-pre. SCROLLY SECTION (sticky stacking cards + sticky creative) ──
   Used on How-it-works. Left column holds 3 tall cards that pin with a
   small offset — as you scroll, each new card stacks on top of the
   previous one (staircase effect). Right column holds ONE creative that
   stays pinned in the viewport the whole time.

   On mobile (<900px) everything drops to natural flow — no sticky.
   ──────────────────────────────────────────────────────────────────────── */

.scrolly { padding: var(--ecl-sp-7) 0; border-bottom: var(--ecl-border); }

.scrolly-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ecl-sp-6);
  align-items: start;
}

.scrolly-cards {
  display: flex;
  flex-direction: column;
  gap: var(--ecl-sp-4);
}

.scrolly-card {
  position: sticky;
  background: var(--ecl-bg);
  border: var(--ecl-border);
  padding: var(--ecl-sp-5);
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 -1px 0 var(--ecl-bg);
}
/* Progressive top offsets create the staircase stack as later cards pin. */
.scrolly-card:nth-child(1) { top: calc(var(--ecl-sp-7) + 20px); }
.scrolly-card:nth-child(2) { top: calc(var(--ecl-sp-7) + 40px); }
.scrolly-card:nth-child(3) { top: calc(var(--ecl-sp-7) + 60px); }

.scrolly-card .label { margin-bottom: var(--ecl-sp-3); }
.scrolly-card h3 {
  font-size: clamp(40px, 4vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--ecl-sp-3);
}
.scrolly-card p {
  font-size: var(--ecl-fs-lead);
  line-height: 1.4;
  color: var(--ecl-muted);
  max-width: 520px;
}

/* Right-side creative — pins in viewport center while cards scroll. */
.scrolly-media {
  position: sticky;
  top: calc(var(--ecl-sp-7) + 40px);
  aspect-ratio: 4 / 5;
  background: var(--ecl-cream);
  border: var(--ecl-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ecl-serif);
  font-style: italic;
  font-size: clamp(24px, 2vw, 36px);
  color: var(--ecl-muted);
  text-align: center;
  padding: var(--ecl-sp-4);
  min-height: 60vh;
  max-height: calc(100vh - 160px);
  overflow: hidden;
}
.scrolly-media::after {
  content: attr(data-label);
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--ecl-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ecl-muted);
  font-style: normal;
}

/* Tablet + phone: plain stacking, no sticky — the .hw block further down decides the real small-screen layout of How it works (2026-09-19) */
@media (max-width: 900px) {
  .scrolly-grid { display: flex; flex-direction: column; gap: var(--ecl-sp-4); }
  .scrolly-card { position: static; min-height: auto; top: auto; padding: var(--ecl-sp-4); }
  .scrolly-media { order: -1; position: static; top: auto; aspect-ratio: 16 / 9; min-height: 0; max-height: 40vh; padding: var(--ecl-sp-3); }
  .scrolly-card h3 { font-size: clamp(32px, 5vw, 48px); }
  .scrolly-card p { font-size: var(--ecl-fs-md); }
}


/* ── 12H-alt. SCROLLY-WIDE (creative banner on top, full-width sticky cards) ─
   Variant of .scrolly used for "What we build". One wide banner up top
   (scrolls past normally), then 3 full-width cards that sticky-stack below.

   On mobile (<900px), everything drops to natural flow.
   ──────────────────────────────────────────────────────────────────────── */

.scrolly-banner {
  width: 100%;
  height: min(56vh, 640px);
  min-height: 360px;
  background: var(--ecl-cream);
  border: var(--ecl-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ecl-serif);
  font-style: italic;
  font-size: clamp(36px, 3.5vw, 72px);
  color: var(--ecl-muted);
  text-align: center;
  padding: var(--ecl-sp-4);
  margin-bottom: var(--ecl-sp-4);
  position: sticky;
  top: 80px;                 /* pins below ticker + nav */
  z-index: 2;                /* stays above the stacking cards */
}
.scrolly-banner::after {
  content: attr(data-label);
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--ecl-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ecl-muted);
  font-style: normal;
}

.scrolly-wide-cards {
  display: flex;
  flex-direction: column;
  gap: var(--ecl-sp-3);
  margin-bottom: var(--ecl-sp-5);
}

.scrolly-wide-card {
  position: sticky;
  background: var(--ecl-bg);
  border: var(--ecl-border);
  padding: var(--ecl-sp-5);
  min-height: 32vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Cards pin BELOW the sticky banner (80px + banner height + small gap).
   Staircase +20px per card creates the stacked-cards look. */
.scrolly-wide-card:nth-child(1) { top: calc(80px + min(56vh, 640px) + 20px); }
.scrolly-wide-card:nth-child(2) { top: calc(80px + min(56vh, 640px) + 40px); }
.scrolly-wide-card:nth-child(3) { top: calc(80px + min(56vh, 640px) + 60px); }

.scrolly-wide-card .card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ecl-sp-3);
  margin-bottom: var(--ecl-sp-3);
  padding-bottom: var(--ecl-sp-3);
  border-bottom: var(--ecl-border-soft);
}
.scrolly-wide-card .card-meta .hint-time {
  font-family: var(--ecl-serif);
  font-size: clamp(26px, 2.2vw, 40px);
  color: var(--ecl-ink);
  line-height: 1;
}
.scrolly-wide-card h3 {
  font-size: clamp(32px, 3.2vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--ecl-sp-2);
}
.scrolly-wide-card p {
  font-size: var(--ecl-fs-body);
  line-height: 1.5;
  color: var(--ecl-muted);
  max-width: 720px;
}

@media (max-width: 900px) {
  .scrolly-banner {
    aspect-ratio: 4 / 3;
    margin-bottom: var(--ecl-sp-4);
    font-size: clamp(22px, 4vw, 32px);
  }
  .scrolly-wide-card {
    position: static;
    min-height: auto;
    padding: var(--ecl-sp-4);
    top: auto;
  }
  .scrolly-wide-card h3 { font-size: clamp(32px, 6vw, 48px); }
}


/* ── 12H-bis. SERVICES STRIP (homepage hint) ─────────────────────────────
   Compact 3-col row for the homepage — tier name + scope + timeline + link
   to /services. No prices (intentional). The full pricing table lives on
   /services.
   ──────────────────────────────────────────────────────────────────────── */

.services-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.service-hint {
  padding: var(--ecl-sp-4) var(--ecl-sp-4) var(--ecl-sp-4) 0;
  border-right: var(--ecl-border);
  display: flex;
  flex-direction: column;
}
.service-hint:last-child { border-right: none; padding-right: 0; }
.service-hint:not(:first-child) { padding-left: var(--ecl-sp-4); }
.service-hint .tier-label { margin-bottom: var(--ecl-sp-3); }
.service-hint h3 {
  font-size: clamp(32px, 2.8vw, 52px);
  line-height: 1;
  margin-bottom: var(--ecl-sp-3);
}
.service-hint .hint-scope {
  color: var(--ecl-muted);
  font-size: var(--ecl-fs-sm);
  margin-bottom: var(--ecl-sp-4);
  flex: 1;
}
.service-hint .hint-time {
  font-family: var(--ecl-serif);
  font-size: clamp(26px, 2vw, 36px);
  color: var(--ecl-ink);
  line-height: 1;
}


/* ── 12I. "SEE ALL" LINK ─────────────────────────────────────────────────
   Used at the bottom of Work and Testimonials sections to link to full pages.
   ──────────────────────────────────────────────────────────────────────── */

.see-all {
  margin-top: var(--ecl-sp-5);
  padding-top: var(--ecl-sp-3);
  border-top: var(--ecl-border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.see-all .label { color: var(--ecl-muted); }
.see-all a {
  font-family: var(--ecl-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ecl-ink);
  border-bottom: 2px solid var(--ecl-magenta);
  padding-bottom: 2px;
}


/* ── 12E-ter. CENTRED HERO + CLIENT LOGOS (2026-09-15) ─────────────────────
   The hero is the words, centred, one CTA; under them the clients' logos run
   in a slow marquee. Logos are single-colour: each is a CSS mask over
   currentColor, so the same file works in both themes. ────────────────── */
.hero-c { padding: clamp(24px, 4vh, 56px) 0 0; text-align: center; }
.hero-c h1 { max-width: 36ch; margin: 0 auto var(--ecl-sp-4); text-wrap: pretty; }
.hero-c .lead { max-width: 640px; margin: 0 auto var(--ecl-sp-5); text-wrap: pretty; }
.hero-c .hero-cta { justify-content: center; margin-bottom: 0; }
.clients { margin-top: clamp(56px, 8vh, 96px); text-align: center; }
.clients > .label { display: block; margin-bottom: var(--ecl-sp-3); }
.clients .rail { display: flex; width: max-content; animation: clients 80s linear infinite; }   /* ten marks: 80s keeps the same speed the five had at 46s */
.clients:hover .rail { animation-play-state: paused; }
.clients { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.clients .rail > * { display: flex; align-items: center; justify-content: center; height: 72px; padding: 0 clamp(28px, 3.4vw, 56px); color: var(--ecl-ink); opacity: .5; transition: opacity .3s ease; text-decoration: none; }
.clients .rail > a:hover { opacity: 1; }
.clients .lg { display: block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
@keyframes clients { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .clients .rail { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .clients { -webkit-mask-image: none; mask-image: none; } .clients .rail > *:nth-child(n+11) { display: none; } }
@media (max-width: 600px) { .hero-c h1 { text-wrap: balance; } .clients .rail > * { height: 56px; } .clients .lg { transform: scale(.85); } }

/* ── HOW IT WORKS · the one line (2026-09-16) ────────────────────────────────
   One SVG on the right; its single magenta path is re-shaped by CSS d: path()
   as the pane's data-stage follows the cards: tree → pointer → launch. ────── */
.one { width: 100%; height: 100%; display: block; }
.one * { transition-timing-function: cubic-bezier(.4,0,.2,1); }
.one text { font-family: var(--ecl-mono); font-size: 9px; letter-spacing: .1em; fill: var(--ecl-muted); text-transform: uppercase; }
.one .mag { stroke: var(--ecl-magenta); fill: none; stroke-width: 1.4; }
.m-foot { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: space-between; font-family: var(--ecl-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ecl-muted); font-style: normal; }
.m-foot b { color: var(--ecl-magenta); font-weight: 600; }
.m-foot .m-prog { display: flex; gap: 6px; align-items: center; } .m-foot .m-prog i { width: 22px; height: 2px; background: var(--ecl-rule); transition: background .5s; } .m-foot .m-prog i.on { background: var(--ecl-magenta); }
.c .line { stroke: var(--ecl-magenta); fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; transition: d 1.1s cubic-bezier(.65,0,.15,1); filter: drop-shadow(0 0 8px rgba(254,73,138,.45)); }
.c .line { d: path("M200 80 L200 150 L80 150 L80 230 L80 150 L200 150 L200 230 L200 150 L320 150 L320 230"); }   /* the tree; every retrace runs along a drawn segment */
[data-stage="2"] .c .line { d: path("M140 110 L140 330 L192 282 L230 360 L262 344 L224 266 L292 266 L140 110 L140 110 L140 110"); }   /* the pointer */
[data-stage="3"] .c .line { d: path("M200 300 L200 110 L200 110 L120 190 L200 110 L280 190 L200 110 L200 110 L200 110 L200 110"); }   /* the launch */
.c .dot { fill: var(--ecl-magenta); transition: cx 1.1s cubic-bezier(.65,0,.15,1), cy 1.1s cubic-bezier(.65,0,.15,1), r .6s, opacity .6s; }
.c .d1 { cx: 80px; cy: 246px; r: 6px; } .c .d2 { cx: 200px; cy: 246px; r: 6px; } .c .d3 { cx: 320px; cy: 246px; r: 6px; }
[data-stage="2"] .c .d1, [data-stage="2"] .c .d2, [data-stage="2"] .c .d3 { cx: 140px; cy: 110px; r: 3px; }
[data-stage="2"] .c .d2, [data-stage="2"] .c .d3 { opacity: 0; }
[data-stage="3"] .c .d1 { cx: 200px; cy: 322px; r: 4px; } [data-stage="3"] .c .d2 { cx: 200px; cy: 340px; r: 3px; opacity: .6; } [data-stage="3"] .c .d3 { cx: 200px; cy: 356px; r: 2px; opacity: .35; }
[data-stage="3"] .c .dot { animation: c-ex 1s ease-in-out infinite alternate; }
@keyframes c-ex { to { transform: translateY(6px); } }
.c .rip { transform-origin: 140px 110px; opacity: 0; } [data-stage="2"] .c .rip { animation: c-rip 1.4s ease-out 1.1s infinite; }
@keyframes c-rip { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
.c .w { font-family: var(--ecl-serif); font-style: italic; font-size: 34px; fill: var(--ecl-ink); text-transform: none; letter-spacing: -.01em; transition: opacity .4s; }
.c .w1, .c .w2, .c .w3 { opacity: 0; } [data-stage="1"] .c .w1, [data-stage="2"] .c .w2, [data-stage="3"] .c .w3 { opacity: 1; transition-delay: .6s; }
.c .sub { transition: opacity .4s; } .c .u1, .c .u2, .c .u3 { opacity: 0; } [data-stage="1"] .c .u1, [data-stage="2"] .c .u2, [data-stage="3"] .c .u3 { opacity: 1; transition-delay: .7s; }
@media (prefers-reduced-motion: reduce) { .one * { transition-duration: 0s !important; animation: none !important; } }

/* ── WHAT WE BUILD · the grid grows (2026-09-16) — one SVG, the pages are tiles; data-tier on the svg drives x / y / height ── */
.st .stage-draw svg.one { width: min(100%, 1100px); max-height: 100%; height: auto; overflow: visible; }
.st .one text { font-family: var(--ecl-mono); font-size: 10px; letter-spacing: .1em; fill: var(--ecl-muted); text-transform: uppercase; }
@media (max-width: 900px) { .st .stage-draw svg.one { width: 100%; flex: none; transform-origin: 50% 50%; transition: transform 1s cubic-bezier(.5,0,.15,1); transform: scale(1.7); } .st .stage-draw svg.one[data-tier="3"] { transform: translateX(-7px) scale(1.2); } }   /* phones: the svg stays 100% wide (so it centres), the zoom is a transform — tiers 1–2 on the five columns, tier 3 out to fit the grid + rail */   /* the tiles are centred in the 1000×470 box; the old per-tier shifts were for the wide drawing */
.st .one .fact { font-family: var(--ecl-serif); font-style: italic; font-size: 26px; fill: var(--ecl-ink); text-transform: none; letter-spacing: -.01em; transition: opacity .4s; opacity: 0; }
.st .one .fact.on { opacity: 1; transition-delay: .7s; }
.one .lb { transition: opacity .4s; opacity: 0; } .one .lb.on { opacity: 1; transition-delay: .8s; }

/* ══ B — THE GRID GROWS: the pages are tiles with their pages inside; 5 → 15 → 20, then the integration rail plugs in.
   Each tile: an outer <g class="tl"> that MOVES (transform transition, per tier) and an inner <g class="in"> that ENTERS
   (opacity + lift + the frame drawing itself + the page painting in, staggered) when its tier arrives. ══ */
.b .tl { transition: transform 1s cubic-bezier(.4,0,.2,1); }
.b .tl .in { opacity: 0; transform: translateY(14px); transition: opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1); transition-delay: calc(var(--i) * .03s); }   /* 2026-09-21 (Rasul: "когда скроллишь вверх, анимация ломается"): entrances AND exits are transitions now — an animation has no way back, so a row leaving its tier used to vanish in one frame. Leaving: quick, tile after tile, the way it came */
.b .tl .bg { fill: var(--ecl-white); stroke: var(--ecl-ink); stroke-width: 1; stroke-dasharray: 340; stroke-dashoffset: 340; transition: stroke-dashoffset .4s cubic-bezier(.4,0,.2,1); transition-delay: calc(var(--i) * .03s); }
.b .tl.home .bg { fill: var(--ecl-ink); }
.b .ct > * { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform .3s cubic-bezier(.4,0,.2,1); transition-delay: calc(var(--k, 0) * .02s); }
.b .ct .ln { fill: var(--ecl-ink); } .b .ct .mt { fill: var(--ecl-rule); } .b .ct .ac { fill: var(--ecl-magenta); }
.b .ct .hero { fill: url(#hdwash); stroke: var(--ecl-rule); stroke-width: 1; } .b .ct .img { fill: var(--ecl-cream); stroke: var(--ecl-rule); stroke-width: 1; } .b .ct .cmp { fill: var(--ecl-cream); stroke: var(--ecl-rule); stroke-width: 1; }
.b .home .ct .ln { fill: var(--ecl-bg); } .b .home .ct .mt { fill: rgba(255,255,255,.28); } .b .home .ct .hero { fill: rgba(254,73,138,.28); stroke: rgba(255,255,255,.3); }
/* where the tiles sit — tiers 1 and 2 centred, tier 3 slides left to make room for the rail */
.b .c1 { --x: 258px; } .b .c2 { --x: 360px; } .b .c3 { --x: 462px; } .b .c4 { --x: 564px; } .b .c5 { --x: 666px; }
.b[data-tier="3"] .c1 { --x: 130px; } .b[data-tier="3"] .c2 { --x: 232px; } .b[data-tier="3"] .c3 { --x: 334px; } .b[data-tier="3"] .c4 { --x: 436px; } .b[data-tier="3"] .c5 { --x: 538px; }
.b .r1 { --y: 140px; } .b .r2 { --y: 152px; } .b .r3 { --y: 264px; } .b .r4 { --y: 322px; }
.b[data-tier="2"] .r1 { --y: 40px; } .b[data-tier="2"] .r2 { --y: 152px; } .b[data-tier="2"] .r3 { --y: 264px; }
.b[data-tier="3"] .r1 { --y: 10px; } .b[data-tier="3"] .r2 { --y: 114px; } .b[data-tier="3"] .r3 { --y: 218px; } .b[data-tier="3"] .r4 { --y: 322px; }
.b .tl { transform: translate(var(--x), var(--y)); }
/* leaving a tier (2026-09-21, .is-back is set by the script while a tier goes DOWN): the row that leaves keeps its place in the grid — it slides with the rows that stay, one row-height below them, while it fades (it used to stand still and the row above slid over it) */
.b.is-back[data-tier="2"] .r4 { --y: 376px; }
.b.is-back[data-tier="1"] .r2 { --y: 252px; } .b.is-back[data-tier="1"] .r3 { --y: 364px; } .b.is-back[data-tier="1"] .r4 { --y: 476px; }
/* the entrance of a row, when its tier arrives: the tile lifts in, its frame draws, its page paints in */
.b[data-tier="1"] .r1 .in, .b[data-tier="2"] .r1 .in, .b[data-tier="3"] .r1 .in,
.b[data-tier="2"] .r2 .in, .b[data-tier="3"] .r2 .in, .b[data-tier="2"] .r3 .in, .b[data-tier="3"] .r3 .in,
.b[data-tier="3"] .r4 .in { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * .07s); }
.b[data-tier="1"] .r1 .bg, .b[data-tier="2"] .r1 .bg, .b[data-tier="3"] .r1 .bg,
.b[data-tier="2"] .r2 .bg, .b[data-tier="3"] .r2 .bg, .b[data-tier="2"] .r3 .bg, .b[data-tier="3"] .r3 .bg,
.b[data-tier="3"] .r4 .bg { stroke-dashoffset: 0; transition: stroke-dashoffset .7s cubic-bezier(.4,0,.2,1); transition-delay: calc(var(--i) * .07s); }
.b[data-tier="1"] .r1 .ct > *, .b[data-tier="2"] .r1 .ct > *, .b[data-tier="3"] .r1 .ct > *,
.b[data-tier="2"] .r2 .ct > *, .b[data-tier="3"] .r2 .ct > *, .b[data-tier="2"] .r3 .ct > *, .b[data-tier="3"] .r3 .ct > *,
.b[data-tier="3"] .r4 .ct > * { transform: scaleX(1); transition: transform .5s cubic-bezier(.65,0,.15,1); transition-delay: calc(.35s + var(--i) * .07s + var(--k, 0) * .05s); }
.b .ct > :nth-child(2) { --k: 1; } .b .ct > :nth-child(3) { --k: 2; } .b .ct > :nth-child(4) { --k: 3; } .b .ct > :nth-child(5) { --k: 4; } .b .ct > :nth-child(6) { --k: 5; } .b .ct > :nth-child(7) { --k: 6; } .b .ct > :nth-child(8) { --k: 7; } .b .ct > :nth-child(9) { --k: 8; }
/* rows 2–4 are staggered from their own first tile, not from tile 0 */
.b .r2 { --i: calc(var(--c) + 0); } .b .r3 { --i: calc(var(--c) + 2); } .b .r4 { --i: calc(var(--c) + 0); }
.b .c1 { --c: 0; } .b .c2 { --c: 1; } .b .c3 { --c: 2; } .b .c4 { --c: 3; } .b .c5 { --c: 4; }
@keyframes tl-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tl-draw { to { stroke-dashoffset: 0; } }
/* labels: the five core pages under row 1 (tiers 1–2), the row names on the left (tiers 2–3) */
.b .pglbl { transition: opacity .4s, transform 1s cubic-bezier(.4,0,.2,1); opacity: 0; }
.b[data-tier="1"] .pglbl { opacity: 1; transition-delay: .7s, 0s; } .b[data-tier="2"] .pglbl { opacity: 1; transform: translateY(-100px); transition-delay: .9s, 0s; }   /* per property (opacity, transform): the words move WITH the tiles at once; on the way back up from tier 3 they appear only once they have arrived under row 1 (they used to ride across the rows) */
.b .rowlbl { transition: opacity .4s, transform 1s cubic-bezier(.4,0,.2,1); opacity: 0; }
.b[data-tier="2"] .rl2, .b[data-tier="3"] .rl2, .b[data-tier="2"] .rl3, .b[data-tier="3"] .rl3, .b[data-tier="3"] .rl4 { opacity: 1; transition-delay: .6s, 0s; }
.b[data-tier="3"] .rl2 { transform: translate(-128px, -38px); } .b[data-tier="3"] .rl3 { transform: translate(-128px, -46px); }
/* the rail: pipes draw themselves, the services slide in one by one, then the data runs */
.b .svc { transition: opacity .35s, transform .5s cubic-bezier(.4,0,.2,1); opacity: 0; transform: translateX(40px); transition-delay: calc(var(--i) * .05s); }   /* the delays of the arrival live on the tier-3 rule — leaving is quick */
.b[data-tier="3"] .svc { opacity: 1; transform: none; transition: opacity .5s, transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.5s + var(--i) * .15s); }
.b .svc rect { fill: var(--ecl-cream); stroke: var(--ecl-rule); stroke-width: 1; rx: 4px; } .b .svc text { fill: var(--ecl-ink); }
.b .pipe { stroke: var(--ecl-ink); fill: none; stroke-width: 1; opacity: .38; stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset .5s cubic-bezier(.4,0,.2,1); }
.b[data-tier="3"] .pipe { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1) .6s; }   /* draws in 1.2s after the tiles have moved; un-draws in .5s */
.b .flow, .b .glow { fill: none; stroke: var(--ecl-magenta); stroke-linecap: round; stroke-dasharray: 10 28; opacity: 0; transition: opacity .3s; }   /* the 1.8s wait is on the tier-3 rules — leaving, the data stops at once (it used to keep running 1.8s over a pipe that was gone) */   /* dash period = 38 → the loop offset must be a multiple of 38 or the loop jumps */
.b .flow { stroke-width: 2; filter: drop-shadow(0 0 3px rgba(254,73,138,.9)); }
.b .glow { stroke-width: 7; filter: url(#neon); }   /* the neon halo: the same dashes, blurred, underneath */
.b[data-tier="3"] .flow { opacity: 1; transition: opacity .5s 1.8s; animation: a-flow 1.6s linear 1.8s infinite; }
.b[data-tier="3"] .glow { opacity: .85; transition: opacity .5s 1.8s; animation: a-flow 1.6s linear 1.8s infinite; }
@keyframes a-flow { to { stroke-dashoffset: -76; } }
@media (prefers-reduced-motion: reduce) { .b[data-tier="3"] .flow, .b[data-tier="3"] .glow { animation: none; } }
.b .chip { transition: opacity .3s, transform .3s cubic-bezier(.4,0,.2,1); opacity: 0; transform: translateY(8px); transform-box: fill-box; transform-origin: center; } .b .chip rect { fill: var(--ecl-magenta); rx: 9px; } .b .chip text { fill: #fff; font-weight: 600; }
.b[data-tier="2"] .ch2, .b[data-tier="3"] .ch2 { opacity: 1; transform: none; transition: opacity .4s, transform .6s cubic-bezier(.34,1.56,.64,1); transition-delay: 1.1s; } .b[data-tier="3"] .ch3 { opacity: 1; transform: none; transition: opacity .4s, transform .6s cubic-bezier(.34,1.56,.64,1); transition-delay: 1.6s; }
.b .home .ct .hero { animation: hero-breathe 3s ease-in-out infinite alternate; }   /* the one thing that keeps living: the home hero's wash */
@keyframes hero-breathe { to { fill: rgba(254,73,138,.5); } }

/* ── 12E-bis. HERO STATS (inside the hero, above the meta/clients grid) ─
   Big bold stats as a trust band within the hero itself. Stronger visual
   presence than a regular .stats-row — this is the first proof moment after
   the hero headline.
   ──────────────────────────────────────────────────────────────────────── */

.hero-stats {
  padding: var(--ecl-sp-5) 0;
  border-top: var(--ecl-border-soft);
  border-bottom: var(--ecl-border-soft);
  margin-bottom: var(--ecl-sp-5);
}
.hero-stats .stat-num {
  font-size: clamp(64px, 7vw, 136px);
}


/* ── 12F-new. REVIEWS WALL (masonry-style, all 10 reviews) ───────────────
   Multi-column Pinterest-style layout. Cards rotate through 3 bg variants
   (cream / magenta-tint / dark ink) for visual rhythm. Each card has an
   avatar with gradient bg, reviewer name + role, the quote, and footer
   with website + LinkedIn icon links.
   ──────────────────────────────────────────────────────────────────────── */

.reviews-grid {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: var(--ecl-sp-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;                         /* the 1px gap reveals the gradient bg */
  background: var(--ecl-gradient);  /* pink gradient shows as borders between cards */
}

/* ALL review cards share the same dark-mode look. */
.review {
  margin: 0;
  padding: var(--ecl-sp-5);
  background: var(--ecl-ink);
  color: var(--ecl-bg);
  border: none;
  display: flex;
  flex-direction: column;
  gap: var(--ecl-sp-3);
}
.review .reviewer-role { color: rgba(var(--ecl-on-ink-rgb), 0.6); }
.review blockquote { color: var(--ecl-bg); }

/* Header — avatar + name + role */
.review-head {
  display: flex;
  align-items: center;
  gap: var(--ecl-sp-2);
}
.avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: var(--ecl-gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ecl-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ecl-bg);
  letter-spacing: -0.02em;
}
.reviewer-name {
  font-family: var(--ecl-serif);
  font-size: clamp(22px, 1.6vw, 28px);
  line-height: 1.05;
  margin-bottom: 2px;
}
.reviewer-role {
  font-family: var(--ecl-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ecl-muted);
}

/* Company tag — gradient pill that doubles as a link to client site */
.review-company {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ecl-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ecl-bg);
  padding: 4px 10px;
  background: transparent;
  border: 1px solid rgba(var(--ecl-on-ink-rgb), 0.4);
  align-self: flex-start;
  transition: background var(--ecl-transition), color var(--ecl-transition), border-color var(--ecl-transition);
}
.review-company:hover {
  background: var(--ecl-bg);
  color: var(--ecl-ink);
  border-color: var(--ecl-bg);
}

/* Quote */
.review blockquote {
  font-family: var(--ecl-serif);
  font-size: clamp(19px, 1.5vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ecl-bg);
}
.review blockquote em {
  color: var(--ecl-magenta);
  background: none;
  -webkit-text-fill-color: var(--ecl-magenta);
}

/* Footer — icon links (no dividing line, icons in pink) */
.review-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ecl-sp-2);
  margin-top: auto;
  padding-top: var(--ecl-sp-2);
}
.icon-links { display: flex; gap: 12px; }

.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--ecl-magenta);
  transition: color var(--ecl-transition), transform var(--ecl-transition);
}
.icon-link:hover {
  color: var(--ecl-magenta-ink);
  transform: translateY(-1px);
}
.icon-link svg {
  width: 22px;
  height: 22px;
}

/* Responsive */
@media (max-width: 1200px) {
  .reviews-grid { columns: 2; }
}
@media (max-width: 768px) {
  .reviews-grid { columns: 1; }
  .review { padding: var(--ecl-sp-4); }
}


/* ── 12F. TESTIMONIALS GRID (legacy, kept for reference) ──────────────────
   A grid of all reviews. Each cell: serif quote + mono author row.
   ──────────────────────────────────────────────────────────────────────── */

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: var(--ecl-border-thick);
}

.testimonial {
  padding: var(--ecl-sp-4);
  border-right: var(--ecl-border);
  border-bottom: var(--ecl-border);
  background: var(--ecl-cream);
  display: flex;
  flex-direction: column;
}
.testimonial:nth-child(2n) { border-right: none; }

.testimonial blockquote {
  font-family: var(--ecl-serif);
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: var(--ecl-sp-3);
  flex: 1;
}
.testimonial blockquote::before {
  content: "\201C";
  font-family: var(--ecl-serif);
  font-style: italic;
  background: var(--ecl-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 40px;
  line-height: 0;
  position: relative;
  top: 12px;
  margin-right: 6px;
}

.testimonial figcaption {
  padding-top: var(--ecl-sp-2);
  border-top: var(--ecl-border-soft);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ecl-sp-2);
}
.testimonial .name {
  font-family: var(--ecl-serif);
  font-size: 18px;
  line-height: 1.1;
}
.testimonial .role {
  font-family: var(--ecl-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ecl-muted);
  text-align: right;
}


/* ── 13. RESPONSIVE ──────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  :root { --ecl-gutter: 20px; }
  section { padding: var(--ecl-sp-6) 0; }

  /* Hero headlines carry hard <br> breaks tuned for desktop.
     On small screens let the text wrap on its own instead. */
  .hero-text h1 br, .hero-c h1 br { display: none; }

  .grid-3, .grid-2,
  .stats-row,
  .footer-grid,
  .hero-main,
  .hero-grid,
  .problem-grid,
  .steps,
  .work-grid,
  .cta-grid,
  .testimonials-grid,
  .about-grid { grid-template-columns: 1fr; }

  .hero-main .hero-visual {
    /* fixed height, no aspect-ratio: any intrinsic-size rule here turns
       into a minimum WIDTH and pushes the layout past small screens */
    aspect-ratio: auto;
    height: 320px;
    min-height: 0;
    max-height: none;
  }

  .testimonial { border-right: none; }

  .problem-item,
  .step,
  .service-hint {
    border-right: none;
    border-bottom: var(--ecl-border-soft);
    padding: var(--ecl-sp-4) 0;
  }
  .problem-item:last-child,
  .step:last-child,
  .service-hint:last-child { border-bottom: none; }

  .services-strip { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }

  .service-row { grid-template-columns: 1fr; gap: 12px; }
  .service-row .tier-price,
  .service-row .tier-action { text-align: left; }

  .cell-divider {
    border-right: none;
    border-bottom: var(--ecl-border-soft);
    padding: var(--ecl-sp-4) 0;
  }
  .cell-divider:last-child { border-bottom: none; }

  .nav-links { display: none; }

  .stat { padding: var(--ecl-sp-4) 0; border-right: none; border-bottom: var(--ecl-border-soft); }
  .stat:last-child { border-bottom: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   §01 HOW IT WORKS — live stage cards + three ECL illustrations (option A,
   approved 2026-09-07). Markup lives in c.html; the scroll handler that sets
   .is-current / data-stage / .on lives in c.html's script block.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── CARD ACCENTS (shared by every option) ──────────────────────────────
   restraint: a 2px edge, a faint magenta wash in the corner, a 56px rule under
   the headline (never the full card width), stage index top-left, glyph top-right
   ─────────────────────────────────────────────────────────────────────── */
.hw .scrolly-card { --acc: var(--ecl-magenta); overflow: hidden; transition: border-color .5s; }
.hw .scrolly-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--acc); transform: scaleY(0); transform-origin: top; transition: transform .7s cubic-bezier(.4,0,.2,1); }
.hw .scrolly-card::after { content: ""; position: absolute; left: 0; top: 0; width: min(60%, 460px); height: 70%; background: radial-gradient(ellipse at top left, rgba(254,73,138,.11), transparent 68%); opacity: 0; transition: opacity .9s; pointer-events: none; }
.hw .scrolly-card.is-current::before { transform: scaleY(1); }
.hw .scrolly-card.is-current::after { opacity: 1; }
.hw .scrolly-card.is-current { border-color: var(--acc); }
.hw .idx { position: absolute; left: var(--ecl-sp-5); top: var(--ecl-sp-4); font-family: var(--ecl-mono); font-size: 11px; letter-spacing: .12em; color: var(--ecl-muted); font-variant-numeric: tabular-nums; }
.hw .idx b { color: var(--acc); font-weight: 600; }
.hw .stage { display: flex; align-items: baseline; gap: 12px; margin-bottom: var(--ecl-sp-3); font-family: var(--ecl-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ecl-muted); }
.hw .stage b { color: var(--acc); font-weight: 600; }
.hw .stage em { font-family: var(--ecl-serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 20px; color: var(--ecl-ink); }
.hw .scrolly-card h3 { align-self: flex-start; position: relative; padding-bottom: 16px; transition: opacity .5s; }
.hw .scrolly-card h3::after { content: ""; position: absolute; left: 2px; bottom: 0; width: 56px; height: 2px; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.4,0,.2,1) .15s; }
.hw .scrolly-card:not(.is-current) h3 { opacity: .72; }
.hw .scrolly-card.is-current h3::after { transform: scaleX(1); }
.hw .scrolly-card p { transform: translateY(8px); opacity: .5; transition: transform .6s cubic-bezier(.4,0,.2,1) .25s, opacity .6s .25s; }
.hw .scrolly-card.is-current p { transform: none; opacity: 1; }
/* stage glyphs (top-right of the card) — hairline, calm loops */
.hw .glyph { position: absolute; right: var(--ecl-sp-5); top: var(--ecl-sp-4); width: 44px; height: 44px; color: var(--acc); opacity: .55; transition: opacity .5s; }
.hw .scrolly-card.is-current .glyph { opacity: 1; }
.hw .glyph svg { width: 100%; height: 100%; overflow: visible; }
.hw .glyph * { vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
/* glyphs: static when idle, play ONCE when the card becomes current (no loops) */
.hw .g-map rect, .hw .g-map line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 120; stroke-dashoffset: 0; }
.hw .scrolly-card.is-current .g-map rect { animation: draw-once 1.1s cubic-bezier(.4,0,.2,1) both; }
.hw .scrolly-card.is-current .g-map rect:nth-child(2) { animation-delay: .15s; } .hw .scrolly-card.is-current .g-map rect:nth-child(3) { animation-delay: .3s; }
.hw .scrolly-card.is-current .g-map line { animation: draw-once 1.1s cubic-bezier(.4,0,.2,1) .45s both; }
@keyframes draw-once { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
.hw .g-hand circle { fill: none; stroke: currentColor; stroke-width: 1.5; transform-origin: center; }
.hw .g-hand rect { fill: currentColor; }
.hw .scrolly-card.is-current .g-hand circle { animation: ring-once 1.2s ease-in-out both; }
.hw .scrolly-card.is-current .g-hand rect { animation: nudge-once 1.2s cubic-bezier(.4,0,.2,1) .2s both; }
@keyframes ring-once { 0% { transform: scale(1); opacity: 1; } 45% { transform: scale(1.3); opacity: .5; } 100% { transform: scale(1); opacity: 1; } }
@keyframes nudge-once { from { transform: translate(0,0); } to { transform: translate(5px,-5px); } }
.hw .g-ship .bar { fill: none; stroke: currentColor; stroke-width: 1.5; }
.hw .g-ship .fill { fill: currentColor; transform-origin: left; }
.hw .g-ship .tick { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 30; stroke-dashoffset: 0; }
.hw .scrolly-card.is-current .g-ship .fill { animation: fill-once 1s cubic-bezier(.4,0,.2,1) both; }
.hw .scrolly-card.is-current .g-ship .tick { animation: tick-once .6s cubic-bezier(.4,0,.2,1) .9s both; }
@keyframes fill-once { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tick-once { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }

/* ── ONE CARD AT A TIME ───────────────────────────────────────────────────
   All three cards stick at the same offset, so the current one fully covers
   the previous. A card is invisible until it becomes current, then rises in;
   stage 1 rises in on load. Below 900px the section is static, so all show. */
.hw .scrolly-card:nth-child(1), .hw .scrolly-card:nth-child(2), .hw .scrolly-card:nth-child(3) { top: calc(var(--ecl-sp-7) + 40px); }
.hw .scrolly-cards .spacer { height: 60vh; }   /* a real block after the last card: padding does not extend the sticky range, content does */
@media (max-width: 900px) { .hw .scrolly-cards .spacer { height: 36vh; } }   /* keeps the sticky pane on screen while the last card is read */
.hw .scrolly-card { opacity: 0; transform: translateY(32px); transition: opacity .9s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.4,0,.2,1), border-color .5s; }
.hw .scrolly-card.is-current { opacity: 1; transform: none; }
@media (max-width: 900px) { .hw .scrolly-card { opacity: 1; transform: none; } }

/* ── media frame shared ── */
.hw .scrolly-media { overflow: hidden; background-color: var(--ecl-cream); background-image: radial-gradient(var(--ecl-rule) 1px, transparent 1.2px); background-size: 24px 24px; }
.hw .scrolly-media::after { z-index: 5; }
.hw .m-foot { position: absolute; inset: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }   /* covers the pane, so the counter sits top-right and the progress bottom (2026-09-19 fix: it was a 0-height bar at the bottom and clipped the counter) */
.hw .m-count, .hw .m-prog { pointer-events: auto; }
.hw .m-count { position: absolute; right: 16px; top: 16px; z-index: 5; font-family: var(--ecl-mono); font-size: 11px; letter-spacing: .1em; color: var(--ecl-muted); font-variant-numeric: tabular-nums; }
.hw .m-count b { color: var(--ecl-magenta); font-weight: 600; }
.hw .m-prog { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 5; display: flex; gap: 6px; height: 2px; }
.hw .m-prog i { flex: 1; background: var(--ecl-rule); position: relative; overflow: hidden; }
.hw .m-prog i::after { content: ""; position: absolute; inset: 0; background: var(--ecl-magenta); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.4,0,.2,1); }
.hw .m-prog i.on::after { transform: scaleX(1); }
.hw .stage-pane { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); pointer-events: none; }
.hw .stage-pane.on { opacity: 1; transform: none; }

/* ── OPTION A — three ECL illustrations (SVG, ink + magenta) ─────────────────
   Every line is drawn ONCE when the pane comes on and then stays complete.
   Nothing loops except the tiny LIVE dot. Dash lengths exceed every path length. */
.illo { width: 100%; height: 100%; display: block; }
.illo * { stroke-linecap: round; stroke-linejoin: round; }   /* no non-scaling-stroke: it makes Chrome measure dash lengths in screen px, so scaled art never closes its lines */
.illo .ink { stroke: var(--ecl-ink); fill: none; stroke-width: 1; }
.illo .ink-fill { fill: var(--ecl-ink); }
.illo .mag { stroke: var(--ecl-magenta); fill: none; stroke-width: 1.4; }
.illo .mag-fill { fill: var(--ecl-magenta); }
.illo .soft { stroke: var(--ecl-rule); fill: none; stroke-width: 1; }
.illo text { font-family: var(--ecl-mono); font-size: 9px; letter-spacing: .1em; fill: var(--ecl-muted); text-transform: uppercase; }
.illo .glow { filter: drop-shadow(0 0 6px rgba(254,73,138,.55)); }
@keyframes draw-in { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* A1 — sitemap: nodes, then edges, then labels; the cursor travels once and parks on Contact; the stamp lands once */
.a1 .node { --len: 320; stroke-dasharray: 320; stroke-dashoffset: 320; }
.a1 .edge { --len: 260; stroke-dasharray: 260; stroke-dashoffset: 260; }
.a1 .lbl, .a1 .stamp { opacity: 0; }
.on .a1 .node { animation: draw-in 1.1s cubic-bezier(.4,0,.2,1) both; }
.on .a1 .node:nth-of-type(2) { animation-delay: .12s; } .on .a1 .node:nth-of-type(3) { animation-delay: .24s; } .on .a1 .node:nth-of-type(4) { animation-delay: .36s; }
.on .a1 .node:nth-of-type(5) { animation-delay: .48s; } .on .a1 .node:nth-of-type(6) { animation-delay: .6s; } .on .a1 .node:nth-of-type(7) { animation-delay: .72s; }
.on .a1 .edge { animation: draw-in .9s cubic-bezier(.4,0,.2,1) 1s both; }
.on .a1 .edge:nth-of-type(2) { animation-delay: 1.15s; } .on .a1 .edge:nth-of-type(3) { animation-delay: 1.35s; } .on .a1 .edge:nth-of-type(4) { animation-delay: 1.55s; }
.on .a1 .lbl { animation: fade-in .6s ease 1.2s both; }
.on .a1 .lbl:nth-of-type(2) { animation-delay: 1.3s; } .on .a1 .lbl:nth-of-type(3) { animation-delay: 1.4s; } .on .a1 .lbl:nth-of-type(4) { animation-delay: 1.5s; } .on .a1 .lbl:nth-of-type(5) { animation-delay: 1.6s; } .on .a1 .lbl:nth-of-type(6) { animation-delay: 1.7s; } .on .a1 .lbl:nth-of-type(7) { animation-delay: 1.8s; }
.a1 .cursor { transform: translate(70px,50px); }
.on .a1 .cursor { animation: a1cur 2.4s cubic-bezier(.4,0,.2,1) 1.8s both; }
@keyframes a1cur { 0% { transform: translate(70px,50px); } 45% { transform: translate(200px,170px); } 100% { transform: translate(310px,290px); } }
.on .a1 .stamp { animation: a1stamp .5s cubic-bezier(.2,.8,.2,1) 4.3s both; transform-origin: 323px 113px; }
@keyframes a1stamp { from { opacity: 0; transform: scale(1.3) rotate(-6deg); } to { opacity: 1; transform: scale(1) rotate(-6deg); } }
/* A2 — the human at work, one 5.2s take: the cursor fills a card, drags it onto the grid (guide flashes),
   picks the serif for the headline (rule sweeps), selects the second card and gives it the accent. Then parks. */
.a2 .cur { transform: translate(330px,60px); }
.on .a2 .cur { animation: a2path 5.2s cubic-bezier(.4,0,.2,1) both; }
@keyframes a2path {
  0%   { transform: translate(330px,60px) }
  22%  { transform: translate(115px,185px) } 30% { transform: translate(115px,185px) }
  38%  { transform: translate(115px,185px) } 50% { transform: translate(127px,185px) } 54% { transform: translate(127px,185px) }
  62%  { transform: translate(72px,82px) }  70% { transform: translate(72px,82px) }
  82%  { transform: translate(285px,185px) } 90% { transform: translate(285px,185px) }
  100% { transform: translate(332px,228px) } }
.a2 .cur .ring { transform-origin: 0 0; }
.on .a2 .cur .ring { animation: a2grab 5.2s ease both; }
@keyframes a2grab { 0%,24% { transform: scale(1) } 27%,30% { transform: scale(.7) } 33%,36% { transform: scale(1) } 38%,50% { transform: scale(.7) } 54%,64% { transform: scale(1) } 67%,70% { transform: scale(.7) } 73%,84% { transform: scale(1) } 87%,90% { transform: scale(.7) } 93%,100% { transform: scale(1) } }
.a2 .rip { opacity: 0; transform-origin: center; transform-box: fill-box; }
.on .a2 .rip1 { animation: a2rip .55s ease-out 1.45s forwards; }   /* forwards, not both: 'both' shows the first frame during the delay */
.on .a2 .rip2 { animation: a2rip .55s ease-out 3.55s forwards; }
.on .a2 .rip3 { animation: a2rip .55s ease-out 4.6s forwards; }
@keyframes a2rip { from { opacity: .8; transform: scale(.3) } to { opacity: 0; transform: scale(1.6) } }
/* card 1: starts 12px off the grid, fills on click, is dragged onto the guide */
.a2 .c1 { transform: translate(-12px,0); }
.on .a2 .c1 { animation: a2drag .6s cubic-bezier(.4,0,.2,1) 2s both; }
@keyframes a2drag { from { transform: translate(-12px,0) } to { transform: translate(0,0) } }
.a2 .c1f, .a2 .c1h, .a2 .c1l { opacity: 0; }
.a2 .c1h, .a2 .c1l { transform-origin: left; transform: scaleX(0); }
.on .a2 .c1f { animation: fade-in .35s ease 1.5s both; }
.on .a2 .c1h { animation: a2bar .45s cubic-bezier(.4,0,.2,1) 1.65s both; }
.on .a2 .c1l { animation: a2bar .45s cubic-bezier(.4,0,.2,1) 1.8s both; }
.on .a2 .c1l:nth-of-type(2) { animation-delay: 1.9s; }
@keyframes a2bar { from { opacity: 1; transform: scaleX(0) } to { opacity: 1; transform: scaleX(1) } }
.a2 .guide { opacity: 0; }
.on .a2 .guide { animation: a2guide 1s ease 1.95s both; }
@keyframes a2guide { 0% { opacity: 0 } 15%, 70% { opacity: 1 } 100% { opacity: 0 } }
/* headline: sans placeholder becomes the serif on click, the rule sweeps under it */
.a2 .aa-serif { opacity: 0; } .a2 .aa-sans { opacity: 1; }
.on .a2 .aa-serif { animation: fade-in .45s ease 3.6s both; }
.on .a2 .aa-sans { animation: a2out .3s ease 3.6s both; }
@keyframes a2out { to { opacity: 0 } }
.a2 .sweep { transform-origin: left; transform: scaleX(0); }
.on .a2 .sweep { animation: grow-x .7s cubic-bezier(.4,0,.2,1) 3.7s both; }
/* card 2: gets selected (handles) and the accent */
.a2 .hdl, .a2 .c2m { opacity: 0; }
.on .a2 .hdl { animation: fade-in .25s ease 4.65s both; }
.on .a2 .c2m { animation: fade-in .4s ease 4.75s both; }
.a2 .grid-line { stroke-dasharray: 3 7; }

/* A3 — shipped and live: the window builds once, the pipeline draws once, then DATA FLOWS for good.
   Build → Edge → Live → users. Packets = two dashed strokes on the same geometry (a wide faint one and a thin bright one)
   whose dash offset runs forward; the only thing that keeps moving, because the site is live. */
.a3 .line { transform-origin: left; transform: scaleX(0); }
.on .a3 .line { animation: grow-x .7s cubic-bezier(.4,0,.2,1) both; }
.on .a3 .line:nth-of-type(2) { animation-delay: .12s; } .on .a3 .line:nth-of-type(3) { animation-delay: .24s; } .on .a3 .line:nth-of-type(4) { animation-delay: .36s; }
.a3 .card { --len: 340; stroke-dasharray: 340; stroke-dashoffset: 340; }
.on .a3 .card { animation: draw-in .8s cubic-bezier(.4,0,.2,1) .6s both; }
.on .a3 .card:nth-of-type(2) { animation-delay: .75s; }
.a3 .pipe { --len: 1000; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.on .a3 .pipe { animation: draw-in 1.3s cubic-bezier(.4,0,.2,1) 1.1s both; }
.a3 .node { --len: 220; stroke-dasharray: 220; stroke-dashoffset: 220; }
.on .a3 .node { animation: draw-in .7s cubic-bezier(.4,0,.2,1) 1.5s both; }
.on .a3 .node:nth-of-type(2) { animation-delay: 1.7s; } .on .a3 .node:nth-of-type(3) { animation-delay: 1.9s; }
.a3 .nlbl { opacity: 0; } .on .a3 .nlbl { animation: fade-in .4s ease 2s both; }
.a3 .nfill { transform-origin: left; transform: scaleX(0); }
.on .a3 .nfill { animation: grow-x .9s cubic-bezier(.4,0,.2,1) 2.1s both; }
.a3 .node-live { opacity: 0; } .on .a3 .node-live { animation: fade-in .5s ease 3.1s both; }
.a3 .flows { opacity: 0; } .on .a3 .flows { animation: fade-in .8s ease 3.1s both; }
.a3 .flow, .a3 .flow-w { fill: none; stroke: var(--ecl-magenta); stroke-linecap: round; stroke-dasharray: 14 26; }
.a3 .flows { filter: drop-shadow(0 0 4px rgba(254,73,138,.7)); }
.a3 .flow { stroke-width: 1.6; }
.a3 .flow-w { stroke-width: 7; opacity: .16; }
.on .a3 .flow, .on .a3 .flow-w { animation: flow 1.6s linear 3.1s infinite; }
@keyframes flow { to { stroke-dashoffset: -40; } }
.a3 .user { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.on .a3 .user { animation: pop .45s cubic-bezier(.2,.9,.3,1.3) 3.4s both; }
.on .a3 .user:nth-of-type(2) { animation-delay: 3.55s; } .on .a3 .user:nth-of-type(3) { animation-delay: 3.7s; } .on .a3 .user:nth-of-type(4) { animation-delay: 3.85s; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
.a3 .meta { opacity: 0; } .on .a3 .meta { animation: fade-in .6s ease 4s both; }
.a3 .dot { animation: a3dot 1.4s ease-in-out infinite; }
@keyframes a3dot { 0%,100% { opacity: 1; } 50% { opacity: .25; } }


/* ── tablet + phone (≤900px, 2026-09-19, Rasul: "для планшетной версии надо переделать эту секцию" → then "надо скроллить влево, это интуитивно не понятно"): ONE card at a time.
   The illustration sits on top, compact; below it one stage card; under the card ← 01 / 03 → (the Recent-work controls). The arrows, the progress segments in the pane, or a swipe on the card
   switch the stage; the card slides in with the same slow-fast-slow ease as the work slider. Nothing pins, nothing scrolls sideways; the block is about one screen tall. ── */
@media (max-width: 900px) {
  .hw .scrolly-grid { display: flex; flex-direction: column; align-items: stretch; gap: var(--ecl-sp-3); --io: cubic-bezier(.76, 0, .24, 1); }
  .hw .scrolly-media { order: -1; position: relative; top: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; min-height: 200px; max-height: 40vh; }
  .hw .scrolly-cards { display: grid; gap: 0; overflow: hidden; }   /* the three cards in one cell */
  .hw .scrolly-cards .spacer { display: none; }
  .hw .scrolly-card, .hw .scrolly-card:nth-child(n) { grid-area: 1 / 1; position: relative; top: auto; min-height: 0; padding: var(--ecl-sp-4); opacity: 0; visibility: hidden; transform: translateX(72px); transition: opacity .6s var(--io), transform .6s var(--io), visibility 0s .6s; }
  .hw.dir-prev .scrolly-card, .hw.dir-prev .scrolly-card:nth-child(n) { transform: translateX(-72px); }
  .hw .scrolly-card.is-current, .hw .scrolly-card.is-current:nth-child(n) { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--io) .1s, transform .6s var(--io) .1s; }
  .hw .scrolly-card:not(.is-current) h3 { opacity: 1; }
  .hw .scrolly-card p { opacity: 1; transform: none; }
  .hw .scrolly-card h3 { font-size: clamp(30px, 4.6vw, 44px); } .hw .scrolly-card p { font-size: var(--ecl-fs-md); }
  .hw .glyph { width: 36px; height: 36px; right: var(--ecl-sp-4); top: var(--ecl-sp-3); }
  .hw .idx { left: var(--ecl-sp-4); top: var(--ecl-sp-3); }
  .hw .stage { margin-top: 28px; }
  .hw .hw-ctl { display: flex; align-items: center; justify-content: center; gap: 12px; }
  .hw .m-prog { height: 14px; bottom: 10px; cursor: pointer; }   /* the segments are tappable: a 14px hit area with the 2px line drawn inside */
  .hw .m-prog i, .hw .m-foot .m-prog i, .hw .m-foot .m-prog i.on { height: 14px; background: none; overflow: visible; }   /* the generic .m-foot rule paints the whole segment on .on — here only the 2px line inside is drawn */
  .hw .m-prog i::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--ecl-rule); }
  .hw .m-prog i::after { top: 6px; bottom: auto; height: 2px; }
}
@media (min-width: 901px) { .hw .hw-ctl { display: none; } }   /* desktop: the cards drive themselves on scroll (min-width, so it cannot out-rank the small-screen rule above) */
@media (prefers-reduced-motion: reduce) { .hw .scrolly-card, .hw .scrolly-card.is-current { transition: none; } }
@media (max-width: 600px) { .hw .scrolly-media { aspect-ratio: 4 / 3; } }   /* phones: the drawing is portrait (400 × 500) — a flatter pane would shrink it to nothing */
@media (prefers-reduced-motion: reduce) { .hw * { animation: none !important; transition: none !important; } .hw .scrolly-card { opacity: 1; transform: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   §02 WHAT WE BUILD — the pinned stage (option D v4, approved 2026-09-08).
   Scroll three screens: the tier card on top crossfades, the drawing below
   is never replaced — sketch → painted page → blog sheet + chips → integration
   rail with live data. Markup in c.html; the scroll driver in c.html's scripts.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── the pinned stage. The block sticks under the nav for three screens of scroll; the text card
   on top crossfades between the three tiers, the drawing below never resets: Tier 01 paints the page, Tier 02 adds
   a second sheet and the CMS/SEO chips, Tier 03 adds the integration rail with live data. Scroll-driven. ── */
.st .stage-wrap { height: 340vh; }
.st .stage-pin { position: sticky; top: 80px; height: calc(100vh - 80px); display: flex; flex-direction: column; }
.st .stage-cards { position: relative; height: 34%; min-height: 220px; }
.st .stage-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); pointer-events: none; }
.st .stage-card.on { opacity: 1; transform: none; }
.st .stage-card .hint-time { font-family: var(--ecl-serif); font-size: clamp(26px, 2.2vw, 40px); color: var(--ecl-ink); line-height: 1; margin-bottom: var(--ecl-sp-3); }
.st .stage-card h3 { font-size: clamp(32px, 3.2vw, 56px); line-height: 1; letter-spacing: -0.02em; position: relative; padding-bottom: 14px; margin-bottom: var(--ecl-sp-2); }
.st .stage-card h3::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 56px; height: 2px; background: var(--ecl-magenta); transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform .7s cubic-bezier(.4,0,.2,1) .2s; }
.st .stage-card.on h3::after { transform: translateX(-50%) scaleX(1); }
.st .stage-card p { font-size: var(--ecl-fs-body); line-height: 1.5; color: var(--ecl-muted); max-width: 520px; }
.st .stage-draw { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.st .stage-draw svg { width: min(100%, 1100px); max-height: 100%; height: auto; overflow: visible; }
.st .b-count { position: absolute; right: 0; top: 0; font-family: var(--ecl-mono); font-size: 11px; letter-spacing: .1em; color: var(--ecl-muted); font-variant-numeric: tabular-nums; }
.st .b-count b { color: var(--ecl-magenta); font-weight: 600; }
.st .b-prog { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; height: 2px; }
.st .b-prog i { flex: 1; background: var(--ecl-rule); position: relative; overflow: hidden; }
.st .b-prog i::after { content: ""; position: absolute; inset: 0; background: var(--ecl-magenta); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.4,0,.2,1); }
.st .b-prog i.on::after { transform: scaleX(1); }
@media (max-width: 900px) { .st .stage-pin { top: 72px; height: calc(100vh - 72px); } .st .stage-cards { height: 40%; } .st .stage-wrap { height: 300vh; } }
@media (prefers-reduced-motion: reduce) { .st * { animation: none !important; transition: none !important; } }
/* ── drawing vocabulary (pencil + paint), shared by the three tiers ── */
.hd .sheet { fill: none; stroke: var(--ecl-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2600; stroke-dashoffset: 2600; d: path("M494.9 160.0 C497.0 148.4 474.1 244.8 465.2 194.2 C408.6 176.6 387.9 248.9 396.9 208.5 C420.0 245.0 326.0 271.4 356.3 228.0 C408.8 267.0 247.4 257.5 300.0 224.0 C283.8 201.7 142.4 261.2 228.8 246.0 C192.4 222.3 134.5 206.6 184.7 217.7 C232.7 244.9 69.1 154.9 127.4 195.7 C145.8 219.7 122.0 106.0 156.4 160.0 C175.6 192.8 169.1 90.9 176.7 134.5 C206.8 132.7 182.8 15.6 165.7 92.9 C200.4 79.5 249.0 24.5 221.0 64.6 C277.6 56.3 367.5 20.1 300.0 63.1 C353.6 81.1 431.6 62.1 372.5 72.5 C327.7 44.6 482.1 103.1 434.7 92.6 C471.5 64.3 538.9 173.9 469.1 125.0 C526.7 137.6 538.6 228.6 494.9 160.0 Z"); }
.hd .sk * { fill: none; stroke: var(--ecl-ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.hd .ui > * { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.hd .pg { fill: var(--ecl-white); stroke: var(--ecl-rule); stroke-width: 1; }
.hd .ink { fill: var(--ecl-ink); } .hd .mut { fill: var(--ecl-rule); } .hd .acc { fill: var(--ecl-magenta); }
.hd .btn { fill: url(#hdgrad); } .hd .hero { fill: url(#hdwash); stroke: var(--ecl-rule); stroke-width: 1; }
.hd .card { fill: var(--ecl-cream); stroke: var(--ecl-rule); stroke-width: 1; }
.hd .lbl { font-family: var(--ecl-mono); font-size: 9px; letter-spacing: .1em; fill: var(--ecl-muted); text-transform: uppercase; }
.hd .hw { font-family: 'Caveat', 'Instrument Serif', cursive; font-size: 38px; fill: var(--ecl-ink); opacity: 0; transition: opacity .5s; }
.hd .hw tspan { fill: var(--ecl-magenta); }
.hd .hw.on { opacity: 1; }
/* tier layers: hidden until their tier is reached, then one take each */
.hd .t { opacity: 0; } .hd .t.on { opacity: 1; }
/* TIER 1 take (≈6s): scribble → rough → strokes → paint, pencil dissolves */
.hd .t1.on .sheet { animation: hd-draw .55s cubic-bezier(.4,0,.2,1) both, hd-morph 1.4s cubic-bezier(.5,0,.15,1) .55s both, hd-fade .8s ease 4.4s both; }
.hd .t1.on .sk > * { animation: sk-draw .7s cubic-bezier(.4,0,.2,1) both; animation-delay: calc(1.7s + var(--i) * .16s); }
.hd .t1.on .sk { animation: hd-fade 1s ease 4.6s both; }
.hd .t1.on .ui > * { animation: paint .8s cubic-bezier(.65,0,.15,1) both; animation-delay: calc(3.6s + var(--i) * .14s); }
/* TIER 2 take (≈3.5s): the page slides left, a second sheet sketches and paints, chips paint */
.hd .shift { transition: transform 1s cubic-bezier(.5,0,.15,1); }
.hd[data-tier="2"] .shift, .hd[data-tier="3"] .shift { transform: translateX(-210px); }
.hd .t2.on .sk > * { animation: sk-draw .6s cubic-bezier(.4,0,.2,1) both; animation-delay: calc(.9s + var(--i) * .14s); }
.hd .t2.on .sk { animation: hd-fade .9s ease 3.2s both; }
.hd .t2.on .ui > * { animation: paint .7s cubic-bezier(.65,0,.15,1) both; animation-delay: calc(2.4s + var(--i) * .12s); }
/* TIER 3 take (≈3.5s): the rail sketches under both sheets, gets painted, data starts to flow */
.hd .t3.on .sk > * { animation: sk-draw .6s cubic-bezier(.4,0,.2,1) both; animation-delay: calc(.3s + var(--i) * .14s); }
.hd .t3.on .sk { animation: hd-fade .9s ease 2.8s both; }
.hd .t3.on .ui > * { animation: paint .7s cubic-bezier(.65,0,.15,1) both; animation-delay: calc(2s + var(--i) * .12s); }
.hd .flows { opacity: 0; } .hd .t3.on .flows { animation: fade-in .8s ease 3.4s both; }
.hd .flow, .hd .flow-w { fill: none; stroke: var(--ecl-magenta); stroke-linecap: round; stroke-dasharray: 14 26; }
.hd .flow { stroke-width: 1.6; } .hd .flow-w { stroke-width: 7; opacity: .16; }
.hd .t3.on .flow, .hd .t3.on .flow-w { animation: flow 1.6s linear 3.4s infinite; }
.hd .glow { filter: drop-shadow(0 0 4px rgba(254,73,138,.6)); }
@keyframes hd-draw { from { stroke-dashoffset: 2600; } to { stroke-dashoffset: 0; } }
@keyframes hd-morph { 0% { d: path("M494.9 160.0 C497.0 148.4 474.1 244.8 465.2 194.2 C408.6 176.6 387.9 248.9 396.9 208.5 C420.0 245.0 326.0 271.4 356.3 228.0 C408.8 267.0 247.4 257.5 300.0 224.0 C283.8 201.7 142.4 261.2 228.8 246.0 C192.4 222.3 134.5 206.6 184.7 217.7 C232.7 244.9 69.1 154.9 127.4 195.7 C145.8 219.7 122.0 106.0 156.4 160.0 C175.6 192.8 169.1 90.9 176.7 134.5 C206.8 132.7 182.8 15.6 165.7 92.9 C200.4 79.5 249.0 24.5 221.0 64.6 C277.6 56.3 367.5 20.1 300.0 63.1 C353.6 81.1 431.6 62.1 372.5 72.5 C327.7 44.6 482.1 103.1 434.7 92.6 C471.5 64.3 538.9 173.9 469.1 125.0 C526.7 137.6 538.6 228.6 494.9 160.0 Z"); } 100% { d: path("M71.1 39.4 C108.1 48.6 158.5 37.7 189.8 46.2 C220.6 40.1 258.2 43.3 299.6 42.3 C337.6 38.2 363.5 41.2 408.8 42.8 C447.6 45.4 499.1 49.0 532.1 46.9 C533.2 65.7 536.9 72.3 534.5 97.0 C539.7 123.8 537.2 145.9 528.4 162.4 C524.8 179.6 517.9 202.8 523.3 219.5 C516.1 230.1 519.4 250.2 525.4 274.6 C483.6 269.6 438.7 274.4 408.8 283.8 C363.6 278.9 324.3 285.6 294.8 276.5 C259.8 273.1 216.1 279.5 183.5 285.2 C141.2 276.4 110.2 290.1 64.1 279.3 C65.7 261.0 61.1 236.2 70.7 225.4 C69.1 201.0 79.1 179.1 74.5 165.1 C63.4 151.1 69.9 114.5 66.9 98.8 C69.1 70.5 70.2 67.8 71.1 39.4 Z"); } }
@keyframes hd-fade { to { opacity: 0; } }
@keyframes sk-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes paint { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── tablet + phone (≤900px): the drawing is wider than the screen and slides to the part the tier is about ── */
@media (max-width: 900px) {
  .st .stage-pin { top: 72px; height: calc(100vh - 72px); }
  .st .stage-cards { height: 40%; min-height: 200px; }
  .st .stage-card h3 { font-size: clamp(28px, 7vw, 40px); }
  .st .stage-card p { font-size: var(--ecl-fs-sm); max-width: 92%; }
  .st .stage-draw { overflow: hidden; }
  /* (the old 190%-wide hand drawing and its per-tier shifts were removed 2026-09-16 — the tile grid has its own phone rule below) */
  .st .stage-wrap { height: 300vh; }
}

/* ── TYPOGRAPHY RULE (Rasul, 2026-09-08): never a single word alone on the last line of a heading or a lead.
   `balance` evens heading lines out, `pretty` lets Chrome avoid orphans in running text. Both degrade to nothing elsewhere. ── */
h1, h2, h3, .lead, .stage-card h3, .scrolly-card h3 { text-wrap: balance; }
p, .lead { text-wrap: pretty; }
.lead { text-wrap: balance; }

/* ── RECENT WORK · the X-RAY (2026-09-16) — the media box holds an svg.xray built by c.html from img/xray/layouts.json; the lens + caption + replay live in the same box ── */
.work-slide .slide-media { position: relative; overflow: visible; font-size: 0; }   /* visible (2026-09-19): the lens may lie over the frame's edge — clipped, it showed only the empty half of its window near the top; the svg fits the box exactly now */   /* padding (the 30px caption strip) is set with the box's aspect ratio above (2026-09-19) */
.work-slide.is-active .slide-media { cursor: crosshair; }
/* ══ THE X-RAY: the client's real page structure, pulled from its DOM, drawn as a blueprint in the site's own language. A magenta scan line runs down the paper and every element is written in as it passes. Hover: a lens shows the real pixels at 1:1 under the cursor. ══ */
.xray { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 30px); background: var(--ecl-cream); }   /* the last 30px of the box = the caption strip */
.xray .grid line { stroke: var(--ecl-ink); stroke-opacity: .07; stroke-width: 1; }
.xray .el { opacity: 0; }
.xray.on .el { animation: xr-in .55s cubic-bezier(.2,.8,.2,1) var(--d) both; }
@keyframes xr-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.xray .n  { fill: var(--ecl-ink); fill-opacity: .03; stroke: var(--ecl-ink); stroke-opacity: .4; stroke-width: 1.5; }
.xray .g  { fill: var(--ecl-ink); fill-opacity: .7; }                                   /* the client's logo: a solid block */
.xray .l  { fill: var(--ecl-ink); fill-opacity: .5; }
.xray .h  { fill: var(--ecl-magenta); fill-opacity: .12; stroke: var(--ecl-magenta); stroke-width: 2.5; }
.xray .t  { fill: var(--ecl-ink); fill-opacity: .26; }
.xray .b1 { fill: var(--ecl-magenta); stroke: none; }
.xray .b0 { fill: none; stroke: var(--ecl-ink); stroke-opacity: .8; stroke-width: 2; }
.xray .i  { fill: none; stroke: var(--ecl-ink); stroke-opacity: .45; stroke-width: 1.5; }
.xray .ih { opacity: .9; } .xray .hatch { stroke: var(--ecl-ink); stroke-opacity: .13; stroke-width: 2; }
.xray .bgart .ih { opacity: .75; } .xray .bgart .ix { stroke-opacity: .16; }                                                          /* full-bleed background art / video: the hatch over the whole paper, faint */
.xray .ix { stroke: var(--ecl-ink); stroke-opacity: .25; stroke-width: 1.5; }
.xray .c  { fill: var(--ecl-cream); stroke: var(--ecl-ink); stroke-opacity: .45; stroke-width: 1.5; }   /* panels are opaque paper so what is behind them does not show through */
.xray .f  { fill: var(--ecl-ink); fill-opacity: .04; stroke: var(--ecl-ink); stroke-opacity: .4; stroke-width: 1.5; }
.xray .lb { font: 500 24px/1 var(--ecl-mono); letter-spacing: .08em; fill: var(--ecl-magenta); text-transform: uppercase; }
.xray .lb.k { fill: var(--ecl-ink); fill-opacity: .55; }
.xray .ld { stroke: var(--ecl-magenta); stroke-width: 1.5; fill: none; }
/* the scan line */
.xray .scan { stroke: var(--ecl-magenta); stroke-width: 3; opacity: 0; }   /* the glow filter is set per card as an attribute (unique id) */
.xray.on .scan { animation: xr-scan 1.7s cubic-bezier(.4,0,.2,1) both; }
@keyframes xr-scan { 0% { transform: translateY(0); opacity: 1; } 92% { opacity: 1; } 100% { transform: translateY(855px); opacity: 0; } }
.xray .wash { opacity: 0; }
.xray.on .wash { animation: xr-wash 1.7s cubic-bezier(.4,0,.2,1) both; }
@keyframes xr-wash { 0% { transform: translateY(-855px); opacity: 1; } 92% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .xray.on .el, .xray.on .scan, .xray.on .wash { animation: none; } .xray.on .el { opacity: 1; } }

/* the lens: real pixels, 1:1, under the cursor */
.lens { position: absolute; width: 260px; height: 260px; border-radius: 50%; border: 2px solid var(--ecl-magenta); box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 8px 30px rgba(0,0,0,.35), 0 0 18px rgba(254,73,138,.5); background-repeat: no-repeat; background-size: var(--pw) auto; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.8); transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1); z-index: 3; left: var(--x); top: var(--y); background-position: calc(130px - var(--bx)) calc(130px - var(--by)); }   /* --bx/--by: the sampled point in the scaled capture, clamped to its edges (xray.js) */
.work-slide.is-active .slide-media:hover .lens, .work-slide.is-active .slide-media.touch .lens { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce) { .lens { transition: opacity .2s; transform: translate(-50%, -50%); } }

.cap { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; z-index: 2; display: flex; gap: 8px; align-items: center; padding: 0 10px; font: 500 10px/1 var(--ecl-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ecl-ink); background: var(--ecl-bg); border-top: 1px solid var(--ecl-rule); pointer-events: none; white-space: nowrap; overflow: hidden; }
.cap i { width: 6px; height: 6px; border-radius: 50%; background: var(--ecl-magenta); box-shadow: 0 0 6px var(--ecl-magenta); }
.cap b { font-weight: 500; opacity: .55; }
.replay { position: absolute; right: 10px; top: 10px; z-index: 3; font: 500 10px/1 var(--ecl-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ecl-ink); background: rgba(255,255,255,.7); border: 1px solid var(--ecl-rule); padding: 6px 8px; cursor: pointer; opacity: 0; transition: opacity .3s; }
.work-slide.is-active .slide-media:hover .replay { opacity: 1; }
@media (max-width: 900px) { .lens { width: 200px; height: 200px; background-position: calc(100px - var(--bx)) calc(100px - var(--by)); } .cap b { display: none; } .xray .lb { display: none; } }   /* phones: the sliced frame cuts the mono labels — off */

/* ── RECENT WORK · the LIVE case frame (2026-09-19, Rasul: "большая карточка, как главная секция в кейс-стади; сайты живые; слайдер между тремя") — the case page's mac-hero at full container
   width (mockups.css: browser window + phone, cqw-scaled), the REAL sites inside; three of them stacked in one grid cell, the active one visible, ← → in the head row. ── */
.live-work { position: relative; display: grid; overflow: hidden; --io: cubic-bezier(.76, 0, .24, 1); }   /* the ease: a slow start, a fast middle, a slow stop (Rasul: "задержка в начале, потом ускорение, потом замедление") */
/* the slide MOVES (2026-09-19): the next one comes in from the right (from the left on ←) while the current one leaves the other way, .9s on the ease; waiting slides stand off-stage, hidden, with no transition */
.live-slide { grid-area: 1 / 1; visibility: hidden; transform: translateX(100%); pointer-events: none; }
.live-work.dir-prev .live-slide { transform: translateX(-100%); }
.live-slide.is-active, .live-work.dir-prev .live-slide.is-active { visibility: visible; transform: none; pointer-events: auto; z-index: 1; transition: transform .9s var(--io); }   /* stronger than the dir-prev waiting rule */
.live-slide.is-leaving { visibility: visible; transform: translateX(-100%); transition: transform .9s var(--io), visibility 0s .9s; }
.live-work.dir-prev .live-slide.is-leaving { transform: translateX(100%); }
.live-slide.is-first { transition: none; }   /* the first reveal: no big move, the elements alone */
/* the elements of the arriving slide appear ONE BY ONE — name, link, window, phone, hint — each with the same ease; hidden while the slide waits, kept while it leaves */
.live-slide .live-head h3, .live-slide .live-head .link, .live-slide .mac-hero .mh-win, .live-slide .mac-hero .mh-phone, .live-slide .mac-hero .mh-hint { opacity: 0; transform: translateX(64px); }
.live-slide.is-active .live-head h3, .live-slide.is-active .live-head .link, .live-slide.is-active .mac-hero .mh-win, .live-slide.is-active .mac-hero .mh-phone, .live-slide.is-active .mac-hero .mh-hint { opacity: 1; transform: none; transition: transform .8s var(--io) var(--d), opacity .8s var(--io) var(--d); }
.live-slide.is-active .live-head h3 { --d: .35s; } .live-slide.is-active .live-head .link { --d: .5s; } .live-slide.is-active .mac-hero .mh-win { --d: .65s; } .live-slide.is-active .mac-hero .mh-phone { --d: .9s; } .live-slide.is-active .mac-hero .mh-hint { --d: 1.15s; }
.live-slide.is-first .live-head h3 { --d: 0s; } .live-slide.is-first .live-head .link { --d: .15s; } .live-slide.is-first .mac-hero .mh-win { --d: .3s; } .live-slide.is-first .mac-hero .mh-phone { --d: .55s; } .live-slide.is-first .mac-hero .mh-hint { --d: .8s; }
.live-slide.is-leaving .live-head h3, .live-slide.is-leaving .live-head .link, .live-slide.is-leaving .mac-hero .mh-win, .live-slide.is-leaving .mac-hero .mh-phone, .live-slide.is-leaving .mac-hero .mh-hint { opacity: 1; transform: none; transition: none; }
.live-work.dir-prev .live-slide .live-head h3, .live-work.dir-prev .live-slide .live-head .link, .live-work.dir-prev .live-slide .mac-hero .mh-win, .live-work.dir-prev .live-slide .mac-hero .mh-phone, .live-work.dir-prev .live-slide .mac-hero .mh-hint { transform: translateX(-64px); }   /* on ← everything enters from the left */
.live-work.dir-prev .live-slide.is-active .live-head h3, .live-work.dir-prev .live-slide.is-active .live-head .link, .live-work.dir-prev .live-slide.is-active .mac-hero .mh-win, .live-work.dir-prev .live-slide.is-active .mac-hero .mh-phone, .live-work.dir-prev .live-slide.is-active .mac-hero .mh-hint, .live-work.dir-prev .live-slide.is-leaving .live-head h3, .live-work.dir-prev .live-slide.is-leaving .live-head .link, .live-work.dir-prev .live-slide.is-leaving .mac-hero .mh-win, .live-work.dir-prev .live-slide.is-leaving .mac-hero .mh-phone, .live-work.dir-prev .live-slide.is-leaving .mac-hero .mh-hint { transform: none; }
.live-head { display: flex; align-items: baseline; gap: var(--ecl-sp-4); min-height: 72px; padding-right: 220px; margin-bottom: var(--ecl-sp-3); }   /* room on the right for the controls */
.live-head h3 { font-size: clamp(40px, 4vw, 64px); line-height: 1; letter-spacing: -0.02em; margin: 0; }
.live-head .link { font-family: var(--ecl-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 2px solid var(--ecl-magenta); padding-bottom: 2px; white-space: nowrap; }
.live-ctl { grid-area: 1 / 1; justify-self: end; align-self: start; z-index: 2; display: flex; align-items: center; gap: 12px; height: 72px; }
.live-nav { width: 52px; height: 52px; border: 2px solid var(--ecl-ink); background: var(--ecl-bg); color: var(--ecl-ink); border-radius: 0; font-family: var(--ecl-mono); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--ecl-transition-smooth), color var(--ecl-transition-smooth), border-color var(--ecl-transition-smooth); }
.live-nav:hover { background: var(--ecl-gradient); color: var(--ecl-bg); border-color: var(--ecl-magenta); } .live-nav:focus-visible { outline: 2px solid var(--ecl-magenta); outline-offset: 3px; }
.live-count { font-family: var(--ecl-mono); font-size: var(--ecl-fs-mono); letter-spacing: .1em; color: var(--ecl-muted); min-width: 64px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .live-slide, .live-slide.is-active, .live-slide.is-leaving, .live-slide.is-active .live-head h3, .live-slide.is-active .live-head .link, .live-slide.is-active .mac-hero .mh-win, .live-slide.is-active .mac-hero .mh-phone, .live-slide.is-active .mac-hero .mh-hint { transition: none; } }
@media (max-width: 768px) { .live-head { padding-right: 0; flex-wrap: wrap; min-height: 0; } .live-ctl { position: static; grid-area: auto; justify-self: center; width: 100%; justify-content: center; height: auto; margin-top: var(--ecl-sp-3); } }   /* phones + small tablets: the controls under the frame, centred (Rasul: "стрелки че не в центре?") */

/* ── WORK · the index (2026-09-17; live windows 2026-09-19) — work.html: a short centred hero, then one wide row per client. The words are the link; the right half is the client's LIVE site in a browser window ── */
.wk-hero { padding: var(--ecl-sp-7) 0 var(--ecl-sp-6); text-align: center; border-bottom: var(--ecl-border); }
.wk-hero .label { display: block; margin-bottom: var(--ecl-sp-3); }
.wk-hero h1 { max-width: 20ch; margin: 0 auto var(--ecl-sp-3); }
.wk-hero .lead { max-width: 46ch; margin: 0 auto; color: var(--ecl-muted); }
.wk { padding: 0 0 var(--ecl-sp-7); }
.wk-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: center; padding: var(--ecl-sp-6) 0; border-bottom: var(--ecl-border); color: inherit; text-decoration: none; }
.wk-row:last-child { border-bottom: none; }
.wk-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: var(--ecl-sp-4); }
.wk-num { font-family: var(--ecl-mono); font-size: var(--ecl-fs-xs); color: var(--ecl-muted); }
.wk-meta { font-family: var(--ecl-mono); font-size: var(--ecl-fs-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ecl-muted); text-align: right; }
.wk-row h2 { font-size: clamp(44px, 5.2vw, 88px); line-height: .95; letter-spacing: -0.03em; margin-bottom: var(--ecl-sp-3); transition: color .35s, transform .5s cubic-bezier(.2,.8,.2,1); }
.wk-row p { color: var(--ecl-muted); max-width: 44ch; margin-bottom: var(--ecl-sp-4); }
.wk-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: var(--ecl-sp-3) 0; margin-bottom: var(--ecl-sp-4); border-top: var(--ecl-border-soft); border-bottom: var(--ecl-border-soft); }
.wk-facts dt { font-family: var(--ecl-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ecl-muted); margin-bottom: 6px; }
.wk-facts dd { font-size: var(--ecl-fs-sm); line-height: 1.35; margin: 0; }
.wk-row .link .btn-arrow { display: inline-block; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
/* the media (2026-09-19): a browser window with the LIVE site — the bar with the lights and the domain, a 16:10 view holding a 1280 × 800 iframe scaled to it (work.html script); frame-lock.js makes it look-only until clicked */
.wk-txt { display: block; color: inherit; text-decoration: none; }
.wk-txt:focus-visible { outline: 2px solid var(--ecl-magenta); outline-offset: 6px; }
.wk-media { position: relative; overflow: hidden; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ecl-rule); border-radius: 10px; font-size: 0; transition: border-color .35s; }
.wk-bar { height: 30px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 12px; box-sizing: border-box; background: var(--ecl-bg); border-bottom: 1px solid var(--ecl-rule); }
.wk-bar i { width: 9px; height: 9px; border-radius: 50%; display: block; } .wk-bar i:nth-child(1) { background: #FF5F57; } .wk-bar i:nth-child(2) { background: #FEBC2E; } .wk-bar i:nth-child(3) { background: #28C840; }
.wk-url { margin: 0 auto; font-family: var(--ecl-mono); font-size: 11px; color: var(--ecl-muted); background: var(--ecl-cream); border-radius: 6px; padding: 4px 14px; } .wk-sp { width: 46px; display: block; }
.wk-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.wk-view iframe { display: block; width: 1280px; height: 800px; border: 0; background: #fff; transform-origin: 0 0; }
@media (hover: hover) {
  .wk-row:hover h2 { color: var(--ecl-magenta); transform: translateX(6px); }
  .wk-row:hover .link .btn-arrow { transform: translateX(6px); } .wk-row:hover .link .wk-ext { transform: translate(4px, -4px); }
  .wk-row:hover .wk-media { border-color: var(--ecl-ink); }
}
@media (max-width: 900px) {
  .wk-hero { padding: var(--ecl-sp-6) 0 var(--ecl-sp-5); }
  .wk-row { grid-template-columns: 1fr; gap: var(--ecl-sp-4); padding: var(--ecl-sp-5) 0; }
  .wk-media { order: -1; }
  .wk-facts { grid-template-columns: 1fr 1fr; } .wk-facts div:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .wk-row h2, .wk-row .link .btn-arrow { transition: none; } .wk-row:hover h2 { transform: none; } }

/* ── SERVICES · the tiers (2026-09-17) — services.html: the centred hero (.wk-hero), three wide tier rows whose drawing is the homepage's tile grid frozen at that tier, "In every build", the retainer row, the FAQ accordion ── */
.sv { padding: 0 0 var(--ecl-sp-6); }
.sv-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(28px, 4vw, 72px); row-gap: var(--ecl-sp-4); align-items: center; padding: var(--ecl-sp-6) 0; border-bottom: var(--ecl-border); }
.sv-row:last-child { border-bottom: none; }
.sv-row h2 { font-size: clamp(38px, 4.2vw, 68px); line-height: .98; letter-spacing: -0.03em; margin-bottom: var(--ecl-sp-3); }
.sv-row p { color: var(--ecl-muted); max-width: 46ch; }
.sv-price { display: flex; align-items: baseline; gap: 16px; margin-bottom: var(--ecl-sp-3); }
.sv-price b { font: italic 400 clamp(40px, 4vw, 64px)/1 var(--ecl-serif); color: var(--ecl-magenta); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.sv-price span { font-family: var(--ecl-mono); font-size: var(--ecl-fs-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ecl-muted); }
.sv-price b span { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
.sv-pop { display: inline-block; margin-left: 10px; padding: 3px 7px; background: var(--ecl-magenta); color: #fff; letter-spacing: .08em; }
.sv-draw { border: var(--ecl-border-soft); background: var(--ecl-cream); aspect-ratio: 1000 / 470; display: grid; place-items: center; overflow: hidden; }
.sv-draw .stage-draw { width: 100%; height: 100%; display: grid; place-items: center; }
.sv-draw.st .stage-draw svg.one { width: 100%; height: 100%; max-height: none; transform: none !important; }
.sv-draw .stage-draw { transition: none; } .sv-row[data-tier="1"] .sv-draw .stage-draw { transform: none; }   /* five tiles would float in the frame — the early tiers are drawn closer */
.sv-list { grid-column: 1 / -1; list-style: none; margin: 0; padding: var(--ecl-sp-4) 0 0; border-top: var(--ecl-border-soft); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 28px; }
.sv-list li { position: relative; padding-left: 20px; font-size: var(--ecl-fs-sm); line-height: 1.4; }
.sv-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 5px; border-left: 2px solid var(--ecl-magenta); border-bottom: 2px solid var(--ecl-magenta); transform: rotate(-45deg); }
.sv-row { align-items: start; }   /* 2026-09-17: no drawings on Services — the checklist sits right of the text, as on the old pricing page */
.sv-row--ret { border-bottom: none; align-items: start; }
/* SERVICES · tier signs (2026-09-17): a 96px neon line above each checklist, services-mini.js */
.sv-side { min-width: 0; } .sv-side .sv-list--side { padding-top: var(--ecl-sp-4); }
.mini-box { height: 96px; } .mini { height: 100%; width: auto; max-width: 100%; display: block; overflow: visible; }
.mini-box:has(.mini-row) { height: auto; } .mini.mini-row { width: 100%; max-width: 760px; height: auto; } .mini-row .mini-line { stroke-width: 5; }   /* v3: the row of signs that multiply */
.mini-line { fill: none; stroke: var(--ecl-magenta); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px rgba(254,73,138,.55)); }
.sv-n { display: block; height: 64px; } .mini-digits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }   /* In every build: the card numbers, drawn + multiplied by eclMini.digits */
.mini-hand path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4.5; } .mh-lo, .mh-hi { display: none; } .mh-body { stroke: var(--ecl-magenta); } .mh-white { stroke: #fff; transition: opacity .35s; }   /* the glow lives in the svg filter (a CSS drop-shadow inside the filtered group left a faint box on phones) */ .mh-tip { fill: #fff; filter: drop-shadow(0 0 6px rgba(254,73,138,1)) drop-shadow(0 0 12px rgba(254,73,138,.8)); transition: opacity .5s; }   /* In every build: numerals in the brand gradient, the flowing run in magenta, the pen tip */
.mini-sh { fill: var(--ecl-magenta); filter: blur(5px); } [data-theme="light"] .mini-sh { fill: #1a1a1a; filter: blur(4px); }   /* floor shadow while a sign is being born: a neon pool on dark, a soft ink shadow on light */
.mini-dot { fill: var(--ecl-magenta); filter: drop-shadow(0 0 6px rgba(254,73,138,.8)); }
.mini-n { fill: var(--ecl-magenta); filter: drop-shadow(0 0 9px rgba(254,73,138,.4)); } .mini-w { fill: var(--ecl-ink); }
.sv-list li.ai { grid-column: 1 / -1; padding-left: 0; font-size: var(--ecl-fs-base, 16px); color: var(--ecl-ink); padding-bottom: 12px; border-bottom: var(--ecl-border-soft); } .sv-list li.ai::before { display: none; }   /* retainer: the three AI features lead the list, full width */
.sv-ai { display: inline-block; margin-right: 12px; padding: 2px 7px; font-family: var(--ecl-mono); font-size: 10px; letter-spacing: .1em; color: var(--ecl-magenta); border: 1px solid var(--ecl-magenta); vertical-align: 2px; }
.sv-list--side { grid-column: auto; grid-template-columns: 1fr 1fr; border-top: none; padding-top: var(--ecl-sp-5); }
.sv-every { border-top: var(--ecl-border); }
.sv-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--ecl-border-soft); }
.sv-four > div { padding: var(--ecl-sp-5) var(--ecl-sp-4) var(--ecl-sp-5) 0; border-right: var(--ecl-border-soft); }
.sv-four > div + div { padding-left: var(--ecl-sp-4); } .sv-four > div:last-child { border-right: none; }
.sv-four h3 { font-size: clamp(28px, 2.4vw, 40px); line-height: 1; margin: var(--ecl-sp-3) 0 var(--ecl-sp-2); }
.sv-four p { color: var(--ecl-muted); font-size: var(--ecl-fs-sm); line-height: 1.5; }
/* FAQ accordion */
.faq-acc { max-width: 860px; border-top: var(--ecl-border-soft); }
.faq-acc details { border-bottom: var(--ecl-border-soft); }
.faq-acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-family: var(--ecl-serif); font-size: clamp(22px, 1.9vw, 30px); line-height: 1.15; min-height: 44px; }
.faq-acc summary::-webkit-details-marker { display: none; }
.faq-acc summary i { flex: none; position: relative; width: 16px; height: 16px; }
.faq-acc summary i::before, .faq-acc summary i::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: var(--ecl-magenta); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.faq-acc summary i::after { transform: rotate(90deg); } .faq-acc details[open] summary i::after { transform: rotate(0deg); }
.faq-acc summary:focus-visible { outline: 2px solid var(--ecl-magenta); outline-offset: 4px; }
.faq-acc p { color: var(--ecl-muted); max-width: 62ch; padding: 0 0 24px; line-height: 1.55; }
@media (max-width: 900px) {
  .sv-row { grid-template-columns: 1fr; padding: var(--ecl-sp-5) 0; }
  .sv-draw { order: -1; }
  .sv-list { grid-template-columns: 1fr 1fr; } .sv-list--side { padding-top: 0; }
  .sv-four { grid-template-columns: 1fr 1fr; } .sv-four > div { padding: var(--ecl-sp-4) var(--ecl-sp-3) var(--ecl-sp-4) 0; border-bottom: var(--ecl-border-soft); } .sv-four > div:nth-child(2n) { border-right: none; } .sv-four > div + div { padding-left: var(--ecl-sp-3); } .sv-four > div:nth-child(2n+1) { padding-left: 0; }
}
@media (max-width: 520px) { .sv-list, .sv-list--side { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .faq-acc summary i::before, .faq-acc summary i::after { transition: none; } }

/* ── SERVICES · art (2026-09-17) — services-art.js. Tier 02 "A brand that scales" = ONE BECOMES MANY: one template (beat 1) → its blocks become CMS fields (beat 2) → it shrinks into card 01 and fourteen more deal out of it, the SEO line rises (beat 3). Plays once, holds, replay chip. transform / opacity / dashoffset only ── */
.sv-draw { position: relative; }
.art { width: 100%; height: 100%; display: block; overflow: visible; }
.art.reset *, .art.still * { transition: none !important; }
.art-replay { position: absolute; right: 10px; top: 10px; z-index: 2; min-height: 28px; padding: 0 9px; font: 500 10px/1 var(--ecl-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ecl-muted); background: transparent; border: 1px solid var(--ecl-rule); cursor: pointer; transition: color .2s, border-color .2s; }
.art-replay:hover, .art-replay:focus-visible { color: var(--ecl-ink); border-color: var(--ecl-ink); outline: none; }
.a2 { --e: cubic-bezier(.2,.8,.2,1); }
.a2-hl { stroke: var(--ecl-ink); stroke-opacity: .22; stroke-width: 2; }
.a2-sheet { fill: var(--ecl-white); stroke: var(--ecl-ink); stroke-width: 2; }
.a2-nav { fill: var(--ecl-ink); fill-opacity: .45; }
.a2-cover { fill: rgba(254,73,138,.26); } .a2-cover.alt { fill: url(#a2-hatch); }
.a2-title { fill: var(--ecl-ink); } .a2-body { fill: var(--ecl-ink); fill-opacity: .28; } .a2-cta { fill: var(--ecl-magenta); }
.a2-blk { stroke: var(--ecl-magenta); stroke-width: 0; transition: stroke-width .3s, opacity .5s var(--e), transform .6s var(--e); }
.a2-no { font: 500 22px/1 var(--ecl-mono); letter-spacing: .06em; fill: var(--ecl-muted); opacity: 0; transition: opacity .4s; }
/* the hero page: centre → right → card 01 */
.a2-hero { transform: translate(390px, 60px); transition: transform .9s var(--e); }
.a2-hero .a2-sheet { stroke-dasharray: 1020; stroke-dashoffset: 1020; fill-opacity: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1), fill-opacity .5s .5s; }
.a2-hero .a2-nav, .a2-hero .a2-blk { opacity: 0; transform: translateY(10px); }
.a2:not([data-beat="0"]) .a2-hero .a2-sheet { stroke-dashoffset: 0; fill-opacity: 1; }
.a2:not([data-beat="0"]) .a2-hero .a2-nav, .a2:not([data-beat="0"]) .a2-hero .a2-blk { opacity: 1; transform: none; }
.a2-hero .a2-nav { transition: opacity .5s var(--e) .45s, transform .6s var(--e) .45s; }
.a2[data-beat="1"] .a2-hero .a2-blk:nth-child(3) { transition-delay: 0s, .55s, .55s; } .a2[data-beat="1"] .a2-hero .a2-blk:nth-child(4) { transition-delay: 0s, .62s, .62s; }
.a2[data-beat="1"] .a2-hero .a2-blk:nth-child(5) { transition-delay: 0s, .68s, .68s; } .a2[data-beat="1"] .a2-hero .a2-blk:nth-child(6) { transition-delay: 0s, .76s, .76s; }
.a2[data-beat="1"] .a2-hero .a2-blk:nth-child(7) { transition-delay: 0s, .81s, .81s; } .a2[data-beat="1"] .a2-hero .a2-blk:nth-child(8) { transition-delay: 0s, .86s, .86s; }
.a2[data-beat="1"] .a2-hero .a2-blk:nth-child(9) { transition-delay: 0s, .91s, .91s; } .a2[data-beat="1"] .a2-hero .a2-blk:nth-child(10) { transition-delay: 0s, 1s, 1s; }
.a2[data-beat="2"] .a2-hero { transform: translate(560px, 60px); }
.a2[data-beat="3"] .a2-hero { transform: translate(44px, 118px) scale(.5); }
/* beat 2: fields light up one after another, in the order of the CMS rows */
.a2[data-beat="2"] .a2-hero .a2-blk[data-f] { stroke-width: 3; }
.a2[data-beat="2"] .a2-hero [data-f="title"] { transition-delay: .9s; } .a2[data-beat="2"] .a2-hero [data-f="cover"] { transition-delay: 1.12s; }
.a2[data-beat="2"] .a2-hero [data-f="body"] { transition-delay: 1.34s; } .a2[data-beat="2"] .a2-hero [data-f="cta"] { transition-delay: 1.56s; }
.a2-panel { opacity: 0; transform: translateX(-24px); transition: opacity .3s, transform .3s; }
.a2[data-beat="2"] .a2-panel { opacity: 1; transform: none; transition: opacity .6s var(--e) .35s, transform .7s var(--e) .35s; }
.a2-pbox { fill: var(--ecl-white); stroke: var(--ecl-ink); stroke-width: 2; } .a2-pr { stroke: var(--ecl-ink); stroke-opacity: .2; }
.a2-ph { font: 500 15px/1 var(--ecl-mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--ecl-ink); }
.a2-row { opacity: 0; transform: translateX(-10px); transition: opacity .2s, transform .2s; }
.a2[data-beat="2"] .a2-row { opacity: 1; transform: none; transition: opacity .45s var(--e) calc(.9s + var(--i) * .22s), transform .5s var(--e) calc(.9s + var(--i) * .22s); }
.a2-rbox { fill: none; stroke: var(--ecl-magenta); stroke-width: 2; } .a2-rn { font: 500 15px/1 var(--ecl-mono); fill: var(--ecl-ink); } .a2-rt { font: 400 13px/1 var(--ecl-mono); fill: var(--ecl-muted); }
.a2-lead { fill: none; stroke: var(--ecl-magenta); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: opacity .2s; }
.a2[data-beat="2"] .a2-lead { stroke-dashoffset: 0; opacity: .8; transition: stroke-dashoffset .6s cubic-bezier(.4,0,.2,1) calc(1s + var(--i) * .22s), opacity .2s calc(1s + var(--i) * .22s); }
/* beat 3: the deck deals out of card 01 */
.a2-copy { transform: translate(44px, 118px) scale(.5); opacity: 0; transition: opacity .2s, transform .2s; }
.a2[data-beat="3"] .a2-copy { transform: translate(var(--tx), 118px) scale(.5); opacity: 1; transition: transform .75s var(--e) calc(.6s + var(--i) * .055s), opacity .25s calc(.6s + var(--i) * .055s); }
.a2[data-beat="3"] .a2-no { opacity: 1; transition-delay: 1.5s; }
.a2-seo { fill: none; stroke: var(--ecl-magenta); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(254,73,138,.7)); opacity: 0; transition: stroke-dashoffset .2s, opacity .2s; }   /* opacity 0 until beat 3: a round cap on a fully-offset dash still paints a dot at the path's end */
.a2[data-beat="3"] .a2-seo { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1) 1.7s, opacity .1s 1.7s; }
.a2-dot { fill: var(--ecl-magenta); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); transition: opacity .2s, transform .2s; }
.a2[data-beat="3"] .a2-dot { opacity: 1; transform: none; transition: opacity .3s 2.9s, transform .5s cubic-bezier(.34,1.56,.64,1) 2.9s; }
.a2-seol { font: 500 13px/1 var(--ecl-mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--ecl-muted); opacity: 0; transition: opacity .2s; }
.a2[data-beat="3"] .a2-seol { opacity: 1; transition: opacity .5s 3.1s; }
.a2-cnt { font: 500 15px/1 var(--ecl-mono); letter-spacing: .1em; text-transform: uppercase; fill: var(--ecl-muted); opacity: 0; transition: opacity .5s .6s; }
.a2:not([data-beat="0"]) .a2-cnt { opacity: 1; } .a2-cn { fill: var(--ecl-magenta); font-variant-numeric: tabular-nums; }
.a2-cap { font: italic 400 30px/1 var(--ecl-serif); fill: var(--ecl-ink); opacity: 0; transition: opacity .3s; }
.a2[data-beat="1"] .a2-cap1, .a2[data-beat="2"] .a2-cap2, .a2[data-beat="3"] .a2-cap3 { opacity: 1; transition: opacity .6s .5s; }

/* ── SERVICES · art · TIER 01 "The sketch becomes the site" — one page in the centre, three steps (Wireframe · Design · Live), labels at the left that come and go, a 1–2–3 stepper at the right ── */
.a1 { --e: cubic-bezier(.2,.8,.2,1); }
.a1 text { text-transform: none; letter-spacing: 0; }
.a1-pg { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--e), transform .7s var(--e); } .a1:not([data-beat="0"]) .a1-pg { opacity: 1; transform: none; }
.a1-paper { fill: var(--ecl-white); opacity: 0; transition: opacity .8s var(--e); } .a1[data-beat="3"] .a1-paper, .a1[data-beat="4"] .a1-paper { opacity: 1; }
.a1-ol { fill: none; stroke: var(--ecl-ink); stroke-width: 2; stroke-opacity: .75; stroke-linecap: round; stroke-linejoin: round; transition: stroke-opacity .5s, stroke-width .5s, opacity .45s var(--e); }
.a1-cross { stroke-width: 1.5; stroke-opacity: .35; }
.a1-edge { stroke-opacity: .9; }
.a1-sk { fill: none; stroke: var(--ecl-ink); stroke-width: 2; stroke-opacity: .7; stroke-linecap: round; transition: opacity .4s var(--e); }
.a1-wr { fill: var(--ecl-ink); fill-opacity: .22; opacity: 0; transition: opacity .4s var(--e); }
.a1-fin { opacity: 0; transform: scale(.94); transform-box: fill-box; transform-origin: center; transition: opacity .5s var(--e), transform .6s var(--e); }
.a1-ink { fill: var(--ecl-ink); } .a1-mute { fill: var(--ecl-ink); fill-opacity: .28; } .a1-mag { fill: var(--ecl-magenta); } .a1-wash { fill: url(#a1-wash); }
.a1-card { fill: var(--ecl-cream); stroke: var(--ecl-ink); stroke-opacity: .25; stroke-width: 1; } .a1-band { fill: var(--ecl-ink); fill-opacity: .08; }
/* step 1 — wireframe: crisp, thinner outlines; scribbles → straight bars; the column guides flash */
.a1[data-beat="2"] .a1-ol { stroke-width: 1.5; stroke-opacity: .5; transition-delay: calc(.2s + var(--i) * .05s); } .a1[data-beat="2"] .a1-cross { stroke-opacity: .25; }
.a1[data-beat="2"] .a1-sk, .a1[data-beat="3"] .a1-sk, .a1[data-beat="4"] .a1-sk { opacity: 0; transition-delay: calc(.3s + var(--i) * .05s); }
.a1[data-beat="2"] .a1-wr { opacity: 1; transition-delay: calc(.4s + var(--i) * .05s); }
.a1-guides line { stroke: var(--ecl-magenta); stroke-width: 1; stroke-dasharray: 4 5; } .a1-guides { opacity: 0; transition: opacity .5s; } .a1[data-beat="2"] .a1-guides { opacity: .55; transition: opacity .6s .5s; }
/* step 2 — design: outlines and wire bars leave, fills arrive, top to bottom */
.a1[data-beat="3"] .a1-ol:not(.a1-edge), .a1[data-beat="4"] .a1-ol:not(.a1-edge) { opacity: 0; transition-delay: calc(.15s + var(--i) * .07s); }
.a1[data-beat="3"] .a1-edge, .a1[data-beat="4"] .a1-edge { stroke-opacity: 1; stroke-width: 2; }
.a1[data-beat="3"] .a1-wr, .a1[data-beat="4"] .a1-wr { opacity: 0; transition-delay: calc(.15s + var(--i) * .07s); }
.a1[data-beat="3"] .a1-fin, .a1[data-beat="4"] .a1-fin { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i) * .07s); }
/* step 3 — live: browser bar, load line, cursor, LIVE */
.a1-chrome { opacity: 0; transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .2s, transform .2s; }
.a1[data-beat="4"] .a1-chrome { opacity: 1; transform: none; transition: opacity .3s .1s, transform .6s var(--e) .1s; }
.a1-bar { fill: var(--ecl-white); stroke: var(--ecl-ink); stroke-width: 2; } .a1-dot { fill: var(--ecl-ink); fill-opacity: .35; } .a1-url { fill: var(--ecl-ink); fill-opacity: .08; }
.a1 .a1-urlt { font: 500 8px/1 var(--ecl-mono); letter-spacing: .04em; fill: var(--ecl-muted); }
.a1-load { stroke: var(--ecl-magenta); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 4px rgba(254,73,138,.8)); }
.a1[data-beat="4"] .a1-load { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1) .7s, opacity .1s .7s; animation: a1-loadout .4s 1.9s forwards; } @keyframes a1-loadout { to { opacity: 0; } }
.a1-cur { opacity: 0; transform: translate(640px, 330px); transition: opacity .2s, transform .2s; } .a1-cur path { fill: var(--ecl-ink); stroke: var(--ecl-white); stroke-width: 1.2; }
.a1[data-beat="4"] .a1-cur { opacity: 1; transform: translate(420px, 197px); transition: opacity .3s 1.5s, transform .9s var(--e) 1.5s; }
.a1-rip { fill: none; stroke: var(--ecl-magenta); stroke-width: 2; opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; }
.a1[data-beat="4"] .a1-rip { animation: a1-rip .7s ease-out 2.45s both; } @keyframes a1-rip { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.5); } }
.a1-live { opacity: 0; transform: scale(.5); transform-box: fill-box; transform-origin: center; transition: opacity .2s, transform .2s; } .a1-live rect { fill: var(--ecl-magenta); } .a1 .a1-live text { font: 600 8px/1 var(--ecl-mono); letter-spacing: .12em; fill: #fff; }
.a1[data-beat="4"] .a1-live { opacity: 1; transform: none; transition: opacity .25s 2.7s, transform .5s cubic-bezier(.34,1.56,.64,1) 2.7s; }
/* labels: in from the left, hold, out (exit faster than enter) */
.a1-lab { opacity: 0; transform: translateX(-16px); transition: opacity .3s, transform .3s; }
.a1[data-lab="1"] .a1-lab1, .a1[data-lab="2"] .a1-lab2, .a1[data-lab="3"] .a1-lab3 { opacity: 1; transform: none; transition: opacity .6s var(--e), transform .7s var(--e); }
.a1 .a1-ln { font: 500 14px/1 var(--ecl-mono); letter-spacing: .12em; fill: var(--ecl-magenta); } .a1 .a1-lt { font: italic 400 50px/1 var(--ecl-serif); letter-spacing: -.01em; fill: var(--ecl-ink); } .a1 .a1-ls { font: 500 12px/1 var(--ecl-mono); letter-spacing: .1em; text-transform: uppercase; fill: var(--ecl-muted); }
/* stepper */
.a1-steps { opacity: 0; transition: opacity .6s .6s; } .a1:not([data-beat="0"]) .a1-steps { opacity: 1; }
.a1-rail { stroke: var(--ecl-ink); stroke-opacity: .2; stroke-width: 2; } .a1-fill { stroke: var(--ecl-magenta); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: var(--p, 1); transition: stroke-dashoffset .8s var(--e); }
.a1-node circle { fill: var(--ecl-cream); stroke: var(--ecl-ink); stroke-opacity: .35; stroke-width: 2; transition: fill .35s, stroke .35s, stroke-opacity .35s; } .a1 .a1-node text { font: 500 13px/1 var(--ecl-mono); fill: var(--ecl-muted); transition: fill .35s; }
.a1-node.on circle { fill: var(--ecl-magenta); stroke: var(--ecl-magenta); stroke-opacity: 1; } .a1 .a1-node.on text { fill: #fff; }
.a1-node.done circle { stroke: var(--ecl-magenta); stroke-opacity: 1; } .a1 .a1-node.done text { fill: var(--ecl-magenta); }

/* TIER 01 · the one label (HTML over the svg, sized in cqw): numeral + one word that roll into the next value; and the loop's quick way back to pencil */
.sv-draw { container-type: inline-size; }
.a1-one { position: absolute; left: 7cqw; top: 50%; transform: translateY(-50%); display: flex; align-items: baseline; gap: 1.1cqw; pointer-events: none; z-index: 1; }
.a1-roll { position: relative; display: inline-block; height: 1.2em; white-space: nowrap; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.a1-roll .ly { position: absolute; left: 0; top: 0; display: inline-flex; }
.a1-roll .ly span { display: inline-block; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s, filter .4s; transition-delay: calc(var(--i) * 35ms); }
.a1-roll .ly.pre span { transform: translateY(60%); opacity: 0; filter: blur(5px); }
.a1-roll .ly.out span { transform: translateY(-60%); opacity: 0; filter: blur(5px); transition-duration: .4s, .3s, .3s; }
.a1-onum { font: 500 2.3cqw/1.2 var(--ecl-mono); color: var(--ecl-magenta); min-width: 1.6cqw; font-variant-numeric: tabular-nums; }
.a1-oword { font: italic 400 5.2cqw/1.2 var(--ecl-serif); letter-spacing: -.01em; color: var(--ecl-ink); }
.a1.back *, .a1.back { transition-delay: 0s !important; transition-duration: .5s !important; }
@media (prefers-reduced-motion: reduce) { .a1-roll .ly span { transition: none; } }

/* TIER 01 · v5 morphing skins: one shape per block, redrawn by JS from p1 / p2 (services-art.js) */
.a1-l { fill: none; stroke: var(--ecl-ink); stroke-linecap: round; stroke-linejoin: round; }
.a1-o { fill: none; stroke: var(--ecl-ink); stroke-width: 2; stroke-opacity: .75; stroke-linecap: round; stroke-linejoin: round; }
.a1-x { stroke-width: 1.5; } .a1-dotb { fill: var(--ecl-magenta); fill-opacity: 0; }
.a1-paper2 { fill: var(--ecl-white); } .a1-guides2 line { stroke: var(--ecl-magenta); stroke-width: 1; stroke-dasharray: 4 5; }
/* the label under the blur-and-threshold filter: two stacked spans per value, melted into each other by JS */
.a1-goo { position: relative; display: inline-block; white-space: nowrap; }
.a1-goo span { display: inline-block; white-space: nowrap; will-change: filter, opacity; } .a1-goo span + span { position: absolute; left: 0; top: 0; }
.a1-oword.a1-goo { padding: .1em .3em .1em 0; } .a1-oword.a1-goo span + span { top: .1em; }   /* the incoming word sits exactly on the outgoing one (the host's top padding), so nothing jumps when the melt ends */

/* TIER 01 · v7 — the one line (the homepage "How it works" language): one magenta stroke with a glow, one dot on its tip, one word */
.a1-line { fill: none; stroke: var(--ecl-magenta); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(254,73,138,.5)); stroke-dasharray: 1; stroke-dashoffset: 1; }
.a1:not([data-beat="0"]) .a1-line { stroke-dashoffset: 0; transition: stroke-dashoffset 2s cubic-bezier(.4,0,.2,1) .1s; }
.a1-tip { fill: var(--ecl-magenta); opacity: 0; transition: opacity .4s 1.9s; } .a1:not([data-beat="0"]) .a1-tip { opacity: 1; }
.a1-rip2 { fill: none; stroke: var(--ecl-magenta); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.a1[data-beat="4"] .a1-rip2 { animation: a1-rip2 1.5s ease-out 1.3s infinite; } @keyframes a1-rip2 { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .a1-line { transition: none !important; } .a1[data-beat="4"] .a1-rip2 { animation: none; } }

/* TIER 01 · v8 — the line-drawn label left of the page: a glowing magenta numeral + a monoline word, both morphed point by point (services-art.js · lineLabel) */
.a1-label { opacity: 0; transition: opacity .6s cubic-bezier(.2,.8,.2,1) .2s; } .a1:not([data-beat="0"]) .a1-label { opacity: 1; }
.a1-gn { fill: none; stroke: var(--ecl-magenta); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(254,73,138,.5)); }
.a1-gl { fill: none; stroke: var(--ecl-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* TIER 01 · v9 — the label in the site's own typeface (Instrument Serif Italic outlines, morphed contour to contour · services-art.js · typeLabel) */
.a1-tn { fill: var(--ecl-magenta); filter: drop-shadow(0 0 8px rgba(254,73,138,.45)); } .a1-tw { fill: var(--ecl-ink); }

/* ── COUNT-UP NUMBERS (2026-09-16): fixed-width digits so the layout does not shuffle while the value runs ── */
[data-num] { font-variant-numeric: tabular-nums; }

/* ── MOBILE / TABLET NAV (2026-09-17): the links used to be `display: none` under 900px with no burger — Work / Services / About were unreachable except from the footer. Now they sit in a second row of the bar: no JS, no hidden menu, 44px targets ── */
@media (max-width: 900px) {
  .nav .container { flex-wrap: wrap; row-gap: 0; }
  .nav-links { display: flex; order: 3; width: 100%; justify-content: center; gap: clamp(20px, 8vw, 56px); margin-top: 12px; padding-top: 4px; border-top: var(--ecl-border-soft); }
  .nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  .nav { padding-bottom: 0; }
}
/* touch screens have no hover: the x-ray's "hover for pixels" hint is dropped there (a tap on a Work row opens the case) */
@media (hover: none) { .cap b { display: none; } }
.xray-shot { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 30px); background-size: cover; background-position: top center; background-repeat: no-repeat; }   /* phones: the screenshot instead of the x-ray */
@media (max-width: 600px) {   /* phones: the coverflow card is a LANDSCAPE shot (16:10, the screenshot's own ratio), not a tall box that crops the page (Rasul: "подбери правильный альбомный формат") */
  .work-slide { width: 90vw; padding: var(--ecl-sp-4); }
  .work-slide .slide-media { flex: none; aspect-ratio: 16 / 10; min-height: 0; margin-bottom: var(--ecl-sp-3); }
  .work-slider-viewport { height: auto; }
  .slider-nav { top: 150px; transform: none; }   /* the arrows sit on the shot's mid-height, not over the name */
  .xray-shot { background-size: 100% auto; }
}
@media (max-width: 600px) { .lens { width: 150px; height: 150px; background-position: calc(75px - var(--bx)) calc(75px - var(--by)); } }   /* phones: the frame is ~190px tall — a 200px lens swallowed it */

.sv-row[id] { scroll-margin-top: 110px; }

/* ── HERO STATS on narrow screens (2026-09-19, Rasul: "сделать flex wrap center, чтобы такого говна не было" — the labels were squeezed onto two lines): a centred flex row that WRAPS.
   Each cell keeps its natural width and its label on one line; four fit on a tablet, phones get two rows of two, always centred. No cell borders here — the gap does the work. ── */
@media (max-width: 1200px) {
  .hero-stats .stats-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--ecl-sp-4) var(--ecl-sp-6); }
  .hero-stats .stat, .hero-stats .stat:first-child, .hero-stats .stat:last-child { flex: 0 1 auto; padding: 0; border: none; text-align: center; }
  .hero-stats .stat-num { font-size: clamp(36px, 6.4vw, 72px); margin-bottom: 6px; }
  .hero-stats .label { font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
}
@media (max-width: 600px) {
  .hero-stats .stats-row { gap: var(--ecl-sp-4) var(--ecl-sp-5); }
  .hero-stats .stat-num { font-size: clamp(34px, 10vw, 44px); }
}

/* ── WHAT WE BUILD on tablet + phone (2026-09-19, Rasul: "что с этим говном делать на мобиле и планшете" — the pinned 100vh stage left the tile drawing tiny in a sea of nothing):
   the same stepper as How it works — the drawing on top in a frame of its own ratio, ONE tier card under it, ← 01 / 03 → under the card; arrows, the progress segments or a swipe switch the tier;
   the card slides in with the work slider's ease. Nothing pins, nothing scrolls sideways. Desktop (> 900px) keeps the pinned stage. ── */
@media (max-width: 900px) {
  .st .stage-wrap { height: auto; }
  .st .stage-pin { position: static; top: auto; height: auto; display: flex; flex-direction: column; gap: var(--ecl-sp-3); --io: cubic-bezier(.76, 0, .24, 1); }
  .st .stage-draw { order: -1; flex: none; width: 100%; aspect-ratio: 1000 / 470; overflow: hidden; }
  .st .stage-draw svg.one, .st .stage-draw svg.one[data-tier] { width: 100%; height: 100%; max-height: none; transform: none; transform-origin: 45% 48%; transition: transform 1s cubic-bezier(.5,0,.15,1); }
  .st .stage-draw svg.one[data-tier="0"], .st .stage-draw svg.one[data-tier="1"] { transform: scale(1.6); }   /* tier 1 = five tiles in the middle of a wide drawing: zoom in on them; the zoom eases out as the tiles multiply */
  .st .b-prog { order: -1; position: relative; left: auto; right: auto; bottom: auto; height: 14px; cursor: pointer; }   /* under the drawing, tappable: a 14px hit area with the 2px line inside */
  .st .b-prog i { background: none; overflow: visible; }
  .st .b-prog i::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--ecl-rule); }
  .st .b-prog i::after { top: 6px; bottom: auto; height: 2px; }
  .st .b-count { display: none; }   /* the controls carry the counter */
  .st .stage-cards { height: auto; min-height: 0; display: grid; overflow: hidden; }
  .st .stage-card { position: relative; inset: auto; grid-area: 1 / 1; padding: var(--ecl-sp-3) 0 var(--ecl-sp-2); visibility: hidden; opacity: 0; transform: translateX(72px); transition: opacity .6s var(--io), transform .6s var(--io), visibility 0s .6s; }
  .st.dir-prev .stage-card { transform: translateX(-72px); }
  .st .stage-card.on { visibility: visible; opacity: 1; transform: none; transition: opacity .6s var(--io) .1s, transform .6s var(--io) .1s; }
  .st .st-ctl { display: flex; align-items: center; justify-content: center; gap: 12px; }
}
@media (max-width: 600px) {
  .st .one .pglbl, .st .one .rowlbl { display: none; }   /* 10px mono in a 350px-wide drawing is 3px — off */
  .st .one .fact { font-size: 44px; } .st .one .svc text { font-size: 18px; } .st .one .chip text { font-size: 12px; }   /* the chips are 18 units tall */
}
@media (min-width: 901px) { .st .st-ctl { display: none; } }
@media (prefers-reduced-motion: reduce) { .st .stage-card, .st .stage-card.on { transition: none; } }