/* ==========================================================================
   Spark Up Creation — Elementor companion CSS
   --------------------------------------------------------------------------
   Layout, spacing, colors, typography, borders and per-device settings all live
   in Elementor (editable in the panel). This file only adds what Elementor
   cannot express natively:
     · Archivo width axis (font-stretch)          · hero mountain clip + rising sun
     · fixed header scroll state + mobile menu     · services live preview
     · portfolio "browser" frame + hover scroll    · image reveals & hero load
     · aspect ratios, overlays, focus styles       · prefers-reduced-motion
   Selectors use the spark-* CSS classes set in Advanced → CSS Classes,
   never Elementor-generated element IDs. Colors come from Elementor globals
   (var(--e-global-color-*)), so editing a global color updates this file too.
   ========================================================================== */

:root {
  --spark-nav-h: 84px;
  --spark-gutter: 56px;
  --spark-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spark-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --spark-accent: var(--e-global-color-accent, #FE3030);
  --spark-accent-ink: var(--e-global-color-sparkai, #CF1F1F);
  --spark-black: var(--e-global-color-primary, #000000);
  --spark-line: var(--e-global-color-sparkbd, #DEDEDA);
  --spark-line-dark: var(--e-global-color-sparkbdd, rgba(255, 255, 255, 0.16));
}
@media (max-width: 999px) { :root { --spark-nav-h: 72px; --spark-gutter: 40px; } }
@media (max-width: 699px) { :root { --spark-gutter: 20px; } }

html { scroll-behavior: smooth; scroll-padding-top: var(--spark-nav-h); }
body { overflow-x: clip; background: var(--spark-black); }

/* ---------- Utilities ---------- */
/* Text Editor widgets: the theme adds block margins to <p>; the design spaces paragraphs itself. */
.elementor .elementor-widget-text-editor[class*="spark-"] p { margin-block: 0; }
.elementor .elementor-widget-text-editor[class*="spark-"] p + p { margin-top: 1.25em; }
.spark-nowrap { white-space: nowrap; }
.elementor .spark-sr-only,
.spark-sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.elementor a:focus-visible,
.elementor button:focus-visible { outline: 3px solid var(--spark-accent); outline-offset: 3px; border-radius: 2px; }
.elementor .spark-stats a:focus-visible { outline-color: var(--spark-black); }
.spark-stats ::selection { background: var(--spark-black); color: var(--spark-accent); }

/* ---------- Archivo width axis (not an Elementor typography option) ---------- */
.spark-hero-title .elementor-heading-title,
.spark-heading--display .elementor-heading-title,
.spark-service-name .elementor-heading-title,
.spark-stats-title .elementor-heading-title,
.spark-mobile-links .elementor-icon-list-text { font-stretch: 112%; }
.spark-consult-title .elementor-heading-title,
.spark-cta-title .elementor-heading-title,
.spark-nav-wordmark .elementor-heading-title,
.spark-stat-number .elementor-counter-number-wrapper { font-stretch: 125%; }
.spark-promise-title .elementor-heading-title,
.spark-portfolio-title .elementor-heading-title { font-stretch: 108%; }
.spark-btn .elementor-button { font-stretch: 105%; }

.spark-heading--display .elementor-heading-title,
.spark-consult-title .elementor-heading-title,
.spark-stats-title .elementor-heading-title,
.spark-promise-title .elementor-heading-title { text-wrap: balance; }

/* ---------- Eyebrow (red "sun" dot) ---------- */
.spark-eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: 10px; }
.spark-eyebrow .elementor-heading-title::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--spark-accent);
}
.spark-eyebrow--on-red .elementor-heading-title::before { background: var(--spark-black); }
.spark-hero-eyebrow { margin-bottom: 20px; }

/* ---------- Buttons ---------- */
.spark-btn .elementor-button {
  transition: background-color .25s var(--spark-ease-out), color .25s var(--spark-ease-out),
              border-color .25s var(--spark-ease-out), transform .25s var(--spark-ease-out);
}
.spark-btn .elementor-button:active { transform: translateY(1px); }

/* ==========================================================================
   Header
   ========================================================================== */
.elementor .spark-nav {
  width: 100%;
  left: 0; right: 0;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--spark-ease-out), border-color .35s, min-height .35s var(--spark-ease-out);
}
body.admin-bar .elementor .spark-nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .elementor .spark-nav { top: 46px; } }
.elementor .spark-nav.is-scrolled {
  background-color: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--spark-line-dark);
}
@media (min-width: 1000px) { .elementor .spark-nav.is-scrolled { --min-height: 68px; } }

/* Brand: logos are black-background PNGs from Wix; "lighten" drops the black. */
.spark-nav-logo img,
.spark-footer-logo img { mix-blend-mode: lighten; }
.spark-nav-logo img { height: auto; }
.elementor .spark-nav-brand { width: auto; text-decoration: none; }
.spark-nav-wordmark .elementor-heading-title { display: block; }

