/* ============================================================================
   Aiioy v3 — sections ported from the redesign.
   Self-contained and prefixed with .v3- so nothing here can reach the Webflow
   layout. Brand values are read from the variables the shared stylesheet
   already defines, so colour and type stay in sync with the rest of the site.
   ========================================================================= */

:root {
  --v3-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --v3-hairline: #e5e7eb;
  --v3-ink: #0a0a0a;
  --v3-ink-400: #474747;
  --v3-ink-300: #6b6b6b;
  --v3-ink-200: #b6b6b6;
  --v3-ink-100: #dddddd;
  --v3-surface: #e8ecf3;
  --v3-surface-alt: #f8fafc;
  --v3-brand: #1e3a8a;
  --v3-brand-bright: #2f5bd4;
}

.v3 {
  font-family: var(--_typography---font-family--secondary, Inter, sans-serif);
  color: var(--v3-ink);
}

.v3-section {
  padding-block: 6rem;
}

.v3-section.is-alt {
  background-color: var(--v3-surface-alt);
}

.v3-container {
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.v3-eyebrow {
  margin: 0;
  font-family: var(--_typography---font-family--detail, 'Roboto mono', monospace);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-ink-300);
}

.v3-heading {
  margin: 1.25rem 0 0;
  max-width: 56rem;
  font-family: var(--_typography---font-family--primary);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--v3-brand);
  text-wrap: balance;
}

/* Chinese needs looser tracking and leading than the Latin display setting. */
html[lang^='zh'] .v3-heading {
  letter-spacing: -0.005em;
  line-height: 1.24;
}

html[lang^='zh'] .v3-eyebrow {
  font-family: var(--_typography---font-family--secondary);
  letter-spacing: 0.08em;
}

/* ── Services: hairline grid ─────────────────────────────────────────────── */

.v3-grid {
  display: grid;
  gap: 1px;
  margin-top: 4rem;
  background-color: var(--v3-hairline);
  border-radius: 1.5rem;
  overflow: hidden;
  grid-template-columns: 1fr;
}

.v3-card {
  position: relative;
  background-color: var(--v3-surface);
  padding: 2.5rem 2rem;
  transition: background-color 0.5s var(--v3-ease);
}

.v3-section.is-alt .v3-card {
  background-color: var(--v3-surface-alt);
}

.v3-card:hover {
  background-color: #fff;
}

.v3-card__num {
  margin: 0;
  font-family: var(--_typography---font-family--detail, 'Roboto mono', monospace);
  font-size: 0.75rem;
  color: var(--v3-ink-200);
}

.v3-card__title {
  margin: 1.5rem 0 0;
  font-family: var(--_typography---font-family--primary);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  transition: color 0.3s var(--v3-ease);
}

.v3-card:hover .v3-card__title {
  color: var(--v3-brand);
}

.v3-card__body {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--v3-ink-400);
}

.v3-card__rule {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--v3-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--v3-ease);
}

.v3-card:hover .v3-card__rule {
  transform: scaleX(1);
}

/* ── Capabilities: bordered rows ─────────────────────────────────────────── */

.v3-rows {
  margin: 4rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--v3-hairline);
}

.v3-row {
  display: grid;
  gap: 0.5rem;
  padding-block: 2rem;
  border-bottom: 1px solid var(--v3-hairline);
}

.v3-row__num {
  font-family: var(--_typography---font-family--detail, 'Roboto mono', monospace);
  font-size: 0.75rem;
  color: var(--v3-ink-200);
}

.v3-row__title {
  margin: 0;
  font-family: var(--_typography---font-family--primary);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  transition: color 0.3s var(--v3-ease);
}

.v3-row:hover .v3-row__title {
  color: var(--v3-brand);
}

.v3-row__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--v3-ink-400);
}

/* ── Process: numbered cards ─────────────────────────────────────────────── */

.v3-steps {
  display: grid;
  gap: 1.5rem;
  margin-top: 4rem;
  grid-template-columns: 1fr;
}

.v3-step {
  border: 1px solid var(--v3-hairline);
  border-radius: 1rem;
  background-color: var(--v3-surface-alt);
  padding: 2rem;
}

