/* WellMax light / dark appearance controls */
:root {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f8f4ff;
  --paper: #0d0913;
  --lime: #c9a7ff;
  --blue: #a878ff;
  --muted: #b8afc4;
  --line: #382e45;
  --white: #17101f;
}

body,
.site-header,
.site-header nav,
.hero,
.insights,
.values,
.value-grid article,
.brief-section,
.project-form,
.case-story aside,
.topic-card > div span,
.card-reach,
.chip-two,
.bubble-b,
.light-button {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* Light mode opens the homepage into a clean white editorial canvas. */
html[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 78% 38%, rgba(139, 82, 226, .16), transparent 28%),
    linear-gradient(90deg, #fff 0%, #fff 49%, #f5efff 68%, #e7d8ff 100%) !important;
}

html[data-theme="light"] .hero::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .72) 46%, rgba(239, 226, 255, .12) 72%) !important;
}

html[data-theme="light"] .hero-smoke__layer {
  opacity: .08;
  mix-blend-mode: multiply;
}

html[data-theme="light"] .hero-smoke::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .3) 56%, transparent) !important;
}

html[data-theme="light"] .hero .eyebrow,
html[data-theme="light"] .hero .text-link,
html[data-theme="light"] .hero .hero-foot strong,
html[data-theme="light"] .hero h1 {
  color: #17101f;
  text-shadow: none;
}

html[data-theme="light"] .hero h1 em {
  color: #7b3fe4;
  text-shadow: 0 12px 34px rgba(123, 63, 228, .13);
}

html[data-theme="light"] .hero .hero-intro,
html[data-theme="light"] .hero .hero-foot span {
  color: #5d5368;
}

html[data-theme="light"] .hero .text-link,
html[data-theme="light"] .hero .hero-foot {
  border-color: rgba(23, 16, 31, .2);
}

html[data-theme="light"] .site-header,
html[data-theme="light"] .site-header.scrolled {
  background: rgba(255, 255, 255, .78) !important;
  border-bottom: 1px solid rgba(84, 38, 146, .08) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.35) !important;
  backdrop-filter: blur(24px) saturate(1.35) !important;
}

html[data-theme="dark"] body {
  background: var(--paper);
  color: var(--ink);
}

