/* DR9X color system — final cascade owner for brand and semantic color. */
:root {
  color-scheme: dark;

  /* Brand primitives: perceptually balanced OKLCH scales. */
  --dr-ink-1000: oklch(9% 0.014 235);
  --dr-ink-950: oklch(12.5% 0.016 235);
  --dr-ink-900: oklch(16% 0.018 235);
  --dr-ink-850: oklch(19% 0.02 235);
  --dr-ink-800: oklch(23% 0.022 235);
  --dr-white: oklch(96% 0.009 82);
  --dr-copy: oklch(85% 0.012 235);
  --dr-muted: oklch(71% 0.018 235);
  --dr-line: oklch(31% 0.022 235);

  --dr-gold: oklch(78% 0.078 78);
  --dr-gold-strong: oklch(84% 0.086 78);
  --dr-gold-deep: oklch(52% 0.06 78);
  --dr-cyan: oklch(74% 0.055 196);
  --dr-cyan-strong: oklch(83% 0.06 196);
  --dr-cyan-deep: oklch(47% 0.042 196);
  --dr-violet: oklch(65% 0.055 315);
  --dr-violet-strong: oklch(78% 0.055 315);
  --dr-success: oklch(76% 0.14 155);
  --dr-error: oklch(72% 0.16 28);
  --dr-warning: oklch(80% 0.14 84);

  /* Semantic aliases preserve the existing component API. */
  --base: var(--dr-ink-950);
  --bg: var(--dr-ink-1000);
  --surface: var(--dr-white);
  --gold: var(--dr-gold);
  --cyan: var(--dr-cyan);
  --violet: var(--dr-violet);
  --gray: var(--dr-muted);

  --dr-gold-wash: oklch(17% 0.014 78);
  --dr-cyan-wash: oklch(17% 0.013 196);
  --dr-violet-wash: oklch(17% 0.013 315);
  --dr-success-wash: oklch(21% 0.03 155);
}

body,
#site { background: var(--dr-ink-1000); color: var(--dr-white); }
::selection { background: var(--dr-cyan); color: var(--dr-ink-1000); }

#header {
  background: oklch(13% 0.014 220 / .94) !important;
  border-bottom-color: var(--dr-line) !important;
}
#mobile-menu { background: var(--dr-ink-950) !important; border-bottom-color: var(--dr-line) !important; }
#footer { background: var(--dr-ink-950) !important; border-top-color: var(--dr-line) !important; }

/* Page-level wayfinding uses jewel-toned shadow, not blocks of saturated color. */
#main[data-page="home"] .dr-proof-section { background: var(--dr-ink-950) !important; }
.dr-page-hero,
#main[data-page="about"] .dr-page-hero,
#main[data-page="services"] .dr-page-hero,
#main[data-page="portfolio"] .dr-page-hero,
#main[data-page="testimonials"] .dr-page-hero,
#main[data-page="blog"] .dr-page-hero,
#main[data-page="contact"] .dr-page-hero { background: var(--dr-ink-950); }
#main[data-page="courses"] .dr-course-catalog { background: var(--dr-ink-950); }

/* Home proof: color communicates the breadth of evidence without rainbow noise. */
.dr-proof-section > div:first-child { background: var(--dr-line) !important; }
.dr-proof-section > div:first-child > div { background: var(--dr-ink-900) !important; }
.dr-proof-section > div:first-child > div:nth-child(1) { background: linear-gradient(145deg, var(--dr-gold-wash), var(--dr-ink-900)) !important; }
.dr-proof-section > div:first-child > div:nth-child(2) { background: linear-gradient(145deg, var(--dr-cyan-wash), var(--dr-ink-900)) !important; }
.dr-proof-section > div:first-child > div:nth-child(3) { background: linear-gradient(145deg, var(--dr-violet-wash), var(--dr-ink-900)) !important; }
.dr-proof-section > div:first-child > div:nth-child(1) [data-countup] { color: var(--dr-gold-strong) !important; }
.dr-proof-section > div:first-child > div:nth-child(2) [data-countup] { color: var(--dr-cyan-strong) !important; }
.dr-proof-section > div:first-child > div:nth-child(3) [data-countup] { color: var(--dr-violet-strong) !important; }
.dr-proof-section [data-countup] { color: var(--dr-white) !important; }
.dr-proof-note { color: var(--dr-copy); }