.v3-section.is-alt .v3-step {
  background-color: #fff;
}

.v3-step__num {
  display: block;
  font-family: var(--_typography---font-family--primary);
  font-weight: 500;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--v3-ink-100);
}

.v3-step__title {
  margin: 2rem 0 0;
  font-family: var(--_typography---font-family--primary);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.v3-step__body {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--v3-ink-400);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.v3-footer {
  background-color: var(--v3-ink);
  color: #fff;
}

.v3-footer__inner {
  display: grid;
  gap: 3.5rem;
  padding-block: 5rem 0;
  grid-template-columns: 1fr;
}

.v3-footer__logo {
  height: 1.75rem;
  width: auto;
  filter: brightness(0) invert(1);
}

.v3-footer__tagline {
  margin: 2rem 0 0;
  max-width: 24rem;
  font-family: var(--_typography---font-family--primary);
  font-weight: 500;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.v3-footer__blurb {
  margin: 1rem 0 0;
  max-width: 24rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}

.v3-footer__label {
  margin: 0;
  font-family: var(--_typography---font-family--detail, 'Roboto mono', monospace);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

html[lang^='zh'] .v3-footer__label {
  font-family: var(--_typography---font-family--secondary);
  letter-spacing: 0.08em;
}

.v3-footer__list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.v3-footer__link {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s var(--v3-ease);
}

.v3-footer__link:hover {
  color: #fff;
}

.v3-footer__mail {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  text-underline-offset: 4px;
  transition: color 0.3s var(--v3-ease), text-decoration-color 0.3s var(--v3-ease);
  word-break: break-all;
}

.v3-footer__mail:hover {
  color: #fff;
  text-decoration-color: #fff;
}

.v3-footer__social {
  display: flex;
  gap: 0.75rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.v3-footer__social a {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  transition: border-color 0.3s var(--v3-ease), background-color 0.3s var(--v3-ease);
}

.v3-footer__social a:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.06);
}

.v3-footer__social img {
  height: 0.875rem;
  width: 0.875rem;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

.v3-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 4rem;
  padding-top: 2rem;
  padding-bottom: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.v3-footer__bottom p {
  margin: 0;
}

.v3-footer__domain {
  font-family: var(--_typography---font-family--detail, 'Roboto mono', monospace);
  letter-spacing: 0.08em;
}

/* ── Contact ─────────────────────────────────────────────────────────────── */

.v3-page-header,
.v3-contact-header {
  position: relative;
  overflow: hidden;
  padding-top: 9rem;
  padding-bottom: 4rem;
}

.v3-page-header__wash,
.v3-contact-header__wash {
  position: absolute;
  top: -6%;
  right: -45%;
  z-index: -1;
  height: 24rem;
  width: 24rem;
  opacity: 0.3;
  object-fit: cover;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at center, #000 25%, transparent 72%);
  mask-image: radial-gradient(circle at center, #000 25%, transparent 72%);
}

.v3-page-title,
.v3-contact-title {
  margin: 1.5rem 0 0;
  max-width: 18ch;
  font-family: var(--_typography---font-family--primary);
  font-weight: 500;
  font-size: clamp(2.25rem, 6.5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--v3-brand);
}

html[lang^='zh'] .v3-page-title,
.v3-contact-title {
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.v3-page-lede,
.v3-contact-lede {
  margin: 2rem 0 0;
  max-width: 34rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--v3-ink-400);
}

.v3-contact-body {
  padding-bottom: 6rem;
}

.v3-contact-grid {
  display: grid;
  gap: 3.5rem;
  grid-template-columns: 1fr;
}

.v3-contact-intro {
  margin: 0;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--v3-ink-400);
}

.v3-form {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
  grid-template-columns: 1fr;
}

.v3-field {
  display: block;
}

.v3-field.is-wide {
  grid-column: 1 / -1;
}

.v3-field__label {
  display: block;
  font-family: var(--_typography---font-family--detail, 'Roboto mono', monospace);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-ink-300);
}

html[lang^='zh'] .v3-field__label {
  font-family: var(--_typography---font-family--secondary);
  letter-spacing: 0.08em;
}

.v3-field input,
.v3-field textarea {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0 0 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--v3-ink-200);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1.125rem;
  color: var(--v3-ink);
  transition: border-color 0.3s var(--v3-ease);
}

.v3-field textarea {
  resize: vertical;
  min-height: 6rem;
}

.v3-field input:focus,
.v3-field textarea:focus {
  outline: none;
  border-bottom-color: var(--v3-brand);
}

.v3-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border: 0;
  border-radius: 999px;
  background-color: var(--v3-ink);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.3s var(--v3-ease), background-color 0.3s var(--v3-ease),
    box-shadow 0.3s var(--v3-ease);
}

