/* ==========================================================================
   Site styles: light purple-and-white theme with an optional dark mode.
   One stylesheet, no frameworks. Motion is CSS-first and respects
   prefers-reduced-motion.
   ========================================================================== */

:root {
  --bg: #ffffff;
  --soft: #f7f5ff;
  --soft-2: #f1edfd;
  --surface: #ffffff;
  --ink: #1a1530;
  --ink-2: #3d3756;
  --muted: #5f587a;
  --line: #e9e5f5;
  --line-strong: #d9d2ef;
  --primary: #6d28d9;
  --primary-fill: #6d28d9;
  --primary-hover: #5b21b6;
  --primary-soft: #ede7fe;
  --accent: #a78bfa;
  --on-primary: #ffffff;
  --error: #dc2626;
  --shadow: 0 1px 2px rgba(26, 21, 48, .04), 0 12px 32px -12px rgba(76, 29, 149, .16);
  --shadow-lg: 0 2px 4px rgba(26, 21, 48, .04), 0 28px 60px -20px rgba(76, 29, 149, .28);

  --font-display: "Inter Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --radius: 20px;
  --gutter: clamp(16px, 4vw, 32px);
  --max: 1160px;
  --section: clamp(80px, 10vw, 136px);
  --header-h: 72px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .19 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
  --texture-dot: color-mix(in srgb, var(--primary-fill) 34%, transparent);
  --texture-line: color-mix(in srgb, var(--primary-fill) 9%, transparent);
  --texture-glow: color-mix(in srgb, var(--accent) 16%, transparent);

  color-scheme: light;
  interpolate-size: allow-keywords;
}

:root[data-theme="dark"] {
  --bg: #0f0c1a;
  --soft: #151125;
  --soft-2: #1d1833;
  --surface: #181429;
  --ink: #f4f2fb;
  --ink-2: #d6d1e8;
  --muted: #a49dbd;
  --line: #2a2442;
  --line-strong: #3a3358;
  --primary: #c4b5fd;
  --primary-fill: #7c3aed;
  --primary-hover: #8b5cf6;
  --primary-soft: #2a2050;
  --accent: #a78bfa;
  --error: #f87171;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  --texture-dot: color-mix(in srgb, var(--accent) 22%, transparent);
  --texture-line: color-mix(in srgb, var(--accent) 9%, transparent);
  --texture-glow: color-mix(in srgb, var(--primary-fill) 22%, transparent);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .55);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 28px 60px -20px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* Fine paper grain over the base colour (a small tiled SVG noise, rendered once). */
  background-color: var(--bg);
  background-image: var(--grain);
  background-size: 180px 180px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color .3s ease, color .3s ease;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; color: var(--ink); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--primary); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img, svg { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--primary-fill); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--primary-soft); color: var(--ink); }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* WordPress adds block-gap margins between top-level blocks; the layout here manages its own spacing. */
.wp-site-blocks > * { margin-block: 0; }
.home-main .wp-block-group > * { margin-block: 0; }

.wrap { width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }

/* ---------- Buttons ---------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.wp-block-button .wp-block-button__link,
.wp-block-button__link.wp-element-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border: 1.5px solid var(--primary-fill); border-radius: 999px;
  background: var(--primary-fill); color: var(--on-primary);
  font-family: var(--font-body); font-size: .9375rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.wp-block-button .wp-block-button__link:hover {
  background: var(--primary-hover); border-color: var(--primary-hover);
  transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(109, 40, 217, .6);
}
.wp-block-button .wp-block-button__link:active { transform: translateY(0); }
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--ink); border-color: var(--line-strong);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--primary-soft); color: var(--primary); border-color: var(--primary-fill); box-shadow: none;
}
.wp-block-button.is-style-inverse > .wp-block-button__link { background: #fff; color: #4c1d95; border-color: #fff; }
.wp-block-button.is-style-inverse > .wp-block-button__link:hover { background: #f5f3ff; color: #4c1d95; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .35); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50;
  /* Solid-ish background, no backdrop blur: blurring moving content on every scroll frame is costly. */
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.is-scrolled .site-header { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(26, 21, 48, .35); }
.header-inner {
  width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; min-height: var(--header-h);
  display: flex; align-items: center; gap: 1.5rem;
}
.header-inner > * { margin: 0 !important; }
.brand { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em; margin: 0; white-space: nowrap; }
.brand a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .6rem; }
/* Logo mark (assets/logo-mark.svg) shown before the site title; the title text comes from Settings → General. */
.brand a::before {
  content: ""; width: 30px; height: 30px; flex: none;
  background: url("logo-mark.svg") center / contain no-repeat;
  filter: drop-shadow(0 4px 10px rgba(109, 40, 217, .35));
  transition: transform .4s var(--ease);
}
.brand a:hover::before { transform: rotate(-8deg) scale(1.06); }
.site-nav { margin-left: auto !important; }
.site-nav .wp-block-navigation__container { gap: .25rem; }
.site-nav .wp-block-navigation-item__content {
  position: relative; display: inline-block; padding: .5rem .75rem; border-radius: 999px; white-space: nowrap;
  color: var(--ink-2); font-size: .9375rem; font-weight: 500; text-decoration: none;
  transition: color .2s, background-color .2s;
}
.site-nav .wp-block-navigation-item__content:hover { color: var(--primary); background: var(--primary-soft); }
.header-actions { display: flex; align-items: center; gap: .6rem; }
.theme-toggle {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-2);
  transition: color .2s, border-color .2s, transform .4s var(--ease);
}
.theme-toggle:hover { color: var(--primary); border-color: var(--primary-fill); transform: rotate(-20deg); }
.theme-toggle .icon-sun, [data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
.header-cta .wp-block-button__link { padding: .6rem 1.15rem; }

/* Mobile menu: the theme's own button (same in the preview and in WordPress). */
.menu-toggle {
  display: none; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink);
  transition: border-color .2s, color .2s;
}
.menu-toggle:hover { border-color: var(--primary-fill); color: var(--primary); }
.menu-bars { position: relative; display: block; width: 16px; height: 12px; }
.menu-bars span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .35s var(--ease), opacity .2s ease, top .35s var(--ease);
}
.menu-bars span:nth-child(1) { top: 0; }
.menu-bars span:nth-child(2) { top: 5px; }
.menu-bars span:nth-child(3) { top: 10px; }
.nav-open .menu-bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.nav-open .menu-bars span:nth-child(2) { opacity: 0; }
.nav-open .menu-bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

