/* Aurora: the staging design, "crisp Aurora" in Digitalonian's own colours.
 *
 * Loaded only by staging builds (app/layout.tsx); production builds never
 * reference this folder and postbuild removes it from their output. Staging
 * pages are served with data-theme="aurora" on <html>, so every rule here is
 * scoped to html[data-theme="aurora"]. The Current / Aurora switch in the
 * staging banner removes the attribute to show the live design for
 * comparison (see lib/design.ts).
 *
 * Palette: only the brand colours. Blue #00bfff (the site's accent) and
 * #38b6ff (the logo's blue), black and white, plus the neutral greys the
 * site already uses for body text. Tints are made with transparency, never
 * with new hues.
 *
 * Every page: black sections with a moving blue glow and a faint grid, crisp
 * 4-6px corners, hairline borders, light blur, high-contrast text, smaller
 * H1s, a serif-italic accent in headlines, and buttons with a hard offset
 * shadow. Copy and layout come from WordPress as before.
 *
 * Homepage only: the illustrated hero (components/home/HeroArt.tsx) and the
 * interactive layer added by components/aurora/fx.ts (".au-*" classes below):
 * sliders, the animated process timeline, count-ups, scroll reveals and
 * cursor effects. base.css switches all animation off for
 * prefers-reduced-motion, and fx.ts does the same for its effects.
 *
 * If Aurora is approved, these rules move into styles/ unscoped.
 */

/* ---------- Fonts ---------- */

/* Instrument Serif italic (SIL Open Font License; fonts/OFL.txt), for the
   accent words in headlines and the client quotes. */
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/design/fonts/instrument-serif-italic-latin.woff2") format("woff2");
}

/* Registered so they can animate. */
@property --au-spot {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --au-sheen {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* ---------- The switch in the staging banner (shown in both designs) ---------- */

.design-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 14px;
  vertical-align: middle;
}
.design-toggle__label {
  font-weight: 700;
}
.design-toggle__group {
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.14);
}
.design-toggle button {
  border: 0;
  border-radius: 999px;
  padding: 2px 12px;
  background: transparent;
  color: #000;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
}
.design-toggle button[aria-pressed="true"] {
  background: #000;
  color: #ffcc00;
}

/* The hero artwork exists only on staging and only shows in Aurora. */
.hero-art {
  display: none;
}

/* ---------- Tokens ---------- */