/* Desktop links with red underline + current-section state */
.spark-nav-links .elementor-icon-list-items { gap: 6px; }
.spark-nav-links .elementor-icon-list-item > a { position: relative; padding: 10px 14px; }
.spark-nav-links .elementor-icon-list-item > a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--spark-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--spark-ease-out);
}
.spark-nav-links .elementor-icon-list-item > a:hover::after,
.spark-nav-links .elementor-icon-list-item > a.is-current::after { transform: scaleX(1); }
.elementor .spark-nav-links .elementor-icon-list-item > a.is-current .elementor-icon-list-text { color: #fff; }
@media (max-width: 1279px) {
  .spark-nav-links .elementor-icon-list-item > a { padding-inline: 10px; }
  .spark-nav-links .elementor-icon-list-item > a::after { left: 10px; right: 10px; }
}

/* Hamburger (HTML widget, visible below 1000px) */
.spark-nav-toggle-wrap { display: none; }
@media (max-width: 999px) { .spark-nav-toggle-wrap { display: block; } }
.spark-nav-toggle {
  position: relative; display: block; width: 48px; height: 48px; margin-right: -10px;
  padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
}
.spark-nav-toggle:hover, .spark-nav-toggle:focus { background: none; color: #fff; }
.spark-nav-toggle__bar {
  position: absolute; left: 12px; right: 12px; height: 2px; background: currentColor;
  transition: transform .35s var(--spark-ease-out), top .35s var(--spark-ease-out);
}
.spark-nav-toggle__bar:nth-of-type(2) { top: 19px; }
.spark-nav-toggle__bar:nth-of-type(3) { top: 27px; }
.spark-nav-toggle[aria-expanded="true"] .spark-nav-toggle__bar:nth-of-type(2) { top: 23px; transform: rotate(45deg); }
.spark-nav-toggle[aria-expanded="true"] .spark-nav-toggle__bar:nth-of-type(3) { top: 23px; transform: rotate(-45deg); }

/* Mobile menu: a normal Elementor container, shown as an overlay when opened */
.elementor .spark-mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  overflow-y: auto;
  padding-top: calc(var(--spark-nav-h) + 24px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
.elementor .spark-mobile-menu:not(.is-open) { display: none; }
body.spark-menu-open { overflow: hidden; }
.spark-mobile-links .elementor-icon-list-item {
  opacity: 0; transform: translateY(16px);
  animation: sparkMenuIn .5s var(--spark-ease-out) forwards;
}
.spark-mobile-links .elementor-icon-list-item:nth-child(2) { animation-delay: .04s; }
.spark-mobile-links .elementor-icon-list-item:nth-child(3) { animation-delay: .08s; }
.spark-mobile-links .elementor-icon-list-item:nth-child(4) { animation-delay: .12s; }
.spark-mobile-links .elementor-icon-list-item:nth-child(5) { animation-delay: .16s; }
@keyframes sparkMenuIn { to { opacity: 1; transform: none; } }
/* In the Elementor editor keep the menu visible in-flow so it can be edited */
.elementor-editor-active .elementor .spark-mobile-menu:not(.is-open) { display: flex; position: relative; inset: auto; }
.elementor-editor-active .spark-mobile-links .elementor-icon-list-item { opacity: 1; transform: none; animation: none; }

/* ==========================================================================
   Hero — photo clipped into the logo's mountain ridge, red sun rising behind
   ========================================================================== */
.elementor .spark-hero { overflow: hidden; }
.spark-hero-lede p { max-width: 44ch; }
.elementor .spark-hero-visual { position: relative; aspect-ratio: 1.3; pointer-events: none; }
/* let the negative right margin bleed the photo to the viewport edge (Elementor forces width:100%) */
.elementor .e-con.spark-hero-visual { width: auto; }
/* let the hero grid fill the section height so the ridge sits on the bottom edge */
.elementor .spark-hero > .e-con-inner { align-self: stretch; min-height: inherit; }
.spark-hero-visual::after { /* the sun */
  content: ""; position: absolute; z-index: 0;
  width: 34%; aspect-ratio: 1; left: 58%; top: 4%;
  translate: -50% -50%;
  border-radius: 50%; background: var(--spark-accent);
}
.elementor .spark-hero-peak {
  position: absolute; inset: 0; z-index: 1; width: 100%; max-width: none; margin: 0;
  clip-path: polygon(0 100%, 0 62%, 8% 54%, 15% 58%, 33% 27%, 40% 33%, 58% 6%, 65% 16%, 71% 12%, 85% 36%, 92% 31%, 100% 40%, 100% 100%);
}
.elementor .spark-hero-peak img {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 70%;
  filter: saturate(0.9) contrast(1.05);
}
.spark-hero-peak::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 18%;
  background: linear-gradient(to top, rgba(0, 0, 0, .35), transparent);
}
/* Laptop range (1000–1279px) — same tweak as the approved HTML */
@media (min-width: 1000px) and (max-width: 1279px) {
  .spark-hero-lede p { max-width: 44ch; }
  .elementor .e-con.spark-hero-visual { grid-column: 7 / -1 !important; }
  .elementor .spark-hero-title .elementor-heading-title { font-size: clamp(2.35rem, 0.6rem + 5.2vw, 4.4rem) !important; }
}
@media (max-width: 999px) {
  .elementor .spark-hero-visual { aspect-ratio: 1.55; }
  .spark-hero-visual::after { width: 30%; top: 8%; }
}
@media (max-width: 699px) {
  .elementor .spark-hero-visual { aspect-ratio: 1.25; }
  .spark-hero-visual::after { width: 38%; }
}
@media (max-width: 399px) {
  .spark-hero-title .elementor-heading-title { font-stretch: 104%; }
  .spark-consult-title .elementor-heading-title { font-stretch: 112%; }
}

/* Hero load sequence — only when the JS has run (never hides content otherwise) */
.spark-hero-title .spark-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.spark-hero-title .spark-line > span { display: inline-block; }
.spark-js .spark-hero-title .spark-line > span { transform: translateY(105%); }
.spark-js .spark-hero-eyebrow,
.spark-js .spark-hero-lede,
.spark-js .spark-hero-actions { opacity: 0; transform: translateY(14px); }
.spark-js .spark-hero-peak { opacity: 0; transform: translateY(6%); }
.spark-loaded .spark-hero-title .spark-line > span { transform: none; transition: transform 1s var(--spark-ease-out); }
.spark-loaded .spark-hero-title .spark-line:nth-child(2) > span { transition-delay: .08s; }
.spark-loaded .spark-hero-title .spark-line:nth-child(3) > span { transition-delay: .16s; }
.spark-loaded .spark-hero-eyebrow { opacity: 1; transform: none; transition: opacity .8s var(--spark-ease-out), transform .8s var(--spark-ease-out); }
.spark-loaded .spark-hero-lede { opacity: 1; transform: none; transition: opacity .8s .35s var(--spark-ease-out), transform .8s .35s var(--spark-ease-out); }
.spark-loaded .spark-hero-actions { opacity: 1; transform: none; transition: opacity .8s .45s var(--spark-ease-out), transform .8s .45s var(--spark-ease-out); }
.spark-loaded .spark-hero-peak { opacity: 1; transform: none; transition: opacity 1.1s .1s var(--spark-ease-out), transform 1.4s .1s var(--spark-ease-out); }

/* ==========================================================================
   About
   ========================================================================== */
.spark-about-text p + p { margin-top: 20px; }
.elementor .spark-about-text p, .elementor .spark-hero-lede p { margin-block-start: 0; }
.spark-about-text p { max-width: 62ch; }
.elementor .spark-about-media { position: relative; }
@media (max-width: 999px) { .elementor .spark-about-media { max-width: 620px; } }
.spark-about-img { overflow: hidden; }
.spark-about-img img { display: block; width: 100%; object-fit: cover; }
.spark-about-img--main img { aspect-ratio: 4 / 5; }
.spark-about-img--inset img { aspect-ratio: 3 / 2; }

/* Scroll reveal (images) */
.spark-js .spark-reveal { clip-path: inset(100% 0 0 0); }
.spark-js .spark-reveal img { transform: scale(1.12); }
.spark-js .spark-reveal.is-in { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--spark-ease-io); }
.spark-js .spark-reveal.is-in img { transform: none; transition: transform 1.6s var(--spark-ease-out); }
.spark-js .spark-about-img--inset.is-in,
.spark-js .spark-about-img--inset.is-in img { transition-delay: .2s; }

/* ==========================================================================
   Why us band
   ========================================================================== */
.elementor .spark-promise-photo { position: relative; overflow: hidden; filter: grayscale(.35) brightness(.8); }
.spark-promise-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.35) 45%, #000 100%);
}
.elementor .spark-promise-inner { position: relative; }
.spark-promise-icon img { width: 44px; height: 44px; }