@media (max-width: 760px) {
  .menu-toggle { display: inline-grid; }
  .header-actions { margin-left: auto !important; }
  .site-header .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0 !important;
    display: block; padding: .5rem var(--gutter) 1.25rem;
    background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .45);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s ease, transform .3s var(--ease), visibility 0s linear .3s;
  }
  .nav-open .site-nav { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s var(--ease); }
  .site-header .site-nav .wp-block-navigation__container { flex-direction: column; align-items: stretch; gap: .15rem; }
  .site-header .site-nav .wp-block-navigation-item { width: 100%; }
  .site-header .site-nav .wp-block-navigation-item__content { display: block; padding: .8rem .9rem; border-radius: 12px; font-size: 1.1rem; }
}

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; padding-block: clamp(48px, 8vw, 104px) clamp(56px, 8vw, 112px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 45% at 78% 30%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%),
    radial-gradient(35% 40% at 12% 18%, color-mix(in srgb, var(--primary-fill) 14%, transparent), transparent 70%);
  animation: drift 18s ease-in-out infinite alternate;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(60% 60% at 70% 40%, #000, transparent 75%);
          mask-image: radial-gradient(60% 60% at 70% 40%, #000, transparent 75%);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }
.hero-copy > * { animation: rise .9s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(5) { animation-delay: .32s; }
.hero-title { font-size: clamp(2.4rem, 5.6vw, 4.1rem); letter-spacing: -.035em; line-height: 1.04; }
.highlight {
  color: var(--primary);
  background: linear-gradient(var(--primary-soft), var(--primary-soft)) no-repeat 0 92% / 0% .3em;
  animation: underline 1s .55s var(--ease) forwards;
  padding-inline: .04em;
}
.hero-lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--muted); max-width: 36rem; }
.hero-actions { margin-top: .25rem; }
.hero-points { list-style: none; padding: 0; margin: .25rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .9rem; color: var(--muted); }
.hero-points li { display: inline-flex; align-items: center; gap: .45rem; }
.hero-points li::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: var(--primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Hero illustration */
.hero-art { position: relative; aspect-ratio: 560 / 470; animation: rise 1.1s .15s var(--ease) both; }
/* Each moving piece is its own absolutely placed layer (positions are % of the 560×470 artboard). */
.hero-art .layer { position: absolute; display: block; height: auto; overflow: visible; will-change: transform; }
.hero-art .full { left: 0; top: 0; width: 100%; height: 100%; }
.ill-card { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
/* No SVG drop-shadow filters: they repaint on every frame while the cards move. */
.ill-shadow { stroke: var(--line-strong); }
.ill-line { stroke: var(--line); stroke-width: 1.5; fill: none; }
.ill-dot-a { fill: #f9a8d4; } .ill-dot-b { fill: #fcd34d; } .ill-dot-c { fill: #86efac; }
.ill-soft { fill: var(--soft-2); }
.ill-primary { fill: var(--primary-fill); }
.ill-primary-soft { fill: var(--primary-soft); }
.ill-on-primary { fill: #fff; }
.ill-ink { fill: var(--ink); opacity: .85; }
.ill-muted { fill: var(--muted); opacity: .3; }
.ill-hill { fill: color-mix(in srgb, var(--accent) 38%, var(--soft-2)); }
.ill-sun { fill: var(--accent); }
.ill-outline { fill: none; stroke: var(--primary-fill); stroke-width: 1.5; }
.ill-stroke { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.ill-spark { fill: var(--accent); }

.float-slow, .float-a, .float-b, .float-c, .build, .typing, .heart, .pin, .ill-spark { transform-box: fill-box; }
.float-slow { animation: bob 7s ease-in-out infinite alternate; }
.float-a { animation: bob 5s .4s ease-in-out infinite alternate; }
.float-b { animation: bob 6s 1.1s ease-in-out infinite alternate; }
.float-c { animation: bob 5.5s .7s ease-in-out infinite alternate; }
.build { transform-origin: left center; animation: grow .9s .45s var(--ease) both; }
.build.b2 { animation-delay: .55s; } .build.b3 { animation-delay: .65s; } .build.b4 { animation-delay: .8s; }
.typing { animation: typing 1.2s ease-in-out infinite; }
.typing.t2 { animation-delay: .15s; } .typing.t3 { animation-delay: .3s; }
.heart { transform-origin: center; animation: beat 2.4s ease-in-out infinite; }
.pin { transform-origin: center bottom; animation: hop 3s ease-in-out infinite; }
.ill-spark { transform-origin: center; animation: twinkle 3.2s ease-in-out infinite; }
.ill-spark.s2 { animation-delay: 1s; } .ill-spark.s3 { animation-delay: 2s; }

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
/* Slightly see-through so the page grain still shows on lavender sections. */
.section-soft { background: color-mix(in srgb, var(--soft) 88%, transparent); }

/* Section textures (homepage and contact page). Static layers that scroll with the page: no cost while scrolling.
   White sections: a dot grid that fades out toward the edges. Lavender sections: faint graph-paper lines.
   Both get soft purple glows in opposite corners. */
.home-main > .section::before, .home-main > .section::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.home-main > .section::before {
  background-image: radial-gradient(circle at 1px 1px, var(--texture-dot) 1.1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 15%, transparent 75%);
          mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 15%, transparent 75%);
}
.home-main > .section-soft::before {
  background-image: linear-gradient(to right, var(--texture-line) 1px, transparent 1px), linear-gradient(to bottom, var(--texture-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 25%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 25%, transparent 80%);
}
/* Glows sit inside the section and fade out before its top and bottom edges,
   so neighbouring sections blend instead of meeting at a hard line. */
.home-main > .section::after {
  background:
    radial-gradient(36% 40% at 0% 28%, var(--texture-glow), transparent 70%),
    radial-gradient(32% 38% at 100% 72%, var(--texture-glow), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.home-main > .section:nth-of-type(even)::after {
  background:
    radial-gradient(36% 40% at 100% 28%, var(--texture-glow), transparent 70%),
    radial-gradient(32% 38% at 0% 72%, var(--texture-glow), transparent 70%);
}
.home-main > .cta-section::before, .home-main > .cta-section::after { display: none; }
.section-head { display: flex; flex-direction: column; gap: 1rem; max-width: 40rem; margin-bottom: clamp(36px, 5vw, 56px) !important; }
.section-head.center { margin-inline: auto !important; text-align: center; align-items: center; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.section-lead { color: var(--muted); font-size: 1.0625rem; }

/* Clients strip */
.clients { padding-block: 8px clamp(24px, 4vw, 40px); }
.clients-inner { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); }
.clients-tagline { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.logo-marquee {
  width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logo-track { display: flex; align-items: center; width: max-content; padding-block: .5rem; }
.logo-track > * { margin-right: clamp(40px, 6vw, 72px); }
.logo-track.is-moving { animation: marquee 32s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.client-logo {
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -.01em; white-space: nowrap;
  color: var(--muted); opacity: .75; transition: color .3s, opacity .3s;
}
.client-logo:hover { color: var(--primary); opacity: 1; }
.client-logo img { display: block; height: 34px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.client-logo:hover img { filter: none; opacity: 1; }
.reduce-motion .logo-track { flex-wrap: wrap; justify-content: center; width: 100%; }

/* Testimonials */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: center; }
.quote-card {
  position: relative; display: flex; flex-direction: column; gap: 1.1rem; overflow: hidden;
  padding: 2rem 1.75rem; border: 1px solid var(--line); border-radius: 24px; background: var(--surface);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.quote-card::before {
  content: "\201C"; position: absolute; top: -.6rem; right: 1.1rem; z-index: 0; pointer-events: none;
  font-family: Georgia, serif; font-size: 7rem; line-height: 1; color: var(--accent); opacity: .22;
}
.quote-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.quote-tag { align-self: flex-start; padding: .3rem .75rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: .78rem; font-weight: 600; }
.quote-text { font-size: 1.06rem; line-height: 1.6; color: var(--ink); }
.quote-person { display: flex; align-items: center; gap: .85rem; margin-top: auto !important; }
.quote-avatar {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-fill), var(--accent)); color: #fff; font-family: var(--font-display); font-weight: 600;
}
.quote-name { font-size: .9rem; color: var(--muted); line-height: 1.4; }
.quote-name strong { color: var(--ink); }
.quote-card.featured { border: 0; color: #fff; background: linear-gradient(150deg, #4c1d95, #6d28d9 55%, #8b5cf6); box-shadow: 0 30px 60px -28px rgba(109, 40, 217, .7); padding-block: 2.5rem; }
.quote-card.featured::before { color: #fff; opacity: .18; }
.quote-card.featured .quote-text, .quote-card.featured .quote-name strong { color: #fff; }
.quote-card.featured .quote-name { color: rgba(255, 255, 255, .8); }
.quote-card.featured .quote-tag { background: rgba(255, 255, 255, .16); color: #fff; }
.quote-card.featured .quote-avatar { background: #fff; color: #5b21b6; }
.quote-card > * { position: relative; z-index: 1; }

/* Services */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.card {
  position: relative; display: flex; flex-direction: column; gap: .75rem;
  padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--primary-fill) 35%, var(--line)); }
.card h3 { font-size: 1.2rem; }
.card p { color: var(--muted); font-size: .98rem; }
.card-icon {
  display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: .5rem;
  border-radius: 14px; background: var(--primary-soft); color: var(--primary);
  transition: background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.card-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card:hover .card-icon { background: var(--primary-fill); color: #fff; transform: rotate(-6deg) scale(1.05); }
.card-cta { justify-content: center; border: 0; color: #fff; background: linear-gradient(140deg, #5b21b6, #7c3aed 55%, #a78bfa); }
.card-cta h3, .card-cta p { color: #fff; }
.card-cta p { opacity: .9; }
.card-cta .card-link a { color: #fff; font-weight: 600; text-decoration: none; }
.card-cta .card-link a span { display: inline-block; transition: transform .3s var(--ease); }
.card-cta:hover .card-link a span { transform: translateX(5px); }
.card-cta:hover { box-shadow: 0 28px 60px -22px rgba(109, 40, 217, .65); }

/* Why */
.why-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.why-grid .section-head { position: sticky; top: calc(var(--header-h) + 40px); margin-bottom: 0 !important; }
.why-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 2.25rem; }
.why-item { display: flex; flex-direction: column; gap: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.why-item h3 { font-size: 1.1rem; display: flex; align-items: center; gap: .6rem; }
.why-item h3::before {
  content: ""; width: 22px; height: 22px; flex: none; border-radius: 7px;
  background: var(--primary-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.why-item p { color: var(--muted); font-size: .98rem; }

/* Packages */
.launch-note {
  display: inline-flex; align-items: center; gap: .6rem; padding: .45rem 1rem; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary); font-size: .875rem; font-weight: 600;
}
.pulse-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-fill); }
.pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--primary-fill); animation: ping 2s ease-out infinite; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
.price-card {
  position: relative; display: flex; flex-direction: column; gap: .6rem;
  padding: 2rem 1.75rem; border: 1px solid var(--line); border-radius: 24px; background: var(--surface);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.price-card h3 { font-size: 1.35rem; }
.plan-lead { color: var(--muted); font-size: .95rem; }
.price { display: flex; align-items: baseline; gap: .6rem; margin-top: .75rem !important; }
.price-now { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 2.9rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.price s { color: var(--muted); font-size: 1.05rem; text-decoration-thickness: 1.5px; }
.price-meta { font-size: .8125rem; color: var(--muted); }
.checks { list-style: none; padding: 1.25rem 0 0; margin: .5rem 0 1.5rem !important; border-top: 1px solid var(--line); display: grid; gap: .7rem; font-size: .96rem; color: var(--ink-2); }
.checks li { display: flex; gap: .65rem; align-items: flex-start; }
.checks li::before {
  content: ""; width: 20px; height: 20px; flex: none; margin-top: .15em; border-radius: 50%;
  background: var(--primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.price-card .wp-block-buttons { margin-top: auto !important; }
.price-card .wp-block-button { flex: 1; }
.price-card .wp-block-button__link { width: 100%; }
.price-card.featured {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--angle, 0deg), var(--primary-fill), var(--accent), #e9d5ff, var(--primary-fill)) border-box;
  box-shadow: var(--shadow-lg);
}
/* The border only spins on hover; an always-running gradient repaints constantly. */
.price-card.featured:hover { animation: spin-border 4s linear infinite; }
.badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  padding: .35rem .9rem; border-radius: 999px; white-space: nowrap;
  background: var(--primary-fill); color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 8px 20px -8px rgba(109, 40, 217, .7);
}
.monthly {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  margin-top: 1.25rem !important; padding: 1.5rem 1.75rem; border-radius: 24px;
  border: 1px dashed var(--line-strong); background: var(--soft);
}
.monthly-copy { display: flex; flex-direction: column; gap: .35rem; }
.monthly h3 { font-size: 1.2rem; }
.monthly .from { color: var(--primary); font-weight: 500; font-size: .95rem; margin-left: .35rem; }
.monthly p { color: var(--muted); }

/* Process */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
.steps::before {
  content: ""; position: absolute; top: 23px; left: 24px; right: 24px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary-fill), var(--accent));
  transform-origin: left; transform: scaleX(var(--line-scale, 1));
  transition: transform 1.4s .2s var(--ease);
}
.reveal-ready .steps { --line-scale: 0; }
.reveal-ready .steps.is-in { --line-scale: 1; }
.step { position: relative; display: flex; flex-direction: column; gap: .6rem; }
.step-num {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: .5rem !important;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--primary-fill);
  color: var(--primary); font-family: var(--font-display); font-weight: 600; font-size: .95rem;
}
.step h3 { font-size: 1.15rem; }
.step p { color: var(--muted); font-size: .98rem; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.faq-grid .section-head { margin-bottom: 0 !important; }
.faq-list { border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative; list-style: none; cursor: pointer; padding: 1.25rem 2.5rem 1.25rem 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink);
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--primary); }
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%; width: 14px; height: 2px; border-radius: 2px;
  background: var(--primary-fill); transition: transform .35s var(--ease);
}
.faq summary::after { transform: rotate(90deg); }
.faq[open] summary::after { transform: rotate(0deg); }
.faq > p, .faq > :not(summary) { padding: 0 2.5rem 1.35rem 0; color: var(--muted); }
.faq::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
.faq[open]::details-content { block-size: auto; }

/* CTA */
/* Contact panel: equal space above and below so it sits centred between the FAQ and the footer. */
.cta-section { padding-block: clamp(48px, 7vw, 96px); }
.cta-panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center;
  padding: clamp(48px, 7vw, 88px) clamp(24px, 5vw, 64px); border-radius: 32px;
  background: linear-gradient(135deg, #4c1d95, #6d28d9 50%, #8b5cf6);
  color: #fff;
}
.cta-panel::before, .cta-panel::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .18);
}
.cta-panel::before { width: 420px; height: 420px; top: -210px; right: -120px; animation: spin 40s linear infinite; border-style: dashed; }
.cta-panel::after { width: 300px; height: 300px; bottom: -170px; left: -80px; background: rgba(255, 255, 255, .06); }
.cta-panel h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); max-width: 22ch; }
.cta-panel .section-lead { color: rgba(255, 255, 255, .85); max-width: 34rem; }

/* ---------- Contact page ---------- */
.contact-hero, .page-band { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(48px, 7vw, 88px) clamp(24px, 3vw, 32px); }
.contact-hero::before, .page-band::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 160%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(35% 45% at 85% 30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(30% 40% at 10% 10%, color-mix(in srgb, var(--primary-fill) 12%, transparent), transparent 70%);
  animation: drift 18s ease-in-out infinite alternate;
}
.contact-hero-inner, .page-band-inner { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
/* The band spans the same width as the content below (so edges line up); only the text is kept narrow. */
.contact-hero-inner > *, .page-band-inner > * { max-width: 46rem; }
.contact-hero-inner > *, .page-band-inner > *, .post-head-inner > * { animation: rise .9s var(--ease) both; }
.contact-hero-inner > :nth-child(2), .page-band-inner > :nth-child(2), .post-head-inner > :nth-child(2) { animation-delay: .08s; }
.contact-hero-inner > :nth-child(3), .page-band-inner > :nth-child(3), .post-head-inner > :nth-child(3) { animation-delay: .16s; }
.contact-section { padding-top: clamp(24px, 4vw, 48px); }
.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: calc(var(--header-h) + 32px); }
.info-title { font-size: 1.35rem; }
.next-steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.next-steps li { counter-increment: step; position: relative; min-height: 36px; padding-left: 52px; color: var(--muted); font-size: .98rem; }
.next-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary); font-family: var(--font-display); font-weight: 600; font-size: .9rem;
}
.next-steps strong { color: var(--ink); font-weight: 600; }
.info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.info-card { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); font-size: .92rem; color: var(--muted); }
.info-label { font-size: .75rem !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--primary) !important; }

.form-card {
  position: relative; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line); border-radius: 28px;
  background: var(--surface); box-shadow: var(--shadow-lg); scroll-margin-top: calc(var(--header-h) + 24px);
}
.enquiry-form { display: flex; flex-direction: column; gap: 1.15rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.field label, .field legend { font-size: .92rem; font-weight: 600; color: var(--ink); padding: 0; }
.field legend { margin-bottom: .55rem; }
.optional { font-weight: 400; font-size: .82rem; color: var(--muted); margin-left: .25rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--line-strong); border-radius: 12px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.4;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--primary-fill) 40%, var(--line-strong)); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary-fill); box-shadow: 0 0 0 4px var(--primary-soft); }
.field select {
  appearance: none; padding-right: 2.6rem; cursor: pointer;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .9rem center / 18px no-repeat;
}
.field textarea { resize: vertical; min-height: 150px; }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--error); }
.field.is-invalid input:focus, .field.is-invalid textarea:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 18%, transparent); }
.field-error { color: var(--error); font-size: .85rem; }
.field-error:empty { display: none; }
.field.is-invalid { animation: shake .4s ease; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border: 1.5px solid var(--line-strong); border-radius: 999px;
  font-size: .9rem; font-weight: 500; color: var(--ink-2); background: var(--bg); user-select: none;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
.chip span::before {
  content: ""; width: 0; height: 14px; overflow: hidden; transition: width .25s var(--ease);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%237c3aed' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left center / 14px no-repeat;
}
.chip:hover span { border-color: color-mix(in srgb, var(--primary-fill) 45%, var(--line-strong)); }
.chip input:checked + span { background: var(--primary-soft); border-color: var(--primary-fill); color: var(--primary); }
.chip input:checked + span::before { width: 14px; }
.chip input:active + span { transform: scale(.96); }
.chip input:focus-visible + span { outline: 2px solid var(--primary-fill); outline-offset: 2px; }

.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-privacy { font-size: .85rem; color: var(--muted); }
.submit-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: 100%;
  padding: 1rem 1.4rem; border: 0; border-radius: 999px; cursor: pointer; overflow: hidden; isolation: isolate;
  background: var(--primary-fill); color: #fff; font: inherit; font-size: 1rem; font-weight: 600;
  transition: background-color .2s, transform .25s var(--ease), box-shadow .25s var(--ease);
}
.submit-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%);
}
.submit-btn:hover { background: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(109, 40, 217, .7); }
.submit-btn:hover::after { transform: translateX(120%); transition: transform .75s var(--ease); }
.submit-btn:disabled { cursor: progress; transform: none; }
.spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: spin .7s linear infinite; }
.is-loading .spinner { display: block; }
.is-loading .btn-label { opacity: .85; }
.form-status { font-size: .92rem; text-align: center; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--error); }
.form-notice { margin-bottom: 1.25rem !important; padding: .85rem 1.1rem; border-radius: 14px; font-size: .95rem; }
.form-notice.is-success { background: var(--primary-soft); color: var(--primary); }
.form-notice.is-error { background: color-mix(in srgb, var(--error) 12%, transparent); color: var(--error); }

