:root {
  --ink: #18254b;
  --muted: #4c5d73;
  --brand: #006ca7;
  --brand-dark: #23327f;
  --cyan: #00afe4;
  --soft: #f1f7fc;
  --navy: #142149;
  --gradient: linear-gradient(115deg, var(--cyan), #0065a5 60%, var(--brand-dark));
}

html { scroll-behavior: smooth; }
main section[id], #mission, #contact { scroll-margin-top: 88px; }

body {
  font-family: "Manrope", "Noto Sans Thai", sans-serif;
  color: var(--ink);
  background: #fff;
}

.glass-nav {
  background: #fff;
  box-shadow: 0 1px 0 rgb(24 37 75 / 10%);
}

.navbar-brand img { width: 69px; height: auto; display: block; }
.navbar .nav-link {
  position: relative;
  font-weight: 700;
  color: var(--ink);
  padding: .65rem .8rem;
  transition: color .2s ease;
}
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: .28rem;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}
.navbar .nav-link:hover, .navbar .nav-link:focus-visible { color: var(--brand); }
.navbar .nav-link:hover::after, .navbar .nav-link:focus-visible::after { transform: scaleX(1); }

.btn-brand, .btn-brand-outline { padding-block: .7rem; font-weight: 800; }
.btn-brand, .btn-brand-outline, .cta-panel .btn {
  transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn-brand:hover, .btn-brand-outline:hover, .cta-panel .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgb(20 33 73 / 16%);
}
.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-focus-shadow-rgb: 0, 108, 167;
}

.btn-brand-outline {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-focus-shadow-rgb: 0, 108, 167;
}

.hero { padding-block: 150px 76px; }
.hero-layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
}

