/*
 * Selective aurora treatment.
 *
 * The halo is deliberately transparent: it adds the moving cyan/green/violet
 * light from the homepage without importing its dark hero background. The
 * title sheen covers every public H1 plus at most one allowlisted marketing H2
 * selected by site-aurora.js. Repeated headings, cards and controls stay solid.
 */

:root {
  --ww-aurora-text-on-light: linear-gradient(
    108deg,
    #075f7c 0 18%,
    #0b7399 28%,
    #087764 38%,
    #6048c3 48%,
    #075f7c 58%,
    #0b7399 68%,
    #087764 78%,
    #6048c3 88%,
    #075f7c 100%
  );
  --ww-aurora-text-on-dark: linear-gradient(
    108deg,
    #78ddff 0 18%,
    #9aebff 28%,
    #53e2bd 38%,
    #b7a8ff 48%,
    #78ddff 58%,
    #9aebff 68%,
    #53e2bd 78%,
    #b7a8ff 88%,
    #78ddff 100%
  );
}

@keyframes wwGlobalHaloDrift {
  0%,
  100% {
    background-position: 0% 12%, 100% 8%, 46% 100%;
  }

  38% {
    background-position: 72% 0%, 34% 62%, 100% 48%;
  }

  72% {
    background-position: 18% 72%, 88% 100%, 12% 24%;
  }
}

@keyframes wwGlobalTitleAurora {
  0%,
  16% {
    background-position: 100% 50%;
  }

  64%,
  100% {
    background-position: 0% 50%;
  }
}

.site-aurora-overlay {
  animation: wwGlobalHaloDrift 19s ease-in-out infinite;
  background:
    radial-gradient(ellipse at 18% 24%, rgba(13, 126, 170, 0.5) 0 9%, transparent 34%),
    radial-gradient(ellipse at 82% 22%, rgba(25, 245, 186, 0.36) 0 8%, transparent 32%),
    radial-gradient(ellipse at 52% 78%, rgba(112, 92, 246, 0.42) 0 10%, transparent 36%);
  background-repeat: no-repeat;
  background-size: 165% 165%, 175% 175%, 170% 170%;
  inset: -10%;
  opacity: 0.16;
  pointer-events: none;
  position: fixed;
  z-index: 2;
}