.v3-submit:hover {
  transform: translateY(-2px);
  background-color: var(--v3-brand);
  box-shadow: 0 12px 28px -10px rgba(30, 58, 138, 0.6);
}

.v3-submit:disabled {
  opacity: 0.6;
  pointer-events: none;
}

.v3-aside {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  background-color: var(--v3-ink);
  color: #fff;
  padding: 2rem;
}

.v3-aside__wash {
  position: absolute;
  right: -8rem;
  bottom: -10rem;
  height: 34rem;
  width: 34rem;
  object-fit: cover;
  opacity: 0.7;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
}

.v3-aside__inner {
  position: relative;
}

.v3-aside__mail {
  display: block;
  margin-top: 1rem;
  font-family: var(--_typography---font-family--primary);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  text-underline-offset: 4px;
  word-break: break-all;
}

.v3-aside__mail:hover {
  text-decoration-color: #fff;
}

.v3-aside__tagline {
  margin: 3.5rem 0 0;
  font-family: var(--_typography---font-family--primary);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.v3-aside__blurb {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}

.v3-sent {
  display: none;
  margin-bottom: 3rem;
  border: 1px solid rgba(30, 58, 138, 0.25);
  border-radius: 1rem;
  background-color: rgba(30, 58, 138, 0.05);
  padding: 1.25rem 1.5rem;
}

.v3-sent.is-visible {
  display: block;
}

.v3-sent__title {
  margin: 0;
  font-family: var(--_typography---font-family--primary);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--v3-brand);
}

.v3-sent__body {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  color: var(--v3-ink-400);
}

.v3-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Breakpoints ─────────────────────────────────────────────────────────── */

@media screen and (min-width: 640px) {
  .v3-form {
    grid-template-columns: 1fr 1fr;
  }

  .v3-grid {
    grid-template-columns: 1fr 1fr;
  }

  .v3-steps {
    grid-template-columns: 1fr 1fr;
  }

  .v3-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media screen and (min-width: 992px) {
  .v3-section {
    padding-block: 7.5rem;
  }

  .v3-container {
    padding-inline: 3rem;
  }

  .v3-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .v3-card {
    padding: 2.5rem;
  }

  .v3-steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .v3-row {
    grid-template-columns: 3rem 1fr 1.2fr;
    gap: 2rem;
    align-items: baseline;
  }

  .v3-row__title {
    font-size: 1.5rem;
  }

  .v3-footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 3.5rem;
    padding-block: 6rem 0;
  }

  .v3-page-header,
.v3-contact-header {
    padding-top: 12rem;
    padding-bottom: 6rem;
  }

  .v3-page-header__wash,
.v3-contact-header__wash {
    top: -33%;
    right: -25%;
    height: 46rem;
    width: 46rem;
    opacity: 0.5;
  }

  .v3-contact-grid {
    grid-template-columns: 1.25fr 1fr;
    gap: 6rem;
  }

  .v3-contact-body {
    padding-bottom: 7.5rem;
  }

  .v3-aside {
    padding: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v3-card,
  .v3-card__rule,
  .v3-card__title,
  .v3-row__title,
  .v3-submit,
  .v3-footer__link,
  .v3-footer__social a {
    transition: none;
  }
}

/* ── Differentiators: rule + title + body ────────────────────────────────── */

.v3-points {
  display: grid;
  gap: 2.5rem;
  margin-top: 4rem;
  grid-template-columns: 1fr;
}

.v3-point__rule {
  display: block;
  height: 2px;
  width: 2.5rem;
  background-color: var(--v3-brand);
}

.v3-point__title {
  margin: 1.5rem 0 0;
  font-family: var(--_typography---font-family--primary);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.v3-point__body {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--v3-ink-400);
}

/* ── Navbar ──────────────────────────────────────────────────────────────── */

.v3-nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 500;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--v3-ease), backdrop-filter 0.3s var(--v3-ease),
    border-color 0.3s var(--v3-ease);
}