.hero h1 {
  margin: 0;
  color: var(--brand-dark);
  font-size: clamp(2.75rem, 4.5vw, 5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.05em;
}

.hero h1 span { display: block; color: var(--brand); }
.hero-content .section-copy { max-width: 50ch; }
.hero-content > * {
  animation: rise .75s cubic-bezier(.22, 1, .36, 1) both;
}
.hero-content > :nth-child(1) { animation-delay: .08s; }
.hero-content > :nth-child(2) { animation-delay: .2s; }
.hero-content > :nth-child(3) { animation-delay: .34s; }

.hero-art {
  position: relative;
  isolation: isolate;
  margin: 18px clamp(28px, 3.7vw, 62px) 20px;
  animation: rise .9s .18s cubic-bezier(.22, 1, .36, 1) both;
}

.hero-art::before, .hero-art::after, .hero-frame {
  border-radius: 24px;
  transform: skewX(-13deg);
}

.hero-art::before, .hero-art::after {
  content: "";
  position: absolute;
  background: var(--gradient);
  z-index: -1;
}

.hero-art::before { inset: -20px -24px 32% 34%; animation: drift 7.5s ease-in-out infinite; }
.hero-art::after { inset: 58% 63% -20px -19px; animation: drift 9s ease-in-out infinite reverse; }
.hero-frame { height: clamp(300px, 31vw, 442px); overflow: hidden; background: #e2eff9; }
.hero-frame img {
  width: 126%;
  max-width: none;
  height: 100%;
  margin-left: -13%;
  object-fit: cover;
  object-position: 51% center;
  transform: skewX(13deg);
  animation: ken 16s ease-in-out infinite alternate;
}

.section-space, .vision-section { padding-block: clamp(64px, 7vw, 102px); }
.bg-soft { background: var(--soft); }
.section-kicker {
  font-size: .76rem;
  letter-spacing: .15em;
  font-weight: 800;
  color: var(--brand);
}

.section-title {
  color: var(--brand-dark);
  font-weight: 800;
  font-size: clamp(2.4rem, 4vw, 4.1rem);
  letter-spacing: -.045em;
  line-height: 1.08;
}

.title-accent { color: var(--brand); }
.section-copy { font-size: 1.06rem; line-height: 1.85; color: var(--muted); }
.profile-year { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; color: var(--muted); }
.profile-year strong { color: var(--brand); font-size: 2rem; line-height: 1; }

.vision-panel { position: relative; isolation: isolate; }
.vision-panel::before {
  position: absolute;
  content: "";
  z-index: -1;
  inset: 0 0 48px;
  border-radius: 1.5rem;
  background: linear-gradient(115deg, #006b9f, #005589 58%, var(--brand-dark));
  clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%);
}

.vision-content { color: #fff; padding: clamp(26px, 5vw, 72px); padding-right: max(9%, 26px); }
.vision-content .section-kicker, .testimonial-copy .section-kicker, .cta-panel .section-kicker { color: #a9eaff; }
.vision-content .section-title { color: inherit; }
.vision-list { line-height: 1.8; padding-left: 1.4rem; }
.vision-list li { padding-left: .35rem; }
.vision-list li + li { margin-top: .45rem; }

.vision-photos {
  display: grid;
  grid-template-columns: 1.48fr 1fr;
  gap: clamp(8px, 2vw, 24px);
  margin-inline: clamp(16px, 5vw, 72px);
}

.vision-photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2.25;
  object-fit: cover;
  border-radius: 1rem;
  transition: transform .4s ease, box-shadow .4s ease;
}
.vision-photos img:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 28px rgb(20 33 73 / 18%);
}

.vision-photos img:last-child { aspect-ratio: 1.52; }
.mission { margin-top: clamp(46px, 6vw, 88px); }

.mission-list {
  list-style: none;
  counter-reset: pillars;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 0;
  margin: 0;
}

.mission-list li {
  counter-increment: pillars;
  padding: 1.5rem;
  border: 1px solid #dbe6f1;
  border-radius: 1rem;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.mission-list li:hover {
  transform: translateY(-6px);
  border-color: #b9d6ec;
  box-shadow: 0 16px 32px rgb(24 37 75 / 8%);
}

.mission-list h3 { color: var(--brand-dark); font-weight: 800; font-size: 1.35rem; }
.mission-list p { color: var(--muted); line-height: 1.65; margin: 0; }

.mission-list li::before {
  content: counter(pillars, decimal-leading-zero);
  display: inline-block;
  margin: 0 0 .95rem .15rem;
  padding: .3rem .75rem;
  transform: skewX(-9deg);
  border-radius: .45rem;
  color: #fff;
  background: var(--brand);
  font-weight: 800;
}

.solution-card {
  background: #fff;
  border: 1px solid #dbe6f1;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 12px 32px rgb(24 37 75 / 6%);
}

.solution-media { height: 230px; overflow: hidden; background: var(--soft); }
.solution-media img { width: 100%; height: 100%; object-fit: cover; }
.solution-eyebrow { color: var(--brand); font-weight: 800; letter-spacing: .12em; font-size: .72rem; }
.solution-card h3, .service-note h3 { color: var(--brand-dark); font-weight: 800; }
.arrow-link { text-decoration: none; color: var(--brand); font-weight: 800; }
.arrow-link:hover { text-decoration: underline; }
.arrow-link span { margin-left: .35rem; }
.service-note { background: #fff; border-left: 4px solid var(--brand); border-radius: .5rem; padding: 1.25rem 1.5rem; }

.section-heading-narrow { max-width: 720px; }
.client-logo {
  height: 110px;
  border: 1px solid #dbe6f1;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem;
}

.client-logo img { max-width: 100%; max-height: 65px; }
.testimonial-photo { min-height: 520px; background: url('../img/centraworld.jpg') center / cover no-repeat; }
.testimonial-copy { background: var(--navy); color: #fff; padding: clamp(2rem, 6vw, 6rem); }
.testimonial-copy blockquote { font-size: clamp(1.35rem, 2.2vw, 2.1rem); font-weight: 700; line-height: 1.55; }
.testimonial-copy figcaption { color: #d4deed; line-height: 1.7; }
.testimonial-copy figcaption strong { color: #fff; }

.cta-panel { border-radius: 1.25rem; background: linear-gradient(115deg, #00679b, var(--brand-dark)); }
.site-footer { background: var(--navy); color: #fff; }
.footer-logo { width: 80px; height: auto; }
.footer-title { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a { display: block; color: #d4deed; text-decoration: none; margin: .55rem 0; overflow-wrap: anywhere; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.footer-bottom { border-top: 1px solid rgb(255 255 255 / 20%); color: #d4deed; font-size: .85rem; }

.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1040;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 24px rgb(20 33 73 / 22%);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background-color .2s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.to-top:hover, .to-top:focus-visible { background: var(--brand-dark); transform: translateY(-2px); }
.to-top:focus-visible { outline: 3px solid #a9eaff; outline-offset: 3px; }
.to-top svg { width: 20px; height: 20px; display: block; }

@media (max-width: 991.98px) {
  .navbar-collapse { padding-bottom: .7rem; }
  .hero { padding-block: 122px 64px; }
  .hero-layout { grid-template-columns: 1fr; }
  .hero-frame { height: clamp(230px, 46vw, 370px); }
  .testimonial-photo { min-height: 380px; }
}

@media (max-width: 575.98px) {
  .navbar-brand img { width: 60px; }
  .hero { padding-top: 105px; }
  .hero h1 { font-size: clamp(2rem, 8vw, 2.75rem); }
  .hero-art { margin-inline: 24px; }
  .hero-art::before { right: -12px; }
  .hero-art::after { left: -12px; }
  .hero-frame { height: clamp(170px, 53vw, 245px); }
  .vision-panel::before { clip-path: none; }
  .vision-content { padding-right: 26px; }
  .mission-list { grid-template-columns: 1fr; }
  .solution-media { height: 210px; }
  .client-logo { height: 90px; padding: 1rem; }
  .testimonial-photo { min-height: 275px; }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
.reveal.is-in { opacity: 1; transform: none; }
#about .section-copy.reveal { transition-delay: .12s; }
.vision-photos.reveal { transition-delay: .14s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@keyframes drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 10px -12px; }
}

@keyframes ken {
  from { transform: skewX(13deg) scale(1); }
  to { transform: skewX(13deg) scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-content > *, .hero-art, .hero-art::before, .hero-art::after, .hero-frame img { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn-brand:hover, .btn-brand-outline:hover, .cta-panel .btn:hover,
  .mission-list li:hover, .vision-photos img:hover, .to-top, .to-top:hover { transform: none; }
}