html[data-theme="aurora"] {
  /* Crisp corners wherever the shared radius tokens are used. */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 28px rgba(0, 0, 0, 0.07);

  --au-blue: #00bfff; /* brand blue: the site's accent */
  --au-blue-2: #38b6ff; /* the logo's blue */
  --au-text: var(--c-text-2); /* neutral greys already used by the site */
  --au-on-dark: var(--c-on-dark);
  --au-on-dark-2: var(--c-on-dark-2);
  --au-grad: linear-gradient(135deg, #00bfff 0%, #38b6ff 100%);
  /* Gradient text on black: white into brand blue. */
  --au-text-grad-dark: linear-gradient(90deg, #fff 0%, #00bfff 100%);
  --au-line: rgba(255, 255, 255, 0.14);
  --au-line-hi: rgba(255, 255, 255, 0.26);
  --au-line-light: rgba(0, 0, 0, 0.12);
  --au-ease: cubic-bezier(0.2, 0.75, 0.2, 1);
  --au-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
}

/* Light pages: white with a faint blue tint at the top. */
html[data-theme="aurora"] body {
  background:
    radial-gradient(1000px 460px at 10% -8%, rgba(0, 191, 255, 0.09), transparent 60%),
    radial-gradient(900px 440px at 94% -6%, rgba(56, 182, 255, 0.08), transparent 60%),
    #fff;
}

/* ---------- Headings: smaller H1s, tighter type, a serif-italic accent ---------- */

html[data-theme="aurora"] .home-hero__title {
  font-size: clamp(32px, 3.3vw, 48px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.03em;
}
html[data-theme="aurora"] :is(.cs-hero__title, .pf-hero__title) {
  font-size: clamp(30px, 3.1vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.025em;
}
html[data-theme="aurora"] .blog-index__title {
  font-size: clamp(30px, 3.3vw, 44px);
  letter-spacing: -0.03em;
}
html[data-theme="aurora"] .post-hero__title {
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
html[data-theme="aurora"] :is(.wp-page__title, .wp-content h1) {
  font-size: clamp(28px, 2.9vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
html[data-theme="aurora"] .sdc__title {
  font-size: clamp(34px, 4.6vw, 60px);
  letter-spacing: -0.03em;
  color: var(--au-blue);
}
html[data-theme="aurora"] .sdc__tagline {
  color: #000;
}

html[data-theme="aurora"] :is(.section-title, .pf-section-title, .related__title, .sdc__features-title, .cta-band__title) {
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
html[data-theme="aurora"] :is(.section-title, .pf-section-title, .related__title, .sdc__features-title) {
  color: #000;
}
html[data-theme="aurora"] .on-dark .section-title {
  color: #fff;
}
html[data-theme="aurora"] :is(.section-lead, .pf-section-lead) {
  font-weight: 400;
  color: var(--au-text);
}
html[data-theme="aurora"] .on-dark .section-lead {
  color: var(--au-on-dark-2);
}

/* Accent words (the <span> WordPress puts in some headlines). */
html[data-theme="aurora"] :is(.home-hero__title, .pf-hero__title, .cta-band__title) span {
  font-family: var(--au-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.12em;
  letter-spacing: -0.005em;
  padding-right: 0.08em;
}
html[data-theme="aurora"] .pf-hero__title span {
  color: var(--au-blue-2);
}

/* Eyebrows: a small-caps label with a blue dash; black on light, blue on dark. */
html[data-theme="aurora"] :is(.eyebrow, .cs-hero__eyebrow, .blog-index__eyebrow, .insights__kicker, .pf-label) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #000;
}
html[data-theme="aurora"] :is(.eyebrow, .cs-hero__eyebrow, .blog-index__eyebrow, .insights__kicker, .pf-label)::before {
  content: "";
  flex: none;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--au-blue);
}
html[data-theme="aurora"] :is(.on-dark .eyebrow, .cs-hero__eyebrow, .insights__kicker) {
  color: var(--au-blue);
}

/* ---------- Black sections: moving blue glow + faint grid ---------- */

html[data-theme="aurora"]
  :is(.home-hero, .results, .insights, .cs-hero, .cs-stats, .pf-stats, .cta-band, .post-hero__card, .site-footer) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #000;
}

html[data-theme="aurora"]
  :is(.home-hero, .results, .insights, .cs-hero, .cs-stats, .pf-stats, .cta-band, .post-hero__card, .site-footer)::before {
  content: "";
  position: absolute;
  inset: -30% -12%;
  z-index: -2;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(0, 191, 255, 0.4), transparent 70%),
    radial-gradient(34% 40% at 82% 18%, rgba(56, 182, 255, 0.3), transparent 70%),
    radial-gradient(30% 36% at 55% 80%, rgba(0, 191, 255, 0.22), transparent 70%),
    radial-gradient(24% 30% at 92% 86%, rgba(255, 255, 255, 0.08), transparent 70%);
  filter: blur(28px);
  animation: au-drift 24s ease-in-out infinite alternate;
  pointer-events: none;
  will-change: transform;
}

html[data-theme="aurora"]
  :is(.home-hero, .results, .insights, .cs-hero, .cs-stats, .pf-stats, .cta-band, .post-hero__card, .site-footer)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 80%);
  pointer-events: none;
}

/* Calmer versions where the section is small or at the end of the page. */
html[data-theme="aurora"] :is(.cs-stats, .pf-stats)::before {
  opacity: 0.7;
}
html[data-theme="aurora"] .site-footer::before {
  opacity: 0.45;
  animation-duration: 40s;
}
html[data-theme="aurora"] .site-footer::after {
  opacity: 0.6;
}

/* Accent numbers: white-to-blue on black, the logo blue on white. */
html[data-theme="aurora"]
  :is(.home-hero, .results, .cs-stats, .pf-stats, .cta-band)
  :is(.home-hero__title span, .cta-band__title span, .result-card__value, .stat__value) {
  background: var(--au-text-grad-dark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  text-shadow: none;
}
html[data-theme="aurora"] :is(.cs-metrics dd, .pf-project__metrics dd) {
  color: var(--au-blue-2);
}
html[data-theme="aurora"] :is(.home-hero .stat__value, .result-card__value) {
  font-variant-numeric: tabular-nums;
}

/* ---------- Header ---------- */

html[data-theme="aurora"] .site-header {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--au-line-light);
}
html[data-theme="aurora"] .nav {
  gap: 2px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--au-line-light);
  border-radius: 10px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 8px 22px rgba(0, 0, 0, 0.06);
}
html[data-theme="aurora"] .nav__link {
  padding: 8px 16px;
  border-radius: 6px;
  color: var(--c-text);
  font-size: 15px;
  font-weight: 500;
}
html[data-theme="aurora"] .nav__link:hover {
  color: #000;
  background: rgba(0, 191, 255, 0.12);
}
html[data-theme="aurora"] :is(.nav__link[aria-current="page"], .nav__link--active),
html[data-theme="aurora"] :is(.nav__link[aria-current="page"], .nav__link--active):hover {
  background: #000;
  color: #fff;
  box-shadow: none;
}
html[data-theme="aurora"] .nav__chevron {
  color: currentColor;
}
html[data-theme="aurora"] .nav__dropdown {
  padding: 6px;
  background: #fff;
  border: 1px solid var(--au-line-light);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}
html[data-theme="aurora"] .nav__dropdown a {
  border-radius: 4px;
  font-size: 15px;
}
html[data-theme="aurora"] .nav__dropdown a:hover {
  background: rgba(0, 191, 255, 0.12);
  color: #000;
}

/* ---------- Platform chrome: header CTA, hero trust strip, footer brand ---------- */

/* The header CTA carries the brand gradient so the accent reads in the chrome. */
html[data-theme="aurora"] .site-header__cta .btn--primary,
html[data-theme="aurora"] .site-header__cta .btn--primary:hover {
  background: var(--au-grad);
  color: #000;
}

/* Hero trust strip: a hairline-divided engine list under the stats. */
html[data-theme="aurora"] .home-hero__trust {
  margin-top: 40px;
  padding-top: 28px;
  gap: 18px;
  border-top: 1px solid var(--au-line);
  animation: au-rise 0.8s var(--au-ease) 0.32s backwards;
}
html[data-theme="aurora"] .home-hero__trust-label {
  color: var(--au-blue);
  letter-spacing: 0.16em;
}
html[data-theme="aurora"] .home-hero__trust-list li {
  color: var(--au-on-dark);
}

/* Footer wordmark: white-to-blue brand gradient. */
html[data-theme="aurora"] .site-footer__wordmark {
  background: var(--au-text-grad-dark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons: crisp, with a hard offset shadow ---------- */

html[data-theme="aurora"]
  :is(.btn--primary, .btn--sky, .btn--sky-dark-text, .btn--outline-light, .btn--outline-dark, .btn--ghost-dark, .btn--linkedin) {
  --au-btn-line: #000;
  --au-btn-shadow: #000;
  padding: 12px 22px;
  border: 1.5px solid var(--au-btn-line);
  border-radius: 6px;
  box-shadow: 3px 3px 0 0 var(--au-btn-shadow);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition:
    transform 0.15s var(--au-ease),
    box-shadow 0.15s var(--au-ease),
    background-color 0.15s ease,
    color 0.15s ease;
}
html[data-theme="aurora"]
  :is(.btn--primary, .btn--sky, .btn--sky-dark-text, .btn--outline-light, .btn--outline-dark, .btn--ghost-dark, .btn--linkedin):hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 0 var(--au-btn-shadow);
}
html[data-theme="aurora"]
  :is(.btn--primary, .btn--sky, .btn--sky-dark-text, .btn--outline-light, .btn--outline-dark, .btn--ghost-dark, .btn--linkedin):active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 var(--au-btn-shadow);
}
html[data-theme="aurora"] .btn:focus-visible {
  outline: 2px solid var(--au-blue);
  outline-offset: 3px;
}
/* On black the line and shadow turn white. */
html[data-theme="aurora"]
  :is(.home-hero, .results, .insights, .cs-hero, .cs-stats, .pf-stats, .cta-band, .post-hero__card, .site-footer, .on-dark, .sdc)
  .btn {
  --au-btn-line: #fff;
  --au-btn-shadow: #fff;
}

/* Primary: brand blue with black text, like the logo. */
html[data-theme="aurora"] :is(.btn--primary, .btn--sky, .btn--sky-dark-text),
html[data-theme="aurora"] :is(.btn--primary, .btn--sky, .btn--sky-dark-text):hover {
  background: var(--au-blue);
  color: #000;
}
html[data-theme="aurora"] :is(.btn--primary, .btn--sky, .btn--sky-dark-text):hover {
  background: var(--au-blue-2);
}
html[data-theme="aurora"] :is(.btn--outline-light, .btn--ghost-dark) {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}
html[data-theme="aurora"] :is(.btn--outline-light, .btn--ghost-dark):hover {
  background: rgba(255, 255, 255, 0.12);
}
html[data-theme="aurora"] .btn--outline-dark,
html[data-theme="aurora"] .btn--outline-dark:hover {
  background: #fff;
  color: #000;
}
html[data-theme="aurora"] .btn--linkedin {
  background: #0a66c2; /* LinkedIn's own colour */
  color: #fff;
}
html[data-theme="aurora"] .btn--text-light:hover {
  color: var(--au-blue);
}

/* Buttons inside WordPress content and forms follow the same style. */
html[data-theme="aurora"] :is(.fluentform, .kb-form) {
  --form-accent: var(--au-blue);
  --form-accent-hover: var(--au-blue-2);
  --form-border: rgba(0, 0, 0, 0.22);
  --form-radius: 6px;
  --form-focus: 0 0 0 3px rgba(0, 191, 255, 0.3);
}
html[data-theme="aurora"] :is(.fluentform .ff-btn, .kb-form .kb-forms-submit, .wp-content .wp-block-button__link) {
  border: 1.5px solid #000;
  border-radius: 6px;
  background: var(--au-blue);
  color: #000;
  box-shadow: 3px 3px 0 0 #000;
  transition:
    transform 0.15s var(--au-ease),
    box-shadow 0.15s var(--au-ease),
    background-color 0.15s ease;
}
html[data-theme="aurora"] :is(.fluentform .ff-btn, .kb-form .kb-forms-submit, .wp-content .wp-block-button__link):hover {
  transform: translate(-1px, -1px);
  background: var(--au-blue-2);
  color: #000;
  box-shadow: 4px 4px 0 0 #000;
}

/* ---------- Badges, filters and pills ---------- */

html[data-theme="aurora"] .badge {
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.1em;
}
html[data-theme="aurora"] .badge--soft {
  background: rgba(0, 191, 255, 0.12);
  color: #000;
  box-shadow: inset 0 0 0 1px rgba(0, 191, 255, 0.5);
}
html[data-theme="aurora"] .badge--solid {
  background: #000;
  color: #fff;
}
html[data-theme="aurora"] .badge--dark {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(0, 191, 255, 0.5);
  color: var(--au-blue);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="aurora"] .badge--outline {
  background: #fff;
  border-color: rgba(0, 191, 255, 0.6);
  color: #000;
}
html[data-theme="aurora"] .pf-filter {
  border-radius: 6px;
  border: 1.5px solid var(--au-line-light);
  background: #fff;
  color: var(--c-text);
  font-weight: 600;
}
html[data-theme="aurora"] .pf-filter:hover {
  border-color: #000;
  color: #000;
}
html[data-theme="aurora"] .pf-filter[aria-pressed="true"] {
  background: #000;
  border-color: #000;
  color: #fff;
  box-shadow: 3px 3px 0 0 var(--au-blue);
}
html[data-theme="aurora"] .post-hero__pills a {
  border-radius: 4px;
  border-color: rgba(0, 191, 255, 0.5);
  background: rgba(0, 191, 255, 0.1);
  color: #fff;
}

/* ---------- Cards: one crisp style per background ---------- */

/* On black: thin glass with a hairline border. */
html[data-theme="aurora"] :is(.home-stat, .pf-stat, .result-card, .lp-card) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--au-line);
  border-top-color: var(--au-line-hi);
  border-radius: 6px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
html[data-theme="aurora"] .lp-card:hover {
  border-color: rgba(0, 191, 255, 0.6);
  box-shadow:
    0 0 0 1px rgba(0, 191, 255, 0.3),
    0 22px 50px rgba(0, 191, 255, 0.18);
}
html[data-theme="aurora"] .lp-card__thumb {
  border-bottom-color: var(--au-line);
}
html[data-theme="aurora"] :is(.lp-card__meta, .lp-card__more) {
  color: var(--au-blue);
}
html[data-theme="aurora"] .lp-card__excerpt {
  color: var(--au-on-dark);
}
html[data-theme="aurora"] .home-stat .stat__label,
html[data-theme="aurora"] :is(.cs-stats, .pf-stats) .stat__label {
  color: var(--au-on-dark-2);
}

/* On white: hairline border, small shadow; blue when hovered. */
html[data-theme="aurora"] :is(.process-card, .pf-skill, .pf-project, .pf-founder, .cs-card) {
  background: #fff;
  border: 1px solid var(--au-line-light);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
html[data-theme="aurora"] :is(.process-card, .pf-skill, .pf-project, .pf-founder, .cs-card):hover {
  border-color: rgba(0, 191, 255, 0.7);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 16px 36px rgba(0, 191, 255, 0.14);
}
html[data-theme="aurora"] .process-card__title {
  color: #000;
}
html[data-theme="aurora"] .process-card p {
  font-weight: 400;
  color: var(--au-text);
}

/* ---------- Home ---------- */

html[data-theme="aurora"] .home-hero {
  padding: 56px 0 48px;
}
html[data-theme="aurora"] :is(.home-hero__glow, .home-hero__wave) {
  display: none;
}
html[data-theme="aurora"] .home-hero__inner {
  display: grid;
  justify-items: center;
}
html[data-theme="aurora"] .home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 7px 12px 7px 10px;
  border: 1px solid rgba(0, 191, 255, 0.45);
  border-radius: 6px;
  background: rgba(0, 191, 255, 0.1);
  color: var(--au-blue);
  font-size: 12px;
  letter-spacing: 0.14em;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="aurora"] .home-hero__eyebrow::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--au-blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-theme="aurora"] .home-hero__title {
  max-width: 15em;
  margin: 0 auto 20px;
}
/* The accent words get a hand-drawn underline in brand blue. */
html[data-theme="aurora"] .home-hero__title span {
  position: relative;
  display: inline-block;
}
html[data-theme="aurora"] .home-hero__title span::after {
  content: "";
  position: absolute;
  /* fx.ts fits it to the last line of the accent words; otherwise it spans them all. */
  left: var(--au-ul-left, 2%);
  width: var(--au-ul-width, 92%);
  bottom: -0.1em;
  height: 0.2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10C52 3 120 1 197 6' fill='none' stroke='%2300bfff' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  clip-path: inset(0 0 0 0);
  animation: au-underline 0.9s var(--au-ease) 0.7s backwards;
}
html[data-theme="aurora"] .home-hero__subtitle {
  max-width: 34em;
  margin: 0 auto 30px;
  color: var(--au-on-dark);
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.6;
}
html[data-theme="aurora"] .home-hero__inner > .btn-row {
  gap: 14px;
}