/* Solid only once scrolled — over the hero the bar stays out of the way. */
.v3-nav.is-scrolled {
  background-color: rgba(248, 250, 252, 0.82);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom-color: rgba(221, 221, 221, 0.7);
}

.v3-nav__bar {
  display: flex;
  height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.v3-nav__logo {
  flex-shrink: 0;
  transition: opacity 0.3s var(--v3-ease);
}

.v3-nav__logo:hover {
  opacity: 0.7;
}

.v3-nav__logo img {
  height: 1.5rem;
  width: auto;
  display: block;
}

.v3-nav__links {
  display: none;
  align-items: center;
  gap: 0.25rem;
}

.v3-nav__link {
  position: relative;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--v3-ink-400);
  text-decoration: none;
  transition: color 0.3s var(--v3-ease);
}

.v3-nav__link:hover {
  color: var(--v3-ink);
}

.v3-nav__link[aria-current='page'] {
  color: var(--v3-ink);
  font-weight: 500;
}

.v3-nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  inset-inline: 1rem;
  bottom: -2px;
  height: 1px;
  background-color: var(--v3-brand);
}

.v3-nav__side {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.v3-nav__lang {
  border: 1px solid var(--v3-ink-100);
  border-radius: 999px;
  padding: 0.375rem 0.75rem;
  font-family: var(--_typography---font-family--detail, 'Roboto mono', monospace);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--v3-ink-400);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.3s var(--v3-ease), color 0.3s var(--v3-ease);
}

.v3-nav__lang:hover {
  border-color: var(--v3-ink-300);
  color: var(--v3-ink);
}

a.button.v3-nav__cta,
.v3-nav__cta {
  display: none !important;
}

.v3-nav__toggle {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--v3-ink-100);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.v3-nav__bars {
  position: relative;
  display: block;
  height: 0.75rem;
  width: 1rem;
}

.v3-nav__bars span {
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background-color: var(--v3-ink);
  transition: transform 0.3s var(--v3-ease);
}

.v3-nav__bars span:first-child {
  top: 0;
}

.v3-nav__bars span:last-child {
  bottom: 0;
}

.v3-nav__toggle[aria-expanded='true'] .v3-nav__bars span:first-child {
  transform: translateY(5.5px) rotate(45deg);
}

.v3-nav__toggle[aria-expanded='true'] .v3-nav__bars span:last-child {
  transform: translateY(-5.5px) rotate(-45deg);
}

.v3-nav__panel {
  border-top: 1px solid rgba(221, 221, 221, 0.7);
  background-color: rgba(248, 250, 252, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.v3-nav__panel[hidden] {
  display: none;
}

.v3-nav__panel nav {
  display: flex;
  flex-direction: column;
  padding-block: 1rem;
}

.v3-nav__panel a {
  border-bottom: 1px solid rgba(221, 221, 221, 0.6);
  padding-block: 1rem;
  font-size: 1.125rem;
  color: var(--v3-ink-400);
  text-decoration: none;
}

.v3-nav__panel a[aria-current='page'] {
  color: var(--v3-ink);
}

.v3-nav__panel a:last-child {
  border-bottom: 0;
  color: var(--v3-brand);
}

/* ── Buttons: restyled in place ──────────────────────────────────────────────
   These keep their Webflow markup and classes so the form runtime still finds
   them; only the presentation changes. The decorative gradient balls are
   hidden rather than deleted for the same reason. */

:root {
  --v3-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2 7h10M8 3l4 4-4 4' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.button_gradient,
.button_gradient-glow {
  display: none !important;
}

a.button,
input.button-solid,
input.newsletter_submit-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  border: 0;
  border-radius: 999px !important;
  background-color: var(--v3-ink) !important;
  background-image: none !important;
  padding: 0.875rem 1.75rem !important;
  font-family: var(--_typography---font-family--secondary, Inter, sans-serif) !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.16);
  transition: transform 0.3s var(--v3-ease), background-color 0.3s var(--v3-ease),
    box-shadow 0.3s var(--v3-ease);
}

a.button .button_inner {
  display: contents;
}

a.button .button_text {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}

a.button::after {
  content: '';
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--v3-arrow) center / contain no-repeat;
  mask: var(--v3-arrow) center / contain no-repeat;
  transition: transform 0.3s var(--v3-ease);
}