/* Surfaces gain a subtle brand tint instead of generic gray. */
.dr-card,
.dr-card-cyan,
.dr-card-gold,
.dr-package-grid > div,
[role="dialog"] { background-color: var(--dr-ink-900) !important; border-color: var(--dr-line) !important; }
.dr-card:hover,
.dr-card-cyan:hover { border-color: var(--dr-cyan-deep) !important; background-color: var(--dr-cyan-wash) !important; }
.dr-card-gold:hover { border-color: var(--dr-gold-deep) !important; background-color: var(--dr-gold-wash) !important; }

.dr-service-feature { background: var(--dr-ink-900); border-color: var(--dr-line); }
.dr-service-copy { background: linear-gradient(155deg, var(--dr-cyan-wash), var(--dr-ink-950)); }
.dr-expertise,
.dr-how-section,
.dr-course-schedule { background: var(--dr-ink-900); border-color: var(--dr-line); }
.dr-principles-section { background: linear-gradient(180deg, var(--dr-gold-wash), var(--dr-ink-950)); }
.dr-principle-index { background: var(--dr-ink-950); border-color: var(--dr-gold-deep); }

/* Course colors encode real categories rather than decorative alternation. */
.dr-course-card { background: var(--dr-ink-950); border-color: var(--dr-line); }
.dr-course-card[data-course-group="ai"] { --course-accent: var(--dr-cyan); --course-wash: var(--dr-cyan-wash); }
.dr-course-card[data-course-group="commerce"] { --course-accent: var(--dr-gold); --course-wash: var(--dr-gold-wash); }
.dr-course-card[data-course-group="creator"] { --course-accent: var(--dr-violet-strong); --course-wash: var(--dr-violet-wash); }
.dr-course-card[data-course-group] .dr-course-card-head span,
.dr-course-card[data-course-group] .dr-course-book { color: var(--course-accent); }
.dr-course-card[data-course-group] li::before { background: var(--course-accent); }
.dr-course-card[data-course-group]:hover { background: var(--course-wash); }
.dr-course-filter.is-active { color: var(--dr-ink-1000); background: var(--dr-gold); border-color: var(--dr-gold); }
.dr-course-filter.is-active span { color: var(--dr-gold-strong); background: var(--dr-ink-1000); }
.dr-course-round.is-online { background: linear-gradient(90deg, var(--dr-cyan-wash), transparent 72%); }
.dr-course-round:not(.is-online):hover { background: var(--dr-gold-wash); }

/* Interaction and state colors have fixed meanings site-wide. */
.dr-cta-gold,
.dr-cta-gold-sm,
.dr-nav-cta { background: var(--dr-gold) !important; color: var(--dr-ink-1000) !important; }
.dr-cta-cyan { color: var(--dr-cyan-strong) !important; border-color: var(--dr-cyan-deep) !important; background: var(--dr-cyan-wash) !important; }
.dr-cta-outline:hover,
.dr-link:hover { color: var(--dr-cyan-strong); }
.dr-review-verified { color: var(--dr-success); }
.dr-field,
select,
textarea { background-color: var(--dr-ink-900); border-color: var(--dr-line) !important; color: var(--dr-white); }
.dr-field::placeholder,
textarea::placeholder { color: var(--dr-muted); }
.dr-field:focus,
select:focus,
textarea:focus { border-color: var(--dr-cyan) !important; }
.dr-field[aria-invalid="true"],
select[aria-invalid="true"] { border-color: var(--dr-error) !important; }