html[data-theme="dark"] .hero {
  background: linear-gradient(120deg, #0d0913 0%, #171020 48%, #211130 100%);
}

html[data-theme="dark"] .hero::before {
  background: linear-gradient(180deg, rgba(13, 9, 19, .04) 48%, rgba(13, 9, 19, .9) 100%);
}

html[data-theme="dark"] .hero-smoke::after {
  background: radial-gradient(circle at 68% 36%, transparent 0 23%, rgba(13, 9, 19, .22) 50%, rgba(13, 9, 19, .82) 84%), linear-gradient(90deg, rgba(13, 9, 19, .45), transparent 45%, rgba(13, 9, 19, .25));
}

html[data-theme="dark"] .hero-copy {
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}

html[data-theme="dark"] .hero-intro,
html[data-theme="dark"] .section-head > p,
html[data-theme="dark"] .proof-strip span,
html[data-theme="dark"] .project-form label,
html[data-theme="dark"] .article-body > section p {
  color: var(--muted);
}

html[data-theme="dark"] .insights,
html[data-theme="dark"] .values,
html[data-theme="dark"] .value-grid article,
html[data-theme="dark"] .brief-section {
  background: #120c19;
}

html[data-theme="dark"] .services,
html[data-theme="dark"] .service-page .service-list {
  background: linear-gradient(145deg, #120b1a 0%, #1b1027 58%, #261238 100%);
  color: #f8f4ff;
}

html[data-theme="dark"] .services .section-kicker,
html[data-theme="dark"] .service-page .section-kicker,
html[data-theme="dark"] .work .section-kicker {
  color: #c9a7ff;
}

html[data-theme="dark"] .services .section-head > p,
html[data-theme="dark"] .services .service-list p,
html[data-theme="dark"] .service-page .service-list p,
html[data-theme="dark"] .process article p,
html[data-theme="dark"] .statement-grid > div p:last-of-type,
html[data-theme="dark"] .article-grid span,
html[data-theme="dark"] .contact-details p {
  color: #c8bdd4;
}

html[data-theme="dark"] .services .service-list article,
html[data-theme="dark"] .service-page .service-list article,
html[data-theme="dark"] .process article,
html[data-theme="dark"] .stats > div {
  border-color: #4b3b58;
}

html[data-theme="dark"] .services .service-list article:hover,
html[data-theme="dark"] .service-page .service-list article:hover {
  background: rgba(202, 168, 255, .08);
}

html[data-theme="dark"] .work {
  background: #09060d;
  color: #f8f4ff;
}

html[data-theme="dark"] .marquee {
  background: #c9a7ff;
  color: #160d21;
  border-color: #160d21;
}

html[data-theme="dark"] .contact {
  background: linear-gradient(145deg, #5425a0, #2d1257);
}

html[data-theme="dark"] footer {
  background: #08050d;
  color: #b8afc4;
}

html[data-theme="dark"] footer a,
html[data-theme="dark"] .article-grid h3,
html[data-theme="dark"] .statement h2,
html[data-theme="dark"] .process h2,
html[data-theme="dark"] .process h3 {
  color: #f8f4ff;
}

html[data-theme="dark"] .article-body aside {
  color: #160d21;
}

html[data-theme="dark"] .button.dark {
  background: #f8f4ff;
  color: #160d21;
}

html[data-theme="dark"] .project-form {
  background: linear-gradient(145deg, #181021, #100b16);
  border-color: var(--line);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .32);
}

html[data-theme="dark"] .project-form input,
html[data-theme="dark"] .project-form select,
html[data-theme="dark"] .project-form textarea {
  background: rgba(255, 255, 255, .06);
  border-color: #433650;
  color: var(--ink);
}

html[data-theme="dark"] .case-story aside {
  background: #1b1126;
}

html[data-theme="dark"] .topic-card > div span,
html[data-theme="dark"] .card-reach,
html[data-theme="dark"] .chip-two,
html[data-theme="dark"] .bubble-b,
html[data-theme="dark"] .light-button {
  background: #f8f4ff;
  color: #120c19;
}

html[data-theme="dark"] .site-header.scrolled {
  background: rgba(13, 9, 19, .86);
  border-bottom-color: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .site-header {
  background: rgba(13, 9, 19, .9) !important;
}

html[data-theme="dark"] .site-header .brand {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] .site-header .official-brand {
  filter: brightness(1.7) saturate(.65);
}

@media (min-width: 901px) {
  html[data-theme="dark"] .site-header nav {
    background: linear-gradient(135deg, rgba(45, 28, 64, .86), rgba(24, 15, 35, .72) 52%, rgba(52, 31, 75, .8)) !important;
    border-color: rgba(199, 163, 255, .3) !important;
    outline-color: rgba(255, 255, 255, .11);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -2px 2px rgba(0, 0, 0, .22), 0 18px 42px rgba(0, 0, 0, .34) !important;
  }

  html[data-theme="dark"] .site-header nav > a:not(.nav-cta) {
    color: #f7f1ff;
    border-color: rgba(255, 255, 255, .09) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    text-shadow: none;
  }
}

@media (max-width: 900px) {
  html[data-theme="dark"] .site-header nav {
    background: rgba(13, 9, 19, .96) !important;
  }
}

/* Liquid-glass navigation: translucent, refractive and softly elevated. */
@media (min-width: 901px) {
  .site-header nav {
    isolation: isolate;
    border-radius: 999px !important;
    -webkit-backdrop-filter: blur(34px) saturate(1.85) contrast(1.04) !important;
    backdrop-filter: blur(34px) saturate(1.85) contrast(1.04) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .9),
      inset 0 -1px 0 rgba(91, 43, 154, .12),
      0 20px 52px rgba(43, 14, 82, .18),
      0 4px 12px rgba(43, 14, 82, .08) !important;
  }

  .site-header nav::before {
    inset: 1px 7% auto !important;
    height: 48% !important;
    border-radius: inherit !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, 0)) !important;
    filter: blur(.5px) !important;
  }

  html[data-theme="light"] .site-header nav {
    background: linear-gradient(135deg, rgba(255, 255, 255, .66), rgba(235, 222, 255, .34) 52%, rgba(255, 255, 255, .52)) !important;
    border-color: rgba(255, 255, 255, .82) !important;
    outline-color: rgba(102, 51, 175, .12);
  }

  .site-header nav > a:not(.nav-cta) {
    border-color: rgba(255, 255, 255, .2) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .035)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32);
    transition: transform .24s cubic-bezier(.2, .8, .2, 1), background .24s ease, box-shadow .24s ease, color .24s ease !important;
  }

  html[data-theme="light"] .site-header nav > a:not(.nav-cta) {
    color: #24172f;
  }

  .site-header nav > a:not(.nav-cta):hover,
  .site-header nav > a:not(.nav-cta).active {
    transform: translateY(-1px) scale(1.035);
    background: linear-gradient(145deg, rgba(255, 255, 255, .76), rgba(224, 200, 255, .38)) !important;
    border-color: rgba(255, 255, 255, .9) !important;
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(101, 45, 178, .12), 0 9px 22px rgba(69, 25, 132, .17) !important;
  }

  html[data-theme="light"] .site-header nav > a:not(.nav-cta).active {
    color: #5922ad !important;
  }

  .site-header nav .nav-cta {
    background: linear-gradient(145deg, rgba(112, 55, 202, .95), rgba(48, 20, 83, .94)) !important;
    border: 1px solid rgba(255, 255, 255, .58) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 4px rgba(31, 7, 62, .22), 0 10px 24px rgba(69, 25, 132, .24) !important;
  }

  html[data-theme="dark"] .site-header nav {
    background: linear-gradient(135deg, rgba(55, 35, 74, .72), rgba(22, 13, 31, .62) 52%, rgba(69, 40, 96, .68)) !important;
    border-color: rgba(222, 199, 255, .3) !important;
    outline-color: rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 22px 54px rgba(0, 0, 0, .4) !important;
  }

  html[data-theme="dark"] .site-header nav::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)) !important;
  }

  html[data-theme="dark"] .site-header nav > a:not(.nav-cta):hover,
  html[data-theme="dark"] .site-header nav > a:not(.nav-cta).active {
    color: #fff !important;
    background: linear-gradient(145deg, rgba(183, 134, 255, .34), rgba(255, 255, 255, .08)) !important;
    border-color: rgba(220, 195, 255, .38) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 25px rgba(0, 0, 0, .28) !important;
  }
}