/* input elements cannot carry ::after, so the arrow rides along as a background. */
input.button-solid,
input.newsletter_submit-btn {
  padding-right: 3rem !important;
  background-image: var(--v3-arrow) !important;
  background-repeat: no-repeat !important;
  background-position: right 1.75rem center !important;
  background-size: 0.875rem 0.875rem !important;
  -webkit-appearance: none;
  appearance: none;
}

a.button:hover,
input.button-solid:hover,
input.newsletter_submit-btn:hover {
  transform: translateY(-2px);
  background-color: var(--v3-brand) !important;
  box-shadow: 0 12px 28px -10px rgba(30, 58, 138, 0.6);
}

a.button:hover::after {
  transform: translateX(4px);
}

a.button:active,
input.button-solid:active,
input.newsletter_submit-btn:active {
  transform: translateY(0);
}

/* Secondary treatment for the paired "explore / view all" links. */
a.button.is-outline {
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--v3-ink-200);
  color: var(--v3-ink) !important;
  box-shadow: none;
}

a.button.is-outline:hover {
  background-color: var(--v3-ink) !important;
  border-color: var(--v3-ink);
  color: #fff !important;
}

@media screen and (min-width: 992px) {
  .v3-points {
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem 4rem;
  }

  .v3-nav__bar {
    height: 5rem;
  }

  .v3-nav__logo img {
    height: 1.75rem;
  }

  .v3-nav__links {
    display: flex;
  }

  a.button.v3-nav__cta,
  .v3-nav__cta {
    display: inline-flex !important;
  }

  .v3-nav__toggle {
    display: none;
  }

  .v3-nav__panel {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.button,
  a.button::after,
  input.button-solid,
  .v3-nav,
  .v3-nav__link {
    transition: none;
  }
}

/* ── About: intro split ──────────────────────────────────────────────────── */

.v3-split {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
  align-items: start;
}

.v3-prose {
  display: grid;
  gap: 1.5rem;
  max-width: 40rem;
}

.v3-prose p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--v3-ink-400);
}

.v3-figure {
  margin: 0;
  border-radius: 1rem;
  overflow: hidden;
  background-color: var(--v3-ink);
  aspect-ratio: 16 / 9;
}

.v3-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Newsletter success notice ───────────────────────────────────────────── */

.v3-note {
  display: none;
  margin-top: 1.5rem;
  border: 1px solid rgba(30, 58, 138, 0.25);
  border-radius: 1rem;
  background-color: rgba(30, 58, 138, 0.05);
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--v3-brand);
}

.v3-note.is-visible {
  display: block;
}

@media screen and (min-width: 992px) {
  .v3-split {
    grid-template-columns: 1.3fr 1fr;
    gap: 4rem;
    align-items: center;
  }
}

/* Five cards in a three-column grid leave one empty cell showing the hairline
   background, which reads as unfinished. Let the last card take the slack. */
@media screen and (min-width: 992px) {
  .v3-grid[data-count='5'] .v3-card:last-child {
    grid-column: span 2;
  }
}

@media screen and (min-width: 640px) and (max-width: 991px) {
  .v3-grid[data-count='5'] .v3-card:last-child {
    grid-column: span 2;
  }
}

/* ── Case study flow diagram ─────────────────────────────────────────────────
   Built in markup rather than shipped as an image so it translates with the
   rest of the page and stays sharp at any size.

   Everything here renders complete without JavaScript. The GSAP timeline uses
   from() tweens, so if the script never runs the finished state is what shows. */