/* NCN campaign adopts the same semantic palette without flattening its identity. */
.ncn-progress span { background: linear-gradient(90deg, var(--dr-gold), var(--dr-cyan)); }
.ncn-mid-cta { background: var(--dr-ink-900); }
.ncn-mid-cta-copy li { background: var(--dr-cyan-wash); color: var(--dr-copy); }
.ncn-sticky { background: oklch(13% 0.014 220 / .96); }
.ncn-form { background: var(--dr-white); color: var(--dr-ink-950); }
.ncn-form input,
.ncn-form select { background: oklch(100% 0 0); color: var(--dr-ink-950); border-color: oklch(72% 0.018 220); }
.ncn-form input::placeholder { color: oklch(45% 0.018 220); }
.ncn-form input:focus,
.ncn-form select:focus { border-color: var(--dr-cyan-deep); box-shadow: 0 0 0 3px oklch(79% 0.125 205 / .2); }
.ncn-form input[aria-invalid="true"],
.ncn-form select[aria-invalid="true"] { border-color: var(--dr-error); background: oklch(97% 0.02 28); }
.ncn-success { border-color: var(--dr-success); background: oklch(94% 0.035 155); color: oklch(31% 0.07 155); }

/* Home service cards are real navigation controls. */
.dr-home-services-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.dr-home-service {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--dr-gold) 18%, var(--dr-line)) !important;
  border-radius: 16px !important;
  background: linear-gradient(155deg, color-mix(in oklch, var(--dr-ink-850) 72%, transparent), var(--dr-ink-900) 58%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform .35s var(--ease-out), background-color .2s ease, border-color .2s ease;
}
.dr-home-service:focus-visible { outline: 3px solid var(--dr-cyan); outline-offset: 4px; }
.dr-home-service-media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--dr-ink-850); }
.dr-home-service-media::after { content: ''; position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, color-mix(in oklch, var(--dr-ink-900) 94%, transparent)); pointer-events: none; }
.dr-home-service-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.05); transition: transform .75s var(--ease-out), filter .35s ease; }
.dr-home-service-tag { position: absolute; z-index: 1; left: 18px; bottom: 16px; padding: 0 0 5px; border-bottom: 1px solid var(--dr-gold-deep); color: var(--dr-gold-strong); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.dr-home-service-body { display: flex; flex: 1; flex-direction: column; padding: clamp(20px, 5vw, 26px); }
.dr-home-service-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.dr-home-service-title { font: 700 clamp(21px, 5vw, 24px)/1.45 var(--font-display); text-wrap: balance; }
.dr-home-service-heading > i { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border: 1px solid color-mix(in oklch, var(--dr-gold) 42%, var(--dr-line)); border-radius: 50%; color: var(--dr-gold-strong); font-style: normal; transition: transform .25s var(--ease-out), color .2s ease, border-color .2s ease, background-color .2s ease; }
.dr-home-service-desc { margin-top: 10px; color: var(--dr-muted); font-size: 15px; line-height: 1.75; }
.dr-home-service-points { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--dr-line); }
.dr-home-service-points > span { display: flex; align-items: flex-start; gap: 9px; color: var(--dr-copy); font-size: 14px; line-height: 1.5; }
.dr-home-service-points b { color: var(--dr-gold-strong); font-size: 12px; }
.dr-home-service-link { display: flex; min-height: 44px; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 22px; color: var(--dr-gold-strong); font-size: 13px; font-weight: 700; }
.dr-home-service-link i { color: var(--dr-muted); font-size: 11px; font-style: normal; font-weight: 500; }

@media (hover: hover) and (pointer: fine) {
  .dr-home-service:hover { transform: translateY(-5px); border-color: color-mix(in oklch, var(--dr-gold) 58%, var(--dr-line)) !important; }
  .dr-home-service:hover .dr-home-service-media img { transform: scale(1.035); filter: saturate(.9) contrast(1.03); }
  .dr-home-service:hover .dr-home-service-heading > i { transform: rotate(45deg); border-color: var(--dr-gold-deep); background: var(--dr-gold); color: var(--dr-ink-1000); }
}