/* ==========================================================================
   Services — interactive index with live preview
   ========================================================================== */
.elementor .spark-service-card { position: relative; color: inherit; text-decoration: none; }
.spark-service-card::after { /* active indicator */
  content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px;
  background: var(--spark-black); transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--spark-ease-out);
}
.spark-service-desc p { max-width: 58ch; }
.spark-service-name .elementor-heading-title { transition: color .3s; }
.elementor .spark-service-card.is-active .spark-service-name .elementor-heading-title { color: var(--spark-accent-ink); }
.spark-service-card.is-active::after { transform: scaleX(1); }

.spark-service-arrow .elementor-icon {
  border-color: var(--spark-line) !important; border-width: 1px !important;
  transition: background-color .3s, border-color .3s, transform .5s var(--spark-ease-out);
}
.spark-service-card.is-active .spark-service-arrow .elementor-icon,
.spark-service-card:hover .spark-service-arrow .elementor-icon {
  background-color: var(--spark-accent); border-color: var(--spark-accent) !important; transform: rotate(-45deg);
}

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

.elementor .spark-svc-preview { position: sticky; top: calc(var(--spark-nav-h) + 32px); align-self: flex-start; }
.elementor .spark-svc-frame { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; }
.spark-svc-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity .5s var(--spark-ease-out), transform 1.2s var(--spark-ease-out);
}
.spark-svc-frame img.is-active { opacity: 1; transform: none; }
.spark-svc-frame img.is-contain { object-fit: contain; padding: 6%; }
.spark-svc-caption .elementor-heading-title { font-variant-numeric: tabular-nums; }

@media (max-width: 999px) {
  .spark-service-card::after { display: none; }
  .elementor .spark-service-card.is-active .spark-service-name .elementor-heading-title { color: inherit; }
  .spark-service-card.is-active .spark-service-arrow .elementor-icon { background: none; border-color: var(--spark-line) !important; transform: none; }
  .spark-service-card:hover .spark-service-arrow .elementor-icon { background-color: var(--spark-accent); border-color: var(--spark-accent) !important; }
}
@media (max-width: 699px) {
  .spark-service-thumb img { aspect-ratio: 16 / 9; }
  .spark-service-arrow .elementor-icon { padding: 14px !important; }
}

/* ==========================================================================
   Consulting
   ========================================================================== */
.spark-consult-body p { max-width: 52ch; }
@media (max-width: 999px) { .elementor .spark-consult-art-wrap { max-width: 520px; } }

/* ==========================================================================
   Portfolio — browser frames; the full-page screenshot scrolls on hover
   ========================================================================== */
.spark-work-title .elementor-heading-title { max-width: 13ch; }
.spark-work-intro p { max-width: 48ch; }
@media (hover: none) { .spark-work-hint { display: none; } }