.v3-flow {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  border: 1px solid var(--v3-hairline);
  border-radius: 1.25rem;
  background-color: var(--v3-surface-alt);
  padding: 1.75rem 1.5rem;
}

.v3-flow__track {
  position: relative;
}

.v3-flow__row {
  position: relative;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

.v3-flow__step {
  position: relative;
  border: 1px solid var(--v3-hairline);
  border-radius: 0.875rem;
  background-color: #fff;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04);
}

.v3-flow__step b {
  display: block;
  font-family: var(--_typography---font-family--primary);
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--v3-brand);
}

/* :not() keeps this off the step number, which is also a span. Without it the
   number matched here at (0,1,1) and beat its own (0,1,0) rule, so it rendered
   at the caption size with the caption's top margin instead of its own. */
.v3-flow__step > span:not(.v3-flow__num) {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--v3-ink-300);
}

.v3-flow__num {
  display: block;
  margin-bottom: 0.625rem;
  font-family: var(--_typography---font-family--detail, 'Roboto mono', monospace);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--v3-ink-200);
}

/* The rail sits behind the row and joins the centre of the first and last step.
   A real element, not a pseudo-element, so GSAP can scale it. */
.v3-flow__rail {
  display: none;
}

.v3-flow__note {
  margin: 0;
  border: 1px solid var(--v3-hairline);
  border-radius: 0.875rem;
  background-color: #fff;
  padding: 1.125rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--v3-ink-400);
}

@media screen and (min-width: 768px) {
  .v3-flow {
    padding: 2rem;
  }

  .v3-flow__row {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  .v3-flow__step {
    padding: 1.25rem 1.125rem;
  }

  .v3-flow__rail {
    display: block;
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background-color: var(--v3-hairline);
    border-radius: 2px;
    overflow: hidden;
  }

  .v3-flow__rail i {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left center;
    background-image: linear-gradient(
      90deg,
      var(--v3-brand) 0%,
      var(--v3-brand-bright) 100%
    );
  }
}

/* ── Footer: WhatsApp entry ──────────────────────────────────────────────── */

/* Kept visually level with the email above it, but pill-outlined so it reads as
   an action rather than a second address. */
.v3-footer__wa {
  /* flex rather than inline-flex: the email above is inline-block, so an inline
     box would sit beside it instead of starting its own line. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: border-color 0.3s var(--v3-ease), background-color 0.3s var(--v3-ease),
    color 0.3s var(--v3-ease);
}

.v3-footer__wa img {
  height: 1rem;
  width: 1rem;
  filter: brightness(0) invert(1);
  opacity: 0.78;
  transition: opacity 0.3s var(--v3-ease);
}

.v3-footer__wa:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.v3-footer__wa:hover img {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .v3-footer__wa,
  .v3-footer__wa img {
    transition: none;
  }
}

/* ── Registered office address ───────────────────────────────────────────── */

/* The address is its own labelled entry at the head of the column, and the line
   itself takes the email's size and colour so the two read as siblings. */
.v3-aside__address-label {
  margin-top: 2.5rem;
}

/* Adjacent-sibling rather than a new class: this is the Contact heading only
   when it directly follows the address, which is exactly where the gap belongs.
   The Pages column heading uses the same base class and must not pick it up. */
.v3-footer__address + .v3-footer__label {
  display: block;
  margin-top: 2.5rem;
}

.v3-footer__address,
.v3-aside__address {
  display: block;
  max-width: 22rem;
  margin: 1.5rem 0 0;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.7);
}

/* The Chinese address is one unbroken run of Han characters, so the default
   break-anywhere rule strands the final 室 on its own line. Keeping it whole
   and letting it wrap only at the building name reads correctly. */
html[lang^='zh'] .v3-footer__address,
html[lang^='zh'] .v3-aside__address {
  line-break: strict;
  text-wrap: balance;
}

.v3-aside__wa {
  margin-top: 1.25rem;
}

/* ── Legal prose (privacy policy) ────────────────────────────────────────── */

.v3-prose {
  max-width: 46rem;
  margin-top: 1rem;
}

.v3-prose__heading {
  margin: 3.5rem 0 0;
  font-family: var(--_typography---font-family--primary);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--v3-brand);
}