/* Stats: one hairline-divided bar instead of five cards. */
html[data-theme="aurora"] .home-hero__stats {
  margin-top: 44px;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--au-line);
  border-top-color: var(--au-line-hi);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
html[data-theme="aurora"] .home-hero__stats .home-stat {
  min-height: 0;
  margin: -1px 0 0 -1px;
  padding: 22px 14px 20px;
  border: 0;
  border-left: 1px solid var(--au-line);
  border-top: 1px solid var(--au-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="aurora"] .home-hero__stats .stat__value {
  font-size: clamp(26px, 2.3vw, 34px);
  letter-spacing: -0.02em;
}
html[data-theme="aurora"] .home-hero__stats .stat__label {
  margin-top: 6px;
  font-size: 11.5px;
  letter-spacing: 0.12em;
}

@media (max-width: 600px) {
  html[data-theme="aurora"] .home-hero__stats .home-stat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  html[data-theme="aurora"] .home-hero__eyebrow {
    font-size: 11px;
    letter-spacing: 0.1em;
  }
}

/* Desktop: text on the left, artwork on the right. */
@media (min-width: 1080px) {
  html[data-theme="aurora"] .home-hero__inner {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: clamp(32px, 4vw, 64px);
    justify-items: start;
    text-align: left;
  }
  html[data-theme="aurora"] .home-hero__inner > :not(.hero-art) {
    grid-column: 1;
  }
  html[data-theme="aurora"] .home-hero__eyebrow {
    grid-row: 2;
  }
  html[data-theme="aurora"] .home-hero__title {
    grid-row: 3;
    margin: 0 0 20px;
  }
  html[data-theme="aurora"] .home-hero__subtitle {
    grid-row: 4;
    margin: 0 0 30px;
  }
  html[data-theme="aurora"] .home-hero__inner > .btn-row {
    grid-row: 5;
    justify-content: flex-start;
  }
  html[data-theme="aurora"] .hero-art {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
  }
}

/* Process: white section, white cards. */
html[data-theme="aurora"] .process {
  background: transparent;
}

/* Results and latest posts */
html[data-theme="aurora"] .result-card__label {
  color: #fff;
}
html[data-theme="aurora"] .result-card__quote {
  color: var(--au-on-dark);
}
html[data-theme="aurora"] .result-card__service {
  color: var(--au-on-dark-2);
}
html[data-theme="aurora"] .insights__title {
  margin: 0 0 14px;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #fff;
}
html[data-theme="aurora"] .insights__lead {
  font-weight: 400;
  color: var(--au-on-dark-2);
}
html[data-theme="aurora"] .insights .section-head {
  margin-bottom: 44px;
}

/* ---------- Blog ---------- */

html[data-theme="aurora"] .blog-index__title {
  color: #000;
}
html[data-theme="aurora"] .blog-index__lead {
  color: var(--au-text);
}
html[data-theme="aurora"] .featured-post {
  box-shadow: 0 26px 60px rgba(0, 191, 255, 0.2);
  outline: 1px solid rgba(0, 191, 255, 0.5);
  outline-offset: -1px;
}
html[data-theme="aurora"] .blog-index__recent {
  border-top-color: var(--au-line-light);
}
html[data-theme="aurora"] :is(.blog-index__count, .pagination a) {
  color: #000;
}
html[data-theme="aurora"] .post-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)) #000;
  border: 1px solid var(--au-line);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}