.elementor .spark-portfolio-item { display: flex; position: relative; color: inherit; text-decoration: none; }
.elementor .spark-portfolio-frame { overflow: hidden; transition: border-color .4s; }
.elementor .spark-portfolio-bar {
  position: relative; display: flex; align-items: center;
  height: 34px; padding: 0 14px 0 60px;
  border-bottom: 1px solid var(--spark-line-dark);
}
.spark-portfolio-bar::before { /* three window dots */
  content: ""; position: absolute; left: 14px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: #444; box-shadow: 14px 0 0 #444, 28px 0 0 #444;
}
.spark-portfolio-bar .elementor-heading-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elementor .spark-portfolio-view { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: #2a2a2a; }
.elementor .spark-portfolio-shot { position: absolute; top: 0; left: 0; width: 100%; margin: 0; }
.spark-portfolio-shot img { display: block; width: 100%; height: auto; max-width: none; transition: transform 3.6s var(--spark-ease-io); }
.spark-portfolio-item:hover .spark-portfolio-shot img,
.spark-portfolio-item:focus-visible .spark-portfolio-shot img { transform: translateY(-40%); }
.spark-portfolio-item:hover .spark-portfolio-frame,
.spark-portfolio-item:focus-visible .spark-portfolio-frame { border-color: var(--spark-accent) !important; }
.spark-portfolio-visit .elementor-heading-title {
  padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s;
}
.spark-portfolio-item:hover .spark-portfolio-visit .elementor-heading-title,
.spark-portfolio-item:focus-visible .spark-portfolio-visit .elementor-heading-title { color: #fff; border-color: var(--spark-accent); }
.elementor .spark-portfolio-item:focus-visible { outline-offset: 6px; }
.elementor .spark-portfolio-meta > .elementor-widget:last-child { flex: none; }

/* Mobile: swipeable rail */
@media (max-width: 699px) {
  .elementor .e-con.spark-work-grid {
    display: flex !important; flex-direction: row; gap: 16px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--spark-gutter) * -1); padding-inline: var(--spark-gutter);
    scroll-padding-inline: var(--spark-gutter); padding-bottom: 12px;
    width: calc(100% + var(--spark-gutter) * 2); max-width: none; box-sizing: border-box;
    scrollbar-width: thin; scrollbar-color: #444 transparent;
  }
  .elementor .spark-work-grid > .spark-portfolio-item { flex: 0 0 82%; width: 82%; scroll-snap-align: start; }
  .elementor .spark-portfolio-view { aspect-ratio: 4 / 5; }
}

/* ==========================================================================
   Stats
   ========================================================================== */
.spark-stats-body p { max-width: 46ch; }
.spark-stat-icon img { width: 32px; height: 32px; }
.spark-stat-number .elementor-counter { justify-content: flex-start; }
.spark-stat-number .elementor-counter-number-wrapper {
  justify-content: flex-start; align-items: flex-start; font-variant-numeric: tabular-nums;
}
.spark-stat-number .elementor-counter-number-suffix { font-size: .5em; line-height: 1; margin-left: .04em; }
@media (max-width: 699px) {
  .spark-stat-number .elementor-counter,
  .spark-stat-number .elementor-counter-number-wrapper { justify-content: flex-end; }
}

/* ==========================================================================
   Final CTA — grayscale photo under a black gradient
   ========================================================================== */
.elementor .spark-cta { isolation: isolate; background-blend-mode: luminosity; }
.spark-cta::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.87) 40%, rgba(0,0,0,.9) 70%, #000 100%);
}
.elementor .spark-cta > .e-con-inner { position: relative; z-index: 1; }
.spark-cta-body p { max-width: 36ch; }
.spark-cta-mail .elementor-heading-title a {
  border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 3px; overflow-wrap: anywhere;
  transition: color .2s, border-color .2s;
}
.spark-cta-mail .elementor-heading-title a:hover { color: var(--spark-accent); border-color: var(--spark-accent); }
.elementor .spark-cta-art { width: min(100%, 320px); }
.spark-cta-art svg { display: block; width: 100%; height: auto; }
@media (max-width: 999px) { .elementor .spark-cta-art { width: min(60%, 260px); } }

/* ==========================================================================
   Footer
   ========================================================================== */
.elementor .spark-footer { padding-bottom: env(safe-area-inset-bottom, 0px); }
.spark-footer-about-text p { max-width: 44ch; }
.spark-footer-mail .elementor-heading-title a,
.spark-mobile-mail .elementor-heading-title a { overflow-wrap: anywhere; transition: color .2s; }
.spark-footer-mail .elementor-heading-title a:hover { color: var(--spark-accent); }
.spark-footer-top .elementor-heading-title a:hover { color: #fff; }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .elementor *, .elementor *::before, .elementor *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0ms !important;
  }
  .spark-js .spark-hero-title .spark-line > span,
  .spark-js .spark-hero-eyebrow, .spark-js .spark-hero-lede, .spark-js .spark-hero-actions,
  .spark-js .spark-hero-peak { opacity: 1; transform: none; }
  .spark-js .spark-reveal { clip-path: none; }
  .spark-js .spark-reveal img { transform: none; }
  .spark-portfolio-item:hover .spark-portfolio-shot img,
  .spark-portfolio-item:focus-visible .spark-portfolio-shot img { transform: none; }
}

/* ==========================================================================
   INNER PAGES (About · Services · Portfolio · Contact)
   Everything below uses page-specific classes, so the homepage is unaffected.
   ========================================================================== */

/* ---------- Mobile menu: current page ---------- */
.elementor .spark-mobile-links .elementor-icon-list-item > a.is-current .elementor-icon-list-text { color: var(--spark-accent); }

/* ---------- Page hero (shared) ---------- */
.elementor .spark-page-hero { position: relative; overflow: hidden; isolation: isolate; }
.elementor .spark-page-hero > .e-con-inner { position: relative; z-index: 1; }
.spark-page-hero::after { /* the brand's rising sun, cropped by the section's bottom edge */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: clamp(180px, 24vw, 360px); aspect-ratio: 1; right: max(var(--spark-gutter), calc((100vw - 1320px) / 2));
  bottom: 0; translate: 0 52%; border-radius: 50%; background: var(--spark-accent);
}
.spark-page-hero.spark-about-hero::after,
.spark-page-hero.spark-contact-hero::after { display: none; }
.spark-page-title .elementor-heading-title { font-stretch: 112%; text-wrap: balance; max-width: 16ch; }
.spark-page-lede p { max-width: 52ch; }
@media (max-width: 999px) { .spark-page-hero::after { width: clamp(120px, 26vw, 220px); } }
@media (max-width: 699px) { .spark-page-hero::after { width: 112px; translate: 0 58%; } }
@media (max-width: 399px) { .spark-page-title .elementor-heading-title { font-stretch: 104%; } }