.v3-prose__heading:first-child {
  margin-top: 0;
}

.v3-prose__body {
  margin: 1.125rem 0 0;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--v3-ink-400);
}

.v3-prose__list {
  margin: 1.125rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.875rem;
}

.v3-prose__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--v3-ink-400);
}

/* Marker drawn rather than a list bullet, so it lines up with the first line of
   text at this leading instead of floating above it. */
.v3-prose__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.8em;
  height: 5px;
  width: 5px;
  border-radius: 999px;
  background-color: var(--v3-ink-200);
}

.v3-prose__updated {
  margin: 3.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--v3-hairline);
  font-family: var(--_typography---font-family--detail, 'Roboto mono', monospace);
  font-size: 0.8125rem;
  color: var(--v3-ink-300);
}

/* ── Collection notice under the forms ───────────────────────────────────── */

.v3-form__notice {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--v3-ink-300);
}

.v3-form__notice a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--v3-ink-200);
}

.v3-form__notice a:hover {
  color: var(--v3-ink);
}

/* ── Footer legal link ───────────────────────────────────────────────────── */

.v3-footer__legal {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.3s var(--v3-ease);
}

.v3-footer__legal:hover {
  color: #fff;
}

/* ── Cookie consent ──────────────────────────────────────────────────────── */

/* [hidden] needs the !important because .v3-consent sets display. */
.v3-consent[hidden] {
  display: none !important;
}

.v3-consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 900;
  display: block;
  background-color: var(--v3-ink);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.v3-consent__inner {
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  padding: 1.25rem 1.5rem;
  display: grid;
  gap: 1rem;
  align-items: center;
}

.v3-consent__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}

.v3-consent__text a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.v3-consent__actions {
  display: flex;
  gap: 0.75rem;
}

.v3-consent__btn {
  flex: 1;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.625rem 1.25rem;
  font-family: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.3s var(--v3-ease), border-color 0.3s var(--v3-ease),
    color 0.3s var(--v3-ease);
}

.v3-consent__btn.is-solid {
  background-color: #fff;
  color: var(--v3-ink);
}

.v3-consent__btn.is-solid:hover {
  background-color: rgba(255, 255, 255, 0.86);
}

/* Decline is a peer of accept, not a de-emphasised escape hatch — the choice has
   to be a real one. Same size and hit area, only the fill differs. */
.v3-consent__btn.is-ghost {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.v3-consent__btn.is-ghost:hover {
  border-color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
}

@media screen and (min-width: 768px) {
  .v3-consent__inner {
    grid-template-columns: 1fr auto;
    gap: 2rem;
  }

  .v3-consent__actions {
    flex: none;
  }

  .v3-consent__btn {
    flex: none;
    min-width: 7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v3-consent__btn {
    transition: none;
  }
}

/* ── Collection statement (PICS) ─────────────────────────────────────────── */

.v3-pics {
  grid-column: 1 / -1;
  margin-top: 0.25rem;
  border: 1px solid var(--v3-hairline);
  border-radius: 0.75rem;
  background-color: var(--v3-surface-alt);
  padding: 0 1rem;
}

.v3-pics > summary {
  cursor: pointer;
  padding: 0.75rem 0;
  font-size: 0.8125rem;
  color: var(--v3-ink-300);
  list-style: none;
}

.v3-pics > summary::-webkit-details-marker {
  display: none;
}

.v3-pics > summary::after {
  content: '＋';
  float: right;
  color: var(--v3-ink-200);
}

.v3-pics[open] > summary::after {
  content: '－';
}

.v3-pics__body {
  padding-bottom: 1rem;
}

.v3-pics__body p {
  margin: 0 0 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--v3-ink-400);
}

.v3-pics__body p:last-child {
  margin-bottom: 0;
}

.v3-pics__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.v3-field__optional {
  color: var(--v3-ink-200);
}