@media (min-width: 720px) and (max-width: 1099px) {
  .dr-home-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .dr-home-service:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .dr-home-service:first-child .dr-home-service-media { height: 100%; aspect-ratio: auto; }
  .dr-home-service:first-child .dr-home-service-body { padding: clamp(24px, 4vw, 34px); }
}

@media (min-width: 1100px) {
  .dr-home-services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .dr-home-service-media { aspect-ratio: 16 / 9; }
  .dr-home-service-desc { min-height: 3.5em; }
}

@media (max-width: 380px) {
  .dr-home-service-heading { gap: 12px; }
  .dr-home-service-heading > i { flex-basis: 40px; width: 40px; height: 40px; }
  .dr-home-service-link i { display: none; }
}

/* Compact footer: brand, essential navigation, and direct contact in one row. */
#footer { padding: 34px var(--gx) 22px !important; }
.dr-footer-main { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(360px, auto) auto; gap: 32px; align-items: center; }
.dr-footer-brand p { max-width: 360px; margin: 12px 0 0; color: var(--dr-muted); font-size: 13px; line-height: 1.55; }
.dr-footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.dr-footer-nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--dr-muted); font-size: 13px; text-decoration: none; }
.dr-footer-contact { display: flex; align-items: center; justify-content: flex-end; gap: 12px; white-space: nowrap; }
.dr-footer-contact > a { color: var(--dr-white); font-size: 14px; font-weight: 700; text-decoration: none; }
.dr-footer-contact > button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--dr-cyan-deep); border-radius: 999px; background: transparent; color: var(--dr-cyan-strong); font: 700 13px/1 var(--font-body); cursor: pointer; }
.dr-footer-contact > a:hover,
.dr-footer-contact > button:hover { color: var(--dr-gold-strong); border-color: var(--dr-gold-deep); }
.dr-footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--dr-line); color: var(--dr-muted); font-size: 12px; }
.dr-contact-phone { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 10px; border: 1px solid var(--dr-line); border-radius: 12px; color: var(--dr-white); font-size: 14px; font-weight: 700; text-decoration: none; }
.dr-contact-phone:hover { border-color: var(--dr-gold-deep); color: var(--dr-gold-strong); }

@media (max-width: 980px) {
  .dr-footer-main { grid-template-columns: 1fr auto; }
  .dr-footer-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
}