/* Hero load: same line-by-line entrance as the homepage, without hiding anything when JS is off */
.spark-js .spark-page-hero .spark-hero-eyebrow,
.spark-js .spark-page-title,
.spark-js .spark-page-lede { opacity: 0; transform: translateY(14px); }
.spark-js.spark-loaded .spark-page-hero .spark-hero-eyebrow,
.spark-js.spark-loaded .spark-page-title,
.spark-js.spark-loaded .spark-page-lede { opacity: 1; transform: none; transition: opacity .8s var(--spark-ease-out), transform .8s var(--spark-ease-out); }
.spark-js.spark-loaded .spark-page-title { transition-delay: .08s; }
.spark-js.spark-loaded .spark-page-lede { transition-delay: .2s; }

/* About hero image: the mountain ridge + sun motif, full width */
.elementor .spark-ridge { position: relative; aspect-ratio: 2.6; width: auto; }
.spark-ridge::after {
  content: ""; position: absolute; z-index: 0; width: 15%; aspect-ratio: 1; left: 64%; top: 0;
  translate: -50% -50%; border-radius: 50%; background: var(--spark-accent);
}
.elementor .spark-page-hero-img { position: absolute; inset: 0; z-index: 1; width: 100%; max-width: none; margin: 0;
  clip-path: polygon(0 100%, 0 58%, 9% 46%, 17% 52%, 34% 22%, 42% 30%, 64% 4%, 72% 16%, 78% 11%, 90% 34%, 100% 26%, 100% 100%); }
.spark-page-hero-img img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 60%; }
@media (max-width: 999px) { .elementor .spark-ridge { aspect-ratio: 1.7; } .spark-ridge::after { width: 24%; } }
@media (max-width: 699px) { .elementor .spark-ridge { aspect-ratio: 1.2; } .spark-ridge::after { width: 30%; top: 2%; } }

/* ---------- About ---------- */
.spark-goal .elementor-heading-title { font-stretch: 112%; text-wrap: balance; }
.spark-about-intro-img img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.spark-about-longform p { max-width: 60ch; }
.spark-about-longform p:first-child { font-size: 1.1875rem; line-height: 1.6; color: var(--spark-black); }
.spark-approach-copy .spark-consult-title .elementor-heading-title { max-width: 14ch; }
@media (max-width: 999px) { .elementor .spark-approach-art { max-width: 480px; } }

.elementor .spark-cap { color: inherit; text-decoration: none; }
.spark-cap .spark-cap-name .elementor-heading-title { font-stretch: 112%; transition: color .3s, transform .5s var(--spark-ease-out); }
.spark-cap:hover .spark-cap-name .elementor-heading-title,
.spark-cap:focus-visible .spark-cap-name .elementor-heading-title { color: var(--spark-accent-ink); transform: translateX(8px); }
.spark-cap .spark-service-arrow .elementor-icon {
  border-color: var(--spark-line) !important; border-width: 1px !important;
  transition: background-color .3s, border-color .3s, transform .5s var(--spark-ease-out);
}
.spark-cap:hover .spark-service-arrow .elementor-icon,
.spark-cap:focus-visible .spark-service-arrow .elementor-icon { background-color: var(--spark-accent); border-color: var(--spark-accent) !important; transform: rotate(-45deg); }
@media (min-width: 1000px) { .elementor .spark-caps-head { position: sticky; top: calc(var(--spark-nav-h) + 40px); } }