/* Every public H1 and the optional one-per-page marketing H2 use this sheen. */
html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page .site-aurora-text {
  animation: wwGlobalTitleAurora 7.8s ease-in-out infinite !important;
  background-image: var(--ww-aurora-text-on-light) !important;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-size: 240% 100%;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Hero components can wrap their visible copy in a span with a legacy solid
   colour. Keep the sheen on the heading itself while letting that text inherit
   the same animated paint. */
html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page .site-aurora-text > :is(a, span, strong, em) {
  background-image: inherit !important;
  background-position: inherit !important;
  background-repeat: inherit !important;
  background-size: inherit !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page .site-aurora-text--on-dark {
  background-image: var(--ww-aurora-text-on-dark) !important;
}

/* One calm display weight across semantic headings, non-semantic card heads,
   FAQs and public controls. Private/admin screens remain outside this layer. */
html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  #main-content [class*="__title"],
  #main-content [class*="-title"],
  #main-content article > strong,
  #main-content .local-beyonds-deliverables article > strong,
  #main-content .local-beyonds-strip__item > strong,
  .faq-question,
  .faq-question > span,
  summary
) {
  font-variation-settings: "wght" 500 !important;
  font-weight: 500 !important;
}

/* Repeated hierarchy stays solid. This also neutralises legacy text-gradient
   animations without touching card or button backgrounds. */
html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page :is(
  h2:not(.site-aurora-text),
  h3,
  h4,
  h5,
  h6,
  #main-content [class*="__title"]:not(.site-aurora-text),
  #main-content [class*="-title"]:not(.site-aurora-text),
  #main-content article > strong,
  #main-content .local-beyonds-deliverables article > strong,
  #main-content .local-beyonds-strip__item > strong,
  .faq-question,
  .faq-question > span,
  summary
) {
  animation: none !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6
) > :is(a, span, strong, em) {
  font-variation-settings: "wght" 500 !important;
  font-weight: 500 !important;
}

html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page :is(
  .eyebrow,
  [class*="__eyebrow"],
  [class*="-eyebrow"],
  [class*="kicker"],
  [class*="badge"],
  [class*="pill"],
  [class*="tag"],
  [class*="label"],
  [class*="__number"],
  [class*="-number"],
  label,
  legend
) {
  animation: none !important;
  font-variation-settings: "wght" 500 !important;
  font-weight: 500 !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page :is(
  button,
  [role="button"],
  .btn,
  .button,
  [class*="-btn"],
  a[class*="-button"],
  button[class*="-button"],
  [class*="__button"],
  a[class*="-cta"],
  button[class*="-cta"],
  [class*="__cta"],
  .site-aurora-button,
  a[data-cta-location],
  input[type="button"],
  input[type="submit"]
) {
  font-variation-settings: "wght" 500 !important;
  font-weight: 500 !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Defensive cleanup for markup produced by an older automatic treatment.
   Controls now keep their original solid, contrast-aware text colour. */
html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page .site-aurora-button__label {
  animation: none !important;
  background: none !important;
  color: inherit !important;
  display: inline-block;
  -webkit-text-fill-color: currentColor !important;
}

html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page .faq-question::after {
  font-variation-settings: "wght" 400 !important;
  font-weight: 400 !important;
}

/* Some legacy “dark” service sections are restyled to light surfaces later in
   the cascade. Keep their body copy sober and readable without changing the
   section background or turning paragraphs into gradients. */
html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page .local-beyonds-section--dark.site-aurora-surface--light .local-beyonds-section__heading > p:not(.local-beyonds-kicker, .services-carousel-counter) {
  color: #405766 !important;
}

html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page .local-beyonds-section--dark.site-aurora-surface--light :is(
  h2:not(.site-aurora-text),
  h3,
  h4,
  h5,
  h6,
  article > strong
) {
  background: none !important;
  color: #0b4965 !important;
  -webkit-text-fill-color: currentColor !important;
}

/* The three homepage mockup cards share one deliberately centred copy rule.
   No other paragraphs are affected. */
html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page.page-home .magic-work-card__body > p {
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  display: block !important;
  margin-inline: auto !important;
  max-width: min(100%, 34rem) !important;
  overflow: visible !important;
  text-align: center !important;
  width: 100% !important;
}

html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page.page-home .magic-work-card h3 {
  background: none !important;
  color: #9aebff !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page.page-home .magic-home-v3 :is(
  .magic-section__kicker,
  .magic-proof-layer__eyebrow,
  .magic-service-card__eyebrow,
  .magic-work-card__type,
  .magic-project-panel__eyebrow
) {
  animation: none !important;
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Final CTAs use a dark gradient: never let inherited internal-page greys
   reduce the contrast of their heading or explanatory copy. */
html body.site-page.site-page.site-page.site-page section.local-beyonds-cta :is(h2, p, small) {
  color: #f7fbff !important;
  -webkit-text-fill-color: currentColor !important;
}

@media (max-width: 760px) {
  .site-aurora-overlay {
    opacity: 0.14;
  }
}

/* Compact, opt-in titles only. Long editorial and service headings continue to
   wrap normally; these measured titles are intended to read as one visual line. */
@media (max-width: 520px) {
  html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page #services-title {
    font-size: clamp(1.15rem, 5.8vw, 1.55rem) !important;
    letter-spacing: -0.045em !important;
    line-height: 1.08 !important;
    max-width: calc(100vw - 20px) !important;
    overflow-wrap: normal !important;
    text-wrap: nowrap !important;
    white-space: nowrap !important;
    word-break: normal !important;
  }

  html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page :is(
    #services-list-title,
    #services-faq-title,
    #magic-project-title,
    #article-faq-title
  ) {
    font-size: clamp(1.05rem, 5.4vw, 1.35rem) !important;
    letter-spacing: -0.035em !important;
    line-height: 1.08 !important;
    max-width: calc(100vw - 20px) !important;
    overflow-wrap: normal !important;
    text-wrap: nowrap !important;
    white-space: nowrap !important;
    word-break: normal !important;
  }

  /* The four edited internal pages share the Services hierarchy on phones.
     Long titles wrap instead of being squeezed into a clipped single line. */
  html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page :is(
    #realisations-title,
    #about-one-title,
    #contact-title
  ) {
    font-size: clamp(1.15rem, 5.8vw, 1.55rem) !important;
    letter-spacing: -0.045em !important;
    line-height: 1.08 !important;
    margin-inline: auto !important;
    max-width: min(calc(100vw - 36px), 22rem) !important;
    overflow-wrap: normal !important;
    text-align: center !important;
    text-wrap: balance !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page.page-services .local-beyonds-page h2,
  html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page.page-realisations :is(
    .section-heading,
    .realisations-mockups__heading,
    .realisations-page-routes__heading,
    .realisations-clean-cta
  ) :is(
    h2#realisations-discovery-title,
    h2#realisations-mockups-title,
    h2#realisations-lab-title,
    h2#pages-completes-title,
    h2#realisations-cta-title
  ),
  html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page.page-a-propos .about-one-page h2,
  html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page.page-contact :is(
    .contact-form-section,
    .contact-faq
  ) h2 {
    font-size: clamp(1.05rem, 5.4vw, 1.35rem) !important;
    letter-spacing: -0.035em !important;
    line-height: 1.08 !important;
    margin-inline: auto !important;
    max-width: min(calc(100vw - 36px), 24rem) !important;
    overflow-wrap: normal !important;
    text-align: center !important;
    text-wrap: balance !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page.page-contact .hero-cloud__actions {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    margin-inline: auto !important;
    max-width: min(calc(100vw - 36px), 22rem) !important;
    width: 100% !important;
  }

  html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page.page-contact .hero-cloud__actions > a {
    max-width: none !important;
    width: 100% !important;
  }

  html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page.page-articles .editorial-hub__hero h1 {
    font-size: clamp(1.05rem, 5.4vw, 1.35rem) !important;
    letter-spacing: -0.035em !important;
    line-height: 1.08 !important;
    max-width: calc(100vw - 20px) !important;
    overflow-wrap: normal !important;
    text-wrap: nowrap !important;
    white-space: nowrap !important;
    word-break: normal !important;
  }
}

@media (min-width: 521px) and (max-width: 1023px) {
  html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page :is(
    #services-title,
    #realisations-title,
    #about-one-title,
    #contact-title
  ) {
    font-size: var(--ww-type-h1) !important;
    line-height: 1.05 !important;
    margin-inline: auto !important;
    max-width: min(calc(100vw - 48px), 50rem) !important;
    text-align: center !important;
    text-wrap: balance !important;
    white-space: normal !important;
  }

  html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page.page-services .local-beyonds-page h2,
  html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page.page-realisations :is(
    .section-heading,
    .realisations-mockups__heading,
    .realisations-page-routes__heading,
    .realisations-clean-cta
  ) :is(
    h2#realisations-discovery-title,
    h2#realisations-mockups-title,
    h2#realisations-lab-title,
    h2#pages-completes-title,
    h2#realisations-cta-title
  ),
  html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page.page-a-propos .about-one-page h2,
  html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page.page-contact :is(
    .contact-form-section,
    .contact-faq
  ) h2 {
    font-size: var(--ww-type-h2) !important;
    line-height: 1.1 !important;
    margin-inline: auto !important;
    max-width: min(calc(100vw - 48px), 50rem) !important;
    text-align: center !important;
    text-wrap: balance !important;
    white-space: normal !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-aurora-overlay,
  html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page .site-aurora-text {
    animation: none !important;
  }

  html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page .site-aurora-text {
    background-position: 48% 50%;
  }
}

@media (forced-colors: active) {
  .site-aurora-overlay {
    display: none;
  }

  html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page .site-aurora-text {
    animation: none !important;
    background: none !important;
    color: CanvasText !important;
    -webkit-text-fill-color: CanvasText !important;
  }

  html body.site-page.site-page.site-page.site-page.site-page.site-page.site-page.site-page .site-aurora-text > :is(a, span, strong, em) {
    background: none !important;
    color: CanvasText !important;
    -webkit-text-fill-color: CanvasText !important;
  }
}