@media (max-width: 600px) {
  #footer { padding: 30px 20px 96px !important; }
  .dr-footer-main { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
  .dr-footer-nav { justify-content: flex-start; gap: 4px 18px; }
  .dr-footer-contact { width: 100%; justify-content: space-between; }
  .dr-footer-bottom { flex-direction: column; gap: 6px; margin-top: 20px; }
}

/* Flagship hero typography: deliberate phrases, natural Thai breaking, stable rhythm. */
.dr-hero-title,
.dr-page-hero > h1,
.dr-courses-hero-copy h1,
.ncn-hero h1 {
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  letter-spacing: -.025em !important;
}
.dr-hero-title { width: min(100%, 15ch); max-width: none !important; font-size: clamp(44px, 5.1vw, 68px) !important; line-height: 1.11 !important; }
.dr-hero-title-line { display: block; }
.dr-hero-title-accent { color: var(--dr-gold-strong); }
.dr-page-hero { min-height: clamp(310px, 34vw, 430px); }
.dr-page-hero > h1 { width: min(100%, 20ch); max-width: 880px !important; font-size: clamp(38px, 4.5vw, 58px) !important; line-height: 1.14 !important; margin-top: 14px !important; }
.dr-page-hero > p { max-width: 66ch !important; margin-top: 18px !important; color: var(--dr-copy) !important; line-height: 1.72 !important; }
.dr-courses-hero-copy { width: min(100%, 760px); max-width: 58%; }
.dr-courses-hero-copy h1 { max-width: 15ch; font-size: clamp(44px, 5.2vw, 68px); line-height: 1.1; }
.dr-courses-hero-copy p { max-width: 60ch; color: var(--dr-copy); }
.ncn-hero h1 { max-width: 10ch; font-size: clamp(50px, 5.8vw, 80px); line-height: 1.06; }
.ncn-hero h1 .ncn-hero-tail { font-size: clamp(30px, 3.1vw, 46px); line-height: 1.16; white-space: nowrap; }
.ncn-lead { max-width: 58ch; color: var(--dr-copy); }

/* Thai marks need more vertical room than Latin display type. */
html[lang="th"] .dr-about-hero > h1,
html[lang="th"] .dr-services-hero > h1 {
  font-family: 'Anuphan', 'IBM Plex Sans Thai', sans-serif !important;
  line-height: 1.3 !important;
  padding-block: .08em .12em;
  text-wrap: pretty;
}
html[lang="th"] .dr-about-hero > p,
html[lang="th"] .dr-services-hero > p { margin-top: 14px !important; }

@media (min-width: 768px) and (max-width: 1023px) {
  .dr-hero-title { width: min(100%, 14ch); font-size: clamp(42px, 5.6vw, 56px) !important; }
  .dr-page-hero > h1 { width: min(100%, 19ch); font-size: clamp(38px, 5vw, 50px) !important; }
  .dr-courses-hero-copy { max-width: 64%; }
  .dr-courses-hero-copy h1 { font-size: clamp(42px, 5.8vw, 58px); }
  .ncn-hero h1 { font-size: clamp(48px, 6vw, 62px); }
}

@media (max-width: 767px) {
  .dr-hero-copy { padding-top: 104px !important; padding-bottom: 44px !important; }
  .dr-hero-title { width: 100%; font-size: clamp(34px, 9.4vw, 44px) !important; line-height: 1.13 !important; }
  .dr-hero-copy p { max-width: 36ch !important; margin-top: 18px !important; }
  .dr-page-hero { padding-top: clamp(42px, 11vw, 56px) !important; padding-bottom: clamp(34px, 9vw, 44px) !important; }
  .dr-page-hero > h1 { width: 100%; font-size: clamp(31px, 8.5vw, 40px) !important; line-height: 1.18 !important; }
  .dr-page-hero > p { font-size: 16px !important; line-height: 1.72 !important; }
  html[lang="th"] .dr-about-hero > h1,
  html[lang="th"] .dr-services-hero > h1 {
    font-size: clamp(30px, 8vw, 38px) !important;
    line-height: 1.34 !important;
    padding-block: .1em .14em;
  }
  .dr-courses-hero-copy { max-width: none; padding-top: 104px; padding-bottom: 44px; }
  .dr-courses-hero-copy h1 { max-width: 13ch; font-size: clamp(36px, 9.5vw, 46px); line-height: 1.14; }
  .ncn-hero-copy { padding-top: 104px; padding-bottom: 88px; }
  .ncn-hero h1 { max-width: 100%; font-size: clamp(36px, 10vw, 46px); line-height: 1.09; }
  .ncn-hero h1 .ncn-hero-tail { font-size: clamp(22px, 6.4vw, 28px); white-space: normal; }
  .ncn-lead { font-size: 16px; line-height: 1.72; }
}

@media (max-width: 360px) {
  .dr-hero-title { font-size: 33px !important; }
  .dr-page-hero > h1 { font-size: 30px !important; }
  .dr-courses-hero-copy h1 { font-size: 35px; }
  .ncn-hero h1 { font-size: 35px; }
}

@media (forced-colors: active) {
  .dr-course-card,
  .dr-proof-section > div:first-child > div,
  .ncn-mid-cta-copy li { border: 1px solid CanvasText; }
}