.form-success { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: clamp(24px, 5vw, 56px) 1rem; text-align: center; outline: none; }
.form-success[hidden] { display: none; }
.form-success h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.success-text { color: var(--muted); max-width: 26rem; }
.success-check { width: 76px; height: 76px; }
.success-check circle { fill: var(--primary-soft); stroke: var(--primary-fill); stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .7s var(--ease) forwards; }
.success-check path { fill: none; stroke: var(--primary-fill); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .45s .55s var(--ease) forwards; }
.form-success:not([hidden]) > :not(svg) { animation: rise .7s .5s var(--ease) both; }
.link-btn { border: 0; background: none; padding: .25rem; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }

@media (max-width: 980px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-info { position: static; order: 2; }
}
@media (max-width: 600px) {
  .form-row, .info-cards { grid-template-columns: 1fr; }
}

/* ---------- Homepage colour accents ----------
   A calm second palette (blue, emerald, amber, indigo) beside the brand purple, used as soft tints
   and thin accents only, so the homepage gains colour without losing its minimal look.
   (The Motion page uses its own bolder violet/pink/cyan set.) */
:root { --tone-blue: #2563eb; --tone-emerald: #059669; --tone-amber: #d97706; --tone-indigo: #4f46e5; }
:root[data-theme="dark"] { --tone-blue: #60a5fa; --tone-emerald: #34d399; --tone-amber: #fbbf24; --tone-indigo: #818cf8; }

/* Hero: extra soft glows and colour-coded artwork details */
.hero::before {
  background:
    radial-gradient(40% 45% at 78% 30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(30% 35% at 92% 78%, color-mix(in srgb, var(--tone-blue) 16%, transparent), transparent 70%),
    radial-gradient(28% 34% at 55% 95%, color-mix(in srgb, var(--tone-emerald) 12%, transparent), transparent 70%),
    radial-gradient(35% 40% at 12% 18%, color-mix(in srgb, var(--primary-fill) 14%, transparent), transparent 70%);
}
.hero .highlight { background-image: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent), color-mix(in srgb, var(--tone-blue) 30%, transparent)); }
.hero .pin { fill: var(--tone-emerald); }
.hero .ill-sun { fill: var(--tone-amber); }
.hero .ill-spark.s1 { fill: var(--tone-amber); } .hero .ill-spark.s2 { fill: var(--tone-blue); } .hero .ill-spark.s3 { fill: var(--tone-emerald); }
.hero .toast.t1 .ill-primary { fill: var(--tone-emerald); }
.hero .toast.t2 .ill-primary { fill: var(--tone-blue); }
.hero .toast.t3 .ill-primary { fill: var(--tone-amber); }
.hero-points li:nth-child(1)::before { background-color: color-mix(in srgb, var(--tone-emerald) 18%, transparent); }
.hero-points li:nth-child(2)::before { background-color: color-mix(in srgb, var(--tone-blue) 18%, transparent); }
.hero-points li:nth-child(3)::before { background-color: color-mix(in srgb, var(--tone-amber) 20%, transparent); }

/* Services: each card gets its own soft tint; the Motion card hints at the Motion page's colours */
#services .card-grid > .card:nth-child(1) { --tone: var(--tone-blue); }
#services .card-grid > .card:nth-child(2) { --tone: var(--tone-emerald); }
#services .card-grid > .card:nth-child(3) { --tone: var(--tone-amber); }
#services .card-grid > .card:nth-child(4) { --tone: var(--accent); }
#services .card-grid > .card:nth-child(5) { --tone: var(--tone-indigo); }
#services .card-grid > .card:not(.card-cta) .card-icon { background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone); }
#services .card-grid > .card:not(.card-cta):hover .card-icon { background: var(--tone); color: #fff; }
#services .card-grid > .card:not(.card-cta):hover { border-color: color-mix(in srgb, var(--tone) 45%, var(--line)); }
#services .card-grid > .card:nth-child(6) .card-icon { background: linear-gradient(135deg, color-mix(in srgb, var(--pop-pink) 18%, transparent), color-mix(in srgb, var(--pop-cyan) 18%, transparent)); color: var(--pop-pink); }
#services .card-grid > .card:nth-child(6):hover .card-icon { background: var(--pop-grad); color: #fff; }
#services .card-grid > .card:nth-child(6):hover { border-color: color-mix(in srgb, var(--pop-pink) 40%, var(--line)); }

/* Why work with us: ticks rotate through the palette */
#why .why-item:nth-child(3n+1) h3::before { background-color: var(--primary-fill); }
#why .why-item:nth-child(3n+2) h3::before { background-color: var(--tone-blue); }
#why .why-item:nth-child(3n+3) h3::before { background-color: var(--tone-emerald); }

/* How it works: each step number and the connecting line pick up a colour */
#process .steps::before { background: linear-gradient(90deg, var(--tone-blue), var(--tone-emerald), var(--tone-amber), var(--primary-fill)); }
#process .step:nth-child(1) { --tone: var(--tone-blue); }
#process .step:nth-child(2) { --tone: var(--tone-emerald); }
#process .step:nth-child(3) { --tone: var(--tone-amber); }
#process .step:nth-child(4) { --tone: var(--primary-fill); }
#process .step-num { border-color: var(--tone); color: var(--tone); }
.reveal-ready #process .steps.is-in .step-num { background: var(--tone); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone) 18%, transparent); }

/* Packages: a thin colour rim on Starter and Premium (Growth keeps its purple border) */
#packages .price-card:nth-child(1) { --tone: var(--tone-blue); }
#packages .price-card:nth-child(3) { --tone: var(--tone-amber); }
#packages .price-card:not(.featured) { box-shadow: inset 0 3px 0 var(--tone); }
#packages .price-card:not(.featured):hover { box-shadow: inset 0 3px 0 var(--tone), var(--shadow-lg); }
#packages .price-card h3 { display: flex; align-items: center; gap: .55rem; }
#packages .price-card h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tone, var(--primary-fill)); }

/* Testimonials: avatar colours */
#testimonials .quote-card:nth-child(1) .quote-avatar { background: linear-gradient(135deg, var(--tone-blue), var(--tone-indigo)); }
#testimonials .quote-card:nth-child(3) .quote-avatar { background: linear-gradient(135deg, var(--tone-emerald), var(--tone-blue)); }

/* "Not sure what you need?" card spans the full row under the six services. */
.card-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 1.5rem 2.5rem; flex-wrap: wrap; }
.card-wide h3 { flex: 0 0 auto; }
.card-wide p:not(.card-link) { flex: 1 1 22rem; }
@media (max-width: 600px) { .card-wide { flex-direction: column; align-items: flex-start; } }