html[data-theme="aurora"] .post-card:hover {
  border-color: rgba(0, 191, 255, 0.6);
  box-shadow:
    0 0 0 1px rgba(0, 191, 255, 0.3),
    0 22px 50px rgba(0, 191, 255, 0.2);
}
html[data-theme="aurora"] :is(.post-card__image, .post-hero__image--empty) {
  background: linear-gradient(140deg, #000 0%, #000 45%, #00bfff 100%);
}
html[data-theme="aurora"] .post-page {
  background: transparent;
}
html[data-theme="aurora"] .post-hero__image {
  box-shadow: 0 26px 60px rgba(0, 191, 255, 0.18);
}
html[data-theme="aurora"] .post-hero__card {
  border-top: 0;
  border-radius: 8px 8px 0 0;
}
/* The author chip's green becomes brand blue. */
html[data-theme="aurora"] .author-chip__role {
  color: var(--au-blue-2);
}
html[data-theme="aurora"] .author-chip__avatar::after {
  background: var(--au-blue);
}

/* ---------- Case studies ---------- */

html[data-theme="aurora"] .cs-hero {
  border-bottom: 1px solid rgba(0, 191, 255, 0.45);
}
html[data-theme="aurora"] .cs-hero__lead {
  color: var(--au-on-dark);
}
html[data-theme="aurora"] .cs-grid-wrap {
  background: transparent;
}
html[data-theme="aurora"] .cs-card::before {
  background: var(--au-grad);
}
html[data-theme="aurora"] .cs-card__title a {
  color: #000;
}
html[data-theme="aurora"] .cs-card__highlight {
  border-radius: 4px;
  background: #000;
  border: 1px solid rgba(0, 191, 255, 0.5);
  color: #fff;
}
html[data-theme="aurora"] .cs-card__cta {
  color: #000;
}

/* ---------- Portfolio ---------- */

html[data-theme="aurora"] .pf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(0, 191, 255, 0.12), transparent 62%),
    radial-gradient(800px 420px at 85% 8%, rgba(56, 182, 255, 0.1), transparent 62%),
    transparent;
}
html[data-theme="aurora"] .pf-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 0%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 80% at 50% 0%, #000 25%, transparent 75%);
}
html[data-theme="aurora"] :is(.pf-expertise, .pf-matrix-wrap) {
  background: rgba(0, 191, 255, 0.05);
}
html[data-theme="aurora"] .pf-divider {
  background: var(--au-grad);
}
html[data-theme="aurora"] .pf-project__metrics {
  border-radius: 4px;
  background: rgba(0, 191, 255, 0.06);
  border-color: rgba(0, 191, 255, 0.3);
}
html[data-theme="aurora"] .pf-about__image {
  border-color: rgba(0, 191, 255, 0.5);
  box-shadow: 0 20px 46px rgba(0, 191, 255, 0.16);
}
html[data-theme="aurora"] .pf-brands li {
  border-radius: 4px;
}

/* ---------- Pages built in the WordPress editor ---------- */

/* Some pages set a white page background in their own CSS (Contact does);
   in Aurora the page tint shows through instead. */
html[data-theme="aurora"] .wp-page {
  background: transparent !important;
}
html[data-theme="aurora"] :is(.wp-page__title, .wp-content h1, .wp-content h2, .wp-content h3) {
  color: #000;
  letter-spacing: -0.02em;
}
html[data-theme="aurora"] :is(.wp-content img, .wp-content pre, .wp-content .wp-block-embed iframe) {
  border-radius: 6px;
}
html[data-theme="aurora"] :is(.wp-content blockquote, .wp-content .wp-block-quote) {
  border-radius: 0 6px 6px 0;
  border-left-color: var(--au-blue);
}

/* ---------- Footer, cookie banner and popup ---------- */