/* ---------- Services page ---------- */
.elementor .spark-index-item { color: inherit; text-decoration: none; }
.spark-index-num .elementor-heading-title { font-variant-numeric: tabular-nums; }
.spark-index-name .elementor-heading-title { transition: color .25s; }
.spark-index-item:hover .spark-index-name .elementor-heading-title,
.spark-index-item:focus-visible .spark-index-name .elementor-heading-title { color: var(--spark-accent); }
.spark-svc-block-title .elementor-heading-title { font-stretch: 112%; }
.spark-svc-block-desc p { max-width: 46ch; }
.spark-svc-block-num .elementor-heading-title { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.spark-svc-block-img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--e-global-color-sparklt, #EFEFEC); }
#wix-velo .spark-svc-block-img img { object-fit: contain; padding: 4%; }
.spark-svc-block--flip .spark-svc-block-img img { background: #fff; }

/* ---------- Portfolio page ---------- */
.elementor .spark-pf-page .spark-portfolio-view { container-type: size; }
.elementor .spark-pf-page .spark-portfolio-item--wide .spark-portfolio-view { aspect-ratio: 16 / 8; }
.elementor .spark-pf-page .spark-portfolio-item--tall .spark-portfolio-view { aspect-ratio: 1 / 1; }
/* scroll exactly to the bottom of each screenshot, whatever the frame proportions */
.spark-pf-page .spark-portfolio-item:hover .spark-portfolio-shot img,
.spark-pf-page .spark-portfolio-item:focus-visible .spark-portfolio-shot img { transform: translateY(calc(-100% + 100cqh)); }
.spark-pf-page .spark-portfolio-shot img { transition-duration: 4.5s; }
.spark-portfolio-num .elementor-heading-title { font-variant-numeric: tabular-nums; min-width: 2.2em; }
.elementor .spark-pf-page .spark-portfolio-meta > .spark-portfolio-visit { margin-left: auto; }
.spark-pf-page .spark-portfolio-item--wide .spark-portfolio-title .elementor-heading-title { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
@media (max-width: 999px) {
  .elementor .spark-pf-page .spark-portfolio-item--wide .spark-portfolio-view { aspect-ratio: 16 / 10; }
  .elementor .spark-pf-page .spark-portfolio-item--tall .spark-portfolio-view { aspect-ratio: 16 / 10; }
}
@media (max-width: 699px) {
  .elementor .spark-pf-page .spark-portfolio-item--wide .spark-portfolio-view,
  .elementor .spark-pf-page .spark-portfolio-item--tall .spark-portfolio-view { aspect-ratio: 4 / 5; }
}

/* ---------- Contact page ---------- */
.spark-contact-email .elementor-heading-title a { color: inherit; border-bottom: 1px solid var(--spark-line-dark); padding-bottom: 2px; overflow-wrap: anywhere; transition: color .2s, border-color .2s; }
.spark-contact-email .elementor-heading-title a:hover { color: var(--spark-accent); border-color: var(--spark-accent); }
.elementor .spark-contact-art { width: 180px; margin-top: 56px; }
.spark-contact-art svg { display: block; width: 100%; height: auto; }
@media (max-width: 999px) { .elementor .spark-contact-art { display: none; } }
.elementor .spark-form-card { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); scroll-margin-top: calc(var(--spark-nav-h) + 16px); }

.spark-form { display: grid; gap: 20px; font-family: inherit; }
.spark-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.spark-field { display: grid; gap: 8px; min-width: 0; }
.spark-field label { font-size: .875rem; font-weight: 600; color: var(--spark-black); line-height: 1.3; }
.spark-field label span { color: var(--spark-accent-ink); }
.spark-form input[type="text"], .spark-form input[type="email"], .spark-form input[type="tel"],
.spark-form select, .spark-form textarea {
  width: 100%; min-height: 52px; padding: 13px 16px; margin: 0;
  font: inherit; font-size: 1rem; line-height: 1.4; color: var(--spark-black);
  background: #fff; border: 1px solid #BDBDB8; border-radius: 3px; box-shadow: none;
  transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.spark-form textarea { min-height: 150px; resize: vertical; }
.spark-form input:hover, .spark-form select:hover, .spark-form textarea:hover { border-color: #8E8E8A; }
.spark-form input:focus, .spark-form select:focus, .spark-form textarea:focus {
  outline: none; border-color: var(--spark-black); box-shadow: 0 0 0 3px rgba(254, 48, 48, .35);
}
.spark-form [aria-invalid="true"] { border-color: var(--spark-accent-ink); }
.spark-select { position: relative; }
.spark-select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--spark-black); border-bottom: 2px solid var(--spark-black); transform: rotate(45deg); pointer-events: none; }
.spark-form select { padding-right: 44px; cursor: pointer; }
.spark-field__error { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--spark-accent-ink); }
.spark-form__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.spark-form__foot { padding-top: 4px; }
.spark-form__submit {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 32px;
  font: inherit; font-size: 1rem; font-weight: 600; font-stretch: 105%; line-height: 1.1;
  color: var(--spark-black); background: var(--spark-accent); border: 0; border-radius: 3px; cursor: pointer;
  transition: background-color .25s var(--spark-ease-out), color .25s var(--spark-ease-out);
}
.spark-form__submit:hover, .spark-form__submit:focus-visible { background: var(--spark-accent-ink); color: #fff; }
.spark-form__submit:focus-visible { outline: 3px solid var(--spark-black); outline-offset: 3px; }
.spark-form__submit[disabled] { opacity: .7; cursor: progress; }
.spark-form__status { padding: 16px 18px; border-radius: 3px; font-size: 1rem; line-height: 1.5; border-left: 4px solid; outline: none; }
.spark-form__status[data-state="sent"] { background: #F1F1EE; color: var(--spark-black); border-color: var(--spark-black); }
.spark-form__status[data-state="invalid"],
.spark-form__status[data-state="error"] { background: #FDEDED; color: #8A1515; border-color: var(--spark-accent-ink); }
@media (max-width: 699px) {
  .spark-form__row { grid-template-columns: minmax(0, 1fr); }
  .spark-form__submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .spark-js .spark-page-hero .spark-hero-eyebrow, .spark-js .spark-page-title, .spark-js .spark-page-lede { opacity: 1; transform: none; }
  .spark-pf-page .spark-portfolio-item:hover .spark-portfolio-shot img,
  .spark-pf-page .spark-portfolio-item:focus-visible .spark-portfolio-shot img { transform: none; }
  .spark-cap:hover .spark-cap-name .elementor-heading-title { transform: none; }
}

/* ==========================================================================
   RISING SUN — reusable component (homepage hero, About hero, any future page)
   Usage in Elementor: add the CSS class  spark-sun-rise  to the container whose ::after draws the sun.
   js/sparkup-elementor.js → initSunRise() adds .is-risen once the container's image has loaded.
   Values are the homepage's original animation, unchanged.
   ========================================================================== */
.spark-js .spark-sun-rise::after { transform: translateY(55%) scale(.85); opacity: 0; }
.spark-js .spark-sun-rise.is-risen::after {
  opacity: 1; transform: none;
  transition: opacity .6s .5s, transform 1.8s .5s var(--spark-ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .spark-js .spark-sun-rise::after { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   ABOUT PAGE v2 — every rule below is scoped to .spark-ab-* classes, which only exist on /about/.
   Decorations use ::after (Elementor reserves a container's ::before for its background overlay).
   The rising sun is untouched: .spark-ridge + .spark-sun-rise (see "RISING SUN" above).
   ========================================================================== */

/* ---------- Hero ---------- */
.elementor .spark-ab-hero { overflow: visible; z-index: 2; }          /* lets the inset photo overlap the next section */
.spark-ab-title .elementor-heading-title { max-width: 13ch; }
.spark-ab-red { color: var(--spark-accent); }
.spark-ab-hero-lede p { max-width: 40ch; }
.elementor .spark-ab-hero-inset { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55); }
.spark-ab-hero-inset img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.spark-js .spark-ab-hero-inset { opacity: 0; transform: translateY(24px); }
.spark-js.spark-loaded .spark-ab-hero-inset { opacity: 1; transform: none;
  transition: opacity .9s .9s var(--spark-ease-out), transform 1.2s .9s var(--spark-ease-out); }
@media (max-width: 999px) { .spark-ab-title .elementor-heading-title { max-width: 13ch; } }

/* ---------- Intro ---------- */
.spark-ab-statement .elementor-heading-title { font-stretch: 112%; text-wrap: balance; max-width: 26ch; }
.spark-ab-mark { text-decoration: underline; text-decoration-color: var(--spark-accent); text-decoration-thickness: .09em; text-underline-offset: .14em; }
.elementor .spark-ab-intro-media { position: relative; }
.spark-ab-intro-media::after {                                         /* red block behind the photo */
  content: ""; position: absolute; z-index: 0; right: -24px; bottom: -24px; width: 42%; height: 38%;
  background: var(--spark-accent);
}
.elementor .spark-ab-intro-img { position: relative; z-index: 1; }
.spark-ab-intro-img img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.spark-ab-longform p { max-width: 60ch; }
.spark-ab-longform p:first-child { font-size: clamp(1.1875rem, 1rem + .5vw, 1.375rem); line-height: 1.55; color: var(--spark-black); }
@media (max-width: 999px) { .elementor .spark-ab-intro-media { max-width: 520px; } }
@media (max-width: 699px) { .spark-ab-intro-media::after { right: -12px; bottom: -12px; } }

/* ---------- Why (dark) ---------- */
@media (min-width: 1000px) { .elementor .spark-ab-why-lead { position: sticky; top: calc(var(--spark-nav-h) + 40px); } }
.spark-ab-why-heading .elementor-heading-title { max-width: 12ch; }
.spark-ab-why-img img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; filter: grayscale(.35); }
.elementor .spark-ab-why-row { position: relative; }
.spark-ab-why-row::after {                                             /* red rule that sweeps in on hover */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--spark-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--spark-ease-out);
}
.spark-ab-why-row:hover::after { transform: scaleX(1); }
.spark-ab-why-num .elementor-heading-title { font-variant-numeric: tabular-nums; min-width: 2.2em; display: inline-block; padding-top: .55em; }
.spark-ab-why-title .elementor-heading-title { font-stretch: 112%; transition: transform .5s var(--spark-ease-out); }
.spark-ab-why-row:hover .spark-ab-why-title .elementor-heading-title { transform: translateX(10px); }
.spark-ab-why-icon img { display: block; transition: transform .5s var(--spark-ease-out); }
.spark-ab-why-row:hover .spark-ab-why-icon img { transform: scale(1.12) rotate(-6deg); }
@media (max-width: 699px) { .spark-ab-why-num .elementor-heading-title { padding-top: .35em; } }

/* ---------- What we do (typographic grid) ---------- */
.spark-ab-caps-intro p { max-width: 40ch; }
.elementor .spark-ab-cap { color: inherit; text-decoration: none; height: 100%; transition: background-color .35s var(--spark-ease-out); }
.spark-ab-cap .spark-ab-cap-desc { flex-grow: 1; }
.spark-ab-cap-num .elementor-heading-title { font-variant-numeric: tabular-nums; }
.spark-ab-cap-name .elementor-heading-title { font-stretch: 112%; }
.spark-ab-cap .spark-ab-arrow .elementor-icon { border-color: var(--spark-line) !important; transition: background-color .3s, border-color .3s, transform .5s var(--spark-ease-out); }
.spark-ab-cap:hover, .spark-ab-cap:focus-visible { background-color: #fff; }
.spark-ab-cap:hover .spark-ab-arrow .elementor-icon,
.spark-ab-cap:focus-visible .spark-ab-arrow .elementor-icon { background-color: var(--spark-accent); border-color: var(--spark-accent) !important; transform: rotate(-45deg); }
@media (max-width: 699px) { .spark-ab-cap:hover, .spark-ab-cap:focus-visible { background-color: transparent; } }

/* ---------- Achievements ---------- */
.spark-ab-stats .spark-stats-title .elementor-heading-title { max-width: 16ch; }
@media (max-width: 999px) and (min-width: 700px) { .elementor .spark-ab-stats-list > .spark-stat:nth-child(n + 3) { margin-top: 0; } }

/* ---------- Approach: principles on a line that draws itself ---------- */
.spark-ab-approach-title .elementor-heading-title { max-width: 14ch; }
.elementor .spark-ab-approach-art { max-width: 460px; }
.elementor .spark-ab-path { position: relative; }
.spark-ab-path::after {
  content: ""; position: absolute; z-index: 0; left: 27px; top: 36px; bottom: 120px; width: 2px;
  background: var(--spark-accent); transform-origin: top;
}
.spark-ab-step-num .elementor-heading-title {
  position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px;
  border: 1px solid var(--spark-black); border-radius: 50%; background: #fff; font-variant-numeric: tabular-nums;
  transition: background-color .4s, color .4s, border-color .4s;
}
.spark-ab-step:hover .spark-ab-step-num .elementor-heading-title { background: var(--spark-accent); border-color: var(--spark-accent); }
.spark-ab-step-title .elementor-heading-title { font-stretch: 108%; padding-top: 14px; }
.spark-ab-step-text p { max-width: 48ch; }
.elementor .spark-ab-path > .elementor-widget-button { margin-left: 84px; }
.spark-js .spark-ab-path::after { transform: scaleY(0); }
.spark-js .spark-ab-path.is-in::after { transform: scaleY(1); transition: transform 1.6s var(--spark-ease-out); }
.spark-js .spark-ab-step { opacity: 0; transform: translateY(16px); }
.spark-js .spark-ab-path.is-in .spark-ab-step { opacity: 1; transform: none; transition: opacity .7s var(--spark-ease-out), transform .7s var(--spark-ease-out); }
.spark-js .spark-ab-path.is-in .spark-ab-step:nth-child(2) { transition-delay: .35s; }
.spark-js .spark-ab-path.is-in .spark-ab-step:nth-child(3) { transition-delay: .7s; }
@media (max-width: 699px) {
  .spark-ab-path::after { left: 21px; top: 30px; bottom: 96px; }
  .spark-ab-step-num .elementor-heading-title { width: 44px; height: 44px; }
  .spark-ab-step-title .elementor-heading-title { padding-top: 9px; }
  .elementor .spark-ab-path > .elementor-widget-button { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .spark-js .spark-ab-hero-inset, .spark-js .spark-ab-step { opacity: 1; transform: none; }
  .spark-js .spark-ab-path::after { transform: none; }
  .spark-ab-why-row::after, .spark-ab-why-title .elementor-heading-title, .spark-ab-why-icon img { transition: none; }
}

/* ==========================================================================
   ABOUT v2.1 — Vision & Mission + What makes us different (scoped; About page only)
   ========================================================================== */

/* ---------- Vision & Mission: split dark | light, a red sun on the seam ---------- */
.elementor .spark-vm { position: relative; }
@media (min-width: 1000px) {
  .elementor .spark-vm-panel--dark  { padding-left:  max(56px, calc((100vw - 1320px) / 2)) !important; }
  .elementor .spark-vm-panel--light { padding-right: max(56px, calc((100vw - 1320px) / 2)) !important; }
}
.elementor .spark-vm-panel--light { position: relative; z-index: 1; }
.spark-vm-panel--light::after {                       /* the sun, straddling the seam between the two panels */
  content: ""; position: absolute; z-index: 2; left: 0; top: 50%; width: clamp(96px, 9vw, 148px); aspect-ratio: 1;
  border-radius: 50%; background: var(--spark-accent); transform: translate(-50%, -50%);
}
.spark-vm-num .elementor-heading-title {
  /* !important: overrides the per-widget global typography/colour Elementor generates for this heading */
  font-size: clamp(5rem, 3rem + 5vw, 8.5rem) !important; font-weight: 800 !important; font-stretch: 125%;
  line-height: .8 !important; letter-spacing: -.04em !important;
  color: transparent !important; -webkit-text-stroke: 1.5px currentColor; font-variant-numeric: tabular-nums;
}
.spark-vm-panel--dark .spark-vm-num .elementor-heading-title { -webkit-text-stroke-color: rgba(255, 255, 255, .45); }
.spark-vm-panel--light .spark-vm-num .elementor-heading-title { -webkit-text-stroke-color: rgba(0, 0, 0, .3); }
.spark-vm-statement .elementor-heading-title { font-stretch: 112%; text-wrap: balance; max-width: 18ch; }
.spark-vm-support p { max-width: 44ch; }
@media (max-width: 999px) {
  .spark-vm-panel--light::after { left: auto; right: 40px; top: 0; transform: translate(0, -50%); width: 112px; }
  .spark-vm-statement .elementor-heading-title { max-width: 20ch; }
}
@media (max-width: 699px) { .spark-vm-panel--light::after { right: 20px; width: 84px; } }
/* reveal */
.spark-js .spark-vm-panel .spark-vm-statement,
.spark-js .spark-vm-panel .spark-vm-support { opacity: 0; transform: translateY(20px); }
.spark-js .spark-vm-panel.is-in .spark-vm-statement,
.spark-js .spark-vm-panel.is-in .spark-vm-support { opacity: 1; transform: none; transition: opacity .9s var(--spark-ease-out), transform .9s var(--spark-ease-out); }
.spark-js .spark-vm-panel.is-in .spark-vm-support { transition-delay: .15s; }
.spark-js .spark-vm-panel--light::after { transform: translate(-50%, -50%) scale(0); }
.spark-js .spark-vm-panel--light.is-in::after { transform: translate(-50%, -50%) scale(1); transition: transform 1.1s .25s var(--spark-ease-out); }
@media (max-width: 999px) {
  .spark-js .spark-vm-panel--light::after { transform: translate(0, -50%) scale(0); }
  .spark-js .spark-vm-panel--light.is-in::after { transform: translate(0, -50%) scale(1); }
}

/* ---------- What makes us different: giant outline words ---------- */
.spark-diff-heading .elementor-heading-title { max-width: 14ch; }
.spark-diff-word .elementor-heading-title {
  font-stretch: 125%; color: transparent !important; -webkit-text-stroke: 1.5px var(--spark-black);
  transition: color .5s var(--spark-ease-out), -webkit-text-stroke-color .5s var(--spark-ease-out);
}
.spark-diff-row:hover .spark-diff-word .elementor-heading-title { color: var(--spark-accent) !important; -webkit-text-stroke-color: var(--spark-accent); }
.spark-diff-num .elementor-heading-title { font-variant-numeric: tabular-nums; }
.spark-diff-text p { max-width: 34ch; }
.spark-diff-row--flip .spark-diff-copy { text-align: left; }
.spark-js .spark-diff-row .spark-diff-word { opacity: 0; transform: translateX(-40px); }
.spark-js .spark-diff-row--flip .spark-diff-word { transform: translateX(40px); }
.spark-js .spark-diff-row .spark-diff-copy { opacity: 0; }
.spark-js .spark-diff-row.is-in .spark-diff-word,
.spark-js .spark-diff-row.is-in .spark-diff-copy { opacity: 1; transform: none; transition: opacity .9s var(--spark-ease-out), transform 1.1s var(--spark-ease-out); }
.spark-js .spark-diff-row.is-in .spark-diff-copy { transition-delay: .2s; }
@media (max-width: 699px) {
  .spark-diff-word .elementor-heading-title { -webkit-text-stroke-width: 1.2px; }
  .spark-js .spark-diff-row--flip .spark-diff-word { transform: translateX(-40px); }
}

@media (prefers-reduced-motion: reduce) {
  .spark-js .spark-vm-panel .spark-vm-statement, .spark-js .spark-vm-panel .spark-vm-support,
  .spark-js .spark-diff-row .spark-diff-word, .spark-js .spark-diff-row .spark-diff-copy { opacity: 1; transform: none; }
  .spark-js .spark-vm-panel--light::after { transform: translate(-50%, -50%); transition: none; }
  .spark-diff-word .elementor-heading-title { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 999px) {
  .spark-js .spark-vm-panel--light::after { transform: translate(0, -50%); }
}