@media (max-width: 900px) {
  .menu-toggle,
  .site-header.scrolled .menu-toggle {
    border: 1px solid rgba(255, 255, 255, .72) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .76), rgba(223, 203, 249, .45)) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 25px rgba(55, 20, 105, .17) !important;
  }

  html[data-theme="light"] .site-header nav.open {
    background: rgba(248, 244, 253, .88) !important;
    -webkit-backdrop-filter: blur(38px) saturate(1.7) !important;
    backdrop-filter: blur(38px) saturate(1.7) !important;
  }

  html[data-theme="dark"] .site-header nav.open {
    background: rgba(13, 9, 19, .9) !important;
    -webkit-backdrop-filter: blur(38px) saturate(1.65) !important;
    backdrop-filter: blur(38px) saturate(1.65) !important;
  }

  html[data-theme="dark"] .menu-toggle,
  html[data-theme="dark"] .site-header.scrolled .menu-toggle {
    border-color: rgba(222, 199, 255, .3) !important;
    background: linear-gradient(145deg, rgba(82, 49, 111, .72), rgba(22, 13, 31, .7)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 12px 28px rgba(0, 0, 0, .35) !important;
  }

  html[data-theme="dark"] .menu-toggle span,
  html[data-theme="dark"] .site-header.scrolled .menu-toggle span {
    background: #f8f4ff !important;
  }

  html[data-theme="dark"] .site-header nav > a,
  html[data-theme="dark"] .site-header nav > a:not(.nav-cta),
  html[data-theme="dark"] .site-header.scrolled nav > a,
  html[data-theme="dark"] .site-header.scrolled nav > a:not(.nav-cta) {
    color: #f8f4ff !important;
    border: 1px solid rgba(222, 199, 255, .2) !important;
    background: linear-gradient(145deg, rgba(125, 80, 165, .25), rgba(255, 255, 255, .055)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 22px rgba(0, 0, 0, .2) !important;
  }

  html[data-theme="dark"] .site-header nav .nav-cta,
  html[data-theme="dark"] .site-header.scrolled nav .nav-cta {
    background: linear-gradient(145deg, rgba(125, 70, 218, .96), rgba(60, 25, 105, .96)) !important;
    border-color: rgba(226, 204, 255, .42) !important;
  }
}

.preference-dock {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 220;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(229, 209, 255, .52));
  box-shadow: 0 14px 40px rgba(45, 13, 92, .18), inset 0 1px 0 rgba(255, 255, 255, .94), inset 0 -1px 0 rgba(78, 34, 141, .1);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  backdrop-filter: blur(28px) saturate(1.7);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.preference-dock::before {
  content: "";
  position: absolute;
  inset: 2px 14% auto;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .58), transparent);
  pointer-events: none;
}

.theme-toggle {
  position: relative;
  isolation: isolate;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(235, 220, 255, .7));
  color: #5826a7;
  box-shadow: 0 7px 18px rgba(63, 22, 121, .16), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(79, 33, 145, .12);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), background .3s ease, color .3s ease, box-shadow .3s ease;
}