/* ---------- Motion graphics page ----------
   Vibrant accent trio (violet → pink → cyan, plus a touch of amber) used only for highlights,
   so the page feels creative while the layout stays minimal. All motion is transform/opacity. */
:root {
  --pop-violet: #7c3aed; --pop-pink: #ec4899; --pop-cyan: #06b6d4; --pop-amber: #f59e0b;
  --pop-grad: linear-gradient(115deg, #7c3aed 0%, #ec4899 52%, #06b6d4 100%);
}
:root[data-theme="dark"] { --pop-violet: #a78bfa; --pop-pink: #f472b6; --pop-cyan: #22d3ee; --pop-amber: #fbbf24; }

.pop-text, .pop-text .w {
  background: var(--pop-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* Hero: copy left, animated "motion editor" right */
.motion-band::before {
  background:
    radial-gradient(35% 45% at 85% 25%, color-mix(in srgb, var(--pop-pink) 26%, transparent), transparent 70%),
    radial-gradient(30% 40% at 70% 80%, color-mix(in srgb, var(--pop-cyan) 20%, transparent), transparent 70%),
    radial-gradient(30% 40% at 8% 10%, color-mix(in srgb, var(--pop-violet) 18%, transparent), transparent 70%);
}
.motion-band { padding-bottom: clamp(32px, 5vw, 64px); }
.motion-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.motion-hero-copy { display: flex; flex-direction: column; gap: 1.3rem; align-items: flex-start; }
.motion-hero-copy > * { animation: rise .9s var(--ease) both; }
.motion-hero-copy > :nth-child(2) { animation-delay: .08s; }
.motion-hero-copy > :nth-child(3) { animation-delay: .16s; }
.motion-hero-copy > :nth-child(4) { animation-delay: .24s; }
.motion-hero-copy > :nth-child(5) { animation-delay: .32s; }

.motion-art { position: relative; container-type: inline-size; padding: 6% 4%; animation: rise 1.1s .15s var(--ease) both; }
.ma-blob { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }
.ma-b1 { width: 46%; aspect-ratio: 1; top: -4%; right: 0; background: radial-gradient(circle, color-mix(in srgb, var(--pop-pink) 55%, transparent), transparent 70%); animation: bob 7s ease-in-out infinite alternate; }
.ma-b2 { width: 40%; aspect-ratio: 1; bottom: -6%; left: 2%; background: radial-gradient(circle, color-mix(in srgb, var(--pop-cyan) 45%, transparent), transparent 70%); animation: bob 8s 1s ease-in-out infinite alternate; }
.ma-b3 { width: 34%; aspect-ratio: 1; top: 30%; left: 30%; background: radial-gradient(circle, color-mix(in srgb, var(--pop-violet) 45%, transparent), transparent 70%); animation: bob 9s .5s ease-in-out infinite alternate; }

.ma-window {
  position: relative; border-radius: 4cqi; overflow: hidden; background: #110c22; color: #e9e5ff;
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 4cqi 10cqi -4cqi rgba(76, 29, 149, .55);
}
.ma-bar { display: flex; align-items: center; gap: 1.2cqi; padding: 2.2cqi 3cqi; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 2.3cqi; color: #a49dbd; }
.ma-bar i { width: 1.8cqi; height: 1.8cqi; border-radius: 50%; background: #f472b6; }
.ma-bar i:nth-child(2) { background: #fbbf24; } .ma-bar i:nth-child(3) { background: #34d399; }
.ma-bar span { margin-left: auto; font-family: ui-monospace, Consolas, monospace; }
.ma-body { display: grid; grid-template-columns: 38% 1fr; gap: 4cqi; padding: 4cqi; align-items: center; }

/* Phone preview playing a mini promo */
.ma-phone { aspect-ratio: 9 / 16; padding: 1.3cqi; border-radius: 4.5cqi; background: #241b3d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ma-screen { position: relative; height: 100%; overflow: hidden; border-radius: 3.4cqi; background: linear-gradient(160deg, #2a1350, #4c1d95 45%, #1e3a5f); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5cqi; }
.ma-orb { position: absolute; width: 140%; aspect-ratio: 1; top: -40%; left: -20%; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(236, 72, 153, .5), transparent 40%, rgba(34, 211, 238, .45), transparent 75%); animation: spin 8s linear infinite; }
.ma-tile { position: relative; display: grid; place-items: center; width: 13cqi; height: 13cqi; border-radius: 3.5cqi; background: linear-gradient(135deg, #ec4899, #8b5cf6 55%, #22d3ee); box-shadow: 0 2cqi 5cqi -1cqi rgba(236, 72, 153, .6); animation: ma-pop 6s cubic-bezier(.34, 1.56, .64, 1) infinite both; }
.ma-tile svg { width: 55%; fill: #fff; }
.ma-word { position: relative; font-family: var(--font-display); font-weight: 600; font-size: 5.4cqi; line-height: 1; color: #fff; animation: ma-word 6s var(--ease) infinite both; }
.ma-word.w2 { animation-delay: .15s; background: linear-gradient(90deg, #f9a8d4, #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ma-chip { position: relative; margin-top: 1cqi; padding: .8cqi 2.2cqi; border-radius: 99px; background: rgba(255, 255, 255, .14); font-size: 2.1cqi; font-weight: 600; color: #fff; animation: ma-word 6s .3s var(--ease) infinite both; }
.ma-dot { position: absolute; width: 1.6cqi; height: 1.6cqi; border-radius: 50%; animation: twinkle 3s ease-in-out infinite; }
.ma-dot.d1 { top: 14%; left: 16%; background: #fbbf24; } .ma-dot.d2 { top: 22%; right: 14%; background: #22d3ee; animation-delay: 1s; } .ma-dot.d3 { bottom: 16%; left: 22%; background: #f472b6; animation-delay: 2s; }

/* Properties panel with moving sliders */
.ma-panel { display: flex; flex-direction: column; gap: 2.2cqi; }
.ma-label { font-size: 2cqi; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8f86ad; }
.ma-prop { display: grid; grid-template-columns: 9cqi 1fr; align-items: center; gap: 2cqi; font-size: 2.3cqi; color: #cfc8e8; }
.ma-prop b { position: relative; height: .9cqi; border-radius: 1cqi; background: rgba(255, 255, 255, .1); }
.ma-prop b i { position: absolute; top: 50%; left: 0; width: 100%; height: 0; }
.ma-prop b i::after { content: ""; position: absolute; top: -1.4cqi; left: 0; width: 2.8cqi; height: 2.8cqi; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .7cqi rgba(236, 72, 153, .45); transform: translateX(var(--from, 10%)); }
.ma-prop b i { animation: ma-slide 6s ease-in-out infinite alternate; }
.ma-prop:nth-of-type(2) b i { animation-delay: -2s; } .ma-prop:nth-of-type(3) b i { animation-delay: -4s; }
.ma-swatches { display: flex; gap: 1.6cqi; }
.ma-swatches i { width: 5cqi; height: 5cqi; border-radius: 1.6cqi; background: #7c3aed; }
.ma-swatches i:nth-child(2) { background: #ec4899; } .ma-swatches i:nth-child(3) { background: #22d3ee; } .ma-swatches i:nth-child(4) { background: #fbbf24; }

/* Timeline with clips, keyframes and a moving playhead */
.ma-timeline { position: relative; display: flex; flex-direction: column; gap: 1.4cqi; padding: 3cqi 4cqi 3.6cqi; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); overflow: hidden; }
.ma-track { position: relative; height: 4.4cqi; border-radius: 1.2cqi; background: rgba(255, 255, 255, .05); }
.ma-clip { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding-left: 1.6cqi; border-radius: 1.2cqi; font-size: 2cqi; font-weight: 600; color: #fff; }
.ma-clip.c1 { left: 4%; width: 46%; background: linear-gradient(90deg, #7c3aed, #a855f7); }
.ma-clip.c2 { left: 22%; width: 58%; background: linear-gradient(90deg, #db2777, #f472b6); }
.ma-clip.c3 { left: 0; width: 92%; background: linear-gradient(90deg, #0891b2, #22d3ee); opacity: .85; }
.ma-track em { position: absolute; top: 50%; width: 1.8cqi; height: 1.8cqi; margin: -0.9cqi 0 0 -0.9cqi; background: #fff; transform: rotate(45deg); border-radius: .3cqi; box-shadow: 0 0 0 .5cqi rgba(255, 255, 255, .15); }
.ma-head { position: absolute; top: 1.6cqi; bottom: 1.6cqi; left: 4cqi; right: 4cqi; pointer-events: none; animation: ma-head 6s linear infinite; }
.ma-head i { position: absolute; top: 0; bottom: 0; left: 0; width: .4cqi; background: #fbbf24; box-shadow: 0 0 1.5cqi #fbbf24; }
.ma-head i::before { content: ""; position: absolute; top: -1cqi; left: -1.2cqi; width: 2.8cqi; height: 2cqi; border-radius: .5cqi; background: #fbbf24; }

/* Floating 3D-ish shapes around the editor */
.ma-float { position: absolute; pointer-events: none; will-change: transform; }
.ma-ring { width: 13cqi; height: 13cqi; top: 0; left: -2%; border-radius: 50%; border: 2.4cqi solid transparent; background: linear-gradient(#0000, #0000) padding-box, var(--pop-grad) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: drift-a 9s ease-in-out infinite alternate; }
.ma-pill { width: 16cqi; height: 6cqi; bottom: 4%; right: -1%; border-radius: 99px; background: linear-gradient(90deg, #22d3ee, #a78bfa); box-shadow: 0 1.5cqi 4cqi -1cqi rgba(34, 211, 238, .55); animation: drift-b 10s ease-in-out infinite alternate; }
.ma-star { width: 9cqi; top: 4%; right: 3%; fill: #fbbf24; filter: drop-shadow(0 1cqi 2cqi rgba(251, 191, 36, .5)); animation: twinkle 3.5s ease-in-out infinite; }
.ma-star svg { display: block; width: 100%; }
.ma-cube { width: 8cqi; height: 8cqi; bottom: 22%; left: -3%; border-radius: 2cqi; background: linear-gradient(135deg, #f472b6, #7c3aed); transform: rotate(18deg); animation: drift-c 8s ease-in-out infinite alternate; }

@keyframes ma-pop { 0%, 6% { transform: scale(0) rotate(-40deg); } 16% { transform: scale(1.1) rotate(0); } 22%, 85% { transform: scale(1); } 95%, 100% { transform: scale(0); } }
@keyframes ma-word { 0%, 18% { transform: translateY(80%); opacity: 0; } 30%, 85% { transform: none; opacity: 1; } 95%, 100% { transform: translateY(-40%); opacity: 0; } }
@keyframes ma-slide { from { transform: translateX(0); } to { transform: translateX(78%); } }
@keyframes ma-head { from { transform: translateX(0); } to { transform: translateX(100%); } }

/* Scrolling ticker of what we animate */
.ticker { overflow: hidden; padding-block: 1.1rem; border-block: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; }
.ticker-track.is-moving { animation: marquee 30s linear infinite; will-change: transform; }
.ticker-track span { display: inline-flex; align-items: center; gap: 2.2rem; margin-right: 2.2rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 2.2vw, 1.5rem); white-space: nowrap; color: var(--ink); }
.ticker-track span::after { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--pop-grad); }
.ticker-track span:nth-child(3n+2) { background: var(--pop-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reduce-motion .ticker-track { flex-wrap: wrap; justify-content: center; width: 100%; }

/* Colour-coded icon tiles on the motion page cards */
.motion-main .card-icon { color: #fff; }
.motion-main .tone-violet .card-icon { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.motion-main .tone-pink .card-icon { background: linear-gradient(135deg, #db2777, #f472b6); }
.motion-main .tone-cyan .card-icon { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.motion-main .tone-amber .card-icon { background: linear-gradient(135deg, #d97706, #fbbf24); }
.motion-main .card:hover .card-icon { background: var(--pop-grad); }

/* Pricing: the Motion Promo card plus a "need more" card */
.motion-pricing { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.5rem; align-items: stretch; max-width: 920px; margin-inline: auto !important; }
.motion-price {
  border: 2px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--pop-grad) border-box;
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--pop-pink) 55%, transparent);
}
.motion-price .badge { background: var(--pop-grad); }
.motion-price .price-now { background: var(--pop-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.motion-more {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1rem; justify-content: center;
  padding: 2rem 1.75rem; border-radius: 24px; border: 1px dashed var(--line-strong); background: var(--soft);
}
.motion-more::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; right: -20%; top: -25%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pop-cyan) 25%, transparent), transparent 70%); pointer-events: none; }
.motion-more > * { position: relative; }
.motion-more h3 { font-size: 1.35rem; }
.motion-more p { color: var(--muted); }
.more-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.more-chips li { padding: .35rem .8rem; border-radius: 99px; border: 1px solid var(--line-strong); font-size: .85rem; color: var(--ink-2); background: var(--surface); }

/* Homepage packages: the Motion Promo line under monthly plans */
.motion-strip { margin-top: .75rem !important; border-style: solid; border-color: color-mix(in srgb, var(--pop-pink) 35%, var(--line)); }
.motion-strip .from { background: var(--pop-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }

/* Showreel: a 12-second loop of three style samples (CSS only, no video file).
   Scenes take turns: logo reveal (0–4s), product promo (4–8s), explainer (8–12s). */
.showreel-section { padding-top: clamp(56px, 7vw, 96px); }
.showreel { margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.reel-stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size;
  border-radius: 28px; background: #0e0a1c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -40px color-mix(in srgb, var(--pop-pink) 60%, transparent);
}
.reel-bg {
  position: absolute; inset: -10%;
  background:
    radial-gradient(38% 50% at 22% 30%, rgba(124, 58, 237, .55), transparent 70%),
    radial-gradient(32% 45% at 82% 25%, rgba(236, 72, 153, .38), transparent 70%),
    radial-gradient(35% 45% at 70% 85%, rgba(34, 211, 238, .3), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 40px 40px;
  animation: drift 16s ease-in-out infinite alternate;
}
.scene { position: absolute; inset: 0 0 14% 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5cqi; opacity: 0; animation: reel-scene 12s var(--d) linear infinite both; }
.scene * { animation-duration: 12s; animation-iteration-count: infinite; animation-fill-mode: both; animation-delay: var(--d); }

/* Scene 1: logo reveal */
.s1-mark { display: grid; place-items: center; width: 13cqi; height: 13cqi; border-radius: 3.5cqi; background: linear-gradient(135deg, #ec4899, #8b5cf6 50%, #22d3ee); box-shadow: 0 2cqi 6cqi -2cqi rgba(236, 72, 153, .8); animation-name: s1-mark; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.s1-mark svg { width: 55%; fill: #fff; }
.s1-word { display: flex; overflow: hidden; font-family: var(--font-display); font-weight: 600; font-size: 7cqi; letter-spacing: -.03em; line-height: 1.1; color: #fff; }
.s1-word span { display: inline-block; animation-name: s1-letter; animation-timing-function: var(--ease); animation-delay: calc(var(--d) + var(--i) * 70ms); }
.s1-line { width: 22cqi; height: .5cqi; border-radius: 1cqi; background: linear-gradient(90deg, #ec4899, #22d3ee); transform-origin: left; animation-name: s1-line; animation-timing-function: var(--ease); }

/* Scene 2: product promo (a digital product cover with kinetic text) */
.scene-2 { flex-direction: row; gap: 6cqi; }
.s2-product { perspective: 60cqi; animation-name: s2-card; animation-timing-function: var(--ease); }
.s2-cover { display: flex; flex-direction: column; gap: 1.6cqi; width: 22cqi; aspect-ratio: 3 / 4; padding: 3cqi; border-radius: 2.4cqi; background: linear-gradient(150deg, #ec4899, #7c3aed 55%, #22d3ee); box-shadow: 0 3cqi 6cqi -2cqi rgba(0, 0, 0, .6); transform: rotateY(-16deg) rotateX(4deg); }
.s2-cover-icon { width: 6cqi; height: 6cqi; border-radius: 1.6cqi; background: rgba(255, 255, 255, .9); }
.s2-cover-l1 { width: 80%; height: 1.6cqi; margin-top: auto; border-radius: 1cqi; background: rgba(255, 255, 255, .95); }
.s2-cover-l2 { width: 55%; height: 1.2cqi; border-radius: 1cqi; background: rgba(255, 255, 255, .6); }
.s2-text { display: flex; flex-direction: column; gap: 1cqi; }
.s2-big { font-family: var(--font-display); font-weight: 600; font-size: 6cqi; line-height: 1.05; color: #fff; transform-origin: left center; animation-name: s2-big; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.s2-small { align-self: flex-start; padding: .8cqi 2cqi; border-radius: 99px; background: linear-gradient(90deg, #ec4899, #22d3ee); font-size: 2.4cqi; font-weight: 600; color: #fff; animation-name: s2-small; animation-timing-function: var(--ease); }
.s2-burst { position: absolute; left: 50%; top: 45%; width: 1.4cqi; height: 1.4cqi; border-radius: 50%; animation-name: s2-burst; animation-timing-function: ease-out; }
.s2-burst.b1 { --bx: -18cqi; --by: -14cqi; background: #fbbf24; } .s2-burst.b2 { --bx: 16cqi; --by: -16cqi; background: #22d3ee; }
.s2-burst.b3 { --bx: 20cqi; --by: 10cqi; background: #f472b6; } .s2-burst.b4 { --bx: -16cqi; --by: 12cqi; background: #a78bfa; }

/* Scene 3: explainer */
.scene-3 { flex-direction: row; gap: 9cqi; }
.s3-track { position: absolute; left: 22%; right: 22%; top: 43%; height: .4cqi; border-radius: 1cqi; background: rgba(255, 255, 255, .1); overflow: hidden; }
.s3-line { display: block; height: 100%; background: linear-gradient(90deg, #8b5cf6, #ec4899, #22d3ee); transform-origin: left; animation-name: s3-line; animation-timing-function: var(--ease); }
.s3-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.4cqi; font-size: 2.3cqi; font-weight: 600; color: #f1edff; animation-name: s3-step; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.s3-step svg { box-sizing: content-box; width: 5cqi; height: 5cqi; padding: 2.6cqi; border-radius: 50%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s3-step.st1 svg { background: linear-gradient(135deg, #7c3aed, #a78bfa); box-shadow: 0 0 0 1cqi rgba(124, 58, 237, .25); }
.s3-step.st2 svg { background: linear-gradient(135deg, #db2777, #f472b6); box-shadow: 0 0 0 1cqi rgba(236, 72, 153, .25); }
.s3-step.st3 svg { background: linear-gradient(135deg, #0891b2, #22d3ee); box-shadow: 0 0 0 1cqi rgba(34, 211, 238, .25); }
.s3-step.st2 { animation-delay: calc(var(--d) + .45s); }
.s3-step.st3 { animation-delay: calc(var(--d) + .9s); }

/* Player bar and scene labels */
.reel-ui { position: absolute; left: 3%; right: 3%; bottom: 4%; display: flex; align-items: center; gap: 2cqi; }
.reel-play { display: grid; place-items: center; width: 4.4cqi; height: 4.4cqi; min-width: 26px; min-height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.reel-play svg { width: 50%; fill: #fff; }
.reel-progress { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.reel-progress span { display: block; height: 100%; background: linear-gradient(90deg, #8b5cf6, #ec4899, #22d3ee); transform-origin: left; transform: scaleX(.33); animation: reel-progress 12s linear infinite; }
.reel-label { padding: .3rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #e9e5ff; font-size: .72rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.reel-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.reel-chips span { padding: .45rem .95rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); font-size: .88rem; font-weight: 500; animation: reel-chip 12s linear infinite both; }
/* Negative delays start each label part-way through the loop, so only one is ever highlighted. */
.reel-chips .chip-2 { animation-delay: -8s; } .reel-chips .chip-3 { animation-delay: -4s; }
.reel-note { text-align: center; font-size: .82rem; color: var(--muted); }

.showreel.is-paused *, .showreel.is-paused *::before, .showreel.is-paused *::after,
.motion-art.is-paused *, .motion-art.is-paused *::before, .motion-art.is-paused *::after { animation-play-state: paused !important; }
/* Reduced motion: still frames. */
.reduce-motion .scene-1 { opacity: 1; }
.reduce-motion .reel-chips .chip-1 { background: var(--primary-fill); border-color: var(--primary-fill); color: #fff; }

@keyframes reel-scene { 0% { opacity: 0; } 2%, 31% { opacity: 1; } 33.33%, 100% { opacity: 0; } }
@keyframes s1-mark { 0% { transform: scale(0) rotate(-120deg); } 7% { transform: scale(1.12) rotate(0deg); } 9%, 30% { transform: scale(1); } 33.33%, 100% { transform: scale(.85); } }
@keyframes s1-letter { 0%, 5% { transform: translateY(110%); opacity: 0; } 10%, 31% { transform: none; opacity: 1; } 33.33%, 100% { transform: translateY(-40%); opacity: 0; } }
@keyframes s1-line { 0%, 10% { transform: scaleX(0); } 17%, 31% { transform: scaleX(1); } 33.33%, 100% { transform: scaleX(0); } }
@keyframes s2-card { 0% { transform: translateY(25%) scale(.85) rotate(-6deg); opacity: 0; } 7% { transform: rotate(2deg); opacity: 1; } 10%, 30% { transform: none; opacity: 1; } 33.33%, 100% { transform: translateY(-10%) scale(.95); opacity: 0; } }
@keyframes s2-big { 0%, 7% { transform: scale(.5); opacity: 0; } 11% { transform: scale(1.08); opacity: 1; } 13%, 31% { transform: none; opacity: 1; } 33.33%, 100% { opacity: 0; } }
@keyframes s2-small { 0%, 12% { transform: translateX(-4cqi); opacity: 0; } 16%, 31% { transform: none; opacity: 1; } 33.33%, 100% { opacity: 0; } }
@keyframes s2-burst { 0%, 15% { transform: none; opacity: 0; } 16% { opacity: 1; } 24%, 100% { transform: translate(var(--bx), var(--by)) scale(.4); opacity: 0; } }
@keyframes s3-line { 0%, 6% { transform: scaleX(0); } 22%, 31% { transform: scaleX(1); } 33.33%, 100% { transform: scaleX(0); } }
@keyframes s3-step { 0%, 4% { transform: scale(0); opacity: 0; } 9% { transform: scale(1.1); opacity: 1; } 11%, 31% { transform: none; opacity: 1; } 33.33%, 100% { transform: scale(.8); opacity: 0; } }
@keyframes reel-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes reel-chip { 0%, 32% { background: var(--pop-grad); border-color: transparent; color: #fff; } 33.33%, 100% { background: transparent; border-color: var(--line-strong); color: var(--muted); } }

@media (max-width: 980px) {
  .motion-hero { grid-template-columns: 1fr; }
  .motion-art { max-width: 560px; width: 100%; margin-inline: auto; }
  .motion-pricing { grid-template-columns: 1fr; max-width: 520px; }
}

/* ---------- Footer ---------- */
.site-footer, footer.wp-block-template-part { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--soft) 60%, transparent); }
.footer-inner {
  width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; padding-block: 56px 32px;
}
.footer-inner > *, .footer-bottom > * { margin: 0 !important; }
.footer-brand { display: flex; flex-direction: column; gap: .75rem; max-width: 26rem; }
.footer-brand > * { margin: 0 !important; }
.footer-tagline { color: var(--ink-2); }
.footer-note, .footer-col p { color: var(--muted); font-size: .94rem; }
.footer-col { display: flex; flex-direction: column; gap: .6rem; }
.footer-col > * { margin: 0 !important; }
.footer-label { font-size: .8rem !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink) !important; }
/* inline-block + padding gives each footer link a finger-sized (~28px) tap area */
.footer-col a { display: inline-block; padding-block: .3rem; color: var(--muted); text-decoration: none; line-height: 1.4; }
.footer-col a:hover { color: var(--primary); }
.footer-bottom {
  width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding-block: 20px 32px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted);
}
.footer-bottom a { display: inline-block; padding-block: .3rem; color: var(--muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--primary); }

/* ---------- Standard pages, posts and the 404 page ---------- */
.site-main:not(.home-main) { width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; padding-block: clamp(48px, 7vw, 88px); }
.site-main:not(.home-main) h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.site-main:not(.home-main) h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.not-found { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; max-width: 40rem; min-height: 40vh; justify-content: center; }
.not-found > * { margin: 0 !important; }
.not-found p:not(.eyebrow) { color: var(--muted); }

/* ---------- Scroll reveal (only hidden once site.js is running) ---------- */
.reveal-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-ready .reveal.is-in { opacity: 1; transform: none; }
.stagger > .reveal:nth-child(2) { transition-delay: .08s; }
.stagger > .reveal:nth-child(3) { transition-delay: .16s; }
.stagger > .reveal:nth-child(4) { transition-delay: .24s; }
.stagger > .reveal:nth-child(5) { transition-delay: .32s; }
.stagger > .reveal:nth-child(6) { transition-delay: .4s; }
/* Hover lift must not wait for the reveal delay */
.reveal-ready .card.is-in, .reveal-ready .price-card.is-in { transition: opacity .8s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }

/* ---------- Motion extras ---------- */

/* Reading progress bar along the top edge (scroll-driven, no JavaScript). */
@supports (animation-timeline: scroll()) {
  body::before {
    content: ""; position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; height: 3px; z-index: 100;
    background: linear-gradient(90deg, var(--primary-fill), var(--accent));
    transform-origin: left; transform: scaleX(0);
    animation: progress linear both; animation-timeline: scroll(root);
  }
}

/* Headings: words rise in one after another (site.js wraps each word in .w). */
.split .w { display: inline-block; }
.hero-title.split { animation: none; }
.hero-title.split .w { animation: word-in .9s var(--ease) both; animation-delay: calc(.08s + var(--i) * 55ms); }
.reveal-ready .reveal .split .w {
  opacity: 0; transform: translateY(.45em) rotate(2deg);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(.1s + var(--i) * 45ms);
}
.reveal-ready .reveal.is-in .split .w { opacity: 1; transform: none; }

/* Eyebrow dash draws in as its section appears. */
.reveal-ready .reveal .eyebrow::before { width: 0; transition: width .6s .15s var(--ease); }
.reveal-ready .reveal.is-in .eyebrow::before { width: 18px; }

/* Hero artwork: side cards pop in, then follow the mouse at different depths. */
.pop { transform-origin: center; animation-name: pop-in, bob; animation-duration: .8s, 5s; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1), ease-in-out; animation-iteration-count: 1, infinite; animation-direction: normal, alternate; animation-fill-mode: both, none; }
.pop.p1 { animation-delay: .7s, .4s; }
.pop.p2 { animation-delay: .85s, 1.1s; animation-duration: .8s, 6s; }
.pop.p3 { animation-delay: 1s, .7s; animation-duration: .8s, 5.5s; }
.px { translate: calc(var(--mx, 0) * var(--d) * 1px) calc(var(--my, 0) * var(--d) * 1px); transition: translate .9s var(--ease); }

/* Hero motion graphics ------------------------------------------------- */

/* Floating background shapes; each drifts on its own loop and shifts with the mouse. */
.hero-shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.shape {
  position: absolute; width: 36px; height: 36px; overflow: visible;
  translate: calc(var(--mx, 0) * var(--d, 20) * 1px) calc(var(--my, 0) * var(--d, 20) * 1px);
  transition: translate 1s var(--ease);
}
.sh-ring    { top: 3%; left: 28%;  --d: 30; stroke: var(--primary-fill); opacity: .45; animation: drift-a 16s ease-in-out infinite alternate; }
.sh-plus    { top: 76%; left: 42%; --d: 45; stroke: var(--accent); opacity: .7; width: 28px; height: 28px; animation: drift-b 19s ease-in-out infinite alternate; }
.sh-tri     { top: 7%;  left: 44%; --d: 25; fill: var(--primary-soft); stroke: var(--accent); opacity: .9; animation: drift-c 22s ease-in-out infinite alternate; }
.sh-square  { bottom: 8%; left: 6%; --d: 35; fill: var(--accent); opacity: .3; width: 30px; height: 30px; animation: drift-b 24s -6s ease-in-out infinite alternate; }
.sh-squiggle { top: 46%; right: 2%; --d: 40; stroke: var(--primary-fill); opacity: .35; width: 58px; height: 24px; animation: drift-a 18s -4s ease-in-out infinite alternate; }
.sh-dot     { top: 88%; right: 34%; --d: 55; fill: var(--primary-fill); opacity: .22; width: 18px; height: 18px; animation: drift-c 14s -3s ease-in-out infinite alternate; }
.sh-ring2   { top: 5%;  right: 6%; --d: 20; stroke: var(--accent); opacity: .8; width: 46px; height: 46px; animation: spin 30s linear infinite; }

/* Morphing colour blob behind the artwork (transform-only, so it stays cheap). */
.hero-blob {
  position: absolute; inset: 10% 8% 12% 8%; z-index: -1; pointer-events: none;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--accent) 45%, transparent), color-mix(in srgb, var(--primary-fill) 12%, transparent) 60%, transparent 72%);
  animation: blob 14s ease-in-out infinite alternate;
}

/* Orbit ring with planets circling the mockup. */
.orbit { transform-origin: 46.43% 44.89%; animation: spin 46s linear infinite; }
.ill-orbit { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 2 10; stroke-linecap: round; }
.ill-planet { fill: var(--primary-fill); }
.ill-planet.small { fill: var(--accent); }
.ill-planet.tiny { fill: var(--accent); opacity: .7; }

/* Typing caret in the mockup headline. */
.ill-caret { fill: var(--primary-fill); animation: blink 1s 1.4s steps(1) infinite both; }

/* Cursor that moves to the button and clicks it, with a ripple. */
.cursor-layer { transform-origin: 0 0; opacity: 0; animation: cursor 8s 1.6s ease-in-out infinite; }
.ill-cursor { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; stroke-linejoin: round; }
.ripple-layer { transform-origin: 26.43% 70%; opacity: 0; animation: ripple 8s 1.6s ease-out infinite; }
.ill-ripple { fill: var(--primary-fill); }

/* Notification toasts take turns sliding in. */
.toast { opacity: 0; transform-origin: center bottom; animation: toast 9s ease-in-out infinite both; }
.toast.t1 { animation-delay: 1.2s; } .toast.t2 { animation-delay: 4.2s; } .toast.t3 { animation-delay: 7.2s; }
.ill-text { fill: var(--ink); font: 600 13px var(--font-body); }
.ill-check { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Small ornaments drifting in the margins of every homepage section (added by site.js). */
.home-main > .section, .home-main > .clients { position: relative; isolation: isolate; }
.ornaments { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ornament {
  position: absolute; width: var(--size, 26px); height: var(--size, 26px); overflow: visible; opacity: .55;
  animation: orn-float var(--dur, 14s) var(--delay, 0s) ease-in-out infinite alternate;
}
.ornament .o-stroke { fill: none; stroke: var(--primary-fill); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ornament .o-accent { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.ornament .o-fill { fill: var(--accent); }
.ornament .o-soft { fill: var(--primary-soft); stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.ornaments.is-off .ornament { animation-play-state: paused; }
@media (max-width: 760px) { .ornaments { display: none; } }

/* Moving layers get their own GPU layer so scrolling doesn't repaint them. */
.hero::before, .hero-blob, .shape, .logo-track.is-moving, .cta-panel::before, .ornament { will-change: transform; }

/* Nothing in the hero animates while it is scrolled out of view. */
.hero.is-paused *, .hero.is-paused *::before, .hero.is-paused *::after, .hero.is-paused::before { animation-play-state: paused !important; }

@media (max-width: 980px) {
  .sh-tri, .sh-plus, .sh-dot { display: none; }
  .sh-ring { top: 1.5%; left: 46%; }
}

/* Cards: a soft purple spotlight follows the cursor. */
.quote-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
.quote-card:hover::after { opacity: 1; }
.card::after, .price-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  transition: opacity .35s ease;
}
.card:hover::after, .price-card:hover::after { opacity: 1; }
.card-cta::after { background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, .22), transparent 70%); }
.card > *, .price-card > * { position: relative; z-index: 1; }
.price-card > .badge { position: absolute; z-index: 2; }

/* Filled buttons: a light sheen sweeps across on hover. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link { position: relative; overflow: hidden; isolation: isolate; }
.wp-block-button:not(.is-style-outline) > .wp-block-button__link::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%);
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover::after { transform: translateX(120%); transition: transform .75s var(--ease); }
.wp-block-button.is-style-inverse > .wp-block-button__link::after { background: linear-gradient(105deg, transparent 30%, rgba(124, 58, 237, .18) 50%, transparent 70%); }

/* Why-list ticks spring in. */
.reveal-ready .why-item h3::before { transform: scale(0) rotate(-90deg); transition: transform .6s .25s cubic-bezier(.34, 1.56, .64, 1); }
.reveal-ready .why-item.is-in h3::before { transform: none; }

/* Process: numbers fill with purple in order once the line has drawn. */
.step-num { transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease); }
.reveal-ready .steps.is-in .step-num { background: var(--primary-fill); color: #fff; box-shadow: 0 0 0 6px var(--primary-soft); }
.reveal-ready .steps.is-in .step:nth-child(1) .step-num { transition-delay: .5s; }
.reveal-ready .steps.is-in .step:nth-child(2) .step-num { transition-delay: .85s; }
.reveal-ready .steps.is-in .step:nth-child(3) .step-num { transition-delay: 1.2s; }
.reveal-ready .steps.is-in .step:nth-child(4) .step-num { transition-delay: 1.55s; }


/* Theme switch: the new theme grows out of the toggle as a circle (View Transitions). */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-toggle svg { transition: transform .5s var(--ease); }
.theme-toggle:active svg { transform: rotate(90deg) scale(.8); }

/* ---------- Keyframes ---------- */
@keyframes progress { to { transform: scaleX(1); } }
@keyframes word-in { from { opacity: 0; transform: translateY(.5em) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { scale: .4; opacity: 0; } to { scale: 1; opacity: 1; } }
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin-border { to { --angle: 360deg; } }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes underline { to { background-size: 100% .3em; } }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-4%, 3%, 0) scale(1.08); } }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
@keyframes hop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-5px); } 90% { transform: translateY(0); } }
@keyframes twinkle { 0%, 100% { transform: scale(.6) rotate(0deg); opacity: .35; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes ping { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes orn-float { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(var(--dx, 10px), -30px) rotate(var(--rot, 160deg)); } }

/* Smooth scrolling (Lenis) */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
@keyframes drift-a { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(26px, -34px) rotate(140deg); } }
@keyframes drift-b { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-30px, -22px) rotate(-120deg); } }
@keyframes drift-c { from { transform: translate(0, 0) rotate(0deg) scale(1); } to { transform: translate(18px, 28px) rotate(90deg) scale(1.15); } }
@keyframes blob { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(40deg) scale(1.08, .94); } 100% { transform: rotate(85deg) scale(.95, 1.06); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
/* Cursor positions are % of the artboard: button ≈ (148, 329), headline ≈ (330, 152). */
@keyframes cursor {
  0%   { transform: translate(62.5%, 53.2%); opacity: 0; }
  6%   { opacity: 1; }
  28%  { transform: translate(26.43%, 70%); }
  31%  { transform: translate(26.43%, 70%) scale(.82); }
  34%  { transform: translate(26.43%, 70%) scale(1); }
  50%  { transform: translate(26.43%, 70%); }
  70%  { transform: translate(58.93%, 32.34%); }
  86%  { transform: translate(58.93%, 32.34%); opacity: 1; }
  100% { transform: translate(62.5%, 53.2%); opacity: 0; }
}
@keyframes ripple { 0%, 30% { transform: scale(0); opacity: 0; } 32% { transform: scale(.4); opacity: .5; } 46%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes toast {
  0%   { opacity: 0; transform: translateY(14px) scale(.95); }
  4%, 30% { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-10px) scale(.98); }
}
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 520px; width: 100%; margin-inline: auto; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid, .faq-grid { grid-template-columns: 1fr; }
  .why-grid .section-head { position: static; }
  .price-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto !important; }
  .price-card.featured { order: -1; }
  .quote-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto !important; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps::before { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .header-cta { display: none !important; }
  .header-inner { gap: .75rem; }
  .site-nav .wp-block-navigation-item__content { padding-inline: .55rem; }
}
@media (max-width: 600px) {
  :root { --header-h: 64px; }
  .card-grid, .why-list, .steps { grid-template-columns: 1fr; }
  .steps { gap: 1.5rem; padding-left: 0; }
  .step { display: grid; grid-template-columns: 48px 1fr; column-gap: 1rem; row-gap: .35rem; }
  .step-num { grid-row: span 2; margin: 0 !important; }
  .hero-actions { width: 100%; }
  .hero-actions .wp-block-button { flex: 1; }
  .hero-actions .wp-block-button__link { width: 100%; }
  .monthly { padding: 1.5rem; }
  .monthly .wp-block-buttons, .monthly .wp-block-button, .monthly .wp-block-button__link { width: 100%; }
  .footer-inner { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ----------
   The head script adds .reduce-motion when the device asks for less motion
   (it can be overridden for testing with ?motion=full). */
html.reduce-motion { scroll-behavior: auto; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
.reduce-motion .faq::details-content { transition: none; }
.reduce-motion body::before { display: none; }
.reduce-motion .px, .reduce-motion .shape { translate: none; }
.reduce-motion .success-check circle, .reduce-motion .success-check path { stroke-dashoffset: 0; }
.reduce-motion .toast.t1 { opacity: 1; }
.reduce-motion .highlight { background-size: 100% .3em; }