/* DesignDock rebrand E2, "Commerce-native, dark". Tokens and components from docs/rebrand-e2/README.md. */

:root {
  --bg: #000;
  --surface-1: #111113;
  --surface-2: #18181b;
  --surface-3: #1b1b1e;
  --border: #1f1f23;
  --border-soft: #1a1a1d;
  --border-strong: #3a3a40;
  --text: #fff;
  --text-2: #c4c4cb;
  --text-3: #a1a1aa;
  --text-4: #8b8b93;
  --text-5: #5d5d66;
  --blue: #3f7bf0;
  --blue-light: #76a2ff;
  --blue-strong: #1f5fd9;
  --light-text-2: #55555d;
  --light-text-3: #6b6b73;
  --light-track: #e4e4e7;

  --font: 'Geist', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;

  --max: 1320px;
  --max-inset: 1400px;
  --pad: clamp(20px, 4vw, 48px);
  --pad-inset: clamp(12px, 2vw, 24px);
  --header-h: 68px;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-roll: cubic-bezier(.7, 0, .2, 1);
}
@supports (color: oklch(0 0 0)) {
  :root {
    --blue: oklch(0.66 0.18 258);
    --blue-light: oklch(0.76 0.15 258);
    --blue-strong: oklch(0.55 0.2 258);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.e2 {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
:where(.e2) a { color: inherit; text-decoration: none; }
.e2 img { display: block; max-width: 100%; }
.e2 h1, .e2 h2, .e2 h3, .e2 p, .e2 figure, .e2 blockquote { margin: 0; }
.e2 section[id] { scroll-margin-top: 80px; }
.e2 :focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; }

/* ---------- Buttons ---------- */
.e2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 500; font-size: 15px; line-height: 1.2;
  padding: 11px 20px; border-radius: 999px; white-space: nowrap;
  font-family: inherit; background: none; border: 0; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, gap .25s var(--ease-out);
}
.e2-btn--white { background: #fff; color: #000; }
.e2-btn--white:hover { background: var(--blue-light); color: #000; }
.e2-btn--black { background: #000; color: #fff; }
.e2-btn--black:hover { background: var(--blue-strong); }
.e2-btn--ghost { border: 1px solid var(--border-strong); color: #fff; }
.e2-btn--ghost:hover { border-color: #fff; }
.e2-btn--blur { border-color: rgba(255,255,255,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.e2-btn--lg { font-size: 17px; padding: 14px 26px; }
.e2-btn--xl { font-size: 18px; padding: 16px 30px; }
.e2-btn--block { width: 100%; padding: 15px; font-size: 16px; }
.e2-btn--arrow { padding-right: 14px; }
.e2-btn--arrow.e2-btn--xl { padding-right: 16px; }
.e2-btn--arrow:hover { gap: 18px; background: #fff; }
.e2-btn--play { padding-left: 14px; gap: 12px; }
.e2-btn__play {
  width: 30px; height: 30px; border-radius: 999px; background: #fff; color: #000;
  display: inline-flex; align-items: center; justify-content: center; padding-left: 2px;
  transition: transform .25s var(--ease-out);
}
.e2-btn--play:hover .e2-btn__play { transform: scale(1.08); }
.e2-btn__arrow {
  width: 30px; height: 30px; border-radius: 999px; background: #000; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.e2-btn--xl .e2-btn__arrow { width: 32px; height: 32px; }

/* ---------- Logo (original DD mark + Geist wordmark) ---------- */
.e2-logo { display: inline-flex; align-items: center; gap: 10px; }
.e2-logo__mark { width: 32px; height: 32px; flex: none; border-radius: 9px; }
.e2-logo__word { font-weight: 700; font-size: 20px; letter-spacing: -.04em; line-height: 1; }
.e2-logo--sm .e2-logo__mark { width: 28px; height: 28px; border-radius: 8px; }
.e2-logo--sm .e2-logo__word { font-size: 18px; }

/* ---------- 1. Header ---------- */
.e2-header { position: sticky; top: 0; z-index: 20; padding: 0 var(--pad); }
/* The blur lives on a pseudo-element: backdrop-filter on the header itself would make it the containing block
   for the fixed phone-menu sheet and clip the sheet to the 68px bar. */
.e2-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.e2-header__bar {
  max-width: var(--max); margin: 0 auto; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.e2-header__left { display: flex; align-items: center; gap: 36px; min-width: 0; }
.e2-header__right { display: flex; align-items: center; gap: 8px; }
.e2-nav { display: flex; gap: 4px; font-size: 15px; font-weight: 500; }
.e2-nav__link { padding: 8px 12px; border-radius: 999px; transition: background-color .2s ease; }
.e2-nav__link:hover { background: var(--surface-3); }
.e2-header__work { font-size: 15px; font-weight: 500; padding: 10px 14px; transition: color .2s ease; }
.e2-header__work:hover { color: var(--blue-light); }

.e2-menu-btn {
  display: none; width: 44px; height: 44px; margin-right: -8px;
  border: 0; background: none; color: #fff; cursor: pointer; border-radius: 999px;
  align-items: center; justify-content: center;
}
.e2-menu-btn:hover { background: var(--surface-3); }
.e2-menu-btn__bars { position: relative; width: 20px; height: 10px; }
.e2-menu-btn__bars span {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .25s var(--ease-out), top .25s var(--ease-out);
}
.e2-menu-btn__bars span:first-child { top: 0; }
.e2-menu-btn__bars span:last-child { top: 8px; }
.e2-menu-btn[aria-expanded="true"] .e2-menu-btn__bars span:first-child { top: 4px; transform: rotate(45deg); }
.e2-menu-btn[aria-expanded="true"] .e2-menu-btn__bars span:last-child { top: 4px; transform: rotate(-45deg); }

.e2-menu {
  position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
  background: #000; padding: 16px var(--pad) 40px; overflow-y: auto;
}
.e2-menu[hidden] { display: none; }
.e2-menu__nav { display: flex; flex-direction: column; }
.e2-menu__link {
  font-weight: 600; font-size: 36px; letter-spacing: -.045em; line-height: 1.1;
  padding: 10px 0; transition: color .2s ease;
}
.e2-menu__link:hover { color: var(--blue-light); }
.e2-menu__link--sm { font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: var(--text-3); padding: 10px 0; }
.e2-menu__rule { height: 1px; background: var(--border); margin: 16px 0 8px; }
body.e2-menu-open { overflow: hidden; }

@media (max-width: 899px) {
  .e2-nav, .e2-header__work { display: none; }
  .e2-menu-btn { display: inline-flex; }
}
@media (min-width: 900px) {
  .e2-menu { display: none !important; }
}

/* ---------- Shared section bits ---------- */
.e2-wrap { max-width: var(--max); margin: 0 auto; }
.e2-section { padding: 120px var(--pad) 96px; }
.e2-section > .e2-wrap { display: flex; flex-direction: column; gap: 48px; }
.e2-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.e2-h2 { font-weight: 600; font-size: clamp(44px, 6vw, 96px); line-height: .95; letter-spacing: -.06em; }
.e2-aside { font-size: 18px; line-height: 1.5; color: var(--text-3); max-width: 34ch; }
.e2-card { background: var(--surface-1); border-radius: 28px; overflow: hidden; transition: background-color .25s ease; }
.e2-card:hover { background: var(--surface-2); }
.e2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Striped media placeholders (replaced section by section) */
.e2-ph {
  display: flex; align-items: flex-end; padding: 16px;
  font-family: var(--mono); font-size: 11px; color: var(--text-5);
  background: repeating-linear-gradient(135deg, #17171a 0 12px, #1c1c20 12px 24px);
}
.e2-ph--card { height: 100%; }
.e2-ph--panel { background: repeating-linear-gradient(135deg, #f1f1f3 0 12px, #f7f7f8 12px 24px); color: var(--text-4); padding: 20px; font-size: 12px; }

/* ---------- 2. Hero ---------- */
.e2-hero {
  position: relative; margin-top: calc(-1 * var(--header-h));
  /* 94% like shopify.com: the next section peeks in, which says "scroll". */
  min-height: max(680px, 94vh); min-height: max(680px, 94svh);
  display: flex; align-items: flex-end; overflow: hidden;
}
.e2-hero__media { position: absolute; inset: 0; background: #0c0c0e; }
.e2-hero__poster, .e2-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The studio illustration is light, so the scrim is heavier than the handoff's 30% → 85% ramp. */
.e2-hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%),
    linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.6) 58%, rgba(0,0,0,.9) 100%);
}
.e2-hero__inner {
  position: relative; width: 100%; max-width: var(--max); margin: 0 auto;
  padding: 0 var(--pad) clamp(48px, 7vw, 96px);
  display: flex; flex-direction: column; gap: 28px;
}
.e2-hero__title {
  font-weight: 600; font-size: clamp(56px, 9.6vw, 152px); line-height: .92; letter-spacing: -.065em;
  display: flex; flex-direction: column;
}
.e2-roll { display: block; height: 1.02em; overflow: hidden; color: var(--blue-light); }
.e2-roll__track { display: flex; flex-direction: column; }
.e2-roll__track.is-rolling { transition: transform .6s var(--ease-roll); }
.e2-roll__word { display: block; height: 1.02em; white-space: nowrap; }
.e2-hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.e2-hero__sub { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--text-2); max-width: 44ch; text-wrap: pretty; }
.e2-hero__ctas { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 599px) {
  .e2-roll__word { white-space: normal; }
  .e2-hero__title { font-size: clamp(44px, 12vw, 56px); }
  .e2-roll, .e2-roll__word { height: 2.04em; }
}

/* Film dialog ("Watch the story") */
.e2-film {
  width: min(1200px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; border-radius: 20px;
  background: #000; color: #fff; overflow: visible;
}
.e2-film::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.e2-film__video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; background: #000; }
.e2-film__close {
  position: absolute; top: -56px; right: 0; width: 44px; height: 44px; border-radius: 999px; border: 0;
  background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .2s ease;
}
.e2-film__close:hover { background: rgba(255,255,255,.24); }
@media (max-width: 599px) { .e2-film__close { top: -52px; } }

/* ---------- 2b. Stats ---------- */
.e2-stats { padding: 56px var(--pad) 48px; border-bottom: 1px solid var(--border-soft); }
.e2-stats__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* column-reverse puts the number (dd) above its caption (dt); flex-end is the top edge of a reversed column. */
.e2-stat {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px;
  padding: 0 24px; border-left: 1px solid var(--border);
}
.e2-stat:first-child { padding-left: 0; border-left: 0; }
.e2-stat__label { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text-4); }
.e2-stat__value {
  position: relative; margin: 0; display: flex; align-items: baseline;
  font-weight: 600; font-size: clamp(44px, 5.2vw, 80px); line-height: 1; letter-spacing: -.055em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Digit roll (built by initStats): a 1em window over a strip of 11 cells, blank then 0–9.
   The side padding keeps overflow:hidden from shaving round digits (the negative letter-spacing pulls the box inside the ink).
   The strip moves with `top`, in % of the window, not a transform: settled digits then match the plain text pixel for pixel
   (a transform leaves them half a pixel off on 2x screens) and a resize can't trigger a slide. */
.e2-digit { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; padding-inline: .12em; margin-inline: -.12em; }
.e2-digit__strip { display: block; position: relative; top: 0; }
.e2-digit__cell { display: block; height: 1em; line-height: 1em; }
.e2-stats.is-rolled .e2-digit__strip {
  top: calc(var(--cell) * -100%);
  transition: top 1000ms var(--ease-roll);
}
@media (max-width: 899px) {
  .e2-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .e2-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* ---------- 3. Client strip ---------- */
.e2-clients { padding: 40px var(--pad); border-bottom: 1px solid var(--border-soft); }
.e2-clients__inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; gap: 48px; }
.e2-clients__label { flex: none; font-size: 14px; color: var(--text-4); max-width: 22ch; line-height: 1.4; }
/* Flex rather than grid so a short last row centres. 21 logos = 7 + 7 + 7 here, 3 × 7 on a phone. */
.e2-clients__grid {
  list-style: none; margin: 0; padding: 0; flex: 1;
  display: flex; flex-wrap: wrap; justify-content: center; row-gap: 28px;
}
.e2-clients__grid li { flex: 0 0 14.2857%; padding: 0 8px; display: flex; justify-content: center; align-items: center; }
.e2-clients__logo { width: auto; height: auto; max-height: var(--h); max-width: 100%; opacity: .9; transition: opacity .2s ease; }
.e2-clients__grid li:hover .e2-clients__logo { opacity: 1; }
@media (max-width: 1099px) {
  .e2-clients__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .e2-clients__grid { flex: none; width: 100%; }
}
@media (max-width: 899px) { .e2-clients__logo { max-height: calc(var(--h) * .82); } }
@media (max-width: 699px) { .e2-clients__grid li { flex-basis: 33.333%; } }

/* ---------- 4. Services ---------- */
.e2-services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 16px; }
.e2-service { display: flex; flex-direction: column; }
.e2-service__media { height: 260px; overflow: hidden; }
.e2-service__media > * { transition: transform .9s var(--ease-out); }
.e2-service__media img { width: 100%; height: 100%; object-fit: cover; }
.e2-service:hover .e2-service__media > * { transform: scale(1.06); }
.e2-service__body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 8px; }
.e2-service__title { font-weight: 600; font-size: 26px; letter-spacing: -.035em; line-height: 1.15; }
.e2-service__desc { font-size: 16px; line-height: 1.5; color: var(--text-3); text-wrap: pretty; }

/* Seven cards: the six in a grid, then a "wide" finale (markup: _includes/e2/home/services.njk). */
/* wide: the last card runs the full width from 887px, which is where the grid goes to two columns. The columns are counted here, not left to
   the auto-fit of the base grid, so the grid and the finale change at one and the same media query: auto-fit counts the content width, which the
   scrollbar and the 4vw gutter move, and a finale that began a few px before the second column left the last card alone in the left column.
   Two columns need 2 × 400 + 16 + 2 × 4vw = 887px of viewport; three need 3 × 400 + 2 × 16 + 2 × 48 = 1328px (the gutter stops at 48px from 1200px).
   The finale is a subgrid of the card grid, so its image covers every column but the last and its text sits in the last one, on the same left
   edge as the text of the cards above. The image shows the whole 3:2 scene while the grid is 2 columns; from 1328px it is two columns wide, so
   --wide-ratio trims it to 2:1, about the height of the rows above, and crops the scene's top and bottom eighth. */
@media (min-width: 887px) {
  .e2-services--wide .e2-services__grid { grid-template-columns: repeat(2, 1fr); }
  .e2-service--wide { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
  .e2-service--wide .e2-service__media { grid-column: 1 / -2; position: relative; height: auto; aspect-ratio: var(--wide-ratio, 3 / 2); }
  .e2-service--wide .e2-service__media img { position: absolute; inset: 0; }
  .e2-service--wide .e2-service__body { grid-column: -2 / -1; justify-content: center; padding-block: 40px; gap: 12px; }
  .e2-service--wide .e2-service__title { font-size: 32px; text-wrap: balance; }
}
@media (min-width: 1328px) {
  .e2-services--wide .e2-services__grid { grid-template-columns: repeat(3, 1fr); }
  .e2-service--wide { --wide-ratio: 2 / 1; }
}

/* ---------- 5. Audit slider ---------- */
.e2-audit { padding-top: 48px; padding-bottom: 120px; }
.e2-audit > .e2-wrap { gap: 40px; }
/* The slider is the screenshot box: the real before screen, with the after screen clipped at --pos on top of it. */
.e2-slider {
  position: relative; aspect-ratio: 1008 / 630; border-radius: 14px; overflow: hidden; background: #f1f1f1;
  cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none;
}
.e2-slider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.e2-slider__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.e2-slider__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.e2-slider__handle {
  position: absolute; top: 50%; left: var(--pos); transform: translate(-50%, -50%);
  padding: 10px 16px; border-radius: 999px; background: #fff; color: #000;
  font-size: 14px; font-weight: 500; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.e2-tag { font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; color: #fff; }
.e2-tag--black { background: #000; box-shadow: inset 0 0 0 1px var(--border-strong); }
.e2-tag--blue { background: var(--blue-strong); }
.e2-audit-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.e2-audit__caption { font-size: 14px; color: var(--text-4); text-align: center; margin-top: -16px; }

/* Stage: the handoff's wide dark frame. The screen keeps its own shape in the middle and the tags sit beside it. */
.e2-audit-stage {
  display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 720px) minmax(250px, 1fr); align-items: center; gap: 24px;
  padding: 40px; border-radius: 32px; background: var(--surface-1);
}
.e2-audit-stage .e2-tag { white-space: nowrap; }
.e2-audit-stage .e2-audit-tags--before { align-items: flex-end; }
.e2-audit-stage .e2-audit-tags--after { align-items: flex-start; }
@media (max-width: 1239px) {
  .e2-audit-stage { grid-template-columns: 1fr 1fr; padding: 20px; gap: 16px; }
  .e2-audit-stage .e2-slider { grid-column: 1 / -1; grid-row: 1; }
  .e2-audit-stage .e2-audit-tags { grid-row: 2; align-self: start; }
  .e2-audit-stage .e2-audit-tags--before { align-items: flex-start; }
  .e2-audit-stage .e2-audit-tags--after { align-items: flex-end; }
  .e2-audit-stage .e2-tag { white-space: normal; }
}
@media (max-width: 699px) {
  .e2-audit-stage { grid-template-columns: 1fr; }
  .e2-audit-stage .e2-audit-tags { grid-row: auto; }
}

@media (max-width: 599px) {
  .e2-tag { font-size: 12px; }
  .e2-slider__handle { font-size: 12px; padding: 7px 12px; }
}

/* ---------- 6. Process ---------- */
.e2-inset { padding: 0 var(--pad-inset); }
.e2-panel {
  max-width: var(--max-inset); margin: 0 auto; background: #fff; color: #000; border-radius: 36px;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px);
  display: flex; flex-direction: column; gap: 48px;
}
.e2-process .e2-panel { gap: 32px; }
.e2-process__title { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.02; letter-spacing: -.05em; text-wrap: balance; }
.e2-process__dim { color: #8b8b93; }

/* Steps: tabs directly above the stage they switch. e2.js (initProcess) fills the track and auto-advances. */
.e2-process__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.e2-step {
  text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px; opacity: .4; transition: opacity .3s ease;
}
.e2-step:hover { opacity: .75; }
.e2-step.is-active { opacity: 1; }
.e2-step__track { height: 3px; border-radius: 999px; background: var(--light-track); overflow: hidden; width: 100%; margin-bottom: 6px; }
.e2-step__fill { display: block; height: 100%; width: 0; background: #000; }
.e2-process__tab-n { font-family: var(--mono); font-size: 13px; color: var(--light-text-3); }
.e2-process__tab-t { font-weight: 600; font-size: 22px; letter-spacing: -.03em; }
.e2-process__tab-d { font-size: 15px; line-height: 1.5; color: var(--light-text-2); }

/* Stage: the founder's raw brief (in) → a small arrow → what comes back (out, changes with the step). Equal heights, and short
   enough that tabs + both cards fit one 900px-tall viewport under the sticky header. The proto shows its admin nav from 560px wide. */
.e2-flow { display: grid; grid-template-columns: minmax(0, 5fr) 36px minmax(0, 7fr); column-gap: 14px; align-items: stretch; }
.e2-process__in, .e2-flow__out { border-radius: 24px; background: #f4f4f5; border: 1px solid #e4e4e7; }
.e2-process__in { margin: 0; padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 24px; }
.e2-process__brief { margin: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.4; letter-spacing: -.02em; text-wrap: pretty; }
.e2-flow__who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.e2-flow__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #e4e4e7; color: #a1a1aa; display: grid; place-items: center; overflow: hidden; }
.e2-flow__avatar svg { margin-top: 8px; width: 34px; height: 34px; }
.e2-flow__id { display: flex; flex-direction: column; flex: 1; line-height: 1.3; }
.e2-flow__name { font-weight: 500; font-size: 17px; }
.e2-flow__role { font-size: 14px; color: var(--light-text-3); }
.e2-flow__wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.e2-flow__wave i { width: 3px; height: 100%; border-radius: 3px; background: var(--blue); transform: scaleY(.35); animation: e2-wave 1.2s ease-in-out infinite; }
.e2-flow__wave i:nth-child(2) { animation-delay: -.9s; } .e2-flow__wave i:nth-child(3) { animation-delay: -.3s; }
.e2-flow__wave i:nth-child(4) { animation-delay: -.7s; } .e2-flow__wave i:nth-child(5) { animation-delay: -.15s; }
@keyframes e2-wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.e2-process__arrow { align-self: center; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-strong); color: #fff; }
.e2-flow__out { position: relative; height: clamp(420px, 33vw, 470px); overflow: hidden; }
/* Hidden slides are also invisible to Tab, so nobody tabs into the prototype while the audit is showing. */
.e2-flow__slide { position: absolute; inset: 0; padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 18px; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.e2-flow__slide.is-active { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.e2-flow__label { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--light-text-3); }
.e2-flow__clean { font-size: clamp(20px, 1.9vw, 27px); line-height: 1.4; letter-spacing: -.015em; text-wrap: pretty; }
.e2-flow__chips { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.e2-flow__chips li { position: relative; font-size: 13px; font-weight: 500; padding: 7px 12px 7px 30px; border-radius: 999px; background: #fff; border: 1px solid #e4e4e7; }
.e2-flow__chips li::before { content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 5px; border: solid var(--blue-strong); border-width: 0 0 2px 2px; transform: translateY(-70%) rotate(-45deg); }
.e2-flow__shot { flex: none; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px #e4e4e7; }  /* the whole report fits the card width */
.e2-flow__slide--proto { padding: 20px; gap: 12px; }
.e2-flow__slide--proto .e2-flow__label { padding: 0 12px; }
.e2-flow__proto { flex: 1; min-height: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px #e4e4e7; }
@media (max-width: 1099px) {
  .e2-flow { grid-template-columns: 1fr; row-gap: 14px; }
  .e2-process__arrow { justify-self: center; transform: rotate(90deg); }
  .e2-flow__out { height: 520px; }
}
@media (max-width: 899px) {
  .e2-flow__slide { padding: 22px 22px 24px; }
  .e2-flow__slide--proto { padding: 12px; }
}
@media (max-width: 599px) {
  .e2-process__tabs { gap: 12px; }
  .e2-process__tab-t { font-size: 16px; }
  .e2-process__tab-d { display: none; }
  .e2-process__in { padding: 22px; }
}
.e2-process__note { font-size: 14px; line-height: 1.6; color: var(--light-text-3); max-width: 70ch; }

/* ---------- 7. Pricing ---------- */
.e2-pricing { padding-top: 140px; }
.e2-pricing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
/* glaido-style card: name and line, a ruled-off price, what's included, then the button. Cards in one grid row share
   their four row tracks (subgrid), so the prices, lists and buttons line up even when a name wraps. */
.e2-pricing__grid > .e2-price { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 24px; }
.e2-price {
  background: var(--surface-1); border-radius: 28px; padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
  transition: transform .3s var(--ease-out), background-color .25s ease;
}
.e2-price:hover { transform: translateY(-4px); background: var(--surface-2); }
.e2-price--featured, .e2-price--featured:hover { background: #fff; color: #000; }
.e2-price__head { display: flex; flex-direction: column; gap: 10px; }
.e2-price__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.e2-price__name { font-weight: 600; font-size: 22px; letter-spacing: -.02em; }
.e2-badge { flex: none; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--blue-strong); color: #fff; }
.e2-price__desc { font-size: 15px; line-height: 1.5; color: var(--text-3); text-wrap: pretty; }
.e2-price__amount { display: flex; flex-direction: column; gap: 6px; padding: 22px 0; border-block: 1px solid var(--border); }
.e2-price__num { font-weight: 600; font-size: 56px; letter-spacing: -.06em; line-height: 1; }
.e2-price__note { font-size: 14px; color: var(--text-4); }
.e2-price__list { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.e2-price__list li { position: relative; padding-left: 28px; }
.e2-price__list li::before {
  content: ""; position: absolute; left: 2px; top: .38em; width: 11px; height: 6px;
  border: solid var(--blue-light); border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.e2-price--featured .e2-price__desc, .e2-price--featured .e2-price__list { color: var(--light-text-2); }
.e2-price--featured .e2-price__note { color: var(--light-text-3); }
.e2-price--featured .e2-price__amount { border-color: #e4e4e7; }
.e2-price--featured .e2-price__list li::before { border-color: var(--blue-strong); }
@media (max-width: 599px) { .e2-price { padding: 24px; border-radius: 22px; } }

/* ---------- 8. Testimonials ---------- */
.e2-testimonials { padding-top: 32px; padding-bottom: 140px; }
.e2-tcard, .e2-scard { background: var(--surface-1); border: 1px solid var(--border); border-radius: 24px; padding: 32px; margin: 0; }
.e2-tcard { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.e2-tcard__quote { margin: 0; }
.e2-tcard__quote p { font-size: 18px; line-height: 1.55; letter-spacing: -.01em; color: var(--text); text-wrap: pretty; }
.e2-tcard__person { display: flex; align-items: center; gap: 14px; }
.e2-tcard__photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.e2-tcard__who { display: flex; flex-direction: column; gap: 2px; }
.e2-tcard__name { font-weight: 500; font-size: 16px; color: var(--text); }
a.e2-tcard__name:hover { color: var(--blue-light); }
.e2-tcard__role { font-size: 14px; color: var(--text-4); }
/* Stat cards, as in the glaido reference: a big figure over a mono caption. */
.e2-scard { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 220px; }
.e2-scard__value { font-weight: 600; font-size: clamp(40px, 4vw, 56px); line-height: 1; letter-spacing: -.045em; }
.e2-scard__label { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-4); }
/* Wall: three columns that fill top to bottom, stat cards mixed in. */
.e2-twall { columns: 3 300px; column-gap: 16px; }
.e2-twall > .e2-tcard, .e2-twall > .e2-scard { break-inside: avoid; margin: 0 0 16px; }  /* beats the global figure reset */
@media (max-width: 599px) {
  .e2-tcard, .e2-scard { padding: 24px; border-radius: 20px; }
  .e2-tcard__quote p { font-size: 16px; }
  .e2-scard { min-height: 160px; }
}

/* ---------- 9. Closing ---------- */
.e2-closing { padding: 0 var(--pad) 120px; }
.e2-closing__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px; }
.e2-closing__title { font-weight: 600; font-size: clamp(56px, 9vw, 144px); line-height: .9; letter-spacing: -.065em; }

/* ---------- 10. Footer ---------- */
.e2-footer { padding: 56px var(--pad) 40px; border-top: 1px solid var(--border); }
.e2-footer__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; }
.e2-footer__brand, .e2-footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.e2-footer__brand { gap: 12px; }
.e2-footer__credit { font-size: 14px; color: var(--text-4); }
.e2-footer__title { font-weight: 600; }
.e2-footer__col a, .e2-footer__legal a { color: var(--text-3); transition: color .2s ease; }
.e2-footer__col a:hover, .e2-footer__legal a:hover, .e2-footer__credit:hover { color: var(--blue-light); }
.e2-footer__legal {
  max-width: var(--max); margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--border-soft);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--text-4);
}

/* ---------- Inner pages: shared ---------- */
/* Inner pages have no hero film, so the page head starts under the bar with the section H2's scale, one step up. */
.e2-page { padding: clamp(56px, 8vw, 112px) var(--pad) clamp(96px, 10vw, 140px); }
.e2-page > .e2-wrap { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }
.e2-pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; }
.e2-h1 { font-weight: 600; font-size: clamp(56px, 8vw, 128px); line-height: .92; letter-spacing: -.065em; }
.e2-pagehead__sub { font-size: 18px; line-height: 1.5; color: var(--text-3); max-width: 36ch; text-wrap: pretty; }
.e2-h3 { font-weight: 600; font-size: clamp(30px, 3.4vw, 48px); line-height: 1; letter-spacing: -.05em; }
.e2-soon {
  flex: none; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-4); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border-strong);
}

/* Work card (portrait cover; the hover cover fades in over it, as on the old site) */
.e2-wcard { display: flex; flex-direction: column; gap: 16px; }
.e2-wcard__media { position: relative; aspect-ratio: 620 / 1060; border-radius: 24px; overflow: hidden; background: var(--surface-1); isolation: isolate; }
.e2-wcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease, transform .9s var(--ease-out); }
.e2-wcard__img--hover { opacity: 0; }
.e2-wcard:hover .e2-wcard__img--hover { opacity: 1; }
.e2-wcard:hover .e2-wcard__img { transform: scale(1.04); }
.e2-wcard__meta { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.e2-wcard__icon { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.e2-wcard__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.e2-wcard__name { font-weight: 600; font-size: 17px; letter-spacing: -.02em; }
.e2-wcard__tag { font-size: 14px; color: var(--text-4); }
.e2-wcard__tag--soon { display: none; }  /* below 1280px: "Coming soon" moves under the name, the pill goes */
/* A tagline in parts ("Food & beverage · Concept"): each part brings its own leading dot, pulled out to the left by the width the gap gives
   back, so on one line the dots sit between the parts and when a part wraps its dot is left outside the clip: no line ends or starts on "·". */
.e2-wcard__tag--parts { display: flex; flex-wrap: wrap; column-gap: .7em; overflow: hidden; }   /* .7em: the width " · " had */
.e2-wcard__tag--parts > span { white-space: nowrap; margin-left: -.7em; }
.e2-wcard__tag--parts > span::before { content: "·"; content: "·" / ""; display: inline-block; width: .7em; text-align: center; }
.e2-wcard__icon--tile { background: #fff; padding: 5px; object-fit: contain; }  /* wordmark icons (Rivo, Lumov) need the light ground they had */
.e2-wcard__go {
  flex: none; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
a.e2-wcard:hover .e2-wcard__go { background: #fff; border-color: #fff; color: #000; }

/* Work page groups ("Shopify apps", "Shopify themes"): a heading row over its own grid, the second group set a step further down. */
.e2-wgroup { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.e2-wgroup + .e2-wgroup { margin-top: clamp(24px, 4vw, 56px); }
.e2-work .e2-pagehead__sub { max-width: 52ch; }   /* the page intro and a group's intro share one measure, so they share a left edge */

/* Work page: each group is one gallery, four across */
.e2-wgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 16px; }
@media (max-width: 1099px) { .e2-wgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Below 1280px a card is too narrow for a long name beside the pill: "Coming soon" moves under the name and the pill and arrow go, so every
   card reads name over grey line. */
@media (max-width: 1279px) {
  .e2-wcard__go, .e2-wcard__meta .e2-soon { display: none; }
  .e2-wcard__tag--soon { display: block; }
}
@media (max-width: 759px) {
  .e2-wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
  .e2-wgrid > li:first-child:nth-last-child(odd) { grid-column: 1 / -1; }   /* an odd gallery reads 1 + 2s, never a card alone at the end */
  .e2-wcard { gap: 12px; }
  .e2-wcard__media { border-radius: 18px; }
  .e2-wcard__meta { flex-wrap: wrap; gap: 8px 10px; }
  .e2-wcard__icon { width: 32px; height: 32px; border-radius: 8px; }
  .e2-wcard__name { font-size: 15px; }
  .e2-wcard__tag { font-size: 13px; }
  .e2-wcard__icon--tile { padding: 4px; }
  /* Two cards side by side leave a text column of 92-139px (320-414px screens): a part that is wider than that ("Fashion accessories", 13px) wraps inside
     itself instead of being cut by the clip. Its dot is drawn over a left padding of the same .7em, so a part on several lines keeps its text on one
     edge and the dot stays where it was: between the parts on one line, outside the clip when the part starts a line. */
  .e2-wcard__tag--parts > span { position: relative; padding-left: .7em; white-space: normal; overflow-wrap: break-word; }
  .e2-wcard__tag--parts > span::before { position: absolute; left: 0; top: 0; }
}

/* ---------- Case studies (src/_includes/e2/case-study.njk) ---------- */
/* Spacing inside text blocks comes from flex gaps: the global h2/p margin reset outranks a single class. */
.e2-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 15px; font-weight: 500; color: var(--text-4); transition: color .2s ease, gap .25s var(--ease-out); }
.e2-back:hover { color: #fff; gap: 12px; }
.e2-cs__head { padding-bottom: 0; }
.e2-cs__head > .e2-wrap { gap: clamp(28px, 3.5vw, 48px); }
/* Name over summary, always: side by side would wrap for long names only, so the head would differ between case studies. */
.e2-cs__head .e2-pagehead { margin-top: -8px; flex-direction: column; align-items: flex-start; gap: 24px; }
.e2-cs__title { display: flex; align-items: center; gap: .16em; }
.e2-cs__icon { flex: none; width: .72em; height: .72em; border-radius: .2em; }
.e2-cs__summary { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; letter-spacing: -.01em; color: var(--text-2); max-width: 44ch; text-wrap: pretty; }
.e2-cs__hero { border-radius: 32px; overflow: hidden; background: var(--surface-1); }
.e2-cs__hero img { width: 100%; height: auto; }

.e2-cs__body.e2-section { padding-top: clamp(64px, 9vw, 120px); }
.e2-cs__body > .e2-wrap { display: flex; flex-direction: column; gap: clamp(64px, 8vw, 120px); }
.e2-cs__grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); align-items: start; gap: 48px clamp(48px, 7vw, 120px); }
.e2-cs__facts { position: sticky; top: calc(var(--header-h) + 32px); display: flex; flex-direction: column; gap: 40px; }
.e2-cs__fact { display: flex; flex-direction: column; gap: 14px; }
.e2-cs__label { font-family: var(--mono); font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--text-4); }
.e2-cs__services { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.45; color: var(--text-2); }
.e2-cs__value { font-size: 16px; color: var(--text-2); }
.e2-cs__story { display: flex; flex-direction: column; gap: 32px; }
.e2-cs__storytitle { font-weight: 600; font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -.05em; }
.e2-rt { max-width: 64ch; }
.e2-rt + .e2-rt { padding-top: 32px; border-top: 1px solid var(--border); }
.e2-rt h3 { font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: -.02em; color: #fff; margin: 40px 0 14px; }
.e2-rt > :first-child { margin-top: 0; }
.e2-rt p, .e2-rt li { font-size: 17px; line-height: 1.65; color: var(--text-3); text-wrap: pretty; }
.e2-rt p + p { margin-top: 10px; }
.e2-rt strong { font-weight: 500; color: #fff; }
.e2-rt ul { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.e2-rt li { position: relative; padding-left: 22px; }
.e2-rt li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-light); }

.e2-cs__gallery { display: flex; flex-direction: column; gap: 16px; }
.e2-cs__shot { width: 100%; height: auto; border-radius: 28px; background: var(--surface-1); }
.e2-cs__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Next case study */
.e2-cs__nextwrap { padding-top: 0; padding-bottom: 120px; }
.e2-cs__next {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 32px 56px;
  padding: 40px; border-radius: 32px; background: var(--surface-1); transition: background-color .25s ease;
}
.e2-cs__next:hover { background: var(--surface-2); }
.e2-cs__nexttext { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.e2-cs__nextname { display: inline-flex; align-items: center; gap: 14px; font-weight: 600; font-size: clamp(32px, 3.4vw, 48px); line-height: 1; letter-spacing: -.05em; }
.e2-cs__nextname img { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.e2-cs__nextsum { font-size: 16px; line-height: 1.5; color: var(--text-3); max-width: 44ch; text-wrap: pretty; }
.e2-cs__nexttext .e2-btn { margin-top: 6px; }
.e2-cs__nextmedia { display: block; aspect-ratio: 2720 / 1336; border-radius: 20px; overflow: hidden; }
.e2-cs__nextmedia img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.e2-cs__next:hover .e2-cs__nextmedia img { transform: scale(1.03); }
.e2-cs__next:hover .e2-btn--arrow { gap: 18px; background: #fff; }

@media (max-width: 899px) {
  .e2-cs__grid { grid-template-columns: 1fr; }
  .e2-cs__facts { position: static; flex-direction: row; flex-wrap: wrap; gap: 28px 56px; }
  .e2-cs__next { grid-template-columns: 1fr; padding: 24px; }
  .e2-cs__nextmedia { order: -1; }
}
@media (max-width: 599px) {
  .e2-cs__title { flex-direction: column; align-items: flex-start; gap: 18px; font-size: clamp(44px, 12vw, 56px); }
  .e2-cs__icon { width: 56px; height: 56px; border-radius: 14px; }
  .e2-cs__hero { border-radius: 20px; }
  .e2-cs__gallery, .e2-cs__pair { gap: 12px; }
  .e2-cs__pair { grid-template-columns: 1fr; }
  .e2-cs__shot { border-radius: 16px; }
  .e2-rt p, .e2-rt li { font-size: 16px; }
  .e2-rt h3 { font-size: 20px; }
  .e2-cs__next { border-radius: 22px; }
  .e2-cs__nextwrap { padding-bottom: 96px; }
}

/* ---------- Long-form text (Terms of Service: layouts/prose-e2.njk) ---------- */
.prose__grid { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2.4fr); gap: 48px clamp(48px, 7vw, 120px); align-items: start; }
.prose__toc { position: sticky; top: calc(var(--header-h) + 32px); }
.prose__toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: toc; }
.prose__toc li { counter-increment: toc; }
.prose__toc a { display: flex; gap: 12px; padding: 6px 0; font-size: 15px; color: var(--text-3); transition: color .2s ease; }
.prose__toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 12px; line-height: 1.8; color: var(--text-5); }
.prose__toc a:hover { color: #fff; }
.prose__body h2 { font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: -.02em; color: #fff; margin: 44px 0 12px; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose__body > h2:first-child { margin-top: 0; }
@media (max-width: 899px) {
  .prose__grid { grid-template-columns: 1fr; }
  .prose__toc { position: static; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
}

/* ---------- 404 ---------- */
.nf__inner { min-height: calc(70vh - var(--header-h)); justify-content: center; align-items: flex-start; }
.nf__code {
  font-weight: 600; font-size: clamp(120px, 24vw, 340px); line-height: .8; letter-spacing: -.07em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 30%, var(--blue-light)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nf__title { font-size: clamp(36px, 4.4vw, 64px); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .e2 *, .e2 *::before, .e2 *::after { transition-duration: .01ms !important; }
  .e2-stats .e2-digit__strip { transition: none !important; }
  .e2-service:hover .e2-service__media > * { transform: none; }
  .e2-price:hover { transform: none; }
  .e2-wcard:hover .e2-wcard__img, .e2-cs__next:hover .e2-cs__nextmedia img { transform: none; }
  .e2-flow__wave i { animation: none; transform: scaleY(.6); }
}