.theme-toggle:active {
  transform: scale(.92);
  box-shadow: 0 3px 10px rgba(45, 13, 92, .18), inset 0 2px 5px rgba(78, 34, 141, .14);
}

@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover {
    transform: translateY(-2px) scale(1.035);
    box-shadow: 0 12px 28px rgba(45, 13, 92, .24), inset 0 1px 0 #fff;
  }
}

.theme-toggle:focus-visible {
  outline: 3px solid #a878ff;
  outline-offset: 4px;
}

.theme-toggle__icon {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  transition: opacity .2s ease, transform .38s cubic-bezier(.2, .8, .2, 1);
}

.theme-toggle__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle__moon {
  opacity: 0;
  transform: rotate(-70deg) scale(.7);
}

html[data-theme="dark"] .theme-toggle {
  background: linear-gradient(145deg, rgba(70, 42, 96, .92), rgba(22, 13, 31, .92));
  color: #d2b6ff;
  border-color: rgba(202, 168, 255, .34);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .preference-dock {
  background: linear-gradient(145deg, rgba(53, 33, 71, .8), rgba(17, 10, 25, .78));
  border-color: rgba(221, 195, 255, .24);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .14);
}

.language-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.language-select-wrap::before {
  content: "文";
  position: absolute;
  left: 13px;
  z-index: 1;
  color: #6f35c6;
  font: 800 14px/1 Manrope, sans-serif;
  pointer-events: none;
}

.language-select {
  min-width: 108px;
  height: 52px;
  padding: 0 32px 0 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  color: #2a193b;
  cursor: pointer;
  font: 700 14px "DM Sans", sans-serif;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.language-select-wrap::after {
  content: "⌄";
  position: absolute;
  right: 13px;
  color: currentColor;
  pointer-events: none;
}

.language-select:focus-visible {
  outline: 3px solid #a878ff;
  outline-offset: 3px;
}

html[data-theme="dark"] .language-select {
  background: rgba(255, 255, 255, .07);
  color: #f7f1ff;
}

html[data-theme="dark"] .language-select-wrap::before {
  color: #d2b6ff;
}

/* Native typefaces keep translated text crisp, balanced and correctly shaped. */
html[data-language="zh"] body,
html[data-language="zh"] button,
html[data-language="zh"] select {
  font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

html[data-language="th"] body,
html[data-language="th"] button,
html[data-language="th"] select {
  font-family: Thonburi, "Noto Sans Thai", Tahoma, sans-serif;
}

html[data-language="my"] body,
html[data-language="my"] button,
html[data-language="my"] select {
  font-family: "Myanmar Sangam MN", "Noto Sans Myanmar", sans-serif;
}

html[data-language="zh"] h1,
html[data-language="zh"] h2,
html[data-language="zh"] h3,
html[data-language="th"] h1,
html[data-language="th"] h2,
html[data-language="th"] h3,
html[data-language="my"] h1,
html[data-language="my"] h2,
html[data-language="my"] h3 {
  font-family: inherit;
  text-wrap: balance;
}

html[data-language="zh"] .hero h1 {
  letter-spacing: -.035em !important;
  line-height: 1 !important;
}

html[data-language="th"] .hero h1 {
  letter-spacing: -.025em !important;
  line-height: 1.08 !important;
}

html[data-language="my"] .hero h1 {
  letter-spacing: -.018em !important;
  line-height: 1.12 !important;
}

html[data-theme="dark"] .theme-toggle__sun {
  opacity: 0;
  transform: rotate(70deg) scale(.7);
}

html[data-theme="dark"] .theme-toggle__moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

@media (max-width: 600px) {
  html[data-theme="light"] .hero {
    background: linear-gradient(160deg, #fff 0%, #fbf8ff 66%, #eee3ff 100%) !important;
  }

  .theme-toggle {
    width: 46px;
    height: 46px;
  }

  .preference-dock {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    gap: 4px;
    padding: 4px;
  }

  .language-select {
    min-width: 96px;
    height: 46px;
    padding-left: 34px;
  }

  html.pwa-standalone .preference-dock {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(14px, env(safe-area-inset-bottom));
  }

  html[data-language="th"] .hero h1 {
    font-size: clamp(39px, 11.4vw, 47px) !important;
  }

  html[data-language="my"] .hero h1 {
    font-size: clamp(38px, 10.7vw, 44px) !important;
  }

  html[data-language="my"] .page-copy h1,
  html[data-language="my"] .article-hero h1,
  html[data-language="my"] .case-hero h1 {
    font-size: clamp(42px, 11vw, 54px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.018em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle__icon,
  body {
    transition: none !important;
  }
}