html[data-theme="aurora"] .site-footer__title {
  border-bottom-color: rgba(0, 191, 255, 0.5);
}
html[data-theme="aurora"] :is(.site-footer a, .site-footer__linkbtn) {
  color: var(--au-blue-2);
}
html[data-theme="aurora"] .site-footer__bottom {
  border-top-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="aurora"] .consent {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--au-line-light);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
}
html[data-theme="aurora"] .consent__btn {
  border-radius: 6px;
}
html[data-theme="aurora"] .pum-container {
  border-radius: 8px;
}

/* =====================================================================
 * Homepage: the hero artwork (components/home/HeroArt.tsx)
 * ===================================================================== */

html[data-theme="aurora"] .hero-art {
  --depth: 4;
  display: block;
  position: relative;
  width: min(100%, 600px);
  aspect-ratio: 560 / 520;
  margin-top: 36px;
  container-type: inline-size;
  pointer-events: none;
  user-select: none;
}
@media (min-width: 1080px) {
  html[data-theme="aurora"] .hero-art {
    width: 100%;
    margin-top: 0;
    justify-self: end;
  }
}
html[data-theme="aurora"] .hero-art > * {
  position: absolute;
  left: var(--x, 0);
  top: var(--y, 0);
  /* Layers drift against the cursor by their depth (fx.ts sets --au-px/--au-py on the hero). */
  translate: calc(var(--au-px, 0) * var(--depth) * -1px) calc(var(--au-py, 0) * var(--depth) * -1px);
  transition: translate 0.7s var(--au-ease);
}
html[data-theme="aurora"] .ha-back {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
html[data-theme="aurora"] .ha-blob {
  transform-box: fill-box;
  transform-origin: center;
  animation: ha-blob 18s ease-in-out infinite alternate;
}
html[data-theme="aurora"] .ha-orbits {
  transform-box: view-box;
  transform-origin: 292px 246px;
  animation: ha-spin 120s linear infinite;
}
html[data-theme="aurora"] .ha-route {
  stroke-dasharray: 4 7;
  animation: ha-dash 1.4s linear infinite;
}
html[data-theme="aurora"] .ha-route--trail {
  stroke-dasharray: 2 6;
}
html[data-theme="aurora"] .ha-light {
  stroke-dasharray: 0.1 199.9;
  opacity: 0;
  animation: ha-travel 5.2s cubic-bezier(0.45, 0, 0.55, 1) calc(1.2s + var(--i) * 1.3s) infinite;
}

/* The AI answer window */
html[data-theme="aurora"] .ha-window {
  --depth: 8;
  display: grid;
  gap: 1.9cqw;
  width: 57%;
  padding: 2.3cqw;
  border: 1px solid var(--au-line-hi);
  border-radius: 1.5cqw;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.96), rgba(0, 0, 0, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 30px 60px rgba(0, 0, 0, 0.6);
  animation: ha-in 0.8s var(--au-ease) 0.15s backwards;
}
html[data-theme="aurora"] .ha-window__bar {
  display: flex;
  gap: 0.9cqw;
}
html[data-theme="aurora"] .ha-window__bar i {
  width: 1.4cqw;
  height: 1.4cqw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
html[data-theme="aurora"] .ha-window__prompt {
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  padding: 1.6cqw 1.9cqw;
  border: 1px solid var(--au-line);
  border-radius: 1cqw;
  background: rgba(255, 255, 255, 0.05);
  color: var(--au-blue);
}
html[data-theme="aurora"] .ha-window__prompt svg {
  flex: none;
  width: 3.1cqw;
  height: 3.1cqw;
}
html[data-theme="aurora"] .ha-typing {
  position: relative;
  width: 64%;
  height: 1.3cqw;
  border-radius: 1cqw;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.25));
  animation: ha-type 8s steps(18, end) 0.8s infinite backwards;
}
html[data-theme="aurora"] .ha-typing::after {
  content: "";
  position: absolute;
  top: -0.55cqw;
  right: -1.2cqw;
  width: 2px;
  height: 2.4cqw;
  background: var(--au-blue);
  animation: ha-caret 1s steps(1, end) infinite;
}
html[data-theme="aurora"] .ha-window__answer {
  display: flex;
  align-items: flex-start;
  gap: 1.7cqw;
}
html[data-theme="aurora"] .ha-window__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 4.8cqw;
  height: 4.8cqw;
  border-radius: 1cqw;
  background: var(--au-blue);
  color: #000;
}
html[data-theme="aurora"] .ha-window__avatar svg {
  width: 2.9cqw;
  height: 2.9cqw;
}
html[data-theme="aurora"] .ha-window__lines {
  display: grid;
  flex: 1;
  gap: 1.15cqw;
  padding-top: 0.5cqw;
}
html[data-theme="aurora"] .ha-window__lines i {
  height: 1.2cqw;
  border-radius: 1cqw;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0.22) 36%) 0 0 / 260% 100%;
  animation: ha-shimmer 2.8s linear infinite;
}
html[data-theme="aurora"] .ha-window__lines i:nth-child(1) {
  width: 96%;
}
html[data-theme="aurora"] .ha-window__lines i:nth-child(2) {
  width: 84%;
  animation-delay: 0.15s;
}
html[data-theme="aurora"] .ha-window__lines i:nth-child(3) {
  width: 58%;
  animation-delay: 0.3s;
}
html[data-theme="aurora"] .ha-window__source {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.3cqw 1.7cqw;
  border: 1px solid rgba(0, 191, 255, 0.6);
  border-radius: 1cqw;
  background: rgba(0, 191, 255, 0.12);
  color: #fff;
  font-size: max(10px, 2.3cqw);
  font-weight: 600;
  letter-spacing: 0.01em;
  animation: ha-cite 3.6s ease-in-out 1.6s infinite;
}
html[data-theme="aurora"] .ha-window__source img {
  width: 3.7cqw;
  height: 3.7cqw;
  border-radius: 0.6cqw;
  object-fit: cover;
}
html[data-theme="aurora"] .ha-window__check {
  width: 3.1cqw;
  height: 3.1cqw;
  margin-left: auto;
  color: var(--au-blue);
}
html[data-theme="aurora"] .ha-window__bars {
  display: flex;
  align-items: flex-end;
  gap: 1.2cqw;
  height: 7.4cqw;
}
html[data-theme="aurora"] .ha-window__bars i {
  flex: 1;
  height: var(--h);
  border-radius: 0.5cqw 0.5cqw 0 0;
  background: linear-gradient(180deg, #fff, #00bfff 55%, rgba(0, 191, 255, 0.45));
  opacity: 0.9;
  transform-origin: bottom;
  animation: ha-grow 0.9s var(--au-ease) calc(0.9s + var(--i) * 0.08s) backwards;
}

/* The traffic chart */
html[data-theme="aurora"] .ha-chart {
  --depth: 12;
  width: 42%;
  padding: 2cqw 2.3cqw 1.8cqw;
  border: 1px solid var(--au-line-hi);
  border-radius: 1.5cqw;
  background: linear-gradient(180deg, rgba(22, 22, 22, 0.97), rgba(0, 0, 0, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 50px rgba(0, 0, 0, 0.55);
  animation: ha-in 0.8s var(--au-ease) 0.35s backwards;
}
html[data-theme="aurora"] .ha-chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4cqw 1.2cqw;
  min-width: 0;
}
html[data-theme="aurora"] .ha-chart__head svg {
  flex: none;
  width: 3.2cqw;
  height: 3.2cqw;
  color: var(--au-blue);
}
html[data-theme="aurora"] .ha-chart__head b {
  font-size: max(13px, 3.7cqw);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: var(--au-text-grad-dark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="aurora"] .ha-chart__head span {
  flex-basis: 100%;
  overflow: hidden;
  min-width: 0;
  color: var(--au-on-dark-2);
  font-size: max(9px, 1.85cqw);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
html[data-theme="aurora"] .ha-chart__plot {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1.2cqw;
  overflow: visible;
}
html[data-theme="aurora"] .ha-chart__line {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation: ha-draw 1.8s var(--au-ease) 0.7s backwards;
}
html[data-theme="aurora"] .ha-chart__area {
  animation: ha-fade 1s ease 1.6s backwards;
}
html[data-theme="aurora"] .ha-chart__halo {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: ha-halo 2.4s ease-out 2.4s infinite;
}

/* Tiles, chips and the paper plane */
html[data-theme="aurora"] .ha-tile {
  display: grid;
  place-items: center;
  width: 12.4cqw;
  aspect-ratio: 1;
  border: 1px solid var(--au-line-hi);
  border-radius: 1.8cqw;
  background: linear-gradient(180deg, rgba(28, 28, 28, 0.97), rgba(0, 0, 0, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 32px rgba(0, 0, 0, 0.5);
  color: var(--au-blue);
  animation:
    ha-in 0.7s var(--au-ease) calc(0.45s + var(--i) * 0.1s) backwards,
    ha-float 7s ease-in-out calc(var(--i) * -1.7s) infinite;
}
html[data-theme="aurora"] .ha-tile:nth-of-type(odd) {
  color: #fff;
}
html[data-theme="aurora"] .ha-tile svg {
  width: 46%;
  height: 46%;
}
html[data-theme="aurora"] .ha-chip {
  display: inline-flex;
  align-items: center;
  gap: 1.3cqw;
  padding: 1.25cqw 2.1cqw 1.25cqw 1.4cqw;
  border: 1px solid #000;
  border-radius: 1.2cqw;
  background: #fff;
  box-shadow: 0.6cqw 0.6cqw 0 0 var(--au-blue);
  color: #000;
  font-family: var(--font-display);
  font-size: max(10px, 2.2cqw);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  animation:
    ha-in 0.7s var(--au-ease) calc(0.9s + var(--i) * 0.15s) backwards,
    ha-float 6.5s ease-in-out calc(-1s - var(--i) * 2.1s) infinite;
}
html[data-theme="aurora"] .ha-chip__icon {
  flex: none;
  width: 2.9cqw;
  height: 2.9cqw;
  padding: 0.5cqw;
  border-radius: 50%;
  background: var(--au-blue);
  color: #000;
  stroke-width: 3;
}
html[data-theme="aurora"] .ha-plane {
  width: 8.4cqw;
  color: #fff;
  filter: drop-shadow(0 6px 12px rgba(0, 191, 255, 0.5));
  animation:
    ha-in 0.7s var(--au-ease) 1.1s backwards,
    ha-plane 6s ease-in-out infinite;
}
html[data-theme="aurora"] .ha-plane svg {
  display: block;
  width: 100%;
  height: auto;
  fill: rgba(0, 191, 255, 0.35);
}

/* Homepage hero text arrives in sequence. */
html[data-theme="aurora"] :is(.home-hero__eyebrow, .home-hero__title, .home-hero__subtitle, .home-hero__inner > .btn-row) {
  animation: au-rise 0.8s var(--au-ease) backwards;
}
html[data-theme="aurora"] .home-hero__title {
  animation-delay: 0.08s;
}
html[data-theme="aurora"] .home-hero__subtitle {
  animation-delay: 0.16s;
}
html[data-theme="aurora"] .home-hero__inner > .btn-row {
  animation-delay: 0.24s;
}

/* =====================================================================
 * Homepage: the interactive layer (components/aurora/fx.ts adds .au-fx
 * to <html> and the classes below; all of it is removed on the way out)
 * ===================================================================== */

/* ---------- Sliders ---------- */

html[data-theme="aurora"] .au-slider {
  --au-gap: 22px;
  position: relative;
  display: flex;
  gap: var(--au-gap);
  max-width: none;
  /* Full width of the window, so neighbouring slides peek in from the edges. */
  margin: -26px calc(50% - 50vw) 0;
  padding: 26px 0 34px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  perspective: 1600px;
  outline: none;
}
html[data-theme="aurora"] .au-slider::-webkit-scrollbar {
  display: none;
}
/* Spacers so the first and last slides can sit in the middle. */
html[data-theme="aurora"] .au-slider::before,
html[data-theme="aurora"] .au-slider::after {
  content: "";
  flex: 0 0 max(0px, calc(var(--au-pad, 0px) - var(--au-gap)));
}
html[data-theme="aurora"] .au-slider:focus-visible {
  outline: 2px solid var(--au-blue);
  outline-offset: 4px;
  border-radius: 8px;
}
html[data-theme="aurora"] .au-slider > * {
  flex: 0 0 var(--au-slide-w, 80%);
  min-width: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  /* Slides fan out in 3D by their distance from the middle (--au-d, set by fx.ts). */
  scale: calc(1 - var(--au-ad, 0) * 0.08);
  rotate: y calc(var(--au-d, 0) * -11deg);
  opacity: calc(1 - min(var(--au-ad, 0), 1) * 0.5);
  cursor: pointer;
}
html[data-theme="aurora"] .au-slider > .is-current {
  cursor: auto;
}

/* Results: one client at a time, number on the left, quote on the right. */
html[data-theme="aurora"] .au-slider--spotlight[data-au-wide] > .result-card {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-rows: 1fr auto;
  column-gap: 44px;
  align-items: end;
  min-height: 280px;
  padding: 40px 46px;
}
html[data-theme="aurora"] .au-slider--spotlight[data-au-wide] .result-card__value {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(60px, 6.6vw, 96px);
}
html[data-theme="aurora"] .au-slider--spotlight[data-au-wide] .result-card__label {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin: 10px 0 0;
}
html[data-theme="aurora"] .au-slider--spotlight[data-au-wide] .result-card__quote {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  padding: 0 0 18px 34px;
  border-left: 1px solid var(--au-line);
  color: #fff;
  font-family: var(--au-serif);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.35;
}
html[data-theme="aurora"] .au-slider--spotlight[data-au-wide] .result-card figcaption {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  padding: 10px 0 0 35px;
}

/* Controls: previous, dots (the current one fills while autoplay runs), next, pause. */
html[data-theme="aurora"] .au-slider-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 2px 0 34px;
}
html[data-theme="aurora"] .au-cbtn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}
html[data-theme="aurora"] .au-cbtn:hover {
  border-color: var(--au-blue);
  background: rgba(0, 191, 255, 0.14);
}
html[data-theme="aurora"] .au-cbtn:active {
  transform: scale(0.94);
}
html[data-theme="aurora"] :is(.au-cbtn, .au-dot):focus-visible {
  outline: 2px solid var(--au-blue);
  outline-offset: 2px;
}
html[data-theme="aurora"] .au-cbtn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-theme="aurora"] .au-cbtn--play {
  margin-left: 8px;
}
html[data-theme="aurora"] .au-cbtn .au-ico-play {
  display: none;
  fill: currentColor;
  stroke: none;
}
html[data-theme="aurora"] .is-paused .au-cbtn .au-ico-play {
  display: block;
}
html[data-theme="aurora"] .is-paused .au-cbtn .au-ico-pause {
  display: none;
}
html[data-theme="aurora"] .au-dots {
  display: flex;
  align-items: center;
}
html[data-theme="aurora"] .au-dot {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 30px;
  padding: 0 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
html[data-theme="aurora"] .au-dot > span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.35);
  transition:
    width 0.35s var(--au-ease),
    background-color 0.2s ease;
}
html[data-theme="aurora"] .au-dot:hover > span {
  background-color: rgba(255, 255, 255, 0.6);
}
html[data-theme="aurora"] .au-dot[aria-current="true"] > span {
  width: 36px;
  background: linear-gradient(90deg, #00bfff, #00bfff) left center / 100% 100% no-repeat, rgba(255, 255, 255, 0.2);
}
html[data-theme="aurora"] .is-playing .au-dot[aria-current="true"] > span {
  animation: au-progress var(--au-interval, 6s) linear both;
}

/* ---------- Process timeline ---------- */

html[data-theme="aurora"] .au-tl {
  --au-flow: 4.2s;
  position: relative;
  isolation: isolate;
}
html[data-theme="aurora"] .au-tl .process-card {
  position: relative;
}
html[data-theme="aurora"] .au-tl .process-card__number {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border: 2px solid #000;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  color: #000;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  transition:
    background-color 0.3s ease,
    box-shadow 0.4s ease;
}
/* Lit: the line has reached this step. */
html[data-theme="aurora"] .au-tl .is-lit .process-card__number {
  background: var(--au-blue);
  box-shadow:
    0 0 0 7px rgba(0, 191, 255, 0.18),
    0 12px 28px rgba(0, 191, 255, 0.4);
  animation: au-pop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1);
}
/* A ring that pings when the pulse passes. */
html[data-theme="aurora"] .au-tl .process-card__number::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--au-blue);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

/* The line (track + drawn part) and the pulse that flows along it. */
html[data-theme="aurora"] .au-tl::before,
html[data-theme="aurora"] .au-tl::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
html[data-theme="aurora"] .au-tl--h {
  padding-top: 92px !important;
}
html[data-theme="aurora"] .au-tl--h .process-card__number {
  position: absolute;
  top: -78px;
  left: 50%;
  margin: 0 0 0 -28px;
}
html[data-theme="aurora"] .au-tl--h::before {
  left: var(--au-x1);
  top: calc(var(--au-y1) - 1.5px);
  width: var(--au-len);
  height: 3px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent calc(var(--au-p, 0) * 100%), var(--c-line) 0),
    linear-gradient(90deg, #00bfff, #38b6ff);
}
html[data-theme="aurora"] .au-tl--h::after {
  left: calc(var(--au-x1) - 90px);
  top: calc(var(--au-y1) - 2.5px);
  width: 90px;
  height: 5px;
  border-radius: 5px;
  background: linear-gradient(90deg, transparent, rgba(0, 191, 255, 0.9) 70%, #fff);
  filter: drop-shadow(0 0 6px rgba(0, 191, 255, 0.9));
  opacity: 0;
}
html[data-theme="aurora"] .au-tl--v {
  padding-left: 74px !important;
}
html[data-theme="aurora"] .au-tl--v .process-card {
  text-align: left;
}
html[data-theme="aurora"] .au-tl--v .process-card__number {
  position: absolute;
  top: 26px;
  left: -74px;
  width: 50px;
  height: 50px;
  margin: 0;
  font-size: 17px;
}
html[data-theme="aurora"] .au-tl--v::before {
  left: calc(var(--au-x1) - 1.5px);
  top: var(--au-y1);
  width: 3px;
  height: var(--au-len);
  border-radius: 3px;
  background:
    linear-gradient(180deg, transparent calc(var(--au-p, 0) * 100%), var(--c-line) 0),
    linear-gradient(180deg, #00bfff, #38b6ff);
}
html[data-theme="aurora"] .au-tl--v::after {
  left: calc(var(--au-x1) - 2.5px);
  top: calc(var(--au-y1) - 90px);
  width: 5px;
  height: 90px;
  border-radius: 5px;
  background: linear-gradient(180deg, transparent, rgba(0, 191, 255, 0.9) 70%, #fff);
  filter: drop-shadow(0 0 6px rgba(0, 191, 255, 0.9));
  opacity: 0;
}
/* Flowing: the pulse travels along the line in 60% of each cycle; each step's ring
   pings and its card glows as it arrives. */
html[data-theme="aurora"] .au-tl--h.is-flowing::after {
  animation: au-comet-h var(--au-flow) linear infinite;
}
html[data-theme="aurora"] .au-tl--v.is-flowing::after {
  animation: au-comet-v var(--au-flow) linear infinite;
}
html[data-theme="aurora"] .au-tl.is-flowing .process-card__number::after {
  animation: au-ping var(--au-flow) linear infinite;
  animation-delay: calc(var(--au-i) / (var(--au-n) - 1) * var(--au-flow) * 0.6);
}
html[data-theme="aurora"] .au-tl.is-flowing .process-card {
  animation: au-step var(--au-flow) ease-out infinite;
  animation-delay: calc(var(--au-i) / (var(--au-n) - 1) * var(--au-flow) * 0.6);
}
html[data-theme="aurora"] .au-tl.is-paused :is(.process-card, .process-card__number::after),
html[data-theme="aurora"] .au-tl.is-paused::after {
  animation-play-state: paused;
}

/* ---------- Scroll reveals ---------- */

html[data-theme="aurora"].au-fx .au-reveal {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity 0.7s var(--au-ease) var(--au-delay, 0ms),
    translate 0.8s var(--au-ease) var(--au-delay, 0ms);
}
html[data-theme="aurora"].au-fx .au-reveal.au-in {
  opacity: 1;
  translate: none;
}

/* ---------- Cursor effects ---------- */

/* Cards tilt towards the cursor and catch a soft blue highlight under it. */
html[data-theme="aurora"].au-fx :is(.result-card, .lp-card, .process-card) {
  transition:
    transform var(--au-tf, 0.6s) var(--au-ease),
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    --au-sheen 0.4s ease;
}
html[data-theme="aurora"].au-fx .process-card.au-reveal {
  transition:
    opacity 0.7s var(--au-ease) var(--au-delay, 0ms),
    translate 0.8s var(--au-ease) var(--au-delay, 0ms),
    transform var(--au-tf, 0.6s) var(--au-ease),
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    --au-sheen 0.4s ease;
}
html[data-theme="aurora"].au-fx .au-hover {
  --au-tf: 0.12s;
  --au-sheen: 1;
  transform: perspective(900px) rotateX(var(--au-rx, 0deg)) rotateY(var(--au-ry, 0deg)) translateY(-3px);
}
html[data-theme="aurora"].au-fx :is(.result-card, .lp-card) {
  background:
    radial-gradient(
      420px circle at var(--au-cx, 50%) var(--au-cy, 0%),
      rgb(0 191 255 / calc(var(--au-sheen) * 0.18)),
      transparent 60%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
}
html[data-theme="aurora"].au-fx .process-card {
  background:
    radial-gradient(
      360px circle at var(--au-cx, 50%) var(--au-cy, 0%),
      rgb(0 191 255 / calc(var(--au-sheen) * 0.12)),
      transparent 60%
    ),
    #fff;
}

/* Black sections: a glow under the cursor, and the grid shows around it. */
html[data-theme="aurora"].au-fx :is(.home-hero, .results, .insights, .site-footer) {
  background-image: radial-gradient(
    560px circle at var(--au-mx, 50%) var(--au-my, -40%),
    rgb(0 191 255 / calc(var(--au-spot) * 0.18)),
    transparent 62%
  );
  transition: --au-spot 0.6s ease;
}
html[data-theme="aurora"].au-fx .au-lit {
  --au-spot: 1;
}
html[data-theme="aurora"].au-fx :is(.home-hero, .results, .insights, .site-footer)::after {
  -webkit-mask-image:
    radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 80%),
    radial-gradient(260px circle at var(--au-mx, -999px) var(--au-my, -999px), rgb(0 0 0 / var(--au-spot)), transparent 72%);
  mask-image:
    radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 80%),
    radial-gradient(260px circle at var(--au-mx, -999px) var(--au-my, -999px), rgb(0 0 0 / var(--au-spot)), transparent 72%);
}
/* The hero's glow leans away from the cursor. */
html[data-theme="aurora"].au-fx .home-hero::before {
  translate: calc(var(--au-px, 0) * -26px) calc(var(--au-py, 0) * -18px);
  transition: translate 0.9s var(--au-ease);
}

/* ---------- Animations ---------- */

@keyframes au-drift {
  0% {
    transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate3d(3%, 2%, 0) rotate(6deg) scale(1.08);
  }
  100% {
    transform: translate3d(-2%, 4%, 0) rotate(-4deg) scale(1.02);
  }
}
@keyframes au-rise {
  from {
    opacity: 0;
    translate: 0 20px;
  }
}
@keyframes au-underline {
  from {
    clip-path: inset(0 100% 0 0);
  }
}
@keyframes au-progress {
  from {
    background-size: 0% 100%;
  }
  to {
    background-size: 100% 100%;
  }
}
@keyframes au-pop {
  0% {
    scale: 0.82;
  }
  100% {
    scale: 1;
  }
}
@keyframes au-ping {
  0% {
    opacity: 0.8;
    scale: 1;
  }
  22% {
    opacity: 0;
    scale: 1.9;
  }
  100% {
    opacity: 0;
    scale: 1.9;
  }
}
@keyframes au-step {
  0% {
    border-color: rgba(0, 191, 255, 0.8);
    box-shadow:
      0 0 0 1px rgba(0, 191, 255, 0.4),
      0 18px 44px rgba(0, 191, 255, 0.22);
  }
  32%,
  100% {
    border-color: var(--au-line-light);
    box-shadow: var(--shadow-card);
  }
}
@keyframes au-comet-h {
  0% {
    opacity: 0;
    translate: 0 0;
  }
  6%,
  54% {
    opacity: 1;
  }
  60%,
  100% {
    opacity: 0;
    translate: var(--au-len) 0;
  }
}
@keyframes au-comet-v {
  0% {
    opacity: 0;
    translate: 0 0;
  }
  6%,
  54% {
    opacity: 1;
  }
  60%,
  100% {
    opacity: 0;
    translate: 0 var(--au-len);
  }
}

@keyframes ha-in {
  from {
    opacity: 0;
    scale: 0.86;
  }
}
@keyframes ha-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.8cqw);
  }
}
@keyframes ha-plane {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(1.4cqw, -1.6cqw) rotate(-6deg);
  }
}
@keyframes ha-blob {
  from {
    transform: rotate(-4deg) scale(1);
  }
  to {
    transform: rotate(6deg) scale(1.05);
  }
}
@keyframes ha-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ha-dash {
  to {
    stroke-dashoffset: -22;
  }
}
@keyframes ha-travel {
  0% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
  12%,
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: -100;
  }
}
@keyframes ha-type {
  0% {
    width: 0;
  }
  30%,
  85% {
    width: 64%;
  }
  100% {
    width: 0;
  }
}
@keyframes ha-caret {
  50% {
    opacity: 0;
  }
}
@keyframes ha-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -60% 0;
  }
}
@keyframes ha-cite {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 191, 255, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(0, 191, 255, 0.14), 0 0 22px rgba(0, 191, 255, 0.4);
  }
}
@keyframes ha-grow {
  from {
    transform: scaleY(0);
  }
}
@keyframes ha-draw {
  from {
    stroke-dashoffset: 100;
  }
}
@keyframes ha-fade {
  from {
    opacity: 0;
  }
}
@keyframes ha-halo {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(3.2);
  }
}

/* Never print anything half-revealed. */
@media print {
  html[data-theme="aurora"] .au-reveal {
    opacity: 1 !important;
    translate: none !important;
  }
}